/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================ *
 *  客速来 — tokens merged from design/styles.css (light default) *
 * ============================================================ */
:root {
  --bg: #f4f7fc;
  --bg-grad: linear-gradient(180deg, #eaf1fb 0%, #f4f7fc 280px);
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f3f6fb;
  --line: rgba(15, 23, 42, 0.06);
  --line-strong: rgba(15, 23, 42, 0.1);

  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;
  --text-4: #cbd5e1;

  --shadow-card: 0 6px 18px rgba(15, 23, 42, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  --video-grad: linear-gradient(135deg, #cfe0ff 0%, #a6c3f5 100%);
  --video-accent: #4e7ae6;
  --article-grad: linear-gradient(135deg, #ffd4b0 0%, #ffb77a 100%);
  --article-accent: #f5894b;

  --badge-writing-bg: #eceaff;
  --badge-writing-fg: #6b5df0;
  --badge-video-bg: #ffe9dd;
  --badge-video-fg: #e87b3a;

  --tab-active: #3d7bff;
  --tab-idle: #94a3b8;

  --vip-grad: linear-gradient(135deg, #fff3d6 0%, #ffe3a8 100%);
  --vip-fg: #a6761f;
  --vip-border: rgba(166, 118, 31, 0.2);

  --silver-grad: linear-gradient(135deg, #f7f9fc 0%, #d4dbe5 100%);
  --silver-fg: #3a4658;
  --silver-border: rgba(100, 116, 139, 0.28);

  --announce-bg: #ffffff;
  --announce-tag-bg: #ffd26b;
  --announce-tag-fg: #5a3a00;

  /* Aliases — old names mapped to design tokens so existing selectors keep working */
  --panel: var(--surface-1);
  --panel-soft: var(--surface-3);
  --text: var(--text-1);
  --text-soft: var(--text-2);
  --muted: var(--text-3);

  /* Accent palette (kept from prior version) */
  --blue: #2f6cff;
  --indigo: #5b5bff;
  --orange: #ff7b2b;
  --amber: #ffa23a;
  --green: #1cb87a;
  --teal: #19c1b5;
  --purple: #8a4cff;
  --pink: #ff5fa8;
  --red: #ff4d5f;
  --sky: #3fb6ff;

  --shadow-lg: 0 18px 40px rgba(27, 40, 80, 0.08);
  --shadow-md: var(--shadow-card);
  --shadow-sm: 0 4px 12px rgba(27, 40, 80, 0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html {
  background: var(--bg);
  background-image: var(--bg-grad);
}
html, body {
  min-height: 100%;
  color: var(--text-1);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  background-image: var(--bg-grad);
  transition: background-color .35s ease, color .35s ease;
}
body { overflow-x: hidden; min-height: 100dvh; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

/* Shell — full-bleed by default; design pages set their own padding */
.app-shell {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0;
  background: var(--bg);
  background-image: var(--bg-grad);
}
.app {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  padding-top: calc(env(safe-area-inset-top) + 28px);
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
  background: var(--bg);
  background-image: var(--bg-grad);
}
.app > .section:first-child,
.app > .section:first-of-type { margin-top: 0; }
.app > main.section:first-of-type { margin-top: 0; }
.home-page {
  padding-top: 0;
}
.app {
  background-image:
    radial-gradient(600px 220px at 70% -40px, rgba(61, 123, 255, 0.12), transparent 70%),
    radial-gradient(420px 180px at 15% 20px, rgba(255, 160, 80, 0.1), transparent 70%),
    linear-gradient(180deg, #eaf1fb 0%, #f4f7fc 320px);
}

/* ============================================================ *
 *  Sticky header / brand / VIP button (home)                     *
 * ============================================================ */
.sticky-head {
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 20;
  padding: 18px 20px 14px;
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  transition: background-color .25s ease, box-shadow .25s ease, -webkit-backdrop-filter .25s ease;
  transition: background-color .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
  transition: background-color .25s ease, backdrop-filter .25s ease, box-shadow .25s ease, -webkit-backdrop-filter .25s ease;
}
/* sub-page head: smaller title + back button */
.sticky-head.sub {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.sticky-head.sub .head-row {
  align-items: center;
  gap: 10px;
}
.head-body { flex: 1 1; min-width: 0; }
.head-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--text-1);
  line-height: 1.2;
}
.back-btn {
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text-1);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
}
.back-btn:active { background: var(--surface-3); }
.sticky-head.scrolled {
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  box-shadow: 0 1px 0 var(--line);
}
.head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-right: 72px; }
/* 当 head-row 把 actions inline 放在右侧（首页等），不再需要给 fixed 浮件留位 */
.head-row.head-row-inline { padding-right: 0; }
.head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brand-mark { display: flex; align-items: center; gap: 8px; }
.brand-k {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(91, 92, 255, 0.22));
}
.brand-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.6px;
  color: var(--text-1);
  line-height: 1;
}
.brand {
  display: flex; align-items: center; gap: 6px;
  font-size: 32px; font-weight: 800;
  letter-spacing: -0.5px; color: var(--text-1); line-height: 1.1;
}
.brand .bolt {
  width: 22px; height: 22px;
  color: #ffbf2e;
  filter: drop-shadow(0 2px 6px rgba(255, 170, 40, 0.45));
  transform: translateY(2px);
  display: inline-block;
}
.brand-logo {
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(91, 92, 255, 0.18));
}
.subtitle { margin-top: 6px; font-size: 13px; color: var(--text-3); letter-spacing: .2px; }

.vip-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px 7px 10px; border-radius: 999px;
  background: var(--vip-grad); color: var(--vip-fg);
  font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--vip-border);
  box-shadow: var(--shadow-inset);
  white-space: nowrap; flex-shrink: 0;
  height: 32px;
  text-decoration: none;
}
.vip-btn .crown { width: 18px; height: 18px; }
.vip-btn .vip-crown-svg {
  width: 18px; height: 18px;
  color: #d99834;
  filter: drop-shadow(0 1px 2px rgba(166, 118, 31, 0.35));
  flex-shrink: 0;
}

/* Legacy .topbar/.member/.brand-title — sub-pages may still use these */
.topbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 20px;
}
.brand-title { display: flex; align-items: center; gap: 8px; }
.brand-title h1 { font-size: 32px; line-height: 1; font-weight: 900; }
.brand-bolt { width: 22px; height: 22px; color: #ffbf2e; filter: drop-shadow(0 2px 6px rgba(255,170,40,.45)); }
.topbar .brand { flex-direction: column; align-items: flex-start; gap: 0; font-size: inherit; }
.topbar .brand p { margin-top: 10px; color: var(--text-3); font-size: 13px; }
.member {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px 7px 8px; border-radius: 999px;
  background: var(--vip-grad); color: var(--vip-fg);
  font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--vip-border);
  box-shadow: var(--shadow-inset);
  white-space: nowrap;
}
.member svg { width: 18px; height: 18px; color: var(--vip-fg); }

/* ============================================================ *
 *  Announce marquee                                              *
 * ============================================================ */
.announce {
  margin: 8px 16px 0;
  padding: 8px 14px 8px 8px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(91, 111, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.announce .an-spk {
  width: 36px; height: 36px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(255, 156, 60, 0.22));
}
.announce .an-tag {
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
  flex-shrink: 0;
  background: transparent;
  padding: 0;
  letter-spacing: 0.5px;
}
.announce .an-track { flex: 1 1; overflow: hidden; position: relative; height: 20px; }
.announce .an-scroll {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  font-size: 13px; color: var(--text-2);
  line-height: 20px;
  animation: announce-scroll 26s linear infinite;
  will-change: transform;
}
.announce .an-msg {
  display: inline-block;
  padding-right: 40px;
}
@keyframes announce-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.announce .an-cta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue);
  flex-shrink: 0;
  white-space: nowrap;
}
.announce .an-arrow { width: 14px; height: 14px; color: var(--blue); }

/* ============================================================ *
 *  Sections (home: .section > .section-head > .section-title)    *
 *  (sub-pages use .section-title directly — alt rules below)     *
 * ============================================================ */
.section { margin: 18px 16px 0; }
.section-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 6px 10px;
}
.section-head > .section-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 17px; font-weight: 700; color: var(--text-1);
  margin: 0; justify-content: flex-start;
}
.section-head > .section-title::before { content: none; }
.section-head > .section-title .st-icon { width: 18px; height: 18px; }
.section-head > .section-title .st-sub {
  margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--text-3);
  white-space: nowrap;
}
.section-more {
  font-size: 12px; color: var(--text-3);
  display: inline-flex; align-items: center; gap: 2px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.section-more svg { width: 14px; height: 14px; flex-shrink: 0; }
.section-head > .section-title {
  min-width: 0;
  overflow: hidden;
}
.section-head > .section-title .st-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.section-head > .section-title .st-emoji {
  display: inline-flex;
  width: 20px; height: 20px;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.section-head > .section-title .st-emoji svg { width: 18px; height: 18px; }
.section-head > .section-title .st-dot {
  display: inline-block;
  width: 4px; height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--blue), var(--purple));
  flex-shrink: 0;
}

/* Legacy section-title (flex row with h2 + action, used by sub-pages) */
.section-title {
  display: flex; align-items: center; justify-content: space-between;
  margin: 22px 0 12px;
}
.section-title.compact { margin: 0 0 12px; }
.section-title h2 {
  font-size: 19px; font-weight: 800;
  display: flex; align-items: center; gap: 8px;
}
.section-title h2::before {
  content: ""; width: 4px; height: 16px; border-radius: 2px;
  background: linear-gradient(180deg, var(--blue), var(--purple));
}
.section-title span,
.section-title a {
  color: var(--muted); font-size: 13px;
  display: inline-flex; align-items: center; gap: 2px;
}
.section-title a svg,
.section-title span svg { width: 14px; height: 14px; }

/* ============================================================ *
 *  Home: hot-card (video + article heroes + sub-grid)            *
 * ============================================================ */
.hot-card {
  background: var(--surface-1);
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  position: relative;
}
.hot-top {
  display: grid; grid-template-columns: 1fr 1fr; grid-gap: 11px; gap: 11px;
  margin-bottom: -28px; position: relative; z-index: 2;
}
.hot-tile {
  position: relative; border-radius: 18px;
  padding: 18px 14px 22px; height: 168px; overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease;
  box-shadow: 0 12px 28px -8px rgba(58,32,120,.25);
}
.hot-tile:active { transform: scale(0.97); }
.hot-tile.video { background: var(--video-grad); }
.hot-tile.article { background: var(--article-grad); box-shadow: 0 12px 28px -8px rgba(200,80,20,.28); }
.hot-tile::before {
  content: ""; position: absolute;
  width: 120px; height: 120px; border-radius: 50%;
  filter: blur(24px); opacity: .85;
  top: -30px; right: -20px; pointer-events: none;
}
.hot-tile.video::before { background: #a7c2ff; }
.hot-tile.article::before { background: #ffc79a; }

.hot-tile .tile-title {
  font-size: 21px; font-weight: 800;
  color: #0f172a;
  letter-spacing: -.2px;
  position: relative; z-index: 1;
}
.hot-tile.article .tile-title { color: #fff; }
.hot-tile .tile-sub {
  margin-top: 4px; font-size: 12px;
  color: rgba(15,23,42,.7);
  position: relative; z-index: 1;
}
.hot-tile.article .tile-sub { color: rgba(255,255,255,.85); }

.hot-tile .start-btn {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px); white-space: nowrap;
  position: relative; z-index: 1;
  border: 0;
}
.hot-tile.video .start-btn { background: rgba(255,255,255,.85); color: #3d6fd4; }
.hot-tile.article .start-btn { background: rgba(255,255,255,.9); color: #e87b3a; }

.hot-tile .illus {
  position: absolute; right: -28px; bottom: -30px;
  width: 140px; height: 140px; pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.18));
}
.hot-tile .illus img { width: 100%; height: 100%; object-fit: contain; display: block; }

.hot-subgrid {
  margin-top: 14px; padding-top: 14px;
  background: var(--surface-2);
  border-radius: 16px; overflow: hidden;
  position: relative; z-index: 1;
  box-shadow: inset 0 1px 0 var(--line-strong);
}
.sub-row {
  display: grid;
  grid-template-columns: 32px repeat(4, 1fr);
  align-items: center; padding: 12px 6px; grid-gap: 4px; gap: 4px;
}
.sub-row + .sub-row { border-top: 1px solid var(--line); }
.sub-row .row-badge {
  width: 20px; height: 56px; margin: 0 auto;
  border-radius: 4px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  font-size: 10px; font-weight: 700; line-height: 1.05;
  padding: 4px 0;
}
.sub-row .row-badge span { display: block; }
.sub-row.writing .row-badge { background: var(--badge-writing-bg); color: var(--badge-writing-fg); }
.sub-row.video   .row-badge { background: var(--badge-video-bg); color: var(--badge-video-fg); }

.sub-cell {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  cursor: pointer;
  transition: transform .15s ease;
}
.sub-cell:active { transform: scale(0.94); }
.sub-cell .ic-wrap {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
}
.sub-cell .ic-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.12)); }
.sub-cell .lbl {
  font-size: 12px; color: var(--text-2);
  font-weight: 500; margin-top: 2px; white-space: nowrap;
}

/* ============================================================ *
 *  Home: search trio (3 background-image tiles)                  *
 * ============================================================ */
.trio {
  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; gap: 10px;
}
.trio-tile {
  position: relative; border-radius: 18px;
  padding: 14px; height: 158px;
  cursor: pointer; overflow: hidden;
  transition: transform .15s ease;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: 0 4px 14px -4px rgba(20,40,80,.18);
  color: inherit; text-decoration: none;
  display: block;
}
.trio-tile:active { transform: scale(0.96); }
.trio-tile.link  { background-image: url('/design-assets/trio-link.png'); }
.trio-tile.track { background-image: url('/design-assets/trio-track.png'); }
.trio-tile.smart { background-image: url('/design-assets/trio-smart.png'); }
.trio-tile .t-title {
  font-size: 15px; font-weight: 800; letter-spacing: -.2px;
  position: relative; z-index: 1;
}
.trio-tile.link .t-title  { color: #1e46b8; }
.trio-tile.track .t-title { color: #0f7a3f; }
.trio-tile.smart .t-title { color: #b9501a; }
.trio-tile .t-sub {
  margin-top: 4px; font-size: 11px;
  color: rgba(0,0,0,.55); line-height: 1.4;
  white-space: nowrap; position: relative; z-index: 1;
}

/* ============================================================ *
 *  Home: tools grid (5×2 with PNG icons)                         *
 * ============================================================ */
.tools-card {
  background: var(--surface-1);
  border-radius: 20px; padding: 16px 10px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
}
.tools-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); grid-row-gap: 16px; row-gap: 16px;
}
.tool-cell {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  cursor: pointer;
  color: inherit; text-decoration: none;
  transition: transform .15s ease;
}
.tool-cell:active { transform: scale(0.92); }
.tool-cell .tool-ic {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.tool-cell .tool-ic img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.1)); }
.tool-cell .lbl {
  font-size: 11px; color: var(--text-2);
  font-weight: 500; white-space: nowrap;
}

/* ============================================================ *
 *  Grids + card + icon chips (sub-page functional)               *
 * ============================================================ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 12px; gap: 12px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 18px 8px; gap: 18px 8px; }
.card { border: 1px solid var(--line); border-radius: 18px; background: var(--surface-1); box-shadow: var(--shadow-card); }
.panel { padding: 16px; }
.tools-panel { padding: 18px 12px; }

.icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 14px; color: white;
  box-shadow: 0 6px 14px rgba(20, 28, 60, 0.12);
}
.icon svg { width: 22px; height: 22px; }
.icon.blue { background: linear-gradient(135deg, #7db3ff, #2f6cff); }
.icon.sky { background: linear-gradient(135deg, #7fd6ff, #3fb6ff); }
.icon.indigo { background: linear-gradient(135deg, #8a8bff, #5b5bff); }
.icon.green { background: linear-gradient(135deg, #7bebb2, #1cb87a); }
.icon.teal { background: linear-gradient(135deg, #7cdfd5, #19c1b5); }
.icon.orange { background: linear-gradient(135deg, #ffb979, #ff7b2b); }
.icon.amber { background: linear-gradient(135deg, #ffd07a, #ffa23a); }
.icon.purple { background: linear-gradient(135deg, #b78aff, #7a4cff); }
.icon.pink { background: linear-gradient(135deg, #ff9ac8, #ff5fa8); }
.icon.red { background: linear-gradient(135deg, #ff8d9c, #ff4d5f); }
.icon.gray { background: linear-gradient(135deg, #cfd6e3, #8a95ab); }

.tool {
  display: grid; justify-items: center;
  grid-gap: 6px;
  gap: 6px; font-size: 12.5px; color: var(--text-2);
}
.tool span:last-child { font-size: 12.5px; font-weight: 600; }

/* Form fields */
.field { display: grid; grid-gap: 7px; gap: 7px; margin-bottom: 12px; }
.field label { color: var(--muted); font-size: 13px; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  background: white;
  color: var(--text);
}
.field textarea { min-height: 120px; resize: vertical; }
.filters { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; gap: 10px; }
.primary-btn {
  width: 100%;
  border: 0;
  border-radius: 13px;
  padding: 13px;
  color: white;
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(47, 108, 255, 0.25);
}
.primary-btn:disabled { opacity: 0.55; box-shadow: none; }
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: white;
  color: var(--text);
  font-weight: 700;
}
.ghost-btn.full { width: 100%; margin-top: 12px; }

/* Lists and items */
.list { display: grid; grid-gap: 12px; gap: 12px; }
.swipe-row {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  touch-action: pan-y;
}
.swipe-action {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  width: 96px;
  background: linear-gradient(135deg, #ff5f6a, #e23d58);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.swipe-action button {
  width: 96px;
  border: 0;
  color: white;
  background: transparent;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
}
.swipe-action button:active { background: rgba(0, 0, 0, 0.1); }
.swipe-content {
  position: relative;
  z-index: 1;
  will-change: transform;
}
.material-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  grid-gap: 12px;
  gap: 12px;
  padding: 12px;
}
.cover {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: linear-gradient(135deg,#eaf2ff,#fff0e6);
  color: var(--blue);
  font-weight: 900;
  overflow: hidden;
}
.cover img, .detail-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-cover { height: auto; max-height: 220px; margin-bottom: 14px; border-radius: 12px; }
.item-title { margin: 0 0 6px; font-size: 16px; }
.meta { color: var(--muted); font-size: 12px; line-height: 1.5; }
.tag {
  display: inline-flex;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.progress-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-soft);
}
.progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width .2s ease;
}
.task-row { display: grid; grid-template-columns: 1fr auto; grid-gap: 12px; gap: 12px; align-items: start; }
.task-progress { margin-top: 12px; }

.analysis-grid, .background-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin: 12px 0;
}
.analysis-grid div, .background-choice {
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: var(--panel-soft);
}
.analysis-grid strong, .analysis-grid span { display: block; }
.analysis-grid strong { margin-bottom: 6px; font-size: 13px; }
.analysis-grid span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.background-choice { text-align: left; color: var(--text); }
.background-choice span { display: inline-flex; margin-top: 26px; font-size: 13px; font-weight: 900; }
.background-choice:nth-child(1) { background: linear-gradient(135deg, #eef4ff, #ffffff); }
.background-choice:nth-child(2) { background: linear-gradient(135deg, #edf8f2, #ffffff); }
.background-choice:nth-child(3) { background: linear-gradient(135deg, #fff0e6, #ffffff); }
.background-choice.active { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,108,255,.12); }

table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; }
th, td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 900; }

/* ============================================================ *
 *  Bottom tab bar (design spec, 4 PNG tabs + sliding indicator)  *
 * ============================================================ */
.tabbar {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 440px;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 6px 0 calc(10px + env(safe-area-inset-bottom));
  z-index: 30;
}
.tabbar a, .tab-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  padding: 8px 0 4px;
  color: var(--tab-idle);
  position: relative;
  transition: color .2s ease;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}
.tabbar a.active, .tab-item.active { color: var(--tab-active); }
.tabbar a img, .tab-item img { width: 26px; height: 26px; object-fit: contain; }

/* Global task manager floating chip top-right */
/* === Notify button — 与 vip-btn 同款胶囊 === */
.task-chip-wrap {
  /* 非首页时按钮浮空在右上角 */
  position: fixed;
  top: 14px;
  right: max(14px, calc((100vw - 440px) / 2 + 14px));
  z-index: 70;
}
.notify-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: var(--silver-grad);
  color: var(--silver-fg);
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid var(--silver-border);
  box-shadow: var(--shadow-inset);
  white-space: nowrap;
  flex-shrink: 0;
  height: 32px;
  cursor: pointer;
  transition: transform 0.12s, filter 0.15s;
}
.notify-btn:hover { filter: brightness(1.04); }
.notify-btn:active { transform: scale(0.96); }
.notify-bell {
  width: 16px;
  height: 16px;
  color: var(--silver-fg);
  transform-origin: 50% 14%;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(58, 70, 88, 0.25));
}
.notify-btn-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--silver-fg);
  line-height: 1;
}
.notify-bell.is-shaking {
  animation: bell-shake 2.4s ease-in-out infinite;
}
@keyframes bell-shake {
  0%, 50%, 100% { transform: rotate(0); }
  6%  { transform: rotate(-14deg); }
  14% { transform: rotate(10deg); }
  22% { transform: rotate(-7deg); }
  30% { transform: rotate(4deg); }
  38% { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .notify-bell.is-shaking { animation: none; }
}
.notify-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 2px solid var(--surface-1);
  line-height: 1;
}
.notify-badge[data-tone="failed"] { background: var(--red); }
.notify-badge[data-tone="completed"] {
  min-width: 10px;
  height: 10px;
  padding: 0;
  background: var(--green);
}

/* === Task center modal === */
.task-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 80;
  display: grid;
  place-items: center;
  animation: sheet-fade 0.2s ease;
  padding: 24px;
}
.task-modal {
  width: 100%;
  max-width: 380px;
  max-height: min(72vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  overflow: hidden;
  animation: sheet-up 0.22s ease;
}
.task-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.task-modal-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -.2px;
}
.task-modal-sub {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-3);
}
.task-modal-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  align-self: center;
}
.task-modal-all {
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
  text-decoration: none;
  padding: 4px 0;
}
.task-modal-clear {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 800;
  padding: 4px 0;
  cursor: pointer;
}
.task-modal-clear:disabled {
  opacity: .35;
  cursor: default;
}
.task-modal-list {
  flex: 1 1;
  overflow: auto;
  padding: 8px;
}

.task-row {
  display: flex;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 12px;
  background: transparent;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}
.task-row + .task-row { border-top: 1px solid var(--line); border-radius: 0; }
.task-row.clickable { cursor: pointer; transition: background .15s ease; }
.task-row.clickable:hover { background: var(--surface-3); }
.task-row.clickable:active { background: var(--surface-3); transform: scale(0.995); }
.task-row.clickable:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.task-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 7px;
  background: #9aa4b5;
  flex-shrink: 0;
}
.task-status-dot.running,
.task-status-dot.pending { background: var(--blue); box-shadow: 0 0 0 4px rgba(47, 108, 255, .14); }
.task-status-dot.completed,
.task-status-dot.succeeded { background: var(--green); box-shadow: 0 0 0 4px rgba(28, 184, 122, .16); }
.task-status-dot.failed { background: var(--red); box-shadow: 0 0 0 4px rgba(255, 77, 95, .16); }
.task-row-main { flex: 1 1; min-width: 0; }
.task-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.task-row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-1);
}
.task-row-badge {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-3);
  background: var(--surface-3);
  flex-shrink: 0;
}
.task-row-badge.running,
.task-row-badge.pending { color: var(--blue); background: rgba(47, 108, 255, .1); }
.task-row-badge.completed,
.task-row-badge.succeeded { color: #109d5b; background: rgba(28, 184, 122, .12); }
.task-row-badge.failed { color: var(--red); background: rgba(255, 77, 95, .12); }
.task-row-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-row-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  margin-top: 8px;
}
.task-row-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue) 0%, var(--purple) 100%);
}
.task-row-arrow {
  flex-shrink: 0;
  align-self: center;
  color: var(--text-3);
  margin-left: 4px;
  display: grid;
  place-items: center;
}
.task-row-error {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--red);
  background: rgba(255, 77, 95, 0.08);
  border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
}
.task-row-error-actions {
  margin-top: 6px;
  display: flex;
  gap: 8px;
}
.task-row-error-copy {
  border: 0;
  border-radius: 8px;
  padding: 4px 10px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.task-row-error-copy:active { transform: scale(0.96); }
.task-empty {
  padding: 26px 12px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}
.tabbar a.active img, .tab-item.active img { filter: drop-shadow(0 3px 5px rgba(61, 123, 255, 0.25)); }
.tab-svg {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--tab-idle);
}
.tab-svg svg { width: 22px; height: 22px; }
.tabbar a.active .tab-svg { color: var(--tab-active); }
.tabbar a.active .tab-svg svg { filter: drop-shadow(0 3px 5px rgba(61, 123, 255, 0.25)); }
.tab-lbl { font-size: 11px; font-weight: 600; }
.tab-indicator {
  position: absolute;
  top: 4px;
  width: 22px; height: 3px;
  border-radius: 2px;
  background: var(--tab-active);
  transition: left .32s cubic-bezier(.5, 1.6, .4, 1);
}

/* ============================================================ *
 *  Me page (design layout)                                       *
 * ============================================================ */
.me-page {
  max-width: 440px;
  margin: 0 auto;
  padding-bottom: 120px;
  min-height: 100vh;
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text-1);
  position: relative;
}
.me-hero { position: relative; padding: 10px 16px 24px; overflow: hidden; }
.me-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #dae4ff 0%, #e5ddff 50%, transparent 90%);
  opacity: 1;
  z-index: 0;
}
.me-hero-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px; padding-top: 12px;
}
.me-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--surface-2);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18), 0 0 0 3px var(--surface-1);
  display: flex; align-items: center; justify-content: center;
}
.me-avatar img { width: 78%; height: 78%; object-fit: contain; }
.me-name-wrap { flex: 1 1; min-width: 0; }
.me-name { font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: var(--text-1); }
.me-id { margin-top: 2px; font-size: 12px; color: var(--text-3); }
.me-edit {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
}

.me-section { padding: 10px 16px; }

/* Member / VIP card */
.member-card {
  padding: 16px; border-radius: 16px;
  background: linear-gradient(135deg, #2b1e4a 0%, #3a2870 100%);
  border: 1px solid rgba(255, 210, 100, .35);
  box-shadow: 0 10px 22px -10px rgba(120, 60, 200, .45);
  position: relative; overflow: hidden;
  color: #fff5d0;
}
.member-card::before {
  content: ""; position: absolute;
  right: -30px; top: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 80, .3), transparent 70%);
}
.member-art {
  position: absolute;
  right: -12px;
  top: -14px;
  width: 106px;
  height: 106px;
  object-fit: contain;
  opacity: .92;
  z-index: 0;
}
.member-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: relative; z-index: 1; }
.member-left { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.member-crown {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #ffd86b 0%, #ff9c3c 100%);
  display: flex; align-items: center; justify-content: center;
  color: #5a3200;
  box-shadow: 0 4px 10px rgba(255, 160, 40, .45);
}
.member-crown svg { width: 22px; height: 22px; }
.member-eyebrow { color: rgba(255, 245, 208, .68); font-size: 12px; margin-bottom: 2px; }
.member-title { color: #fff5d0; font-size: 16px; font-weight: 800; letter-spacing: -.2px; }
.member-sub { color: rgba(255, 245, 208, .75); font-size: 12px; margin-top: 2px; white-space: nowrap; }
.member-btn {
  padding: 8px 16px; border-radius: 20px;
  background: linear-gradient(135deg, #ffd86b 0%, #ff9c3c 100%);
  color: #5a3200;
  font-weight: 800; font-size: 13px;
  border: none;
  position: relative; z-index: 1;
  box-shadow: 0 4px 10px rgba(255, 160, 40, .35);
}
.member-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}
.member-action {
  display: block;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  color: inherit;
  text-decoration: none;
}
.member-action .action-main {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.member-action .action-sub {
  display: block;
  margin-top: 4px;
  color: rgba(255, 245, 208, .72);
  font-size: 12px;
  line-height: 1.35;
}
.fuel-summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  position: relative;
  z-index: 1;
}
.fuel-label { color: rgba(255, 245, 208, .66); font-size: 12px; }
.fuel-value { margin-top: 2px; color: #fff; font-size: 17px; font-weight: 900; }
.fuel-meta {
  flex: 1 1;
  align-self: flex-end;
  color: rgba(255, 245, 208, .68);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}

/* Stats row */
.stat-row {
  display: flex; align-items: center;
  background: var(--surface-1);
  border-radius: 16px;
  padding: 14px 0;
  box-shadow: var(--shadow-card);
}
.stat-cell { flex: 1 1; text-align: center; cursor: pointer; color: inherit; text-decoration: none; }
.stat-num {
  font-size: 22px; font-weight: 800;
  color: var(--text-1); letter-spacing: -.4px;
}
.stat-lbl { margin-top: 2px; font-size: 12px; color: var(--text-3); }
.stat-sep { width: 1px; height: 28px; background: var(--line-strong); }

/* Grouped menu list */
.me-group {
  background: var(--surface-1);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.me-group + .me-group { margin-top: 12px; }
.me-group-title {
  padding: 12px 16px 4px;
  font-size: 12px; font-weight: 600;
  color: var(--text-3); letter-spacing: .3px;
}
.me-row, button.me-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  cursor: pointer; position: relative;
  color: var(--text-1); text-decoration: none;
  transition: background .15s ease;
  border: 0; background: transparent;
  width: 100%; text-align: left; font: inherit;
}
.me-row:hover { background: var(--surface-2); }
.me-row + .me-row::before {
  content: ""; position: absolute;
  left: 58px; right: 16px; top: 0;
  height: 1px; background: var(--line);
}
.me-row-ic {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.me-row-ic svg { width: 20px; height: 20px; }
.me-row-ic.apps {
  background: linear-gradient(135deg, #3d7bff 0%, #6b5df0 100%);
  color: #fff;
  box-shadow: 0 3px 8px rgba(80, 100, 240, .35);
}
.me-row-ic.color-order     { background: #fff1e0; color: #e87b3a; }
.me-row-ic.color-coupon    { background: #ffe6ec; color: #e23d58; }
.me-row-ic.color-invite    { background: #e0f5ea; color: #14a85a; }
.me-row-ic.color-help      { background: #e4efff; color: #3d7bff; }
.me-row-ic.color-feedback  { background: #f0ecff; color: #6b5df0; }
.me-row-ic.color-about     { background: #e9f6ff; color: #3aa0e2; }
.me-row-ic.color-settings  { background: #f0f0f5; color: #6b7486; }
.me-row-ic.color-billing   { background: #fff3d6; color: #a6761f; }
.me-row-ic.color-avatar    { background: #f0ecff; color: #6b5df0; }
.me-row-ic.color-stuff     { background: #e4efff; color: #3d7bff; }
.me-row-ic.color-studio    { background: #ffe6ec; color: #e23d58; }
.me-row-body { flex: 1 1; min-width: 0; }
.me-row-title { font-size: 15px; font-weight: 600; color: var(--text-1); letter-spacing: -.1px; }
.me-row-sub { margin-top: 2px; font-size: 12px; color: var(--text-3); }
.me-row > svg { color: var(--text-3); flex-shrink: 0; }
.me-row.prominent .me-row-title { font-weight: 700; }
.me-row.is-soon { cursor: default; }
.me-row.is-soon:hover { background: transparent; }
.me-row.is-soon .me-row-title { color: var(--text-3); }
.me-row.is-soon > svg { display: none; }
.me-row-soon-tag {
  font-size: 11px; font-weight: 500;
  color: var(--text-3);
  background: var(--surface-3);
  padding: 3px 8px; border-radius: 999px;
  flex-shrink: 0; letter-spacing: .2px;
}

.me-footer {
  text-align: center; padding: 20px 16px;
  font-size: 11px; color: var(--text-4);
}
.me-session-card {
  margin: 96px 18px 0;
  padding: 28px 18px;
  border-radius: 18px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.me-session-card img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}
.me-session-title {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 900;
  color: var(--text-1);
}
.me-session-sub {
  margin: 6px auto 18px;
  max-width: 260px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
}

/* ============================================================ *
 *  All-features page (/all)                                      *
 * ============================================================ */
.all-page {
  max-width: 440px;
  margin: 0 auto;
  padding-top: calc(env(safe-area-inset-top) + 10px);
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
  min-height: 100dvh;
  background: var(--bg);
  background-image: var(--bg-grad);
  color: var(--text-1);
}
.all-page {
  background-image:
    radial-gradient(600px 220px at 70% -40px, rgba(61, 123, 255, 0.12), transparent 70%),
    radial-gradient(420px 180px at 15% 20px, rgba(255, 160, 80, 0.1), transparent 70%),
    linear-gradient(180deg, #eaf1fb 0%, #f4f7fc 320px);
}
.all-head {
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.all-back {
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text-1);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.all-back:active { background: var(--surface-3); }
.all-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--text-1);
}
.all-section { padding: 18px 16px 6px; }
.all-page > .all-section:first-child { padding-top: 0; }

/* ============================================================ *
 *  /创作 hub — 三段：进行中 / 最近成稿 / 创作工具                 *
 * ============================================================ */
.creation-section { padding: 18px 16px 6px; }
.creation-section + .creation-section { padding-top: 8px; }
.creation-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 12px;
}
.creation-section-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}
.creation-section-title.creation-orange { color: var(--orange); }
.creation-section-title.creation-blue { color: var(--blue); }
.creation-section-count {
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1;
}
.creation-section-more {
  margin-left: auto;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}
.creation-running-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.creation-running-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  color: var(--text);
}
.creation-running-card:active { transform: scale(0.99); }
.creation-running-ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--panel-soft);
  flex: 0 0 auto;
}
.creation-running-ic.placeholder {
  display: inline-block;
}
.creation-running-body { flex: 1 1; min-width: 0; display: grid; grid-gap: 4px; gap: 4px; }
.creation-running-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.creation-running-sub {
  font-size: 12px;
  color: var(--text-2);
}
.creation-running-bar {
  margin-top: 4px;
  height: 4px;
  background: var(--panel-soft);
  border-radius: 999px;
  overflow: hidden;
}
.creation-running-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #5b8dff);
  border-radius: inherit;
  transition: width 0.4s ease;
}
.creation-running-cta {
  flex: 0 0 auto;
  padding: 7px 12px;
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.creation-recent-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 4px 6px;
  margin: 0 -4px;
  -webkit-overflow-scrolling: touch;
}
.creation-recent-row::-webkit-scrollbar { display: none; }
.creation-recent-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .12s, border-color .12s;
}
.creation-recent-card:hover {
  box-shadow: 0 6px 20px rgba(47, 108, 255, 0.08);
  border-color: rgba(47, 108, 255, 0.18);
}
.creation-recent-card .creation-recent-title { color: var(--text); text-decoration: none; }
.creation-recent-card .creation-recent-title:hover { color: var(--blue); }
.creation-recent-cover {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-soft);
}
.creation-producer-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
}
.creation-producer-smart_import { background: rgba(20, 132, 166, 0.92); }
.creation-producer-manual_import { background: rgba(87, 98, 117, 0.92); }
.creation-producer-direct_rewrite { background: rgba(235, 126, 34, 0.94); }
.creation-producer-article_rewrite { background: rgba(121, 94, 214, 0.94); }
.creation-producer-platform_generation { background: rgba(45, 148, 93, 0.94); }
.creation-producer-unknown { background: rgba(96, 110, 128, 0.92); }
.creation-recent-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.creation-recent-cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.creation-recent-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  min-height: 38px;
}
.creation-recent-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}
.creation-recent-meta .lineage-pill {
  flex: 0 1 auto;
  min-width: 0;
  /* 卡片里压缩展示：去掉「由」前缀字，保留标题 + 跳转图标，节省宽度 */
  padding: 3px 8px;
}
.creation-recent-meta .lineage-pill-label {
  display: none;
}
.creation-recent-meta .lineage-pill-title {
  max-width: 110px;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.creation-recent-meta-spacer {
  flex: 1 1 auto;
}
.creation-recent-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
/* 创作工具 4 分组：每组独立白卡 + 色调圆点 + 统一色块图标。
   tone (orange/purple/blue/green) 决定圆点 + 图标底 + 子标签的色调，
   把不同工具图标的视觉风格统一在分组色调下。 */
.creation-tools-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.all-section {
  background: var(--surface-1);
  border-radius: 16px;
  padding: 14px 12px 10px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  border: 1px solid var(--line);
}
.all-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 12px;
}
.all-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.all-section-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
}
.all-section-orange .all-section-dot { background: #ff7b2b; }
.all-section-purple .all-section-dot { background: #8b5cf6; }
.all-section-blue   .all-section-dot { background: #2f6cff; }
.all-section-green  .all-section-dot { background: #1fb87a; }
.all-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px 4px;
  gap: 12px 4px;
  padding: 4px 0 6px;
}
.all-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease;
  min-width: 0;
}
.all-cell:active { transform: scale(0.94); }
.all-ic {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.all-ic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}
.all-cell.with-bg .all-ic img {
  border-radius: 14px;
  object-fit: cover;
}
.all-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
  line-height: 1.3;
  max-width: 88px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ============================================================ *
 *  Primary tab page alignment (/materials, /avatars, /all)       *
 * ============================================================ */
.app-shell:has(> .materials-page),
.app-shell:has(> .avatars-page),
.app-shell:has(> .all-page),
.app-shell:has(> .subpage-shell),
.materials-page,
.avatars-page,
.all-page,
.subpage-shell {
  background-color: #eaf1fb;
  background-image:
    radial-gradient(600px 220px at 70% -40px, rgba(61, 123, 255, 0.12), transparent 70%),
    radial-gradient(420px 180px at 15% 20px, rgba(255, 160, 80, 0.1), transparent 70%),
    linear-gradient(180deg, #eaf1fb 0%, #f4f7fc 320px);
  background-repeat: no-repeat;
}
.materials-page,
.avatars-page,
.subpage-shell {
  /* 有 sticky-head，padding-top 清零让顶部 bar 与首页严格对齐 */
  padding-top: 0;
  min-height: 100dvh;
}
.materials-page > .section:first-child,
.avatars-page > .section:first-child,
.subpage-shell > .section:first-child,
.subpage-shell > .panel:first-child,
.subpage-shell > .card:first-child {
  margin-top: 0;
}

/* ============================================================ *
 *  Import CTA (on /materials)                                    *
 * ============================================================ */
.import-cta {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  grid-gap: 14px;
  gap: 14px;
  padding: 16px 14px;
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #3a7dff 0%, #6b4cff 55%, #b85dff 100%);
  box-shadow: 0 14px 28px -10px rgba(58, 80, 255, 0.45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.import-cta:active {
  transform: scale(0.98);
  box-shadow: 0 6px 14px -4px rgba(58, 80, 255, 0.4);
}
.import-cta-glow {
  position: absolute;
  inset: -40px -40px auto auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.32), transparent 65%);
  pointer-events: none;
}
.import-cta-icon {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.import-cta-icon svg { color: #fff; }
.import-cta-body { position: relative; min-width: 0; }
.import-cta-title {
  font-size: 16px; font-weight: 800; letter-spacing: -.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.import-cta-sub {
  margin-top: 3px;
  font-size: 12px; opacity: 0.9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.import-cta-go {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #2a48c8;
  font-size: 12.5px; font-weight: 800;
  flex-shrink: 0;
}
.import-cta-go svg { width: 14px; height: 14px; }

/* Running import progress card */
.running-card { padding: 12px 14px; }
.running-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.running-info { min-width: 0; flex: 1 1; }
.running-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: var(--text-1);
}
.running-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(47, 108, 255, 0.18);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.88); }
}
.running-link {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.running-pct {
  font-size: 14px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.3px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ============================================================ *
 *  Background tiles                                              *
 * ============================================================ */
.bg-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 4px;
}
.bg-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
  color: var(--text-1);
  text-decoration: none;
  overflow: hidden;
}
.bg-tile-wrap {
  position: relative;
  min-width: 0;
}
.bg-tile-wrap .bg-tile {
  height: 100%;
}
.bg-tile-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: #ff4d5f;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.12s, background 0.15s, opacity 0.15s;
}
.bg-tile-delete:active {
  transform: scale(0.92);
  background: #fff1f2;
}
.bg-tile-delete:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.bg-tile-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #e9efff, #c7d5ff);
  display: grid;
  place-items: center;
  color: var(--text-3);
}
.bg-tile-image img { width: 100%; height: 100%; object-fit: cover; }
.bg-tile-text { padding: 2px 6px 4px; }
.bg-tile-name {
  font-size: 13.5px;
  font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bg-tile-kind {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-3);
}
.bg-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background: var(--surface-1);
}
.bg-preview {
  margin: 8px 0 12px;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel-soft);
  border: 1px solid var(--line);
}
.bg-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 6px;
}
.bg-actions .ghost-btn { margin-top: 0; }

/* ============================================================ *
 *  Billing cards                                                 *
 * ============================================================ */
.billing-list { display: grid; grid-gap: 10px; gap: 10px; }
.billing-card { padding: 14px 16px; }
.billing-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.billing-title { font-size: 15px; font-weight: 800; color: var(--text-1); }
.billing-meta { margin-top: 3px; font-size: 12px; color: var(--text-3); line-height: 1.45; }
.billing-cost {
  margin-top: 10px;
  display: flex; align-items: baseline; gap: 4px;
  color: var(--blue);
}
.billing-price { font-size: 22px; font-weight: 900; letter-spacing: -.5px; }
.billing-unit { font-size: 12px; color: var(--text-3); font-weight: 600; }

/* ================= Chips, modes, channel picker ================= */
.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 72px;
  padding: 10px 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 700;
  transition: border-color .15s ease, transform .15s ease;
}
.chip .chip-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}
.chip .chip-icon svg { width: 20px; height: 20px; color: #fff; }
.chip .chip-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.12));
}
.chip.disabled .chip-img { filter: grayscale(0.4) drop-shadow(0 3px 6px rgba(15, 23, 42, 0.08)); }
.chip.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.14);
  color: var(--blue);
}
.chip.disabled {
  opacity: 0.55;
  filter: saturate(0.7);
}
.chip.disabled .chip-icon { filter: grayscale(0.4); }
.chip-tag {
  position: absolute;
  top: -6px;
  right: -4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  color: #8f6b20;
  background: #ffecb8;
  border-radius: 999px;
}

.mode-stack { display: grid; grid-gap: 10px; gap: 10px; }
.mode-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.mode-card .icon { width: 42px; height: 42px; border-radius: 12px; }
.mode-card .icon svg { width: 22px; height: 22px; }
.mode-body { flex: 1 1; min-width: 0; }
.mode-title { font-weight: 800; font-size: 14px; color: var(--text); }
.mode-desc { margin-top: 3px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.mode-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.mode-card.active {
  border-color: var(--blue);
  background: linear-gradient(135deg, #f2f7ff, #ffffff);
}
.mode-card.active .mode-radio {
  border-color: var(--blue);
  background: radial-gradient(circle, var(--blue) 0 6px, #fff 7px);
}

/* ================= Parse result blocks ================= */
.parse-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f6f9ff, #ffffff);
  border: 1px solid var(--line);
}
.parse-cover {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: linear-gradient(135deg, #e7f0ff, #fff0e6);
  display: grid;
  place-items: center;
  color: var(--blue);
  flex-shrink: 0;
}
.parse-cover.placeholder svg { width: 24px; height: 24px; }
.parse-title { font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.parse-sub {
  margin-top: 14px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}
.parse-sub::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--blue);
}

.seg-toggle {
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}
.seg-toggle:hover {
  border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
  background: #f8fbff;
}
.seg-toggle-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.seg-toggle-action {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}
.seg-table {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-1);
}
.seg-table .seg-row {
  display: grid;
  grid-template-columns: 48px 48px 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 0;
  padding: 9px 10px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}
.seg-table .seg-row:last-child { border-bottom: 0; }
.seg-table .seg-row.head {
  background: var(--panel-soft);
  color: var(--muted);
  font-weight: 800;
}
.seg-table .seg-row.more {
  grid-template-columns: 1fr;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.analysis-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin: 4px 0 12px;
}
.analysis-card {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #fbfcff, #ffffff);
}
.analysis-card.analysis-warning {
  border-color: rgba(255, 162, 58, 0.28);
  background: linear-gradient(135deg, #fff8eb, #ffffff);
}
.analysis-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--blue);
  font-weight: 800;
  font-size: 13px;
}
.analysis-head svg { width: 16px; height: 16px; }
.analysis-card span {
  display: block;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.55;
}
.analysis-card audio {
  width: 100%;
  margin: 2px 0 8px;
  display: block;
}

/* Status tag variants */
.tag-blue { color: var(--blue); background: #e8f0ff; }
.tag-green { color: var(--green); background: #e3f7ec; }
.tag-amber { color: #a3670a; background: #fff3cd; }
.tag-red { color: var(--red); background: #ffe4e7; }
.meta.err { color: var(--red); margin-top: 6px; }

/* ================= Studio page ================= */
.context-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(90deg, #ecf2ff, #f4f0ff);
  color: var(--text-soft);
}
.context-banner svg { width: 20px; height: 20px; color: var(--blue); }
.context-title { font-weight: 800; font-size: 13px; color: var(--text); }

.step-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text);
}
.step-label .step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--blue), var(--purple));
}
.step-label .len-tag {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.len-ok { color: var(--green); background: #e3f7ec; }
.len-over { color: var(--red); background: #ffe4e7; }
.len-under { color: #a3670a; background: #fff3cd; }

.fixed-area {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-y: auto;
  resize: none;
  -webkit-overflow-scrolling: touch;
}
.fixed-area:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.12);
}

/* Script editor with tag toolbar */
.script-editor { display: flex; flex-direction: column; gap: 10px; }
.script-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fafbfd 0%, #f4f6fb 100%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
}
.script-toolbar-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.04em;
  margin-right: 6px;
  flex: 0 0 32px;
}
.script-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--line-strong);
  margin: 0 4px;
}
.tag-btn {
  padding: 5px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  color: var(--text-1);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .1s, box-shadow .12s;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
}
.tag-btn:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-0.5px);
  box-shadow: 0 2px 4px rgba(47, 108, 255, 0.10);
}
.tag-btn:active:not(:disabled) { transform: translateY(0); }
.tag-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tag-btn.pause {
  color: #a8550a;
  background: linear-gradient(180deg, #fff8ec 0%, #ffefd1 100%);
  border-color: rgba(255, 156, 60, 0.4);
}
.tag-btn.pause:hover:not(:disabled) {
  border-color: #ff9c3c;
  color: #8a4408;
  box-shadow: 0 2px 4px rgba(255, 156, 60, 0.16);
}
.tag-btn.emo {
  color: #4d3aa6;
  background: linear-gradient(180deg, #f5efff 0%, #ebe2ff 100%);
  border-color: rgba(122, 76, 255, 0.32);
}
.tag-btn.emo:hover:not(:disabled) {
  border-color: #7a4cff;
  color: #34277a;
  box-shadow: 0 2px 4px rgba(122, 76, 255, 0.16);
}

/* 双行工具栏：停顿一行、语气一行 */
.script-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  width: 100%;
}
.script-toolbar-row + .script-toolbar-row { margin-top: 6px; }
.script-toolbar-bottom { flex-direction: column; align-items: stretch; }

/* 工具栏顶部说明：告诉用户这是可选项 + 作用 */
.script-toolbar-help {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.script-toolbar-help-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: #5744b5;
  background: #eae1ff;
  border: 1px solid #d5c6ff;
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 8px;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

/* contentEditable 文本框：标签以 inline chip 形式直接呈现在文本中 */
.script-ce {
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
  cursor: text;
  overflow-y: auto;
  line-height: 1.75;
  font-size: 14.5px;
  color: var(--text-1);
  letter-spacing: 0.01em;
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color .15s, box-shadow .15s;
}
.script-ce:hover {
  border-color: rgba(47, 108, 255, 0.25);
}
.script-ce:focus {
  border-color: var(--blue);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 3px rgba(47, 108, 255, 0.12);
}
.script-ce:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3);
  pointer-events: none;
  font-weight: 400;
}
.script-ce .ce-chip {
  display: inline-flex;
  align-items: center;
  padding: 1.5px 9px;
  margin: 0 3px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: baseline;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: default;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
}
.script-ce .ce-chip.pause {
  color: #8a4408;
  background: linear-gradient(180deg, #fff3df 0%, #ffe4ba 100%);
  border: 1px solid rgba(255, 156, 60, 0.35);
}
.script-ce .ce-chip.emo {
  color: #34277a;
  background: linear-gradient(180deg, #ede4ff 0%, #ddd0ff 100%);
  border: 1px solid rgba(122, 76, 255, 0.3);
}

.chip-scroll {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pill {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
}
.pill.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  box-shadow: 0 6px 14px rgba(47,108,255,0.25);
}

.avatar-scroll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
  padding: 2px;
}
.avatar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  text-align: center;
}
.avatar-card .avatar-img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef3ff, #fde9f1);
  display: grid;
  place-items: center;
  color: var(--blue);
  font-weight: 900;
}
.avatar-card .avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-initial { font-size: 26px; }
.avatar-kind {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  color: var(--text-soft);
}
.avatar-kind.default { color: var(--blue); }
.avatar-kind.custom { color: var(--purple); }
.avatar-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.avatar-meta { font-size: 11px; color: var(--muted); }
.avatar-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.15);
}
.avatar-card.disabled {
  opacity: 0.55;
}
.avatar-card.disabled .avatar-img {
  filter: saturate(0.55);
}

/* Video progress card on material detail page */
.video-card {
  margin: 4px 0 12px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f0f4ff, #fff);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.video-card-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 8px;
}
.video-card .progress-bar { margin-top: 10px; }
.video-card-fail { background: linear-gradient(135deg, #fff4f4, #fff); }
.video-player {
  width: 100%;
  border-radius: 12px;
  background: #000;
  margin-bottom: 10px;
}
.progress-indet {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  animation: indet 1.3s infinite;
}
@keyframes indet {
  from { transform: translateX(-120%); }
  to { transform: translateX(280%); }
}

.bg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
}
.bg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 96px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  text-align: left;
}
.bg-card svg { width: 22px; height: 22px; color: var(--blue); opacity: 0.7; }
.bg-card span { font-size: 12.5px; font-weight: 800; }
.bg-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.18);
}
.bg-card.active::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--blue);
  font-weight: 900;
  font-size: 14px;
}
.bg-card.has-image {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.bg-card.has-image span { background: rgba(15, 20, 40, 0.55); padding: 2px 8px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bg-card.has-image.active::after { color: #fff; background: rgba(47, 108, 255, 0.92); padding: 0 6px; border-radius: 999px; }

.empty-hint {
  padding: 14px;
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.empty-hint a { color: var(--blue); font-weight: 800; }

/* ================= Tabs (avatars) ================= */
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  padding: 4px;
  border-radius: 14px;
  background: var(--panel-soft);
  margin-top: 4px;
}
.tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.tabs button svg { width: 16px; height: 16px; }
.tabs button em {
  font-style: normal;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--muted);
  border: 1px solid var(--line);
}
.tabs button.active {
  background: var(--surface-1);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.tabs button.active em {
  background: var(--blue);
  color: #fff;
  border-color: transparent;
}

.avatar-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin: 12px 0;
}
.avatar-tile {
  padding: 12px;
  border-radius: 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
}
.avatar-tile::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 60%);
  pointer-events: none;
}
.avatar-tile-head {
  width: 100%;
  aspect-ratio: 3 / 2.4;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
}
.avatar-tile-head img { width: 100%; height: 100%; object-fit: cover; }
.avatar-tile-head .avatar-initial { font-size: 32px; font-weight: 900; }
.avatar-tile-body { display: flex; flex-direction: column; gap: 4px; }
.avatar-tile-name { font-size: 14px; font-weight: 800; }
.avatar-tile-meta { font-size: 11.5px; opacity: 0.88; }
.avatar-tile .tag {
  align-self: flex-start;
  margin-top: 2px;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.22) !important;
}

/* ================= Avatar creator ================= */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  padding: 4px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--panel-soft);
}
.segmented button {
  border: 0;
  background: transparent;
  padding: 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.segmented button svg { width: 16px; height: 16px; }
.segmented button.on {
  background: var(--surface-1);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 12px;
}
.upload-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--panel-soft);
  color: var(--text);
  cursor: pointer;
}
.upload-card svg { width: 22px; height: 22px; color: var(--blue); }
.upload-card span { font-size: 13px; font-weight: 800; }
.upload-card em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.hint-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff7e8, #fff);
  border: 1px solid #ffe2b3;
  margin-bottom: 12px;
}
.hint-box svg { width: 20px; height: 20px; color: #d67b12; flex-shrink: 0; }
.hint-box strong { display: block; font-size: 13px; color: #8c5d13; }
.hint-box p { margin: 2px 0 0; font-size: 12px; color: #a37321; line-height: 1.5; }

/* ================= Avatars hub (分身中枢) ================= */
.hub-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 6px;
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  background: var(--panel-soft);
  margin-bottom: 14px;
}
.hub-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  transition: background .15s, color .15s, box-shadow .15s;
}
.hub-tabs button svg { width: 16px; height: 16px; }
.hub-tabs button em {
  font-style: normal;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--muted);
  border: 1px solid var(--line);
}
.hub-tabs button.on {
  background: var(--surface-1);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.hub-tabs button.on em {
  background: var(--blue);
  color: #fff;
  border-color: transparent;
}

.group-label {
  margin: 6px 0 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-3);
  letter-spacing: .4px;
}

.inline-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef4ff, #f4eeff);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
}
.inline-cta > svg:first-child {
  width: 22px; height: 22px;
  color: var(--blue);
  flex-shrink: 0;
}
.inline-cta > span { flex: 1 1; min-width: 0; }
.inline-cta > svg:last-child { width: 14px; height: 14px; color: var(--muted); }

/* Scene picker inside studio (step 2) */
.scene-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
}
.scene-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.scene-pick.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.15);
}
.scene-pick-img {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef3ff, #fde9f1);
  display: grid;
  place-items: center;
  color: var(--blue);
}
.scene-pick-img img { width: 100%; height: 100%; object-fit: cover; }
.scene-pick-img svg { width: 28px; height: 28px; }
.scene-pick-name {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  padding: 0 2px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pick card (人物/背景 slot) */
.pick-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(135deg, #f5f7fc, #fff);
}
.pick-card img {
  width: 60px; height: 60px;
  border-radius: 10px;
  object-fit: cover;
  background: #eef3ff;
}
.pick-card-fallback {
  width: 60px; height: 60px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eef3ff, #fde9f1);
  display: grid; place-items: center;
  color: var(--blue);
  font-size: 22px; font-weight: 900;
}
.pick-card-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.pick-card-meta {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-empty {
  padding: 18px 14px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}
.pick-empty:hover { border-color: var(--blue); color: var(--blue); }

/* Scenes grid */
.scene-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px 12px;
  gap: 14px 12px;
  margin-top: 4px;
}
.scene-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.scene-image {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: linear-gradient(135deg, #eef3ff, #fde9f1);
  display: grid;
  place-items: center;
  color: var(--blue);
}
.scene-image img { width: 100%; height: 100%; object-fit: cover; }
.scene-image svg { width: 36px; height: 36px; }
.scene-del {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px;
  border-radius: 50%; border: 0;
  background: rgba(15, 20, 40, 0.55);
  color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.scene-body { padding: 10px 12px; }
.scene-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-meta {
  margin-top: 3px;
  display: flex;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
}
.scene-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ================= Default avatar portrait grid ================= */
.portrait-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px 12px;
  gap: 14px 12px;
  margin: 12px 0;
}
.portrait-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  min-width: 0;
  transition: transform .12s ease, box-shadow .15s ease;
}
.portrait-card:active {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(27, 40, 80, 0.06);
}
.portrait {
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  box-shadow: inset 0 -20px 40px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.portrait-fill,
.portrait.portrait-fill {
  /* override .icon's 44x44 so aspect-ratio actually drives height */
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  min-height: 0;
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portrait-initial {
  font-weight: 900;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.portrait-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(18, 24, 38, 0.5);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.portrait-text {
  padding: 2px 4px 4px;
  min-width: 0;
}
.portrait-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portrait-persona {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ================= Avatar detail sheet ================= */
.detail-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f1f5ff, #fff0f6);
  margin-bottom: 12px;
}
.detail-name { font-size: 18px; font-weight: 800; color: var(--text); }
.detail-sub { margin-top: 4px; font-size: 12.5px; color: var(--muted); }

.detail-meta {
  margin: 0 0 14px;
  padding: 4px 4px;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.detail-meta > div {
  display: grid;
  grid-template-columns: 84px 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: baseline;
}
.detail-meta dt {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.detail-meta dd {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.detail-note {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel-soft);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}
.detail-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  grid-gap: 10px;
  gap: 10px;
}
.detail-actions .ghost-btn { margin-top: 0; }

/* Create-CTA above tabs */
.create-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 4px 0 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #3a7dff, #7a4cff);
  color: #fff;
  box-shadow: 0 10px 22px rgba(58, 80, 255, 0.3);
}
.create-cta .create-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
}
.create-cta .create-icon svg { width: 22px; height: 22px; color: #fff; }
.create-cta .create-body { flex: 1 1; min-width: 0; }
.create-cta .create-title { font-size: 15px; font-weight: 800; }
.create-cta .create-sub { margin-top: 2px; font-size: 11.5px; opacity: 0.9; }
.create-cta > svg { width: 16px; height: 16px; color: #fff; opacity: 0.85; flex-shrink: 0; }

/* Field header with inline AI-refine link */
.field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.field-head label { margin-bottom: 0; }

/* Voice design section */
.voice-section {
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f6f2ff, #fff4f1);
  border: 1px solid #e6dffa;
}
.voice-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.voice-section-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #4a2f8f;
  display: flex;
  align-items: center;
  gap: 4px;
}
.voice-section-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--purple), var(--pink));
}
.voice-section-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
}
.voice-section .fixed-area { background: var(--surface-1); }

.voice-result {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.voice-result-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.voice-result-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--purple);
}
.voice-result-title svg { width: 14px; height: 14px; }
.voice-result-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.voice-result-actions {
  display: flex;
  gap: 8px;
}
.voice-result-actions .ghost-btn {
  margin-top: 0;
  flex: 1 1;
  padding: 8px 10px;
  font-size: 12.5px;
}

/* Voice preview row */
.preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel-soft);
}
.preview-row .ghost-btn { margin-top: 0; white-space: nowrap; }
.preview-audio {
  flex: 1 1;
  min-width: 0;
  height: 36px;
}

/* ================= Materials page ================= */
.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--panel-soft);
  margin-bottom: 12px;
}
.search-field svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.search-field input {
  flex: 1 1;
  border: 0;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  outline: none;
}

.material-card {
  display: grid;
  grid-template-columns: 84px 1fr;
  grid-gap: 12px;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.material-cover {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8f0ff, #ffe9d6);
  display: grid;
  place-items: center;
  color: var(--blue);
}
.material-cover img { width: 100%; height: 100%; object-fit: cover; }
.material-cover svg { width: 26px; height: 26px; }
.type-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 20, 40, 0.55);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.material-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.material-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.material-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
.material-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.micro-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--panel-soft);
  border-radius: 999px;
}
.micro-chip svg { width: 11px; height: 11px; }
.material-desc {
  margin: 0;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.material-date { font-size: 11px; color: var(--muted); }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
}
.empty-state .empty-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
}
.empty-state .empty-icon svg { width: 28px; height: 28px; }
.empty-title { font-weight: 800; font-size: 15px; color: var(--text); }
.empty-desc { color: var(--muted); font-size: 13px; }
.empty-desc a { color: var(--blue); font-weight: 700; }

/* ================= Source chip + picker sheet ================= */
.link-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}
.link-btn svg { width: 13px; height: 13px; }
.link-btn:hover { border-color: var(--blue); }

.source-chip {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef4ff, #ffffff);
  border: 1px solid var(--line);
}
.source-cover {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8f0ff, #ffe9d6);
  display: grid;
  place-items: center;
  color: var(--blue);
}
.source-cover img { width: 100%; height: 100%; object-fit: cover; }
.source-cover svg { width: 20px; height: 20px; }
.source-body { min-width: 0; }
.source-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.source-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.source-clear {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(18, 24, 38, 0.06);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* Bottom sheet */
.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(10, 16, 30, 0.45);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: sheet-fade 0.18s ease;
}
.sheet {
  position: relative;
  width: min(100%, 430px);
  max-height: 82dvh;
  border-radius: 22px 22px 0 0;
  background: var(--surface-1);
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -16px 40px rgba(10, 16, 30, 0.2);
  display: flex;
  flex-direction: column;
  animation: sheet-up 0.22s ease;
}
.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: #e2e6ef;
  margin: 0 auto 8px;
}
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sheet-title { font-size: 16px; font-weight: 800; }
.sheet-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.sheet-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel-soft);
  margin-bottom: 10px;
}
.sheet-search svg { width: 16px; height: 16px; color: var(--muted); }
.sheet-search input {
  flex: 1 1;
  border: 0;
  background: transparent;
  font-size: 14px;
  outline: none;
  color: var(--text);
}
.sheet-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.sheet-body {
  flex: 1 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sheet-list button {
  display: grid;
  grid-template-columns: 56px 1fr 16px;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  text-align: left;
  color: var(--text);
}
.sheet-list button:active { background: var(--panel-soft); }
.sheet-cover {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8f0ff, #ffe9d6);
  display: grid;
  place-items: center;
  color: var(--blue);
}
.sheet-cover img { width: 100%; height: 100%; object-fit: cover; }
.sheet-cover svg { width: 22px; height: 22px; }
.sheet-info { min-width: 0; }
.sheet-item-title {
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-item-meta {
  display: flex;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 3px;
}
.sheet-item-desc {
  font-size: 12px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-chevron { color: var(--muted); }
.sheet-empty {
  padding: 32px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

@keyframes sheet-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sheet-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ===== Avatars hub redesign v2 ===== */
.title-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  background: rgba(64, 110, 255, 0.12);
  border-radius: 999px;
  font-style: normal;
  vertical-align: middle;
}
.section-sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* Quick links to /people and /voices */
.material-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}
.material-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s;
}
.material-link:active { transform: scale(0.98); }
.material-link > svg:first-child { width: 22px; height: 22px; color: var(--blue); flex-shrink: 0; }
.material-link > svg:last-child { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; margin-left: auto; }
.material-link-emoji { font-size: 22px; flex-shrink: 0; }
.material-link-title { font-size: 14px; font-weight: 700; }
.material-link-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* "+" tile in scene grid (and shared by other "+" tiles) */
.scene-card.scene-card-new {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, rgba(47, 108, 255, 0.04), rgba(255, 255, 255, 0));
  border: 1.5px dashed rgba(47, 108, 255, 0.45);
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 0;
  transition: transform 0.12s;
}
.scene-card.scene-card-new:active { transform: scale(0.98); }
.scene-image-new {
  background: linear-gradient(135deg, #eef3ff, #f7eafd);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene-new-plus {
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  color: var(--blue);
  opacity: 0.65;
}

.scene-go {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  background: rgba(64, 110, 255, 0.1);
  border-radius: 8px;
  text-decoration: none;
  width: -moz-fit-content;
  width: fit-content;
}
.scene-go svg { width: 12px; height: 12px; }
.scene-go:active { background: rgba(64, 110, 255, 0.18); }

/* Inline create panel */
.create-panel {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.create-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.create-panel-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.create-panel-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.create-panel-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-1);
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}
.create-panel-close:active { background: rgba(0,0,0,0.05); }

/* Pick card with clear button */
.pick-card-clear {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.9);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  z-index: 1;
}
.pick-card { position: relative; }

/* Segmented row for actions (从平台选 / 上传) */
.seg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 8px;
}
.seg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.seg-btn:active { background: rgba(0,0,0,0.04); }
.seg-btn svg { width: 14px; height: 14px; color: var(--blue); }
.seg-btn.block { width: 100%; margin-top: 8px; }
.seg-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.hint-line {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(64,110,255,0.06);
  padding: 7px 10px;
  border-radius: 8px;
}

/* Background mode tabs (3 options) */
.bg-mode-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.bg-mode-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.bg-mode-tab::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--text-3);
  background: var(--surface-1);
  transition: border-color 0.15s, background 0.15s;
}
.bg-mode-tab.on::before {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: inset 0 0 0 3px var(--surface-1);
}
.bg-mode-tab:active { background: rgba(15, 23, 42, 0.025); }
.bg-mode-tab.on {
  border-color: var(--blue);
  background: rgba(64, 110, 255, 0.05);
}
.bg-mode-tab .bm-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  padding-right: 26px;
}
.bg-mode-tab.on .bm-title { color: var(--blue); }
.bg-mode-tab .bm-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  padding-right: 26px;
}
.bg-mode-content {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.02);
}

/* Selected state for bg-tile */
.bg-tile.selected {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* Voice list (compact rows) */
.voice-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.voice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.voice-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
}
.voice-avatar img { width: 100%; height: 100%; object-fit: cover; }
.voice-meta { flex: 1 1; min-width: 0; }
.voice-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voice-tags {
  display: flex;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.voice-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(64, 110, 255, 0.12);
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.voice-play.on { background: var(--blue); color: #fff; }
.voice-pick {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  background: rgba(64, 110, 255, 0.08);
  border-radius: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.voice-pick:active { background: rgba(64, 110, 255, 0.18); }
.voice-pick svg { width: 11px; height: 11px; }

/* Subgrid section heads on /people /backgrounds */
.subhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.subhead > div { min-width: 0; }
.subhead-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}
.subhead-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.subhead-count {
  flex-shrink: 0;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-3);
  border-radius: 999px;
}

/* "+" tile for portrait grid (我的人物 自制入口) */
.portrait-card.portrait-card-new {
  text-decoration: none;
  color: inherit;
  border-style: dashed;
  border-color: rgba(47, 108, 255, 0.45);
  background: linear-gradient(180deg, rgba(47, 108, 255, 0.04), rgba(255, 255, 255, 0));
}
.portrait.portrait-new-tile {
  background: linear-gradient(135deg, #eef3ff, #f7eafd);
  box-shadow: none;
}
.portrait.portrait-new-tile .scene-new-plus { font-size: 50px; }

/* "+" tile for bg grid (我的背景 自制入口) */
.bg-tile.bg-tile-new {
  text-decoration: none;
  color: inherit;
  border: 1.5px dashed rgba(47, 108, 255, 0.45);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(47, 108, 255, 0.04), rgba(255, 255, 255, 0));
}
.bg-tile-image.bg-tile-image-new {
  background: linear-gradient(135deg, #eef3ff, #f7eafd);
}
.bg-tile-image.bg-tile-image-new .scene-new-plus { font-size: 44px; }

/* Portrait card with inline ▶ play button overlay */
.portrait-card-with-play { position: relative; }
.portrait-card-main {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.portrait-play {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: transform 0.12s, background 0.15s, color 0.15s;
}
.portrait-play:active { transform: scale(0.9); }
.portrait-play.on { background: var(--blue); color: #fff; }

/* =================================================================== *
 * People page (v3) — designed-from-mockup
 * =================================================================== */

/* Tone backgrounds (avatar fallback gradients) */
.tone-purple { background: linear-gradient(135deg, #a08bff, #7e6bff); }
.tone-pink   { background: linear-gradient(135deg, #ff9ec1, #ff7faa); }
.tone-blue   { background: linear-gradient(135deg, #7eb6ff, #5a8df0); }
.tone-teal   { background: linear-gradient(135deg, #5ee0d2, #19c1b5); }
.tone-orange { background: linear-gradient(135deg, #ffb56a, #ff8a3a); }
.tone-amber  { background: linear-gradient(135deg, #ffd56a, #ffac3a); }
.tone-green  { background: linear-gradient(135deg, #6cdd9e, #1cb87a); }
.tone-indigo { background: linear-gradient(135deg, #8a82ff, #5b5bff); }
.tone-sky    { background: linear-gradient(135deg, #6fc7ff, #3fb6ff); }
.tone-red    { background: linear-gradient(135deg, #ff8b94, #ff5f6f); }

/* ========== 我的人物 (mine row) ========== */
.mine-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  gap: 10px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 14px 12px;
}
.mine-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: transform 0.12s;
}
.mine-card:active { transform: scale(0.96); }
.mine-tile {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #eef3ff, #f7eafd);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: inset 0 -16px 32px rgba(0, 0, 0, 0.08);
}
.mine-tile img { width: 100%; height: 100%; object-fit: cover; }
.mine-tile-new {
  background: linear-gradient(180deg, rgba(47, 108, 255, 0.05), #ffffff);
  border: 1.5px dashed rgba(47, 108, 255, 0.42);
  box-shadow: none;
}
.mine-plus {
  font-size: 32px;
  font-weight: 200;
  line-height: 1;
  color: var(--blue);
  opacity: 0.7;
}
.mine-initial {
  font-weight: 900;
  font-size: 26px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.mine-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mine-persona {
  font-size: 10.5px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: -3px;
}
.mine-card-new .mine-name { color: var(--text-2); }

/* Empty state for 我的人物 */
.mine-empty {
  display: grid;
  grid-template-columns: 92px 1fr;
  grid-gap: 14px;
  gap: 14px;
  align-items: center;
  padding: 16px 14px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.mine-empty .mine-card { width: auto; }
.mine-empty-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  min-height: 92px;
  justify-content: center;
}
.mine-empty-img {
  position: absolute;
  right: -4px;
  top: -8px;
  width: 76px;
  height: 76px;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.96;
}
.mine-empty-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  padding-right: 70px;
}
.mine-empty-sub {
  font-size: 11.5px;
  color: var(--muted);
  padding-right: 70px;
  line-height: 1.4;
}

/* ========== Search box (with focus + cancel) ========== */
.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 40px;
  border: 1.5px solid transparent;
  background: var(--surface-1);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-field svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}
.search-field input {
  flex: 1 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  min-width: 0;
}
.search-field input::placeholder { color: var(--text-3); }
.search-field.focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(47, 108, 255, 0.08);
}
.search-cancel {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  padding: 4px 6px;
  cursor: pointer;
}

/* ========== Gender pills ========== */
.chip-row {
  display: flex;
  gap: 8px;
  margin: 12px 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.chip-row::-webkit-scrollbar { display: none; }
.pill {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pill:active { transform: scale(0.96); }
.pill.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(47, 108, 255, 0.3);
}

/* ========== People grid (platform presets) ========== */
.people-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 14px 12px;
  gap: 14px 12px;
  margin-top: 4px;
}
.people-card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s, box-shadow 0.15s;
}
.people-card:active {
  transform: scale(0.98);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
}
.people-card-tap {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.people-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #cfe0ff, #a6c3f5);
}
.people-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.people-initial {
  font-size: 56px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
.people-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  letter-spacing: 0.2px;
}
.people-meta {
  padding: 10px 12px 12px;
}
.people-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.people-persona {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Play / pause / loading button overlay */
.people-play {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.95);
  color: var(--blue);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  z-index: 2;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background 0.15s, color 0.15s, transform 0.12s;
}
.people-play:active { transform: scale(0.9); }
.people-play.status-playing {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 14px rgba(47, 108, 255, 0.4);
}
.people-play.status-loading {
  background: rgba(255, 255, 255, 0.92);
}
.people-play svg { display: block; }

@keyframes play-loading-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.play-loading {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(47, 108, 255, 0.2);
  border-top-color: var(--blue);
  animation: play-loading-spin 0.7s linear infinite;
}
.play-loading.dark {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}

/* ========== Detail sheet (v2) ========== */
.sheet-detail {
  padding: 14px 18px 22px;
}
.detail-hero-2 {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 6px 0 16px;
}
.detail-avatar {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(135deg, #cfe0ff, #a6c3f5);
}
.detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.detail-info { flex: 1 1; min-width: 0; }
.detail-row-1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.detail-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.detail-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #c33d6c;
  background: #ffe1eb;
  border-radius: 999px;
}
.detail-persona {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.4;
}

.detail-stats {
  display: flex;
  background: var(--surface-3);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.detail-stat {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}
.detail-stat + .detail-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: var(--line-strong);
}
.detail-stat-k {
  font-size: 10.5px;
  color: var(--muted);
}
.detail-stat-v {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-listen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(47, 108, 255, 0.32);
  transition: background 0.15s, transform 0.12s;
}
.detail-listen:active { transform: scale(0.98); }
.detail-listen:disabled { opacity: 0.85; cursor: progress; }
.detail-listen.status-playing {
  background: linear-gradient(135deg, #2f6cff, #5b5bff);
}
.detail-listen svg { width: 14px; height: 14px; }

.detail-actions-2 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
}
.detail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  transition: background 0.15s, transform 0.12s;
}
.detail-btn:active { transform: scale(0.98); }
.detail-btn-ghost {
  background: var(--surface-3);
  color: var(--text-2);
}
.detail-btn-ghost:active { background: var(--line-strong); }
.detail-btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 5px 14px rgba(47, 108, 255, 0.28);
}

/* =================================================================== *
 * /avatars hub redesign v4 — designed-from-mockup
 * =================================================================== */

/* ============= Empty state hero (state 1) ============= */
.hero-empty {
  background: var(--surface-1);
  border-radius: 20px;
  padding: 32px 20px 24px;
  text-align: center;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}
.hero-empty-img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin: 0 auto 18px;
  display: block;
}
.hero-empty-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.hero-empty-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
  line-height: 1.5;
}
.hero-empty-btn {
  width: 100%;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #4f7cfe, #2f6cff);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 8px 22px rgba(47, 108, 255, 0.36);
  transition: transform 0.12s, box-shadow 0.15s;
}
.hero-empty-btn:active {
  transform: scale(0.98);
  box-shadow: 0 6px 16px rgba(47, 108, 255, 0.4);
}
.hero-empty-btn-plus {
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}

/* ============= 我的分身 head ============= */
.mine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mine-head-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.mine-head-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  margin-left: 2px;
}
.mine-head-link {
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
.mine-head-link:active { color: var(--blue); }

/* ============= Persona grid (state 2) ============= */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 14px;
}
.persona-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s, box-shadow 0.15s;
}
.persona-card:active {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
}
.persona-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #eef3ff, #f7eafd);
  display: grid;
  place-items: center;
}
.persona-image img { width: 100%; height: 100%; object-fit: cover; }
.persona-image svg { width: 36px; height: 36px; color: var(--blue); }
.persona-body {
  padding: 8px 10px 10px;
  position: relative;
}
.persona-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.persona-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
  margin-bottom: 8px;
}
.persona-meta > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.persona-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.persona-go {
  flex: 1 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  background: rgba(47, 108, 255, 0.1);
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s;
}
.persona-go:active { background: rgba(47, 108, 255, 0.2); }
.persona-more {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text-3);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
  letter-spacing: 1px;
  padding-bottom: 6px;
}
.persona-more:active { background: rgba(15, 23, 42, 0.08); color: var(--text-2); }
.persona-menu {
  position: absolute;
  right: 0;
  bottom: 38px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
  padding: 4px;
  z-index: 5;
  min-width: 96px;
}
.persona-menu-item {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 8px 14px;
  font-size: 13px;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
}
.persona-menu-item.danger { color: #ff4d5f; font-weight: 600; }
.persona-menu-item:active { background: var(--surface-3); }

/* ============= "+ 新建分身" wide card ============= */
.new-wide {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: 1.5px dashed rgba(47, 108, 255, 0.45);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(47, 108, 255, 0.04), rgba(120, 80, 255, 0.04));
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}
.new-wide:active {
  transform: scale(0.99);
  background: rgba(47, 108, 255, 0.06);
}
.new-wide-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(47, 108, 255, 0.12);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.new-wide-body { flex: 1 1; text-align: left; }
.new-wide-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
}
.new-wide-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.new-wide > svg:last-child {
  color: var(--text-3);
  flex-shrink: 0;
}

/* ============= 素材入口 (entry cards) ============= */
.materials-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.materials-head-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.materials-head-link {
  font-size: 12.5px;
  color: var(--text-2);
  text-decoration: none;
}
.materials-head-link:active { color: var(--blue); }

.material-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}
.material-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.12s;
  border: 1px solid transparent;
}
.material-card:active { transform: scale(0.98); }
.material-card-people {
  background: linear-gradient(135deg, #ffe9dd, #ffd9c2);
}
.material-card-bg {
  background: linear-gradient(135deg, #d8efe0, #c3e8d2);
}
.material-card-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.5);
}
.material-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.material-card-body { flex: 1 1; min-width: 0; }
.material-card-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #2d2419;
}
.material-card-bg .material-card-title { color: #1b3d2c; }
.material-card-link {
  margin-top: 2px;
  font-size: 11.5px;
  color: rgba(45, 36, 25, 0.65);
}
.material-card-bg .material-card-link { color: rgba(27, 61, 44, 0.65); }

/* ============= Create panel (cp-) ============= */
.cp {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-md);
}
.cp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.cp-head-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.cp-collapse {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  padding: 4px 8px;
}
.cp-collapse:active { color: var(--blue); }

.cp-row { margin-bottom: 18px; }
.cp-row:last-of-type { margin-bottom: 14px; }
.cp-row-label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.cp-input-wrap {
  position: relative;
}
.cp-input {
  width: 100%;
  height: 44px;
  padding: 0 60px 0 14px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  border-radius: 12px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cp-input:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.08);
}
.cp-input::placeholder { color: var(--text-4); }
.cp-input-counter {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11.5px;
  color: var(--text-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Person picker — 2 big buttons */
.cp-person-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}
.cp-person-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 110px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.cp-person-btn:active { transform: scale(0.97); border-color: var(--blue); }
.cp-person-btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
}
.cp-person-btn-icon.person { background: linear-gradient(135deg, #5e9bff, #2f6cff); }
.cp-person-btn-icon.upload { background: linear-gradient(135deg, #6ad0c8, #19c1b5); }

/* Person picker — selected state */
.cp-person-selected {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.cp-person-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-3);
}
.cp-person-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cp-person-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 24px;
  font-weight: 900;
  color: var(--blue);
  background: linear-gradient(135deg, #eef3ff, #d6e2ff);
}
.cp-person-check {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  border: 2px solid var(--surface-1);
}
.cp-person-swap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-1);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
.cp-person-swap:active { background: var(--surface-3); color: var(--blue); }
.cp-person-swap svg { color: var(--blue); }

.cp-row-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

/* Background radio list */
.cp-radio-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.cp-radio:active { background: var(--surface-3); }
.cp-radio.on {
  border-color: var(--blue);
  background: rgba(47, 108, 255, 0.04);
}
.cp-radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--text-3);
  background: var(--surface-1);
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.cp-radio.on .cp-radio-dot {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: inset 0 0 0 4px var(--surface-1);
}
.cp-radio-title {
  flex: 1 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.cp-radio.on .cp-radio-title { color: var(--blue); }
.cp-radio-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--blue);
  background: rgba(47, 108, 255, 0.12);
  border-radius: 6px;
}

.cp-upload-zone {
  margin-top: 10px;
  padding: 12px;
  background: var(--surface-3);
  border-radius: 12px;
}
.cp-bg-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
.cp-bg-preview img { width: 100%; height: 100%; object-fit: cover; }
.cp-bg-clear {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.cp-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface-1);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
}
.cp-upload-btn svg { color: var(--blue); }
.cp-upload-btn:active { background: var(--surface-3); border-color: var(--blue); }

/* Preset background grid (2 rows × 4 cols) */
.cp-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 8px;
  gap: 8px;
  margin-top: 12px;
}
.cp-preset-tile {
  position: relative;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  transition: transform 0.12s;
}
.cp-preset-tile:active { transform: scale(0.96); }
.cp-preset-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cp-preset-tile.selected {
  outline: 2.5px solid var(--blue);
  outline-offset: -2px;
}
.cp-preset-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 8px rgba(47, 108, 255, 0.4);
}

/* Loading state with circular progress */
.cp-loading {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 4px;
  background: linear-gradient(135deg, #1f2849, #0f172a);
}
.cp-loading-blur {
  position: absolute;
  inset: 0;
  filter: blur(20px);
  opacity: 0.7;
}
.cp-loading-blur img { width: 100%; height: 100%; object-fit: cover; }
.cp-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.5);
  color: #fff;
}
.cp-loading-text {
  font-size: 13.5px;
  font-weight: 700;
  margin-top: 4px;
}
.cp-loading-sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.7);
}

/* Circle progress */
.cp-circle {
  position: relative;
  width: 80px;
  height: 80px;
}
.cp-circle-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Result preview */
.cp-result {
  margin-top: 4px;
}
.cp-result-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-3);
  margin-bottom: 14px;
}
.cp-result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cp-result-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--green);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.cp-result-badge svg { color: var(--green); }
.cp-result-redo {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  padding: 8px;
}
.cp-result-redo:active { color: var(--blue); }

/* CTA buttons */
.cp-cta {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s, opacity 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cp-cta:active:not(:disabled) { transform: scale(0.985); }
.cp-cta-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(47, 108, 255, 0.32);
}
.cp-cta-save {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(47, 108, 255, 0.32);
}
.cp-cta-disabled {
  background: rgba(47, 108, 255, 0.1);
  color: var(--blue);
  cursor: not-allowed;
  box-shadow: none;
}
.cp-cta:disabled { cursor: not-allowed; }
.cp-status {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-2);
  text-align: center;
}

/* Subtitle line under section title (legacy) */
.subhead-line {
  margin: -6px 0 12px;
  font-size: 12px;
  color: var(--muted);
}

/* ============= Persona card tap-to-edit + manage mode ============= */
.persona-card { position: relative; }
.persona-card-tap {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: inherit;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.12s;
}
.persona-card-tap:active:not(:disabled) {
  transform: scale(0.98);
}
.persona-card-tap:disabled { cursor: default; }
.persona-edit-hint {
  font-size: 10.5px;
  color: var(--text-3);
  margin-left: auto;
  white-space: nowrap;
}

.mine-head-link.on {
  color: var(--blue);
  font-weight: 700;
}

/* Manage-mode delete overlay */
.persona-grid.manage .persona-card { animation: persona-jiggle 0.4s ease-out; }
.persona-del-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: rgba(255, 77, 95, 0.92);
  color: #fff;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  z-index: 3;
  transition: background 0.15s;
}
.persona-del-overlay:active { background: rgba(255, 77, 95, 1); }
.persona-del-overlay svg { color: #fff; }

@keyframes persona-jiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-1deg); }
  75% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

/* ============= Voice row (in create panel + edit sheet) ============= */
.voice-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.voice-row:active { background: var(--surface-3); }
.voice-row:hover { border-color: var(--blue); }
.voice-row-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #d3e4ff, #a6c3f5);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.voice-row-body { flex: 1 1; min-width: 0; }
.voice-row-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voice-row-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voice-row-action {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue);
  flex-shrink: 0;
}
.voice-row-action svg { width: 12px; height: 12px; }

/* ============= Edit persona sheet ============= */
.sheet-edit { padding: 14px 18px 22px; }
.edit-hero {
  display: grid;
  grid-template-columns: 88px 1fr;
  grid-gap: 14px;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: var(--surface-3);
  border-radius: 14px;
  margin: 4px 0 16px;
}
.edit-hero-img {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef3ff, #f7eafd);
}
.edit-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.edit-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}
.edit-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.edit-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  border: 1px solid rgba(255, 77, 95, 0.3);
  border-radius: 12px;
  background: var(--surface-1);
  color: #ff4d5f;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.edit-delete-btn:active { background: rgba(255, 77, 95, 0.08); }
.edit-delete-btn svg { color: #ff4d5f; }

/* ============= Voice picker sheet ============= */
.voice-list-sheet {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.voice-row-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.15s;
}
.voice-row-item.selected {
  border-color: var(--blue);
  background: rgba(47, 108, 255, 0.04);
}
.voice-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(47, 108, 255, 0.12);
  color: var(--blue);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.voice-play-btn.on { background: var(--blue); color: #fff; }
.voice-play-btn:active { transform: scale(0.92); }
.voice-row-tap {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  min-width: 0;
}
.voice-row-meta { flex: 1 1; min-width: 0; }
.voice-row-tags {
  display: flex;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.voice-row-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* ============= Voice source tabs (/avatars/create) ============= */
.voice-source-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 12px;
}
.vs-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
  text-align: center;
}
.vs-tab:active { transform: scale(0.97); }
.vs-tab.on {
  border-color: var(--blue);
  background: linear-gradient(180deg, rgba(47, 108, 255, 0.06), rgba(47, 108, 255, 0.02));
}
.vs-tab-icon {
  font-size: 22px;
  line-height: 1.2;
}
.vs-tab-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
}
.vs-tab.on .vs-tab-title { color: var(--blue); }
.vs-tab-sub {
  font-size: 10.5px;
  color: var(--muted);
}

/* Library mode — pick button when no voice selected */
.vs-pick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  border: 1.5px dashed rgba(47, 108, 255, 0.45);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(47, 108, 255, 0.04), rgba(255, 255, 255, 0));
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  transition: background 0.15s;
}
.vs-pick-btn:active { background: rgba(47, 108, 255, 0.08); }
.vs-pick-btn-plus {
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}

/* Library mode — picked voice card */
.vs-picked {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.vs-picked-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #d3e4ff, #a6c3f5);
  color: var(--blue);
  display: grid;
  place-items: center;
}
.vs-picked-body { min-width: 0; }
.vs-picked-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vs-picked-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}
.vs-picked-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.vs-link-btn {
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  padding: 2px 4px;
}
.vs-link-btn:active { color: var(--text); }
.vs-link-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.vs-link-btn.vs-link-btn-primary {
  background: var(--blue);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}
.vs-link-btn.vs-link-btn-primary:hover { background: #3a66e0; }
.vs-link-btn.vs-link-btn-primary:active { color: #fff; opacity: 0.9; }
.vs-picked + audio { margin-top: 10px; width: 100%; }

@media (min-width: 360px) {
  .vs-picked-actions { flex-direction: row; gap: 12px; align-items: center; }
}

/* ============= Inline AI sub-blocks (in CreatePanel) ============= */
.vs-source-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 12px;
}

.cp-ai-block {
  margin-top: 10px;
  padding: 14px;
  background: var(--surface-3);
  border-radius: 12px;
}
.cp-ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cp-ai-hint {
  font-size: 12.5px;
  color: var(--muted);
}
.cp-ai-block .cp-textarea,
.cp-ai-block .preview-audio { width: 100%; }

/* Compact body-type chips for AI person inline */
.cp-bodytype-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  gap: 8px;
  margin-top: 10px;
}
.cp-bodytype-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.cp-bodytype-card:active { transform: scale(0.97); }
.cp-bodytype-card.active {
  border-color: var(--blue);
  background: linear-gradient(180deg, rgba(47, 108, 255, 0.06), rgba(47, 108, 255, 0.02));
  color: var(--blue);
}
.cp-bodytype-card img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

/* =================================================================== *
 * /materials redesign — designed-from-mockup
 * =================================================================== */

/* === Full-width 智能导入 entry === */
.mat-import-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffe9dd 0%, #ffd6c0 60%, #ffe9dd 100%);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 6px 18px rgba(232, 123, 58, 0.16);
  position: relative;
  overflow: hidden;
}
.mat-import-cta::after {
  /* subtle decorative sparkle */
  content: "✨";
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 14px;
  opacity: 0.5;
}
.mat-import-cta:active { transform: scale(0.99); }
.mat-import-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(232, 123, 58, 0.18);
}
.mat-import-body { flex: 1 1; min-width: 0; }
.mat-import-title {
  font-size: 16px;
  font-weight: 800;
  color: #5a3a00;
}
.mat-import-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: rgba(90, 58, 0, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mat-import-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: #e87b3a;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
}

/* (legacy 2-card row, kept for safety if anywhere else uses it) === */
.mat-entries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}
.mat-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.mat-entry:active { transform: scale(0.98); }
.mat-entry-douyin {
  background: linear-gradient(135deg, #ffe9dd, #ffd9c2);
}
.mat-entry-ai {
  background: linear-gradient(135deg, #eceaff, #d8d4ff);
}
.mat-entry-emoji {
  font-size: 28px;
  flex-shrink: 0;
}
.mat-entry-douyin .mat-entry-emoji,
.mat-entry-ai .mat-entry-emoji {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06);
}
.mat-entry-body { min-width: 0; flex: 1 1; }
.mat-entry-title {
  font-size: 14px;
  font-weight: 800;
  color: #2d2419;
}
.mat-entry-ai .mat-entry-title { color: #2d2154; }
.mat-entry-sub {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(45, 36, 25, 0.65);
  line-height: 1.4;
}
.mat-entry-ai .mat-entry-sub { color: rgba(45, 33, 84, 0.65); }

/* === Filter chip row + manage toggle === */
.mat-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px !important;
}
.mat-chips {
  display: flex;
  gap: 8px;
  flex: 1 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.mat-chips::-webkit-scrollbar { display: none; }
.mat-chip {
  flex-shrink: 0;
  padding: 7px 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mat-chip:active { transform: scale(0.96); }
.mat-chip.on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(47, 108, 255, 0.3);
}
.mat-manage-btn {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  padding: 6px 4px;
}
.mat-manage-btn.on { color: var(--blue); }

/* === Search bar (focused state) === */
.mat-search-row {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-top: 12px !important;
}
.mat-search-field {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--blue);
  background: var(--surface-1);
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(47, 108, 255, 0.08);
}
.mat-search-field svg {
  color: var(--blue);
  flex-shrink: 0;
}
.mat-search-field input {
  flex: 1 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  min-width: 0;
}
.mat-search-cancel {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  padding: 4px;
}
.mat-result-line {
  margin: 0 0 10px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
}
.mat-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 14px;
}
.mat-pager button {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface-1);
  color: var(--text);
  font-weight: 800;
}
.mat-pager button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.mat-pager span {
  min-width: 58px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 800;
}

/* === Empty state === */
.mat-empty {
  background: var(--surface-1);
  border-radius: 20px;
  padding: 36px 20px 28px;
  text-align: center;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.mat-empty-img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin: 0 auto 18px;
  display: block;
}
.mat-empty-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.mat-empty-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 22px;
  line-height: 1.5;
}
.mat-empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #4f7cfe, #2f6cff);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(47, 108, 255, 0.36);
  transition: transform 0.12s;
}
.mat-empty-btn:active { transform: scale(0.98); }

/* === Material card list === */
.mat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mat-swipe-row {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  touch-action: pan-y;
}
.mat-swipe-action {
  position: absolute;
  inset: 0 0 0 auto;
  width: 176px;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  border-radius: 14px;
  background: #ff4d5f;
  overflow: hidden;
}
.mat-swipe-action button {
  width: 88px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.mat-swipe-action button.download {
  background: #4f7dff;
}
.mat-swipe-action button:active {
  background: rgba(0, 0, 0, 0.08);
}
.mat-swipe-content {
  will-change: transform;
}

.mat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 10px;
  z-index: 1;
}
.mat-card-tap {
  flex: 1 1;
  display: flex;
  align-items: stretch;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  min-width: 0;
}
.mat-cover {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #eef3ff, #f7eafd);
  display: grid;
  place-items: center;
}
.mat-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mat-cover-fallback {
  font-size: 28px;
}
.mat-body {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 0;
}
.mat-producer-row {
  display: flex;
  align-items: center;
  min-width: 0;
}
.mat-producer-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mat-producer-smart_import { background: #1484a6; }
.mat-producer-manual_import { background: #657187; }
.mat-producer-direct_rewrite { background: #eb7e22; }
.mat-producer-article_rewrite { background: #795ed6; }
.mat-producer-platform_generation { background: #2d945d; }
.mat-producer-unknown { background: #606e80; }
.mat-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mat-row1 .mat-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1;
  min-width: 0;
}
.mat-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 4px;
  flex-shrink: 0;
}
.mat-type.writing { background: #eceaff; color: #6b5df0; }
.mat-type.video { background: #ffe9dd; color: #e87b3a; }

.mat-row2 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.mat-row2 > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mat-dot { color: var(--text-4); }

.mat-row3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}
.mat-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 4px;
}
.mat-status-ok { background: rgba(34, 197, 94, 0.14); color: #1cb87a; }
.mat-status-warn { background: rgba(255, 162, 58, 0.16); color: #b07700; }
.mat-status-err { background: rgba(255, 77, 95, 0.12); color: #ff4d5f; }
.mat-status-blue { background: rgba(47, 108, 255, 0.1); color: #2f6cff; }
.mat-status-default { background: var(--surface-3); color: var(--text-3); }
.mat-meta {
  color: var(--muted);
}


/* === Manage mode === */
.mat-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--text-4);
  background: var(--surface-1);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-left: 2px;
}
.mat-check.on {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.mat-manage-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 76px; /* leave room above TabBar */
  z-index: 40;
  background: var(--surface-1);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.06);
}
.mat-manage-del {
  flex: 1 1;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: #ff4d5f;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(255, 77, 95, 0.32);
  transition: opacity 0.15s, transform 0.12s;
}
.mat-manage-del:active { transform: scale(0.98); }
.mat-manage-del:disabled {
  background: rgba(255, 77, 95, 0.4);
  cursor: not-allowed;
  box-shadow: none;
}
.mat-manage-all {
  flex-shrink: 0;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-1);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}

/* === Detail sheet === */
.sheet-mat-detail {
  padding: 0;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.mat-detail-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #cfe0ff, #a6c3f5);
  overflow: hidden;
}
.mat-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mat-detail-cover-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 48px;
}
.mat-detail-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 18px;
  padding-left: 4px;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.3);
}
.mat-detail-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1 1;
}
.mat-detail-typetag { margin-bottom: 8px; }
.mat-detail-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
}
.mat-detail-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.mat-detail-content {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
}
.mat-detail-content p { margin: 0 0 10px; }
.mat-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.mat-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(47, 108, 255, 0.08);
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 600;
}
.mat-detail-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px 18px;
  background: var(--surface-1);
  border-top: 1px solid var(--line);
}
.mat-detail-btn {
  flex: 1 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 44px;
  border-radius: 12px;
  border: 0;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.12s;
}
.mat-detail-btn:active { transform: scale(0.98); }
.mat-detail-btn.ghost {
  background: var(--surface-3);
  color: var(--text-2);
}
.mat-detail-btn.ghost:active { background: var(--line-strong); }
.mat-detail-btn.primary {
  flex: 1.4 1;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 5px 14px rgba(47, 108, 255, 0.28);
}

/* === Delete confirm modal === */
.mat-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 80;
  display: grid;
  place-items: center;
  animation: sheet-fade 0.2s ease;
  padding: 24px;
}
.mat-confirm {
  width: 100%;
  max-width: 320px;
  background: var(--surface-1);
  border-radius: 18px;
  padding: 24px 22px 18px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.2);
  animation: sheet-up 0.2s ease;
}
.mat-confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 77, 95, 0.12);
  color: #ff4d5f;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 900;
  margin: 0 auto 14px;
  line-height: 1;
}
.mat-confirm-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.mat-confirm-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 18px;
}
.mat-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}
.mat-confirm-btn {
  height: 42px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.mat-confirm-btn:active { transform: scale(0.97); }
.mat-confirm-btn.cancel {
  background: var(--surface-3);
  color: var(--text-2);
}
.mat-confirm-btn.danger {
  background: #ff4d5f;
  color: #fff;
  box-shadow: 0 5px 14px rgba(255, 77, 95, 0.32);
}

/* === Material 导入触发按钮 — 在素材页 head-actions 内，与 vip-btn 同款胶囊 === */
.mat-import-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8a3c, #ff6a2a);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid rgba(255, 106, 42, 0.35);
  box-shadow: var(--shadow-inset), 0 4px 10px rgba(255, 106, 42, 0.28);
  flex-shrink: 0;
  height: 32px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s, filter 0.15s;
}
.mat-import-trigger:hover { filter: brightness(1.04); }
.mat-import-trigger:active { transform: scale(0.96); }
.mat-import-trigger svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

/* === Material 导入抽屉 — 从底部上滑、比页面略小，顶部留出空白看见背景 === */
.mat-import-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: sheet-fade 0.22s ease;
  padding: 0;
}
.mat-import-modal {
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-radius: 20px 20px 0 0;
  padding: 8px 18px calc(20px + env(safe-area-inset-bottom)) 18px;
  box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.18);
  animation: sheet-slide-up 0.28s cubic-bezier(.32, .72, 0, 1);
  overflow: auto;
  /* 默认允许内部内容垂直滚动；启动下拽手势时由 JS 临时改成 none 锁定 */
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.mat-import-handle-area {
  /* 扩大命中区便于手指/鼠标抓住，禁用浏览器原生 pan-y 让自定义手势接管 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0 6px;
  margin: -8px -18px 4px;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.mat-import-handle-area:active { cursor: -webkit-grabbing; cursor: grabbing; }
.mat-import-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
  flex-shrink: 0;
  pointer-events: none;
  transition: background 0.15s;
}
.mat-import-handle-area:hover .mat-import-handle {
  background: var(--text-3);
}
.mat-import-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.mat-import-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
}
.mat-import-sub {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
}
.mat-import-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}
.mat-import-close:hover { background: var(--line-strong); }
.mat-import-close:active { transform: scale(0.94); }
.mat-import-group + .mat-import-group { margin-top: 14px; }
.mat-import-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-2);
  letter-spacing: .2px;
}
.mat-import-group-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.mat-import-group-dot.tone-blue { background: var(--blue); }
.mat-import-group-dot.tone-orange { background: var(--orange); }

/* === 抽屉内多步导航：← 返回 / 标题 / × 关闭 === */
.mat-import-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.mat-import-step-back {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 0;
  background: var(--surface-3);
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
  flex-shrink: 0;
}
.mat-import-step-back:hover { background: var(--line-strong); }
.mat-import-step-back:active { transform: scale(0.94); }
.mat-import-step-title {
  flex: 1 1;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
}
/* 步骤内容水平滑入动画 — 用 React key={step} 触发 */
.mat-import-step-content {
  animation: step-slide-in 0.3s cubic-bezier(.32, .72, 0, 1);
}
@keyframes step-slide-in {
  from { transform: translateX(36px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mat-import-step-content { animation: none; }
}

/* === 抽屉内：爆文智搜 历史 chip + 结果列表 === */
.search-history-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.search-history-chip {
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.search-history-chip:hover {
  background: var(--surface-3);
  color: var(--blue);
}
.search-result-stat {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-3);
  margin-bottom: 10px;
}
.search-row-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.search-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}
.search-row:hover { border-color: var(--line-strong); }
.search-row.checked {
  border-color: var(--blue);
  background: rgba(47, 108, 255, 0.04);
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.08);
}
.search-row-cover {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-3);
}
.search-row-cover.placeholder {
  display: grid;
  place-items: center;
  font-size: 24px;
  color: var(--text-3);
}
.search-row-body { flex: 1 1; min-width: 0; }
.search-row-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.4;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-row-meta {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.search-row-stats {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
}
.search-row-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface-1);
  display: grid;
  place-items: center;
  color: #fff;
  margin-top: 4px;
}
.search-row-check.on {
  background: var(--blue);
  border-color: var(--blue);
}
.search-batch-bar {
  position: -webkit-sticky;
  position: sticky;
  bottom: -8px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px -18px 0;
  padding: 10px 18px;
  background: var(--surface-1);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
  z-index: 1;
}
.search-batch-count { flex: 1 1; min-width: 0; }
.search-batch-btn {
  flex-shrink: 0;
  min-width: 130px;
  margin-top: 0 !important;
  height: 40px;
  padding: 0 18px;
}
.search-history-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.search-history-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

/* === 抽屉内：持续追踪 列表 === */
.leads-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leads-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.leads-row:hover { border-color: var(--line-strong); background: var(--surface-3); }
.leads-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.leads-row-icon img { width: 28px; height: 28px; object-fit: contain; }
.leads-row-body { flex: 1 1; min-width: 0; }
.leads-row-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leads-row-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leads-row-status {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}
.leads-row-status.on {
  color: #109d5b;
  background: rgba(28, 184, 122, 0.12);
}
.leads-row-status.off {
  color: var(--text-3);
  background: var(--surface-3);
}
.leads-row-arrow {
  flex-shrink: 0;
  color: var(--text-3);
  display: grid;
  place-items: center;
}

/* ghost-btn.danger 的红色变体（沿用 --red） */
.ghost-btn.danger {
  color: var(--red);
  border-color: rgba(255, 77, 95, 0.32);
}
.ghost-btn.danger:hover { background: rgba(255, 77, 95, 0.08); }

/* === 抽屉内：达人配置的"自动入库"开关 === */
.leads-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-3);
  cursor: pointer;
}
.leads-toggle-text { flex: 1 1; min-width: 0; }
.leads-toggle-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-1);
}
.leads-toggle-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-3);
}
.leads-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--line-strong);
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.leads-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.leads-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-1);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease;
}
.leads-toggle.on { background: var(--green); }
.leads-toggle.on .leads-toggle-knob { transform: translateX(20px); }

/* === 素材列表底部：线索管理入口卡 === */
.leads-entry-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(160deg, #f0fdf6 0%, #dcfce8 100%);
  box-shadow: 0 6px 18px rgba(20, 160, 88, 0.08);
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.leads-entry-card:active {
  transform: scale(0.98);
  box-shadow: 0 3px 10px rgba(20, 160, 88, 0.06);
}
.leads-entry-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(28, 184, 122, 0.16);
  color: #109d5b;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.leads-entry-text {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.leads-entry-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-1);
}
.leads-entry-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-2);
}
.leads-entry-badge {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}
.leads-entry-arrow {
  flex-shrink: 0;
  color: var(--text-3);
  display: grid;
  place-items: center;
}

/* === 线索管理 sheet 内：tab 切换 + 列表 === */
.leads-tab-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.leads-tab {
  flex: 1 1;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.12s, color 0.12s;
}
.leads-tab.on {
  background: var(--blue);
  color: #fff;
}
.leads-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.leads-tab:not(.on) .leads-tab-count {
  background: var(--surface-1);
  color: var(--text-2);
}

.leads-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface-3);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}
.leads-bulk-btn {
  border: 1px solid rgba(255, 77, 95, 0.32);
  background: var(--surface-1);
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s;
}
.leads-bulk-btn:hover { background: rgba(255, 77, 95, 0.08); }
.leads-bulk-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.leads-center-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.leads-center-row {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  align-items: flex-start;
}
.leads-center-cover {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-3);
}
.leads-center-cover.placeholder {
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--text-3);
}
.leads-center-body { flex: 1 1; min-width: 0; }
.leads-center-source {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  margin-bottom: 3px;
}
.leads-center-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.leads-center-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-3);
}
.leads-center-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.leads-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  border: 0;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.leads-act.primary {
  background: linear-gradient(135deg, #ff8a3c, #ff6a2a);
  color: #fff;
}
.leads-act.primary:active { transform: scale(0.96); }
.leads-act.primary.disabled { opacity: 0.55; cursor: default; }
.leads-act.ghost {
  background: var(--surface-3);
  color: var(--text-2);
}
.leads-act.queued {
  background: rgba(28, 184, 122, 0.12);
  color: #109d5b;
}

/* === 详情页全屏阅读态：隐藏顶部 sticky-head 和底部 TabBar === */
body[data-detail-fullscreen="1"] .sticky-head,
body[data-detail-fullscreen="1"] .tabbar {
  display: none !important;
}
body[data-detail-fullscreen="1"] .mat-detail-page {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 全屏切换按钮：与 notify-btn 同款 silver 胶囊（沿用现有 token） */
.mat-fullscreen-btn,
.mat-fullscreen-exit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: var(--silver-grad);
  color: var(--silver-fg);
  border: 1px solid var(--silver-border);
  box-shadow: var(--shadow-inset);
  font-size: 12.5px;
  font-weight: 700;
  height: 32px;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s, transform 0.12s;
}
.mat-fullscreen-btn:hover,
.mat-fullscreen-exit:hover { filter: brightness(1.04); }
.mat-fullscreen-btn:active,
.mat-fullscreen-exit:active { transform: scale(0.96); }
.mat-fullscreen-btn svg,
.mat-fullscreen-exit svg { flex-shrink: 0; color: var(--silver-fg); }

/* 全屏态下，缩回按钮浮在右上角 */
.mat-fullscreen-exit {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, calc((100vw - 440px) / 2 + 14px));
  z-index: 90;
}

/* === 详情页同样套素材列表页的渐变背景，让顶部 head 与列表 head 视觉延续 === */
.mat-detail-page {
  background-color: #eaf1fb;
  background-image:
    radial-gradient(600px 220px at 70% -40px, rgba(61, 123, 255, 0.12), transparent 70%),
    radial-gradient(420px 180px at 15% 20px, rgba(255, 160, 80, 0.1), transparent 70%),
    linear-gradient(180deg, #eaf1fb 0%, #f4f7fc 320px);
  background-repeat: no-repeat;
  min-height: 100dvh;
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}
.mat-pop {
  position: relative;
  background: var(--surface-1);
  display: flex;
  flex-direction: column;
}

/* === 标题图像上方的工具栏（不固定，跟随滚动）=== */
.mat-pop-toolbar {
  display: flex;
  gap: 8px;
  padding: 12px 14px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--surface-1);
}
.mat-pop-toolbar::-webkit-scrollbar { display: none; }
.mat-pop-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: var(--silver-grad);
  color: var(--silver-fg);
  border: 1px solid var(--silver-border);
  box-shadow: var(--shadow-inset);
  font-size: 12.5px;
  font-weight: 700;
  height: 32px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: filter 0.15s, transform 0.12s;
}
.mat-pop-tool:hover { filter: brightness(1.04); }
.mat-pop-tool:active { transform: scale(0.96); }
.mat-pop-tool:disabled { opacity: 0.55; cursor: not-allowed; }
.mat-pop-tool svg { color: currentColor; flex-shrink: 0; }
.mat-pop-tool.danger {
  background: linear-gradient(135deg, #fff5f6 0%, #ffe1e6 100%);
  color: #d6354a;
  border-color: rgba(214, 53, 74, 0.28);
  /* 危险操作（删除）单独靠右；前面留 auto 间距，避免和下载/导出挨太近误触 */
  margin-left: auto;
}

.mat-pop-cover {
  width: 100%;
  max-height: 56vh;
  background: linear-gradient(135deg, #eef3ff, #f7eafd);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mat-pop-cover img {
  max-width: 100%;
  max-height: 56vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.mat-pop-cover-empty {
  font-size: 64px;
  padding: 80px 0;
  color: var(--text-3);
}

.mat-pop-body {
  padding: 18px 20px 0;
}
.mat-pop-typetag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.mat-pop-meta {
  font-size: 12px;
  color: var(--muted);
}
.mat-pop-title {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
}
.mat-pop-creator {
  font-size: 12.5px;
  color: var(--text-2);
  margin-bottom: 14px;
}
.mat-pop-content {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.7;
  margin-top: 14px;
}
.mat-pop-content p { margin: 0 0 12px; }
.mat-pop-content-html {
  word-break: break-word;
}
.mat-pop-content-html img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px auto;
  border-radius: 8px;
}
.mat-pop-content-html figure,
.mat-preview-content-html figure {
  margin: 14px 0;
}
.mat-pop-content-html figure img,
.mat-preview-content-html figure img {
  margin: 0 auto;
}
.mat-pop-content-html video,
.mat-pop-video {
  display: block;
  width: 100%;
  max-height: 60vh;
  margin: 16px 0;
  border-radius: 8px;
  background: #000;
}

/* AI 自制视频 hero 区：替代 cover 图位置，作为详情页第一屏 */
.mat-pop-cover-video {
  background: #000;
  aspect-ratio: 9 / 16;
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mat-pop-hero-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.mat-pop-content-html a {
  color: var(--blue);
  text-decoration: none;
}
.mat-pop-content-html section,
.mat-pop-content-html blockquote {
  max-width: 100%;
}
.mat-pop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.mat-pop-actions {
  display: flex;
  gap: 8px;
  margin: 14px 0 16px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* Reuse existing `.mat-detail-btn` styles, just add a danger variant */
.mat-detail-btn.danger { color: #ff4d5f; }
.mat-detail-btn.danger:active { background: rgba(255, 77, 95, 0.08); }

/* Empty state hero card */
.scene-empty-hero {
  display: grid;
  grid-template-columns: 110px 1fr;
  grid-gap: 14px;
  gap: 14px;
  align-items: center;
  padding: 18px 16px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
}
.scene-empty-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  flex-shrink: 0;
}
.scene-empty-body { min-width: 0; }
.scene-empty-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.scene-empty-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 12px;
}
.scene-empty-btn {
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(47, 108, 255, 0.28);
  transition: transform 0.12s;
}
.scene-empty-btn:active { transform: scale(0.97); }

/* When empty, the "+ 新建分身" tile sits alone — give it a placeholder neighbor */
.scene-grid-solo {
  grid-template-columns: 1fr 1fr;
}
.scene-grid-solo > .scene-card-new {
  grid-column: 1;
}
.scene-grid-solo::after {
  content: "";
  grid-column: 2;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background: rgba(47, 108, 255, 0.015);
  aspect-ratio: 2 / 3;
  align-self: stretch;
}

/* ========== Create panel (v3) ========== */
.create-panel {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 16px 16px;
  box-shadow: var(--shadow-md);
}
.create-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.create-panel-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.create-panel-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.create-panel-close:active { background: rgba(15, 23, 42, 0.05); color: var(--text-2); }

/* Form fields inside create panel */
.cp-field { margin-top: 14px; }
.cp-field:first-of-type { margin-top: 0; }
.cp-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cp-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 8px;
}
.cp-counter {
  font-size: 11px;
  color: var(--muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.cp-step-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}
.cp-step {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  background: rgba(47, 108, 255, 0.1);
  border-radius: 999px;
}
.cp-input,
.cp-textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface-1);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cp-input { height: 44px; }
.cp-textarea { resize: none; line-height: 1.5; }
.cp-input:focus,
.cp-textarea:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.08);
}
.cp-input::placeholder { color: var(--text-4); }

/* Pick card (selected person / bg) */
.cp-pick {
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  position: relative;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: default;
}
.cp-pick > img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
}
.cp-pick-fallback {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eef3ff, #d6e2ff);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 900;
  color: var(--blue);
}
.cp-pick-fallback.empty { color: var(--text-3); background: var(--surface-3); border: 1px dashed var(--line-strong); }
.cp-pick-body { min-width: 0; }
.cp-pick-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-pick-name.muted { color: var(--text-3); font-weight: 600; }
.cp-pick-meta {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-pick-clear {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: rgba(15, 23, 42, 0.06);
  color: var(--text-3);
  font-size: 11px;
  cursor: pointer;
}
.cp-pick-clear:active { background: rgba(15, 23, 42, 0.12); color: var(--text-2); }
.cp-pick-empty {
  cursor: pointer;
  border-style: dashed;
  background: var(--surface-1);
}
.cp-pick-empty:active { background: var(--surface-3); }

/* Segmented action row */
.cp-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 10px;
}
.cp-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-1);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.cp-seg-btn:active { transform: scale(0.97); background: var(--surface-3); }
.cp-seg-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.cp-seg-btn svg { color: var(--text-3); }
.cp-seg-btn.block { width: 100%; }
.cp-hint {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  color: var(--blue);
  background: rgba(47, 108, 255, 0.06);
  border-radius: 10px;
  line-height: 1.5;
}

/* Background radio cards */
.bg-mode-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bg-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.bg-radio:active { background: var(--surface-3); }
.bg-radio.on {
  border-color: var(--blue);
  background: linear-gradient(180deg, rgba(47, 108, 255, 0.05), rgba(47, 108, 255, 0.01));
}
.bg-radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--text-3);
  background: var(--surface-1);
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.bg-radio.on .bg-radio-dot {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: inset 0 0 0 4px var(--surface-1);
}
.bg-radio-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bg-radio-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}
.bg-radio.on .bg-radio-title { color: var(--blue); }
.bg-radio-sub {
  font-size: 11.5px;
  color: var(--muted);
}

.bg-mode-content {
  margin-top: 12px;
  padding: 12px;
  background: var(--surface-3);
  border-radius: 12px;
}

/* Preset grid */
.cp-preset-head {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 8px;
}
.cp-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 8px;
  gap: 8px;
}
.cp-preset-tile {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.12s;
}
.cp-preset-tile:active { transform: scale(0.96); }
.cp-preset-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef3ff, #d6e2ff);
}
.cp-preset-img img { width: 100%; height: 100%; object-fit: cover; }
.cp-preset-tile.selected .cp-preset-img {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.cp-preset-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 8px rgba(47, 108, 255, 0.4);
}
.cp-preset-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-preset-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
}

/* Compose preview */
.cp-preview {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--shadow-sm);
}
.cp-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Action buttons */
.cp-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.cp-btn {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.12s, background 0.15s, opacity 0.15s;
}
.cp-btn:active { transform: scale(0.985); }
.cp-btn[disabled] { cursor: not-allowed; opacity: 0.5; }
.cp-btn[disabled]:active { transform: none; }
.cp-btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(47, 108, 255, 0.28);
}
.cp-btn-primary[disabled] { box-shadow: none; }
.cp-btn-primary.is-loading {
  background: linear-gradient(135deg, #4f7cfe, #2f6cff);
  cursor: progress;
  opacity: 1;
}
.cp-btn-save {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(47, 108, 255, 0.28);
}
.cp-btn-save[disabled] {
  background: var(--surface-3);
  color: var(--text-3);
  box-shadow: none;
}
.cp-btn-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  animation: play-loading-spin 0.7s linear infinite;
}

.cp-status {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-2);
}

/* ========== Delete confirm sheet ========== */
.sheet-confirm {
  padding: 20px 20px 24px;
  text-align: center;
}
.confirm-icon-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 12px;
}
.confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 77, 95, 0.12);
  color: #ff4d5f;
  display: grid;
  place-items: center;
}
.confirm-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.confirm-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 18px;
}
.confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}
.confirm-btn {
  height: 44px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}
.confirm-btn:active { transform: scale(0.98); }
.confirm-btn-cancel {
  background: var(--surface-3);
  color: var(--text-2);
}
.confirm-btn-danger {
  background: #ff4d5f;
  color: #fff;
  box-shadow: 0 5px 14px rgba(255, 77, 95, 0.32);
}

/* =================================================================== *
 * /avatars/create — body-type cards & in-page voice recorder
 * =================================================================== */

/* Body type cards (全身 / 半身 / 头肩) */
.body-type-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
  margin-top: 8px;
}
.body-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.body-type-card:active { transform: scale(0.97); }
.body-type-card.active {
  border-color: var(--blue);
  background: linear-gradient(180deg, rgba(47, 108, 255, 0.06), rgba(47, 108, 255, 0.02));
  box-shadow: 0 4px 14px rgba(47, 108, 255, 0.12);
}
.body-type-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #eef3ff, #f7eafd);
  overflow: hidden;
}
.body-type-img img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}
.body-type-card.active .body-type-img {
  background: linear-gradient(135deg, #dbe8ff, #e9d8ff);
}
.body-type-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.body-type-card.active .body-type-label { color: var(--blue); }

/* Block upload card variant */
.upload-card-block {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px !important;
  font-size: 14px;
  color: var(--text-2);
}
.upload-card-block svg { flex-shrink: 0; color: var(--blue); }
.upload-card-block span { font-weight: 600; }

/* ========== In-page voice recorder ========== */
.rec {
  margin-top: 16px;
  padding: 16px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.rec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.rec-head-left {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}
.rec-step {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 8px rgba(47, 108, 255, 0.3);
}
.rec-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}
.rec-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.rec-time {
  flex-shrink: 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.5px;
}

.rec-guide {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface-3);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  resize: none;
  font-family: inherit;
  letter-spacing: 0.3px;
}
.rec-guide:focus {
  outline: 0;
  border-color: var(--blue);
  background: var(--surface-1);
}

.rec-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(255, 77, 95, 0.08);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #c0334a;
}
.rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4d5f;
  animation: rec-pulse 1.1s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes rec-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}
.rec-meter-time {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.rec-meter-need {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: #c0334a;
  background: rgba(255, 255, 255, 0.7);
  padding: 3px 9px;
  border-radius: 999px;
}
.rec-meter-ok {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: #1cb87a;
  background: rgba(28, 184, 122, 0.12);
  padding: 3px 9px;
  border-radius: 999px;
}

.rec-preview {
  width: 100%;
  margin-top: 12px;
  height: 40px;
  border-radius: 12px;
}
.rec-warn {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: #b07700;
  background: rgba(255, 162, 58, 0.12);
  border-radius: 10px;
}
.rec-err {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: #c0334a;
  background: rgba(255, 77, 95, 0.1);
  border-radius: 10px;
}

.rec-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.rec-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1;
  height: 48px;
  border: 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}
.rec-btn:active { transform: scale(0.98); }
.rec-btn:disabled { cursor: progress; opacity: 0.85; }
.rec-btn-start {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(47, 108, 255, 0.35);
}
.rec-btn-stop {
  background: #ff4d5f;
  color: #fff;
  box-shadow: 0 6px 18px rgba(255, 77, 95, 0.32);
  animation: rec-glow 1.4s ease-in-out infinite;
}
@keyframes rec-glow {
  0%, 100% { box-shadow: 0 6px 18px rgba(255, 77, 95, 0.32); }
  50% { box-shadow: 0 6px 26px rgba(255, 77, 95, 0.55); }
}
.rec-btn-ghost {
  background: var(--surface-3);
  color: var(--text-2);
  flex: 0 0 96px;
}
.rec-btn-confirm {
  background: rgba(28, 184, 122, 0.12);
  color: #1cb87a;
  cursor: default;
}
.rec-btn-confirm.rec-btn-warn {
  background: rgba(255, 162, 58, 0.14);
  color: #b07700;
}

/* ============================================================ *
 *  数字人快制 (/studio) — quick studio layout                   *
 * ============================================================ */
.studio-quick .section { display: flex; flex-direction: column; gap: 12px; padding-bottom: 32px; }

.quick-step { padding: 0; overflow: hidden; }
.quick-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface-1);
}
.quick-step-head.clickable { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.quick-step.done .quick-step-head { background: linear-gradient(180deg, #f0f6ff 0%, #ffffff 100%); }

.quick-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  flex: 0 0 auto;
}
.quick-step-num.done {
  background: linear-gradient(135deg, #34c777, #1cb87a);
}
.quick-step-title {
  font-weight: 800;
  font-size: 14.5px;
  color: var(--text);
  flex: 1 1 auto;
}
.quick-step-badge {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--panel-soft);
}
.quick-step-badge.ok {
  color: #1cb87a;
  background: #e3f7ec;
}
.quick-step-caret {
  margin-left: 4px;
  color: var(--muted);
  display: grid;
  place-items: center;
  transition: transform .18s ease;
}
.quick-step-caret.open { transform: rotate(180deg); }
.quick-step-body {
  padding: 4px 16px 16px;
}

/* ----- step 1: 选分身 ----- */
/* Tetris 式 grid 布局：3 列 × N 行，每行 88px 高
   - 竖图（V）= 1 col × 2 row → 88×180（含 gap）
   - 横图（H）= 2 col × 1 row → 180×88（含 gap）
   - 方图（S）= 1 col × 1 row → 88×88
   每"行块"= 6 单位（3 列 × 2 行）；3V / 1V+2H / 6S 都正好填满 */
.quick-scene-row {
  display: grid;
  grid-template-columns: repeat(3, 88px);
  grid-auto-rows: 88px;
  grid-gap: 4px;
  gap: 4px;
  grid-auto-flow: dense;     /* 紧凑 packing，空格优先填后面的小卡 */
  padding: 4px 2px 6px;
  justify-content: start;
}
.quick-scene-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--surface-1);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  overflow: hidden;
}
.quick-scene-card.kind-v { grid-row: span 2; }       /* 竖图：1 col × 2 row */
.quick-scene-card.kind-h { grid-column: span 2; }    /* 横图：2 col × 1 row */
.quick-scene-card.kind-s { /* 1 col × 1 row, 默认 */ }
.quick-scene-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.14);
}
.quick-scene-img {
  flex: 1 1 auto;
  width: 100%;
  border-radius: 9px;
  overflow: hidden;
  background: linear-gradient(135deg, #eef3ff, #fde9f1);
  display: grid;
  place-items: center;
  color: var(--blue);
  position: relative;
  min-height: 0;
}
.quick-scene-img img {
  /* 默认 88×156（兜底，inline style 会覆盖给 Tetris 式动态宽度）*/
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;  /* 优先保留头脸 */
  display: block;
}
.quick-scene-img.add {
  border: 1.5px dashed var(--line-strong);
  background: var(--panel-soft);
  color: var(--muted);
}
.quick-scene-plus {
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}
.quick-scene-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(47,108,255,0.3);
}
.quick-scene-name {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  padding: 0 2px 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-scene-card.add { color: var(--muted); }

/* 我的分身 / 系统分身 子栏目（可折叠）*/
.quick-scene-section { margin-bottom: 14px; }
.quick-scene-section:last-child { margin-bottom: 0; }
.quick-scene-section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 2px 6px;
  padding: 4px 6px;
  letter-spacing: 0.02em;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
}
.quick-scene-section-title:hover { color: var(--text); background: var(--surface-1); }
.quick-scene-section-caret {
  font-size: 9px;
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--muted);
}
.quick-scene-section-caret.open { transform: rotate(90deg); }
.quick-scene-section-count {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.quick-scene-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  letter-spacing: 0.04em;
}
.quick-scene-badge.custom { background: rgba(47, 108, 255, 0.8); }
.quick-scene-badge.system { background: rgba(99, 102, 241, 0.8); }

/* empty state for step 1 */
.quick-empty {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: stretch;
  min-height: 180px;
}
.quick-empty-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  padding: 12px 6px;
}
.quick-empty-add .quick-scene-plus { font-size: 30px; color: var(--blue); }
.quick-empty-add-sub {
  font-size: 11.5px;
  color: var(--blue);
  font-weight: 700;
}
.quick-empty-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, #eaf1ff 0%, #f5f8ff 100%);
  padding: 16px 10px;
  text-align: center;
}
.quick-empty-hero img {
  width: 92px;
  height: 92px;
  object-fit: contain;
}
.quick-empty-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}
.quick-empty-sub {
  font-size: 12px;
  color: var(--muted);
}

/* ----- step 2: 写脚本 ----- */
.quick-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 4px;
  gap: 4px;
  padding: 5px;
  background: linear-gradient(180deg, #eef2f9 0%, #e9eef8 100%);
  border: 1px solid rgba(15, 23, 42, 0.04);
  border-radius: 13px;
  margin-bottom: 14px;
}
.quick-mode-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color .15s, background .15s, transform .12s;
}
.quick-mode-tab:hover:not(.on) {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.5);
}
.quick-mode-tab.on {
  background: var(--surface-1);
  color: var(--blue);
  font-weight: 700;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 10px rgba(47, 108, 255, 0.10);
}
.quick-mode-tab svg { width: 14px; height: 14px; }

.quick-ai-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f6f9ff 0%, #f1f5ff 100%);
  border: 1px solid rgba(47, 108, 255, 0.08);
}
.quick-ai-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
}
.quick-ai-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  flex: 0 0 64px;
  letter-spacing: 0.04em;
  font-feature-settings: "ss01";
}
.quick-ai-row .chip-scroll {
  flex: 1 1;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.quick-ai-row .chip-scroll::-webkit-scrollbar { display: none; }
.quick-ai-select {
  flex: 1 1;
  height: 42px;
  padding: 0 38px 0 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: 0.01em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  /* 浅渐变背景 + 上方 inset 高光，模拟实体感 */
  background:
    linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 10px;
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' stroke='%2394a3b8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 14px center, 0 0;
  background-size: 12px 8px, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 1px rgba(15, 23, 42, 0.03);
  transition: border-color .15s, box-shadow .15s, transform .12s, background .15s;
}
.quick-ai-select:hover {
  border-color: rgba(47, 108, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 0 0 3px rgba(47, 108, 255, 0.04);
}
.quick-ai-select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 3px rgba(47, 108, 255, 0.16);
}
.quick-ai-select:active {
  transform: scale(0.998);
}

/* Step 3 高级选项卡：包住所有 row，给统一边框 + 内边距 + 行间分隔线 */
.quick-cfg-card {
  display: flex;
  flex-direction: column;
  padding: 6px 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.03);
}
.quick-cfg-card .quick-ai-row {
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.quick-cfg-card .quick-ai-row:last-child {
  border-bottom: 0;
}

/* 音色 inline 显示：名字 + 副标 + 试听小按钮 */
.quick-voice-inline {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* 跟 .quick-ai-select 的值文字保持同款字体：14px / weight 500 / text-1 / 同 letter-spacing */
.quick-voice-name-mini {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.quick-voice-sub-mini {
  flex: 1 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.quick-voice-empty-mini {
  flex: 1 1;
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}
/* 试听按钮：跟 select 的尺寸视觉上对齐，避免一行像两个不同部件 */
.quick-voice-play {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-1);
  border-radius: 50%;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
  flex: 0 0 26px;
  margin-right: 14px;  /* 与 select 右内距 14px 对齐，看起来在同一垂直线 */
}
.quick-voice-play:hover:not(:disabled) {
  color: var(--blue);
  border-color: var(--blue);
  background: rgba(47, 108, 255, 0.06);
}
.quick-voice-play:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.quick-ai-btn {
  width: 100%;
  margin-top: 2px;
  height: 42px;
  border-radius: 11px;
  font-size: 14px;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid rgba(47, 108, 255, 0.2);
  color: var(--blue);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(15, 23, 42, 0.04);
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.quick-ai-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #f0f6ff 0%, #e6efff 100%);
  border-color: var(--blue);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 12px rgba(47, 108, 255, 0.14);
  transform: translateY(-1px);
}
.quick-ai-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.quick-adv {
  margin-top: 10px;
  border: 1px solid var(--border-1);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
}
.quick-adv-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.quick-adv-toggle:hover { color: var(--text-1); }
.quick-adv-caret {
  font-size: 10px;
  color: var(--muted);
}
.quick-adv-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 12px 12px;
  border-top: 1px dashed var(--border-1);
}
.quick-adv-help {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
  padding-top: 2px;
}

.quick-import-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.quick-material-stat {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  margin-top: -4px;
}

.quick-script-wrap { display: flex; flex-direction: column; gap: 10px; }
.quick-script-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding: 0 2px;
}
.quick-script-count { font-weight: 600; color: var(--text-2); }
.quick-script-hint { color: var(--blue); font-weight: 500; }

/* ----- step 3: 配置 ----- */
.quick-cfg-block { margin-bottom: 14px; }
.quick-cfg-block:last-child { margin-bottom: 0; }
.quick-cfg-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}
.quick-cfg-help {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.quick-cfg-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.quick-cfg-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
}

.quick-voice-card {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
}
.quick-voice-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #cfe0ff, #a6c3f5);
  color: #fff;
  display: grid;
  place-items: center;
}
.quick-voice-name { font-weight: 800; font-size: 14px; color: var(--text); }
.quick-voice-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.quick-voice-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.quick-speed {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  height: 6px;
  background: linear-gradient(90deg, #cfe0ff, #a6c3f5);
  border-radius: 999px;
  outline: none;
}
.quick-speed::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 3px solid var(--blue);
  box-shadow: 0 4px 10px rgba(47,108,255,0.3);
  cursor: pointer;
}
.quick-speed::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 3px solid var(--blue);
  box-shadow: 0 4px 10px rgba(47,108,255,0.3);
  cursor: pointer;
}
.quick-speed-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--muted);
}

.quick-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.quick-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.quick-switch input { opacity: 0; width: 0; height: 0; }
.quick-switch-track {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #d6dee8;
  border-radius: 999px;
  transition: background .18s ease;
}
.quick-switch-track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-1);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  transition: transform .18s ease;
}
.quick-switch input:checked + .quick-switch-track { background: var(--blue); }
.quick-switch input:checked + .quick-switch-track::before { transform: translateX(20px); }

.quick-advanced {
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 4px;
}
.quick-advanced summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  list-style: none;
}
.quick-advanced summary::-webkit-details-marker { display: none; }
.quick-advanced[open] summary { color: var(--text); }

/* ----- bottom CTA / progress / result / error ----- */
.quick-cta { padding: 18px; }
.quick-generate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 12px;
  background: linear-gradient(180deg, #4080ff 0%, #2f6cff 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 4px 14px rgba(47, 108, 255, 0.28),
    0 1px 2px rgba(15, 23, 42, 0.10);
  transition: transform .12s, box-shadow .15s, background .15s;
}
.quick-generate-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #4d8aff 0%, #3a76ff 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 6px 18px rgba(47, 108, 255, 0.34),
    0 1px 2px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
}
.quick-generate-btn:active:not(:disabled) { transform: translateY(0); }
.quick-generate-btn:disabled {
  background: linear-gradient(180deg, #c8d3e6 0%, #b7c3d9 100%);
  box-shadow: none;
  cursor: not-allowed;
}
.quick-cta-meta {
  margin-top: 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.quick-cta-hint {
  margin-top: 8px;
  text-align: center;
  font-size: 12.5px;
  color: #b07700;
  letter-spacing: 0.02em;
}
.import-risk-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.quick-progress-card {
  padding: 22px 18px 20px;
  text-align: center;
}
.quick-progress-hero {
  width: 110px;
  height: 110px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #eaf1ff 0%, #f4f7fc 70%);
}
.quick-progress-hero img { width: 80px; height: 80px; object-fit: contain; }
.quick-progress-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}
.quick-progress-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  margin-bottom: 14px;
}
.quick-progress-bar {
  height: 10px;
  background: #e5edff;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.quick-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6f9cff, #2f6cff);
  border-radius: 999px;
  transition: width .4s ease;
  background-size: 200% 100%;
  animation: quick-progress-shimmer 2.4s linear infinite;
}
@keyframes quick-progress-shimmer {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}
.quick-progress-pct {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--blue);
}
.quick-progress-tip {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.quick-result-card { padding: 14px; }
.quick-result-video {
  width: 100%;
  border-radius: 12px;
  background: #000;
  aspect-ratio: 9 / 16;
  max-height: 60vh;
  object-fit: contain;
}
.quick-result-pending {
  text-align: center;
  padding: 36px 16px;
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
}
.quick-result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 12px;
}
.quick-result-actions .ghost-btn,
.quick-result-actions .primary-btn {
  margin: 0;
  width: 100%;
  padding: 11px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
}
.quick-result-actions a.ghost-btn { text-decoration: none; }
.quick-result-primary { text-decoration: none; }

.quick-error-card { padding: 16px; }
.quick-error-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 12px;
  background: #fff1f2;
  border: 1px solid #ffd2d6;
}
.quick-error-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ff4d5f;
  color: #fff;
  font-weight: 800;
}
.quick-error-title {
  font-size: 14px;
  font-weight: 800;
  color: #c4344a;
}
.quick-error-msg {
  margin-top: 4px;
  font-size: 12.5px;
  color: #76324b;
  line-height: 1.6;
}
.quick-error-code {
  margin-top: 4px;
  font-size: 11.5px;
  color: #a6516e;
}
.quick-error-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}
.quick-error-actions .ghost-btn,
.quick-error-actions .primary-btn { margin: 0; width: 100%; }

/* small link buttons used in voice card */
.studio-quick .vs-link-btn {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 700;
  font-size: 12.5px;
  padding: 4px 6px;
  cursor: pointer;
}
.studio-quick .vs-link-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.studio-quick .vs-pick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}
.studio-quick .vs-pick-btn-plus {
  font-size: 18px;
  font-weight: 600;
  color: var(--blue);
}

/* Studio button icons (designed via logo-creator) */
.btn-icon-img {
  display: inline-block;
  object-fit: contain;
  vertical-align: -3px;
  flex: 0 0 auto;
}
/* Used on primary buttons whose background is blue gradient — recolor blue PNG to white */
.btn-icon-white {
  filter: brightness(0) invert(1);
}
/* In quick mode tabs the icon should align with text and use real color */
.quick-mode-tab .btn-icon-img { width: 16px; height: 16px; }
.quick-mode-tab.on .btn-icon-img { /* already blue, stays as-is */ }
.quick-mode-tab:not(.on) .btn-icon-img { opacity: 0.7; }
.quick-result-actions .btn-icon-img { width: 16px; height: 16px; }
.quick-generate-btn .btn-icon-img { width: 18px; height: 18px; }
.quick-error-actions .primary-btn .btn-icon-img { width: 16px; height: 16px; }
.quick-voice-icon .btn-icon-img { width: 22px; height: 22px; }

/* small header link to switch between 通用制作 and 数字人快制 */
.quick-mode-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef3ff, #e3eaff);
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(47, 108, 255, 0.18);
}
.quick-mode-link:active { transform: scale(0.97); }

/* Voice card is read-only when bound to scene */
.quick-voice-card.locked { background: var(--panel-soft); }
.quick-voice-empty {
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

/* Announce modal (centered floating dialog) */
.announce .an-cta { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.announce .an-cta:hover { opacity: 0.85; }

.an-modal-root {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 20px;
}
.an-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  animation: an-fade-in 0.15s ease;
}
.an-modal {
  position: relative;
  width: min(360px, calc(100vw - 32px));
  background: var(--surface-1);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  padding: 20px 18px 16px;
  animation: an-modal-in 0.2s ease;
}
@keyframes an-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes an-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.an-modal-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 0;
  background: var(--panel-soft);
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.an-modal-close:hover { background: var(--surface-3); color: var(--text-1); }
.an-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-right: 32px;
}
.an-modal-icon {
  width: 44px; height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(255, 156, 60, 0.22));
}
.an-modal-title { font-weight: 800; font-size: 15.5px; color: var(--text-1); }
.an-modal-date { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.an-modal-body { font-size: 13.5px; line-height: 1.7; color: var(--text-2); }
.an-modal-body p { margin: 0 0 6px; }
.an-modal-body ul { margin: 0; padding-left: 18px; }
.an-modal-body li { margin: 3px 0; }
.an-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: flex-end;
}
.an-modal-btn {
  border: 0;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, transform 0.1s;
}
.an-modal-btn:active { transform: scale(0.97); }
.an-modal-btn.ghost {
  background: var(--panel-soft);
  color: var(--text-2);
}
.an-modal-btn.ghost:hover { background: var(--surface-3); }
.an-modal-btn.primary {
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff;
  box-shadow: 0 6px 14px rgba(47, 108, 255, 0.25);
}

/* Clear (X) inside search field */
.mat-search-clear {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  display: grid;
  place-items: center;
}
.mat-search-clear:hover { background: var(--panel-soft); color: var(--text); }

/* Channel inline icon in material card row */
.mat-channel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mat-channel-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: -2px;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.12));
}

/* ========== /search 爆文智搜 ========== */
.search-keyword-input {
  width: 100%;
  border: 1.5px solid var(--blue);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface-1);
  font-size: 14px;
  font-weight: 600;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(47, 108, 255, 0.08);
}
.search-keyword-input:focus { border-color: var(--blue); }

.search-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 700;
}

.search-result-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.search-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.search-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface-1);
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
  align-self: center;
}
.search-check.on {
  background: var(--blue);
  border-color: var(--blue);
}
.search-cover {
  width: 80px; height: 80px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-soft);
  display: grid;
  place-items: center;
  color: var(--muted);
}
.search-cover img { width: 100%; height: 100%; object-fit: cover; }
.search-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.search-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
}
.search-dot { color: var(--text-4); }
.search-badge {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.search-badge.headline { background: #ffe9dd; color: #b95b00; }
.search-badge.original { background: #e3f2ff; color: #1f6fff; }
.search-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-2);
  font-weight: 600;
}
.search-cat {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

/* Materials entry tiles — 4 buttons in one row */
.mat-entry-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  gap: 10px;
  margin-top: 4px;
}
.mat-entry-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px 12px;
  border-radius: 18px;
  background: var(--surface-1);
  box-shadow: 0 6px 18px rgba(91, 111, 255, 0.07);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mat-entry-tile:active {
  transform: scale(0.96);
  box-shadow: 0 3px 8px rgba(91, 111, 255, 0.1);
}
.mat-entry-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.15));
}
.mat-entry-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
}

/* Materials source/channel dropdown (inline next to type chips) */
.mat-source-dd {
  position: relative;
  display: inline-block;
}
.mat-source-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mat-source-trigger-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.12));
}
.mat-source-caret {
  transition: transform 0.18s ease;
}
.mat-source-caret.open { transform: rotate(180deg); }
.mat-source-menu {
  position: fixed;
  min-width: 180px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface-1);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
  z-index: 999;
  padding: 4px;
  animation: mat-dd-in 0.14s ease;
}
@keyframes mat-dd-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.mat-source-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.mat-source-item:hover { background: var(--panel-soft); }
.mat-source-item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.mat-source-item span { flex: 1 1; }
.mat-source-item.on {
  color: var(--blue);
  background: #eef3ff;
}
.mat-source-item.on svg { color: var(--blue); }

/* ========== /console Worker 管理控制台（桌面端静态稿） ========== */
.console-page {
  min-width: 1200px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 220px 1fr;
  background: #f6f8fc;
  color: #121826;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.console-page * { letter-spacing: 0; }
.console-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e6ebf3;
  background: rgba(255, 255, 255, .92);
  box-shadow: 8px 0 24px rgba(18, 24, 38, .03);
}
.console-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 72px;
  padding: 0 22px;
  border-bottom: 1px solid #edf1f7;
  font-size: 18px;
}
.console-logo-mark {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #4f8cff, #2764e8);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(47, 108, 255, .26);
}
.console-nav { display: grid; grid-gap: 7px; gap: 7px; padding: 16px; }
.console-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 15px;
  border-radius: 6px;
  color: #26334d;
  font-size: 15px;
  font-weight: 600;
}
.console-nav a span { width: 18px; color: #1d2b4f; text-align: center; }
.console-nav a.active { color: #1261ff; background: linear-gradient(90deg, #eef4ff, #f7faff); }
.console-nav a.active span { color: #1261ff; }
.console-env {
  margin-top: auto;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  border-top: 1px solid #edf1f7;
  color: #2d3a55;
  font-size: 14px;
  font-weight: 600;
}
.console-env span { width: 8px; height: 8px; border-radius: 50%; background: #4dbf45; }
.console-main { min-width: 0; padding: 18px 24px 28px; }
.console-header {
  height: 46px;
  display: grid;
  grid-template-columns: auto minmax(360px, 520px) auto;
  grid-gap: 24px;
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
}
.console-title { display: flex; align-items: center; gap: 28px; }
.console-title h1 { font-size: 24px; font-weight: 800; }
.console-range {
  display: inline-flex;
  padding: 2px;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  background: var(--surface-1);
}
.console-range button {
  min-width: 50px;
  height: 32px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #26334d;
  font-size: 13px;
}
.console-range button.active { color: #1261ff; background: #eef4ff; }
.console-search {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 16px;
  border: 1px solid #dfe5ef;
  border-radius: 8px;
  background: var(--surface-1);
  color: #7b879d;
}
.console-search input { flex: 1 1; border: 0; outline: 0; color: #1c2538; font-size: 13px; }
.console-search input::placeholder { color: #99a4b8; }
.console-search span { font-size: 22px; line-height: 1; transform: translateY(-1px); }
.console-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.console-actions button,
.console-button {
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border: 1px solid #dfe5ef;
  border-radius: 7px;
  background: var(--surface-1);
  color: #1e2b45;
  font-weight: 700;
  font-size: 13px;
}
.console-bell { position: relative; }
.console-bell span {
  position: absolute;
  top: -8px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  color: #fff;
  background: #f04d55;
  font-size: 11px;
}
.console-user { display: flex; align-items: center; gap: 10px; color: #1e2b45; font-size: 14px; font-weight: 600; }
.console-user span { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #d7deeb, #8d9ab1); }
.console-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 14px;
}
.console-card {
  border: 1px solid #e1e7f0;
  border-radius: 8px;
  background: var(--surface-1);
  box-shadow: 0 8px 24px rgba(31, 42, 68, .04);
}
.console-metric { min-height: 118px; display: flex; align-items: center; gap: 18px; padding: 20px 18px; }
.console-metric-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 21px;
  font-weight: 900;
  box-shadow: 0 9px 18px rgba(45, 91, 190, .2);
}
.console-metric-icon.blue { background: linear-gradient(135deg, #72a7ff, #2f6cff); }
.console-metric-icon.orange { background: linear-gradient(135deg, #ffbe58, #ff8a1f); }
.console-metric-icon.red { background: linear-gradient(135deg, #ff8088, #ef3f4c); }
.console-metric-icon.purple { background: linear-gradient(135deg, #b785ff, #8155e9); }
.console-metric-icon.green { background: linear-gradient(135deg, #71d957, #36af35); }
.console-metric p { margin: 0 0 7px; color: #26334d; font-size: 13px; }
.console-metric strong { display: block; margin-bottom: 9px; color: #111827; font-size: 26px; line-height: 1; }
.console-metric small { color: #6c778d; font-size: 12px; }
.console-metric .up { color: #f04455; }
.console-metric .down { color: #17a66a; }
.console-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-gap: 12px; gap: 12px; }
.console-left { display: grid; grid-gap: 12px; gap: 12px; }
.console-right { display: grid; align-content: start; grid-gap: 12px; gap: 12px; }
.console-section-head {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid #e8edf5;
}
.console-section-head h2 { display: flex; align-items: center; gap: 8px; color: #111827; font-size: 17px; font-weight: 800; }
.console-section-head h2 em { color: #5d6b82; font-size: 12px; font-style: normal; font-weight: 600; }
.console-section-head a { color: #1261ff; font-size: 13px; font-weight: 700; }
.console-section-head b {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #f04d55;
  font-size: 11px;
}
.console-ok-dot { width: 8px; height: 8px; border-radius: 50%; background: #19b56f; }
.console-health { display: grid; grid-template-columns: repeat(5, 1fr); padding: 18px 20px 14px; }
.console-health-item { min-height: 112px; padding: 0 20px 0 0; border-right: 1px solid #edf1f7; }
.console-health-item + .console-health-item { padding-left: 20px; }
.console-health-item:last-child { border-right: 0; padding-right: 0; }
.console-health-item p { color: #3d4b63; font-size: 13px; }
.console-health-item strong { display: block; margin: 10px 0 7px; color: #111827; font-size: 22px; line-height: 1; }
.console-health-item small { display: block; margin-bottom: 9px; color: #718096; font-size: 12px; }
.console-spark { width: 100%; height: 24px; overflow: visible; }
.console-spark polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.console-spark.blue polyline { stroke: #2f6cff; }
.console-spark.orange polyline { stroke: #ff8a1f; }
.console-spark.green polyline { stroke: #17a66a; }
.console-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 12px; }
.console-table th {
  height: 32px;
  padding: 0 16px;
  border-bottom: 1px solid #e7ecf3;
  background: #f7f9fc;
  color: #3d4b63;
  text-align: left;
  font-weight: 800;
}
.console-table td {
  height: 36px;
  padding: 0 16px;
  border-bottom: 1px solid #edf1f7;
  color: #59677d;
  vertical-align: middle;
  white-space: nowrap;
}
.console-table tr:last-child td { border-bottom: 0; }
.console-table td:first-child { color: #2b354a; font-weight: 700; }
.console-table a { color: #1261ff; cursor: pointer; }
.console-table button { margin-left: 12px; border: 0; background: transparent; color: #59677d; font-weight: 700; }
.console-table .green { color: #17a66a; }
.console-table .orange { color: #ff7a00; }
.console-table .red { color: #f04455; }
.provider-mark {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  margin-right: 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  vertical-align: -4px;
}
.provider-mark.green { background: #111827; }
.provider-mark.orange { background: #ff6d9a; }
.provider-mark.red { background: #111827; }
.provider-mark.blue { background: #2f6cff; }
.provider-mark.purple { background: #8155e9; }
.provider-mark.amber { background: #ffba3a; }
.console-dot { width: 7px; height: 7px; display: inline-block; margin-right: 7px; border-radius: 50%; }
.console-dot.green { background: #19b56f; }
.console-dot.orange { background: #ff8a1f; }
.console-dot.red { background: #f04455; }
.console-task-table th,
.console-task-table td { height: 39px; padding: 0 12px; font-size: 11px; }
.console-status {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 7px;
  border-radius: 5px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 800;
}
.console-status.running { color: #1261ff; background: #edf4ff; border-color: #b9d0ff; }
.console-status.succeeded { color: #12835a; background: #e9f8f1; border-color: #bdebd7; }
.console-status.pending { color: #c56000; background: #fff3df; border-color: #ffd9a4; }
.console-status.failed { color: #df3043; background: #fff0f2; border-color: #ffc4cb; }
.console-progress {
  width: 58px;
  height: 5px;
  display: inline-block;
  margin-right: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf5;
  vertical-align: 1px;
}
.console-progress span { display: block; height: 100%; border-radius: inherit; background: #2f6cff; }
.console-pagination {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 20px;
  color: #59677d;
  font-size: 12px;
}
.console-pagination button,
.console-pagination select {
  min-width: 28px;
  height: 28px;
  border: 1px solid #dfe5ef;
  border-radius: 5px;
  background: var(--surface-1);
  color: #344154;
  font-size: 12px;
}
.console-pagination button.active { color: #1261ff; border-color: #94b8ff; background: #f5f8ff; }
.console-pagination select { width: 90px; padding: 0 8px; }
.console-alerts { display: grid; }
.console-alert {
  min-height: 58px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 0 18px;
  border: 0;
  border-bottom: 1px solid #edf1f7;
  background: transparent;
  text-align: left;
}
.console-alert:last-child { border-bottom: 0; }
.console-alert > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.console-alert .red { background: #f04d55; }
.console-alert .orange { background: #ff931f; }
.console-alert .amber { background: #ffba3a; }
.console-alert .green { background: #19b56f; }
.console-alert .blue { background: #2f6cff; }
.console-alert .purple { background: #8155e9; }
.console-alert strong { display: block; margin-bottom: 3px; color: #26334d; font-size: 13px; }
.console-alert small { color: #7a879c; font-size: 12px; }
.console-alert em { color: #ff3b30; font-size: 18px; font-style: normal; }
.console-billing-list { padding: 8px 18px 0; }
.console-billing-item {
  height: 62px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #edf1f7;
}
.console-billing-item span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.console-billing-item .blue { background: #2f6cff; }
.console-billing-item .green { background: #19b56f; }
.console-billing-item .orange { background: #ff8a1f; }
.console-billing-item .purple { background: #8155e9; }
.console-billing-item p { color: #3d4b63; font-size: 13px; }
.console-billing-item strong { color: #111827; font-size: 14px; }
.console-profit {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px;
  padding: 0 18px;
  border-radius: 7px;
  color: #1261ff;
  background: #eef4ff;
}
.console-profit span { font-size: 14px; font-weight: 800; }
.console-profit strong { font-size: 20px; }
.console-toolbar-card { margin-bottom: 12px; padding: 14px 18px; }
.console-filters {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) repeat(3, 150px) 88px;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
}
.console-filters input,
.console-filters select,
.console-config-row input,
.console-config-row select {
  width: 100%;
  height: 36px;
  border: 1px solid #dfe5ef;
  border-radius: 6px;
  background: var(--surface-1);
  color: #1e2b45;
  font-size: 13px;
  outline: 0;
}
.console-filters input,
.console-config-row input { padding: 0 11px; }
.console-filters select,
.console-config-row select { padding: 0 8px; }
.console-filters button,
.console-config-row button {
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: #1261ff;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.console-wide-table { table-layout: fixed; }
.console-wide-table .console-clip,
.console-clip {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.console-muted { color: #718096; font-size: 12px; font-weight: 600; }
.console-provider-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 12px;
}
.console-provider-card { padding: 18px; }
.console-provider-title {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: start;
  margin-bottom: 18px;
}
.console-provider-title .provider-mark {
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 7px;
}
.console-provider-title strong { display: block; color: #111827; font-size: 16px; }
.console-provider-title small { display: block; margin-top: 5px; color: #718096; font-size: 12px; line-height: 1.45; }
.console-provider-title em {
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.console-provider-title em.green { color: #12835a; background: #e9f8f1; }
.console-provider-title em.orange { color: #c56000; background: #fff3df; }
.console-provider-title em.red { color: #df3043; background: #fff0f2; }
.console-provider-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  gap: 10px;
}
.console-provider-stats p {
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 7px;
  background: #f7f9fc;
}
.console-provider-stats span { display: block; margin-bottom: 7px; color: #718096; font-size: 12px; }
.console-provider-stats strong { color: #111827; font-size: 15px; }
.console-provider-error {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #edf1f7;
  color: #59677d;
  font-size: 12px;
  line-height: 1.5;
}
.console-config-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}
.console-config-summary p {
  min-height: 72px;
  padding: 13px 16px;
  border-radius: 7px;
  background: #f7f9fc;
}
.console-config-summary strong { display: block; color: #111827; font-size: 24px; }
.console-config-summary span { color: #718096; font-size: 13px; }
.console-form-list { display: grid; }
.console-config-row {
  display: grid;
  grid-template-columns: 190px 1.1fr 1.5fr 90px 1.2fr 90px 72px;
  grid-gap: 10px;
  gap: 10px;
  align-items: end;
  padding: 14px 18px;
  border-bottom: 1px solid #edf1f7;
}
.console-config-row:last-child { border-bottom: 0; }
.console-config-key strong { display: block; color: #111827; font-size: 13px; }
.console-config-key small { display: block; margin-top: 7px; color: #718096; font-size: 12px; }
.console-config-row label span {
  display: block;
  margin-bottom: 6px;
  color: #59677d;
  font-size: 12px;
  font-weight: 700;
}
.console-billing-config-row { grid-template-columns: 220px 120px 120px minmax(260px, 1fr) 90px 72px; }
.console-material-cell {
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.console-material-cell img,
.console-material-cell > span {
  width: 42px;
  height: 42px;
  display: block;
  border-radius: 6px;
  object-fit: cover;
  background: #eef3ff;
}
.console-material-cell div { min-width: 0; }
.console-material-cell a,
.console-material-cell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.console-material-cell small { margin-top: 4px; color: #718096; font-size: 11px; font-weight: 500; }
.console-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.console-setting-list,
.console-roadmap { padding: 8px 18px; }
.console-setting-list p {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #edf1f7;
}
.console-setting-list p:last-child { border-bottom: 0; }
.console-setting-list span { color: #59677d; font-size: 13px; }
.console-setting-list strong { color: #111827; font-size: 13px; }
.console-roadmap p {
  padding: 14px 0;
  border-bottom: 1px solid #edf1f7;
}
.console-roadmap p:last-child { border-bottom: 0; }
.console-roadmap strong { display: block; margin-bottom: 6px; color: #111827; font-size: 14px; }
.console-roadmap span { color: #59677d; font-size: 13px; line-height: 1.55; }

/* ============================================================ *
 *  /materials redesign — collapsible 素材导入 + 素材管理        *
 * ============================================================ */

.mat-entry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}
.mat-entry-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 12px 8px 28px;
  border-radius: 14px;
  border: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  -webkit-tap-highlight-color: transparent;
}
.mat-entry-tile:active {
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}
.mat-entry-tile:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.mat-entry-tile.tone-blue { background: linear-gradient(160deg, #f3f7ff, #e2ecff); }
.mat-entry-tile.tone-orange { background: linear-gradient(160deg, #fff5ed, #ffe5d6); }
.mat-entry-tile.tone-green { background: linear-gradient(160deg, #ecfaf1, #d6f1e1); }
.mat-entry-tile.tone-purple { background: linear-gradient(160deg, #f3eeff, #e7defb); }

.mat-entry-tile .mat-entry-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.15));
}
.mat-entry-tile .mat-entry-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 2px 0 0;
  text-align: center;
}
.mat-entry-tile .mat-entry-sub {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mat-entry-tile .mat-entry-arrow {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  color: var(--text-2);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.mat-entry-tile.tone-blue .mat-entry-arrow { color: #2f6cff; }
.mat-entry-tile.tone-orange .mat-entry-arrow { color: #ff7a2a; }
.mat-entry-tile.tone-green .mat-entry-arrow { color: #14a058; }
.mat-entry-tile.tone-purple .mat-entry-arrow { color: #8a4cff; }

/* Section header for "素材管理" */
.mat-mgr-card {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  padding: 14px 14px 12px;
  box-shadow: 0 6px 18px rgba(91, 111, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.mat-mgr-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mat-toolbar-card .mat-search-field {
  margin-top: 0;
  flex: 1 1;
  min-width: 0;
}
.mat-tools-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.mat-tools-row .mat-manage-btn,
.mat-tools-row .mat-search-go,
.mat-tools-row .mat-search-field {
  height: 40px;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: none;
  margin: 0;
}
.mat-tools-row .mat-manage-btn {
  flex-shrink: 0;
  border: 1.5px solid var(--line-strong);
  background: var(--surface-1);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.mat-tools-row .mat-manage-btn.on {
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  border-color: transparent;
  color: #fff;
}
.mat-tools-row .mat-search-field {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface-1);
}
.mat-tools-row .mat-search-field:focus-within {
  border-color: var(--blue);
}
.mat-tools-row .mat-search-field svg { color: var(--muted); }
.mat-tools-row .mat-search-field:focus-within svg { color: var(--blue); }
.mat-search-go {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.1s;
}
.mat-search-go:active { transform: scale(0.96); }
.mat-search-go svg { color: #fff; }
.mat-toolbar-card .mat-filter-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 12px !important;
  padding: 0;
}
.mat-toolbar-card .mat-filter-row .mat-chips {
  display: flex;
  gap: 8px;
  flex: 1 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.mat-toolbar-card .mat-filter-row .mat-chips::-webkit-scrollbar { display: none; }
.mat-toolbar-card .mat-filter-row .mat-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--panel-soft);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.mat-toolbar-card .mat-filter-row .mat-chip.on {
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 10px rgba(47, 108, 255, 0.25);
}
.mat-toolbar-card .mat-filter-row .mat-manage-btn {
  border: 0;
  background: transparent;
  padding: 4px 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}
.mat-toolbar-card .mat-filter-row .mat-manage-btn.on {
  color: var(--text-2);
}
.mat-mgr-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffd9c0, #ffc49a);
  color: #b95b00;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mat-mgr-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
}
.mat-mgr-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Result-line tools (sort + view toggle) */
.mat-result-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
}
.mat-result-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mat-sort-btn,
.mat-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
}
.mat-refresh-btn:disabled {
  color: var(--muted);
  cursor: default;
}
.mat-view-btn {
  border: 0;
  background: transparent;
  color: var(--text-2);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.mat-view-btn:hover { background: var(--panel-soft); }

/* /search loading + empty states */
.search-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--text-2);
  font-size: 13px;
}
.search-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(47, 108, 255, 0.18);
  border-top-color: var(--blue);
  animation: search-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes search-spin { to { transform: rotate(360deg); } }
.search-empty {
  text-align: center;
  padding: 28px 16px;
  border-radius: 14px;
  background: var(--panel-soft);
}
.search-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.search-empty-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.search-empty-sub {
  font-size: 12px;
  color: var(--muted);
}
.empty-hint.err {
  color: #c4344a;
  background: #fff1f2;
  border: 1px solid #ffd2d6;
  padding: 12px;
  border-radius: 10px;
  margin-top: 8px;
}

/* Inline search toggle inside the 素材管理 card header */
.mat-mgr-head { width: 100%; }
.mat-mgr-text { flex: 1 1; min-width: 0; }
.mat-mgr-card .mat-search-toggle {
  position: static;
  margin: 0;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  box-shadow: none;
  flex-shrink: 0;
}
.mat-mgr-card .mat-search-toggle.on {
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff;
  border-color: transparent;
}
.mat-mgr-card .mat-search-toggle.on svg { stroke: #fff; }

/* "再来 10 条" load-more button on /search */
.search-more-btn {
  width: 100%;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.search-more-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fff7e8;
  color: #b95b00;
  font-size: 11px;
  font-weight: 700;
}

/* /search keyword form */
.search-form-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.search-form-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
}
.search-form-hint {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}
.search-go-btn {
  width: 100%;
  margin-top: 12px;
}
.search-result-panel { margin-top: 12px; }
/* ========== /rewrite 结构仿写 / direct rewrite ========== */
.rewrite-page .section { gap: 12px; }
.rewrite-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 14px;
  background: var(--panel-soft);
}
.rewrite-tabs button {
  height: 36px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-2);
  font-weight: 800;
}
.rewrite-tabs button.active {
  color: var(--blue);
  background: var(--surface-1);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.rewrite-textarea,
.rewrite-output {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  line-height: 1.65;
  outline: 0;
  resize: vertical;
}
.rewrite-textarea { min-height: 180px; }
.rewrite-output {
  height: 70dvh;
  max-height: 70dvh;
  resize: none;
  overflow-y: auto;
}
.image-suggestion-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
}
.image-suggestion-list > strong {
  color: var(--text);
  font-size: 14px;
}
.image-suggestion-item {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}
.image-suggestion-item span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}
.image-suggestion-item p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}
.image-suggestion-item em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.analysis-collapse-head {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}
.analysis-collapse-head span {
  min-width: 0;
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}
.analysis-collapse-head strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}
.analysis-collapse-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}
.analysis-collapse-head i {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.image-understanding-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 10px;
}
.image-understanding-card {
  display: grid;
  grid-template-columns: 86px 1fr;
  grid-gap: 12px;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
}
.image-understanding-card img {
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--panel-soft);
}
.image-understanding-body {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-width: 0;
}
.image-understanding-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.image-understanding-head strong {
  color: var(--text);
  font-size: 14px;
}
.image-understanding-head span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}
.image-understanding-head span.ok {
  color: #047857;
  background: rgba(16,185,129,.12);
}
.image-understanding-head span.warn {
  color: #b45309;
  background: rgba(245,158,11,.14);
}
.image-understanding-body p,
.image-understanding-body small {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.image-understanding-body p {
  color: var(--text);
  font-size: 13px;
}
.rewrite-material-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}
.rewrite-material-card {
  display: grid;
  grid-template-columns: 22px 64px 1fr;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  text-align: left;
}
.rewrite-material-card.active {
  border-color: var(--blue);
  background: #f5f8ff;
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.12);
}
.rewrite-material-preview-hint {
  /* default 3-col layout (article-images): cover sits in column 2 */
  grid-column: 2 / 3;
  grid-row: 2;
  justify-self: center;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--blue);
  background: rgba(47, 108, 255, 0.1);
  border-radius: 999px;
  padding: 2px 8px;
  pointer-events: none;
  white-space: nowrap;
}
/* 2-col layouts (rewrite/direct-rewrite, wechat-layout): cover sits in column 1 */
.rewrite-page .rewrite-material-card .rewrite-material-preview-hint,
.wechat-layout-page .rewrite-material-card .rewrite-material-preview-hint {
  grid-column: 1 / 2;
}
.rewrite-page .rewrite-material-card {
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: stretch;
}
.rewrite-page .rewrite-material-body {
  justify-content: center;
}
.rewrite-material-cover {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: var(--panel-soft);
  color: var(--muted);
}
.rewrite-material-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rewrite-material-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rewrite-material-body strong {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rewrite-material-body small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}
.rewrite-material-body span {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rewrite-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 12px;
}
/* 爆文改写只剩「目标长度」一项，让它独占整行，避免 select 太窄 "按素材自然长度" 显示拥挤 */
.direct-rewrite-page .rewrite-options {
  grid-template-columns: 1fr;
}
/* 结构仿写同样只有「目标长度」一项，避免 "跟着素材走（推荐）" 控件只占半屏 */
.rewrite-page .rewrite-options {
  grid-template-columns: 1fr;
}
.rewrite-options label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.rewrite-options span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.rewrite-options select,
.rewrite-options input {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 10px;
  background: var(--surface-1);
  color: var(--text);
  font-weight: 700;
  min-width: 0;
}
.rewrite-hint {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.rewrite-hint.err { color: var(--red); }
.rewrite-result {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.rewrite-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.rewrite-result-head strong {
  color: var(--text);
  font-size: 14px;
}
.rewrite-result-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rewrite-view-tabs {
  display: inline-flex;
  align-items: center;
  background: var(--panel-soft);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
}
.rewrite-view-tabs button {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
}
.rewrite-view-tabs button.active {
  background: var(--surface-1);
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.rewrite-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 10px;
}
.rewrite-page .rewrite-actions {
  grid-template-columns: 1fr;
}

/* B · 流水线下一步按钮：成稿/配图完成后引导用户去下一个工具，不绕回素材详情 */
.rewrite-next-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 14px;
}
/* article-images 只一个按钮时占满宽 */
.article-image-page-v2 .rewrite-next-actions {
  grid-template-columns: 1fr;
  margin: 14px 16px 0;
}
.next-step-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.next-step-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16); }
.next-step-btn:active { transform: translateY(0); }
.next-step-orange { background: linear-gradient(135deg, #ff7a3d, #ff6b35); }
.next-step-blue { background: linear-gradient(135deg, #4f7dff, #3a66e8); }
.next-step-icon { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.next-step-text { display: flex; flex-direction: column; flex: 1 1; min-width: 0; }
.next-step-text strong { font-size: 14px; font-weight: 600; line-height: 1.3; }
.next-step-text small { font-size: 11px; opacity: 0.85; line-height: 1.4; margin-top: 2px; }
.next-step-arrow { font-size: 20px; line-height: 1; flex: 0 0 auto; opacity: 0.85; }

.rewrite-preview {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  padding: 16px 18px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.78;
  height: 70dvh;
  max-height: 70dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rewrite-preview.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  height: 40dvh;
  min-height: 160px;
}
.rewrite-preview h1 { font-size: 20px; margin: 4px 0 12px; font-weight: 900; }
.rewrite-preview h2 { font-size: 17px; margin: 18px 0 10px; font-weight: 900; }
.rewrite-preview h3 { font-size: 15px; margin: 14px 0 8px; font-weight: 900; color: var(--text-2); }
.rewrite-preview p {
  margin: 0 0 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
.rewrite-img-block {
  margin: 14px 0;
  text-align: center;
}
.rewrite-img-block img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.rewrite-slot {
  margin: 14px 0;
  padding: 14px 16px;
  border: 1.5px dashed #f0a23a;
  border-radius: 12px;
  background: #fff7e8;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.rewrite-slot.running { border-color: var(--blue); background: #f1f6ff; }
.rewrite-slot.error { border-color: var(--red); background: #fff1f0; }
.rewrite-slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rewrite-slot-tag {
  color: #a85a08;
  font-weight: 900;
  font-size: 13px;
}
.rewrite-slot.running .rewrite-slot-tag { color: var(--blue); }
.rewrite-slot.error .rewrite-slot-tag { color: var(--red); }
.rewrite-slot-status {
  font-size: 12px;
  color: var(--blue);
  font-weight: 700;
}
.rewrite-slot-desc {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}
.rewrite-slot-err {
  margin: 0;
  color: var(--red);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.rewrite-slot-err button {
  border: 0;
  background: transparent;
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.rewrite-slot-btn {
  align-self: stretch;
  border: 0;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  border-radius: 10px;
  padding: 10px 0;
  cursor: pointer;
}
.rewrite-slot-btn[disabled] {
  background: var(--text-2);
  cursor: progress;
}

.style-select-list,
.suggestion-grid {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 12px;
}
.style-card,
.suggestion-grid button,
.suggestion-list button {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  text-align: left;
  color: var(--text);
}
.style-card {
  padding: 12px;
  display: grid;
  grid-gap: 5px;
  gap: 5px;
}
.style-card.active {
  border-color: var(--blue);
  background: #f5f8ff;
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.12);
}
.style-card strong,
.suggestion-list strong,
.saved-style-card strong {
  font-size: 13.5px;
  color: var(--text);
}
.style-card span,
.style-prompt-preview,
.suggestion-list span,
.saved-style-card span {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-2);
}
.style-prompt-preview {
  padding: 12px;
  border-radius: 14px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
}
.style-prompt-area { min-height: 150px; }
.suggestion-grid {
  grid-template-columns: 1fr;
}
.suggestion-grid button {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
}
.writing-style-page .section { gap: 12px; }
.style-editor,
.suggestion-panel {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}
.style-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.style-editor-head div {
  min-width: 0;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}
.style-editor-head strong {
  color: var(--text);
  font-size: 15px;
}
.style-editor-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.style-editor label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.style-editor label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.style-editor input,
.style-editor textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  outline: 0;
}
.style-editor input {
  height: 42px;
  padding: 0 11px;
}
.style-editor textarea {
  min-height: 150px;
  padding: 11px;
  line-height: 1.65;
  resize: vertical;
}
.style-default-row {
  display: flex !important;
  grid-template-columns: unset !important;
  align-items: center;
  gap: 8px !important;
}
.style-default-row input {
  width: 16px;
  height: 16px;
}
.suggestion-list,
.saved-style-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.suggestion-list button {
  padding: 12px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}
.saved-style-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
}
.saved-style-card > div:first-child {
  min-width: 0;
  display: grid;
  grid-gap: 5px;
  gap: 5px;
}
.saved-style-card em {
  display: inline-grid;
  place-items: center;
  height: 18px;
  padding: 0 7px;
  margin-left: 6px;
  border-radius: 999px;
  background: #eaf2ff;
  color: var(--blue);
  font-size: 10px;
  font-style: normal;
}
.saved-style-actions {
  display: flex;
  gap: 6px;
}
.saved-style-actions button {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
}

/* ========== /article-images 配图生成 ========== */
.article-image-page .section { gap: 12px; }
.article-plan-note {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-soft);
  color: var(--text-2);
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  font-size: 13px;
  line-height: 1.55;
}
.article-plan-note strong {
  color: var(--text);
  font-size: 14px;
}
.article-plan-note p {
  margin: 0;
}
.article-plan-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}
.article-image-list {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 12px;
}
.article-image-card {
  display: grid;
  grid-template-columns: 104px 1fr;
  grid-gap: 12px;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-1);
}
.article-image-preview {
  width: 104px;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--panel-soft);
  color: var(--muted);
}
.article-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-image-fields {
  min-width: 0;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.article-image-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.article-image-head strong {
  font-size: 14px;
  color: var(--text);
}
.vs-link-btn.danger { color: var(--red); }
.article-image-fields label {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
}
.article-image-fields label span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
}
.article-image-fields input,
.article-image-fields select,
.article-image-fields textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  outline: 0;
}
.article-image-fields input,
.article-image-fields select {
  height: 38px;
  padding: 0 10px;
}
.article-image-fields textarea {
  min-height: 110px;
  padding: 10px;
  line-height: 1.55;
  resize: vertical;
}
.article-image-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
}
.mat-pop-document {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}
.mat-pop-doc-image {
  margin: 4px 0;
}
.mat-pop-doc-image img {
  width: 100%;
  display: block;
  border-radius: 14px;
  background: var(--panel-soft);
}
.mat-pop-doc-image figcaption {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
.mat-pop-placeholder {
  padding: 12px 14px;
  border: 1px dashed #f0a23a;
  border-radius: 12px;
  background: #fff7e8;
  color: #a85a08;
  font-size: 13px;
}

/* ========== /leads 线索库 ========== */
.leads-page .section { gap: 12px; padding-bottom: 92px; }
.lead-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.lead-section-head h2 { margin: 0; color: var(--text); font-size: 16px; font-weight: 850; }
.lead-section-head p,
.lead-section-head span {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.lead-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}
.lead-form-grid label { display: grid; grid-gap: 6px; gap: 6px; }
.lead-form-grid label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.lead-form-grid input,
.lead-form-grid select,
.lead-form-grid textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  color: var(--text);
  outline: 0;
}
.lead-form-grid input,
.lead-form-grid select { height: 42px; padding: 0 11px; }
.lead-form-grid textarea {
  min-height: 92px;
  padding: 11px;
  line-height: 1.55;
  resize: vertical;
}
.lead-wide { grid-column: 1 / -1; }
.lead-config-actions { display: grid; grid-gap: 10px; gap: 10px; margin-top: 12px; }
.lead-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
}
.lead-check input { width: 16px; height: 16px; }
.lead-author-list { display: grid; grid-gap: 8px; gap: 8px; }
.lead-author-list article {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.lead-author-list article:first-child { border-top: 0; }
.lead-author-list strong { display: block; color: var(--text); font-size: 14px; }
.lead-author-list p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.lead-author-list button,
.lead-list-head button,
.lead-actions button,
.lead-actions a {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 8px 10px;
  background: var(--surface-1);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.lead-list { display: grid; grid-gap: 12px; gap: 12px; }
.lead-list-head { margin: 4px 0 0; }
.lead-group { display: grid; grid-gap: 12px; gap: 12px; }
.lead-group-head { display: flex; align-items: center; justify-content: space-between; }
.lead-group-head strong { display: block; color: var(--text); font-size: 15px; }
.lead-group-head span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.lead-items { display: grid; grid-gap: 10px; gap: 10px; }
.lead-item {
  display: grid;
  grid-template-columns: 58px 1fr;
  grid-gap: 10px;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.lead-item:first-child { border-top: 0; padding-top: 0; }
.lead-cover {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--panel-soft);
  color: var(--blue);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.lead-cover img { width: 100%; height: 100%; object-fit: cover; }
.lead-body { min-width: 0; }
.lead-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lead-body p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.lead-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.lead-actions .ghost { color: var(--muted); }
.lead-item.imported .lead-title,
.lead-item.ignored .lead-title { color: var(--text-2); }

/* ========== /wechat-layout 公众号排版 ========== */
.wechat-layout-page .section {
  gap: 12px;
  padding-bottom: 92px;
}
.wechat-layout-page .quick-step-head {
  min-height: 54px;
}
.wechat-layout-page .quick-step-title {
  min-width: 0;
}
.wechat-layout-page .quick-step-badge {
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wechat-layout-page .rewrite-material-list {
  max-height: 360px;
  padding: 2px;
}
.wechat-layout-page .rewrite-material-card {
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: stretch;
}
.wechat-layout-page .rewrite-material-body {
  justify-content: center;
}
.wechat-layout-page .rewrite-material-body span {
  word-break: break-word;
}
.wechat-layout-styles {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.wechat-layout-styles button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  padding: 12px;
  text-align: left;
}
.wechat-layout-styles button.active {
  border-color: rgba(47, 108, 255, 0.45);
  background: #f4f8ff;
  box-shadow: 0 8px 18px rgba(47, 108, 255, 0.08);
}
.wechat-layout-styles strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}
.wechat-layout-styles span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.wechat-template-panel {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
}
.wechat-template-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.wechat-template-head strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}
.wechat-template-head span {
  display: block;
  max-width: 520px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.wechat-template-upload {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}
.wechat-template-upload.disabled {
  opacity: 0.55;
  pointer-events: none;
}
.wechat-template-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.wechat-template-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.wechat-template-list button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px 11px;
  text-align: left;
}
.wechat-template-list button.active {
  border-color: rgba(47, 108, 255, 0.45);
  background: #f4f8ff;
  box-shadow: 0 8px 18px rgba(47, 108, 255, 0.08);
}
.wechat-template-list strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}
.wechat-template-list span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.wechat-layout-custom {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin-top: 12px;
}
.wechat-layout-custom span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.wechat-layout-custom textarea {
  width: 100%;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 12px;
  background: var(--surface-1);
  color: var(--text);
  line-height: 1.55;
  outline: 0;
  resize: vertical;
}
.wechat-layout-result {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
}
.wechat-layout-preview {
  width: 100%;
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  padding: 16px;
  color: #2f3a4a;
  font-size: 15px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  -webkit-overflow-scrolling: touch;
}
.wechat-layout-preview * {
  max-width: 100%;
  box-sizing: border-box;
}
.wechat-layout-result .rewrite-actions .primary-btn {
  text-decoration: none;
  text-align: center;
}
@media (max-width: 390px) {
  .wechat-layout-page .quick-step-head {
    gap: 8px;
    padding: 13px 12px;
  }
  .wechat-layout-page .quick-step-badge {
    max-width: 86px;
    padding-inline: 7px;
  }
  .wechat-layout-page .quick-step-body {
    padding: 4px 12px 14px;
  }
  .wechat-layout-page .rewrite-material-card {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 9px;
  }
  .wechat-layout-page .rewrite-material-cover {
    width: 56px;
    height: 56px;
  }
  .wechat-layout-preview {
    padding: 12px;
  }
  .wechat-template-head {
    display: grid;
  }
  .wechat-template-upload {
    width: 100%;
    justify-content: center;
  }
}

/* ========== /manual-import 手工导入 ========== */
.manual-import-page .section { gap: 12px; }
.manual-entry-card {
  display: grid;
  grid-template-columns: 42px 1fr 18px;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-1);
  color: var(--text);
  text-decoration: none;
}
.manual-entry-icon,
.manual-upload-icon {
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eef6ff;
  color: var(--blue);
}
.manual-entry-icon {
  width: 42px;
  height: 42px;
}
.manual-entry-card span:nth-child(2) {
  min-width: 0;
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}
.manual-entry-card strong {
  color: var(--text);
  font-size: 14px;
}
.manual-entry-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}
.manual-import-card {
  display: grid;
  grid-gap: 13px;
  gap: 13px;
}
.manual-import-note {
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-gap: 8px;
  gap: 8px;
  align-items: start;
  padding: 10px;
  border-radius: 14px;
  background: var(--panel-soft);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}
.manual-import-note svg { color: var(--blue); }
.manual-field {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.manual-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.manual-field input,
.manual-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  outline: 0;
}
.manual-field input {
  height: 42px;
  padding: 0 11px;
}
.manual-field textarea {
  min-height: 190px;
  padding: 12px;
  line-height: 1.65;
  resize: vertical;
}
.manual-field textarea:disabled {
  background: var(--panel-soft);
  color: var(--muted);
}
.manual-check {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-gap: 4px 10px;
  gap: 4px 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}
.manual-check input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.manual-check span {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}
.manual-check em {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-style: normal;
}
.manual-upload {
  position: relative;
  display: grid;
  place-items: center;
  grid-gap: 7px;
  gap: 7px;
  min-height: 150px;
  padding: 18px;
  border: 1.5px dashed #b8c7df;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
  text-align: center;
  cursor: pointer;
}
.manual-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.manual-upload-icon {
  width: 44px;
  height: 44px;
}
.manual-upload strong {
  color: var(--text);
  font-size: 15px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.manual-upload em {
  max-width: 260px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-style: normal;
}
.manual-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.manual-divider::before,
.manual-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}
.manual-result-card {
  display: grid;
  grid-template-columns: 86px 1fr;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
}
.manual-result-cover {
  width: 86px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: var(--panel-soft);
  color: var(--muted);
}
.manual-result-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.manual-result-body {
  min-width: 0;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}
.manual-result-body strong {
  color: var(--text);
  font-size: 14px;
}
.manual-result-body span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.manual-result-body p {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.manual-result-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}
@media (max-width: 380px) {
  .article-image-card {
    grid-template-columns: 1fr;
  }
  .article-image-preview {
    width: 100%;
  }
}

/* Channel-grouped view on /materials */
.mat-channel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}
.mat-channel-tile {
  display: grid;
  grid-template-columns: 44px 1fr 16px;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 14px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-1);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s, box-shadow 0.15s;
}
.mat-channel-tile:active {
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.mat-channel-tile.empty {
  opacity: 0.55;
  cursor: not-allowed;
}
.mat-channel-tile-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.12));
}
.mat-channel-tile-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #cfd8e3, #a3b1c2);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  border-radius: 10px;
}
.mat-channel-tile-body { min-width: 0; }
.mat-channel-tile-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mat-channel-tile-count {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
}
.mat-channel-tile-arrow {
  color: var(--text-3);
  display: grid;
  place-items: center;
}

/* /import: 2-row × 3-col grid for channel chips (replaces horizontal scroll) */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
}
.chip-grid .chip {
  flex: initial;
  width: 100%;
  min-width: 0;
  padding: 10px 8px;
}
.chip-grid .chip span:not(.chip-tag):not(.chip-icon) {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* /materials header action: 可用线索 link with red unread badge */
.leads-badge-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef3ff, #e3eaff);
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(47, 108, 255, 0.18);
  white-space: nowrap;
}
.leads-badge-link:active { transform: scale(0.97); }
.leads-badge-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--blue);
}
.leads-badge-text { line-height: 1; }
.leads-badge-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5f6a, #e23d58);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(255, 77, 95, 0.35);
  border: 2px solid #fff;
  letter-spacing: 0;
  display: inline-block;
}

/* ============================================================ *
 *  /leads (可用线索) — collapsible cards + filtered group list  *
 * ============================================================ */

.leads-card {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  padding: 14px 14px 14px;
  box-shadow: 0 6px 18px rgba(91, 111, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  margin-bottom: 12px;
}
.leads-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.leads-card-head.static { cursor: default; }
.leads-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #dde8ff, #c5d4ff);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.leads-card-icon.orange {
  background: linear-gradient(135deg, #ffd9c0, #ffc49a);
  color: #b95b00;
}
.leads-card-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
}
.leads-card-badge {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef3ff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
}
.leads-card-caret {
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.2s ease;
  display: grid;
  place-items: center;
}
.leads-card-caret.open { transform: rotate(180deg); }
.leads-card-sub {
  margin: 6px 0 12px 42px;
  font-size: 12px;
  color: var(--muted);
}
.leads-refresh {
  margin-left: auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text-2);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.leads-refresh:hover { background: var(--panel-soft); color: var(--text-1); }
.leads-refresh:disabled { opacity: 0.5; cursor: progress; }

/* author list */
.leads-author-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.leads-author-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--panel-soft);
}
.leads-author-icon { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.leads-author-icon-fallback {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #cfd8e3, #a3b1c2);
  color: #fff; display: grid; place-items: center; font-weight: 800;
}
.leads-author-name { font-size: 13.5px; font-weight: 800; color: var(--text); }
.leads-author-meta { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.leads-author-run {
  border: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(47, 108, 255, 0.25);
}
.leads-author-run:active { transform: scale(0.97); }
.leads-author-empty {
  padding: 18px 14px;
  text-align: center;
  background: var(--panel-soft);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 10px;
}
.leads-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.leads-add-btn:hover { background: rgba(47, 108, 255, 0.04); }
.leads-add-plus { font-size: 16px; line-height: 1; }

/* tracking-add inline form */
.leads-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--panel-soft);
  margin-top: 4px;
}
.leads-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}
.leads-form-field { display: flex; flex-direction: column; gap: 4px; }
.leads-form label > span:first-child {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.leads-form input,
.leads-form select,
.leads-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  outline: 0;
}
.leads-form textarea { min-height: 60px; resize: vertical; }
.leads-form input:focus,
.leads-form textarea:focus,
.leads-form select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.12);
}
.leads-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.leads-check input { width: 16px; height: 16px; }
.leads-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.leads-form-actions .ghost-btn,
.leads-form-actions .primary-btn {
  margin: 0;
  width: auto;
  padding: 9px 18px;
  font-size: 13px;
}

/* status filter chips */
.leads-filter-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 8px;
  gap: 8px;
  margin-top: 12px;
}
.leads-filter-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 6px;
  border: 0;
  border-radius: 12px;
  background: var(--panel-soft);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.leads-filter-chip.on {
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff;
  box-shadow: 0 4px 10px rgba(47, 108, 255, 0.25);
}
.leads-filter-chip.on .leads-filter-count { color: #fff; }
.leads-filter-count {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

/* channel filter chips (horizontal scroll) */
.leads-channel-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 2px;
  margin-top: 10px;
  scrollbar-width: none;
}
.leads-channel-row::-webkit-scrollbar { display: none; }
.leads-channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.leads-channel-chip img {
  width: 18px; height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.12));
}
.leads-channel-chip.on {
  border-color: var(--blue);
  color: var(--blue);
  background: #eef3ff;
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.12);
}

/* group + items */
.leads-state {
  margin: 14px 16px 0;
  padding: 28px 16px;
  text-align: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--muted);
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(91, 111, 255, 0.05);
}
.leads-groups { display: flex; flex-direction: column; gap: 10px; }
.leads-group {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  padding: 12px 12px 10px;
  box-shadow: 0 6px 18px rgba(91, 111, 255, 0.05);
}
.leads-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 8px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 8px;
}
.leads-group-icon {
  width: 24px; height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.12));
}
.leads-group-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}
.leads-group-meta {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}

.leads-items { display: flex; flex-direction: column; gap: 8px; }
.leads-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-gap: 10px;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  background: var(--surface-1);
}
.leads-item.status-imported { background: #f3fbf6; }
.leads-item.status-ignored { opacity: 0.65; }
.leads-cover {
  width: 64px; height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-soft);
  display: grid;
  place-items: center;
  color: var(--muted);
}
.leads-cover img { width: 100%; height: 100%; object-fit: cover; }
.leads-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.leads-row1 { display: flex; align-items: flex-start; gap: 6px; }
.leads-type {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
}
.leads-type.video { background: var(--badge-video-bg); color: var(--badge-video-fg); }
.leads-type.writing { background: var(--badge-writing-bg); color: var(--badge-writing-fg); }
.leads-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.leads-row2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
}
.leads-dot { color: var(--text-4); }
.leads-status {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
}
.leads-status-ok { background: #e3f7ec; color: var(--green); }
.leads-status-warn { background: #fff3cd; color: #a3670a; }
.leads-status-err { background: #ffe4e7; color: var(--red); }
.leads-status-default { background: var(--panel-soft); color: var(--muted); }
.leads-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.leads-action {
  border: 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.leads-action.primary {
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff;
  box-shadow: 0 4px 10px rgba(47, 108, 255, 0.22);
}
.leads-action.ghost {
  background: var(--panel-soft);
  color: var(--text-2);
}
.leads-action.ghost:hover { background: var(--surface-3); }

/* /leads — folder grid + drill-down */
.leads-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 12px;
  margin-top: 4px !important;
}
.leads-grid-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
}
.leads-grid-title img {
  width: 22px; height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(91, 92, 255, 0.18));
}
.leads-grid-add {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  padding: 4px 6px;
}

.leads-folder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}
.leads-folder {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(91, 111, 255, 0.08);
  transition: transform 0.12s, box-shadow 0.15s;
  overflow: hidden;
}
.leads-folder:active { transform: scale(0.98); }
.leads-folder-tap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.leads-folder-iconwrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
}
.leads-folder-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.16));
}
.leads-folder-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5f6a, #e23d58);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  border: 2px solid #fff;
  box-shadow: 0 4px 8px rgba(255, 77, 95, 0.35);
}
.leads-folder-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.leads-folder-meta {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leads-folder-meta.last { color: var(--text-3); }
.leads-folder-actions {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
}
.leads-folder-act {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.1s;
}
.leads-folder-act:active { transform: scale(0.92); }
.leads-folder-act.primary {
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff;
  box-shadow: 0 3px 8px rgba(47, 108, 255, 0.3);
}
.leads-folder-act.ghost {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-3);
  border: 1px solid var(--line);
}
.leads-folder-act.ghost:hover { color: var(--red); border-color: var(--red); }

.leads-stats {
  margin: 16px 4px 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.leads-refresh-pill {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.leads-refresh-pill:active { transform: scale(0.94); }
.leads-refresh-pill:disabled { opacity: 0.5; cursor: progress; }

.leads-folder-back {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
}

/* /search row-action buttons (replaces selection UX) */
.search-row-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  align-self: stretch;
  justify-content: center;
}
.search-row-btn {
  min-width: 64px;
  padding: 7px 14px;
  border: 0;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, background 0.12s;
}
.search-row-btn:active:not(:disabled) { transform: scale(0.96); }
.search-row-btn:disabled { cursor: not-allowed; opacity: 0.7; }
.search-row-btn.primary {
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff;
  box-shadow: 0 3px 8px rgba(47, 108, 255, 0.22);
}
.search-row-btn.ghost {
  background: var(--panel-soft);
  color: var(--text-2);
}
.search-row-btn.ghost:hover { background: var(--surface-3); color: var(--text-1); }
.search-row-btn.queued {
  background: #e3f7ec;
  color: var(--green);
  cursor: default;
}


/* ============================================================ *

/* ============================================================ *
 *  /leads — full visual rework (spacious row cards)             *
 * ============================================================ */

.leads-card .leads-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  margin-bottom: 14px;
  background: transparent;
  cursor: default;
}
.leads-card .leads-card-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.leads-card .leads-card-add {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
}
.leads-card-stats {
  margin: 14px 0 2px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

/* Row list */
.leads-row-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.leads-row {
  background: var(--surface-1);
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
  overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.leads-row.open {
  box-shadow: 0 14px 36px rgba(47, 108, 255, 0.18);
  border-color: rgba(47, 108, 255, 0.3);
}

/* Top section: icon + name+chips + actions */
.leads-row-top {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 14px;
  gap: 14px;
  padding: 16px 16px 14px;
  cursor: pointer;
  outline: none;
}
.leads-row-icon-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.leads-row-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(15, 23, 42, 0.18));
}
.leads-row-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5f6a, #e23d58);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  border: 2.5px solid #fff;
  box-shadow: 0 4px 9px rgba(255, 77, 95, 0.4);
}
.leads-row-text { min-width: 0; }
.leads-row-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.leads-row-name {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1;
  min-width: 0;
}
.leads-row-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  background: #eef3ff;
  padding: 2px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.leads-row-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.leads-mini-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.leads-mini-chip.ok { background: #e3f7ec; color: var(--green); }
.leads-mini-chip.warn { background: #fff3cd; color: #a3670a; }
.leads-mini-chip.type-video { background: var(--badge-video-bg); color: var(--badge-video-fg); }
.leads-mini-chip.type-writing { background: var(--badge-writing-bg); color: var(--badge-writing-fg); }

/* action buttons (top-right of row) */
.leads-row-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  align-self: stretch;
  justify-content: center;
}
.leads-row-act {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.1s;
}
.leads-row-act:active { transform: scale(0.92); }
.leads-row-act.primary {
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff;
  box-shadow: 0 4px 10px rgba(47, 108, 255, 0.3);
}
.leads-row-act.ghost {
  background: var(--surface-1);
  color: var(--text-3);
  border: 1px solid var(--line);
}
.leads-row-act.ghost:hover { color: var(--red); border-color: var(--red); }
.leads-row-act.primary:disabled { opacity: 0.85; cursor: progress; }

/* hint bar (bottom of row, full-width clickable) */
.leads-row-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-top: 1px dashed var(--line);
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.leads-row-hint:hover { background: rgba(47, 108, 255, 0.04); }
.leads-row-hint-text {
  flex: 1 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leads-row-hint.tone-muted { color: var(--text-3); }
.leads-row-hint.tone-ok { color: var(--green); background: rgba(28, 184, 122, 0.04); }
.leads-row-hint.tone-info { color: var(--blue); background: rgba(47, 108, 255, 0.04); }
.leads-row-hint.tone-warn { color: #a3670a; background: rgba(255, 162, 58, 0.06); }
.leads-row-hint.tone-err { color: var(--red); background: rgba(255, 77, 95, 0.05); }
.leads-row-hint-caret {
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.7;
}

.leads-caret-svg { transition: transform 0.18s ease; }
.leads-caret-svg.open { transform: rotate(180deg); }

/* drawer (lead list) */
.leads-row-drawer {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%);
  border-top: 1px solid rgba(47, 108, 255, 0.12);
  padding: 14px 14px 16px;
}
.leads-drawer-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 6px;
  gap: 6px;
  margin-bottom: 12px;
}
.leads-drawer-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 4px;
  border: 0;
  border-radius: 10px;
  background: var(--panel-soft);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.leads-drawer-tab.on {
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff;
  box-shadow: 0 4px 10px rgba(47, 108, 255, 0.25);
}
.leads-drawer-tab.on .leads-drawer-tab-count { color: #fff; }
.leads-drawer-tab-count {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.leads-drawer-empty {
  text-align: center;
  padding: 28px 16px;
  border-radius: 12px;
  background: var(--surface-1);
  color: var(--muted);
  font-size: 13px;
}

.leads-drawer-list { display: flex; flex-direction: column; gap: 10px; }
.leads-drawer-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}
.leads-drawer-item.status-imported { background: #f3fbf6; border-color: rgba(28, 184, 122, 0.18); }
.leads-drawer-item.status-ignored { opacity: 0.62; }
.leads-drawer-cover {
  width: 64px; height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-soft);
  display: grid;
  place-items: center;
  color: var(--muted);
  flex-shrink: 0;
}
.leads-drawer-cover img { width: 100%; height: 100%; object-fit: cover; }
.leads-drawer-body { min-width: 0; }
.leads-drawer-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.leads-drawer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.leads-dot { color: var(--text-4); }
.leads-status {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
}
.leads-status-ok { background: #e3f7ec; color: var(--green); }
.leads-status-warn { background: #fff3cd; color: #a3670a; }
.leads-status-default { background: var(--panel-soft); color: var(--muted); }
.leads-status-err { background: #ffe4e7; color: var(--red); }

.leads-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  align-items: stretch;
}
.leads-act {
  min-width: 60px;
  padding: 7px 14px;
  border: 0;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, background 0.12s;
}
.leads-act:active:not(.disabled):not(.queued) { transform: scale(0.96); }
.leads-act.disabled { cursor: not-allowed; opacity: 0.7; }
.leads-act.primary {
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff;
  box-shadow: 0 3px 8px rgba(47, 108, 255, 0.25);
}
.leads-act.ghost {
  background: var(--panel-soft);
  color: var(--text-2);
}
.leads-act.ghost:hover { background: var(--surface-3); color: var(--text-1); }
.leads-act.ghost-sm {
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  padding: 3px 8px;
  font-size: 11px;
  min-width: 0;
}
.leads-act.ghost-sm:hover { color: var(--red); }
.leads-act.queued {
  background: #e3f7ec;
  color: var(--green);
  cursor: default;
}

/* Refresh pill (header action) */
.leads-refresh-pill {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.leads-refresh-pill:active { transform: scale(0.94); }
.leads-refresh-pill:disabled { opacity: 0.5; cursor: progress; }

/* Form */
.leads-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid var(--line);
  margin-bottom: 14px;
}
.leads-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}
.leads-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.leads-form label > span:first-child {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.leads-form-hint {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.5;
}
.leads-form input,
.leads-form select,
.leads-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  outline: 0;
}
.leads-form textarea { min-height: 64px; resize: vertical; }
.leads-form input:focus,
.leads-form textarea:focus,
.leads-form select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.12);
}
.leads-channel-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 6px;
  gap: 6px;
}
.leads-channel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  min-width: 0;
}
.leads-channel-btn img {
  width: 22px; height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.leads-channel-btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leads-channel-btn.on {
  border-color: var(--blue);
  color: var(--blue);
  background: #eef3ff;
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.12);
}
.leads-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.leads-check input { width: 16px; height: 16px; }
.leads-check-inline {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
}
.leads-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.leads-form-actions .ghost-btn,
.leads-form-actions .primary-btn {
  margin: 0;
  width: auto;
  padding: 9px 18px;
  font-size: 13px;
}

/* Empty / loading state */
.leads-state {
  margin: 6px 0;
  padding: 28px 18px;
  text-align: center;
  border-radius: 14px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13.5px;
}

/* Spinner + toast */
.leads-spinner {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: leads-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes leads-spin { to { transform: rotate(360deg); } }
.leads-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.3);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  animation: leads-toast-in 0.2s ease, leads-toast-out 0.4s ease 4s forwards;
  max-width: calc(100% - 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes leads-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes leads-toast-out {
  to { opacity: 0; transform: translateX(-50%) translateY(8px); }
}

/* Folder back button (search history detail) */
.leads-folder-back {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
}

/* ============================================================ *
 *  Material preview modal (shared, used by chooser cards)       *
 * ============================================================ */
.mat-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10, 16, 30, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: mat-preview-fade 0.16s ease;
}
.mat-preview-card {
  position: relative;
  width: min(100%, 520px);
  max-height: 82dvh;
  background: var(--surface-1);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(10, 16, 30, 0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mat-preview-up 0.18s ease;
}
.mat-preview-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.mat-preview-title-wrap { min-width: 0; flex: 1 1; }
.mat-preview-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mat-preview-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.mat-preview-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.mat-preview-cover {
  width: 100%;
  max-height: 60dvh;
  overflow: hidden;
  background: var(--panel-soft);
  display: grid;
  place-items: center;
}
.mat-preview-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60dvh;
  object-fit: contain;
}
.mat-preview-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 14px 16px;
}
.mat-preview-content {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}
.mat-preview-content-html {
  white-space: normal;
}
.mat-preview-content-html img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px auto;
  border-radius: 8px;
}
.mat-preview-content-html video {
  display: block;
  width: 100%;
  max-height: 56vh;
  margin: 12px 0;
  border-radius: 8px;
  background: #000;
}
.mat-preview-content-html a {
  color: var(--blue);
  text-decoration: none;
}
.mat-preview-content-html section,
.mat-preview-content-html blockquote {
  max-width: 100%;
}
.mat-preview-empty {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 32px 8px;
}
.mat-preview-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.mat-preview-foot .ghost-btn,
.mat-preview-foot .primary-btn {
  margin-top: 0;
  width: auto;
  min-width: 96px;
  padding: 10px 18px;
}
@keyframes mat-preview-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mat-preview-up {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================ *
 *  /me/styles — 个性化配置                                       *
 * ============================================================ */
.personalization-page .pers-segment {
  display: flex;
  gap: 4px;
  margin: 12px 16px 14px;
  padding: 4px;
  background: var(--panel-soft);
  border-radius: 999px;
}
.personalization-page .pers-segment button {
  flex: 1 1;
  border: 0;
  background: transparent;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-2);
  cursor: pointer;
}
.personalization-page .pers-segment button.active {
  background: var(--surface-1);
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

.personalization-page .pers-loading,
.personalization-page .pers-empty {
  margin: 40px 16px;
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  background: var(--surface-1);
  border-radius: 14px;
  border: 1px dashed var(--line-strong);
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.personalization-page .pers-empty strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}
.personalization-page .pers-empty span {
  font-size: 13px;
  color: var(--muted);
}

.pers-card {
  margin: 0 16px 12px;
  padding: 14px 14px 8px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.pers-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pers-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
}
.pers-card-title em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--panel-soft);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  font-style: normal;
}
.pers-add-btn {
  border: 0;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.pers-card-hint {
  margin: 6px 0 10px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}
.pers-card-empty {
  padding: 20px 0 14px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.pers-subchip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.pers-subchip {
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pers-subchip em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 700;
}
.pers-subchip.active {
  background: rgba(47, 108, 255, 0.1);
  border-color: var(--blue);
  color: var(--blue);
}
.pers-subchip.active em { color: var(--blue); }

.pers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.pers-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel-soft);
  border-radius: 12px;
  cursor: pointer;
}
.pers-row:active { transform: scale(0.99); }
.pers-row-body { flex: 1 1; min-width: 0; display: grid; grid-gap: 4px; gap: 4px; }
.pers-row-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.pers-default-tag {
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
}
.pers-sub-tag {
  background: rgba(47, 108, 255, 0.12);
  color: var(--blue);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}
.pers-row-sub {
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pers-row-prompt {
  font-size: 12px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
.pers-row-arrow {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--text-3);
  font-weight: 400;
}

/* ===== Edit sheet ===== */
.pers-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.pers-sheet {
  width: 100%;
  max-width: 440px;
  max-height: 92dvh;
  background: var(--surface-1);
  border-radius: 22px 22px 0 0;
  display: flex;
  flex-direction: column;
  animation: pers-sheet-up .22s ease;
}
@keyframes pers-sheet-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.pers-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.pers-sheet-head strong {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
}
.pers-sheet-close,
.pers-sheet-save {
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
}
.pers-sheet-close { color: var(--text-2); }
.pers-sheet-save { color: var(--blue); }
.pers-sheet-save[disabled] { color: var(--text-3); }
.pers-sheet-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px 18px 24px;
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.pers-field { display: grid; grid-gap: 6px; gap: 6px; }
.pers-field > label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-2);
}
.pers-field input[type="text"],
.pers-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  outline: 0;
  resize: vertical;
}
.pers-field textarea { min-height: 110px; line-height: 1.55; }
.pers-field input[type="text"]:focus,
.pers-field textarea:focus {
  border-color: var(--blue);
}
.pers-field-hint {
  font-size: 11px;
  color: var(--muted);
  font-style: normal;
}
.pers-field-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pers-field-toggle > label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.pers-segment-mini {
  display: inline-flex;
  background: var(--panel-soft);
  border-radius: 10px;
  padding: 3px;
  gap: 0;
}
.pers-segment-mini button {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
}
.pers-segment-mini button.active {
  background: var(--surface-1);
  color: var(--blue);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.pers-apply-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pers-apply-chip {
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.pers-apply-chip.active {
  background: rgba(47, 108, 255, 0.1);
  border-color: var(--blue);
  color: var(--blue);
}

.pers-check-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.pers-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--panel-soft);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.pers-check input { margin: 0; accent-color: var(--blue); }

.pers-error {
  background: rgba(255, 77, 95, 0.12);
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 8px;
}
.pers-delete-btn {
  margin-top: 6px;
  width: 100%;
  border: 1px solid rgba(255, 77, 95, 0.3);
  background: rgba(255, 77, 95, 0.08);
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
}
.pers-delete-btn[disabled] { opacity: 0.6; cursor: progress; }

/* ============================================================ *
 *  PersonalizationPicker — 工具页内嵌的多选 chip 组              *
 * ============================================================ */
.pp-loading,
.pp-empty {
  padding: 14px 12px;
  background: var(--panel-soft);
  border-radius: 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.pp-empty a {
  color: var(--blue);
  font-weight: 800;
  margin-left: 4px;
}
.pp-block {
  margin-top: 6px;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.pp-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.pp-group {
  background: var(--panel-soft);
  border-radius: 12px;
  padding: 10px 12px;
}
.pp-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pp-group-title {
  font-size: 13px;
  font-weight: 900;
}
.pp-group-count {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.pp-blue   .pp-group-title { color: var(--blue); }
.pp-orange .pp-group-title { color: var(--orange); }
.pp-purple .pp-group-title { color: #8b5cf6; }
.pp-green  .pp-group-title { color: #1fb87a; }

.pp-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pp-chip {
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-blue   .pp-chip.active { background: var(--blue);     color: #fff; border-color: var(--blue); }
.pp-orange .pp-chip.active { background: var(--orange);   color: #fff; border-color: var(--orange); }
.pp-purple .pp-chip.active { background: #8b5cf6;         color: #fff; border-color: #8b5cf6; }
.pp-green  .pp-chip.active { background: #1fb87a;         color: #fff; border-color: #1fb87a; }

.pp-foot {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}
.pp-foot a {
  color: var(--blue);
  font-weight: 800;
  margin-left: 6px;
}
.pp-extra-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-2);
  margin-bottom: 6px;
}

/* ============================================================ *
 *  IdentityBinder 行内按钮（绑定 / 解绑 / 不可解绑）             *
 * ============================================================ */
.identity-action {
  flex: 0 0 auto;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.4;
}
.identity-action.bind {
  background: rgba(47, 108, 255, 0.1);
  color: var(--blue);
}
.identity-action.bind:hover { background: rgba(47, 108, 255, 0.18); }
.identity-action.unbind {
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--line-strong);
}
.identity-action.unbind:hover {
  color: var(--red);
  border-color: rgba(255, 77, 95, 0.4);
}
.identity-action.disabled {
  background: transparent;
  color: var(--text-3);
  font-weight: 400;
  cursor: default;
  padding: 6px 4px;
}

/* ============================================================
   智能导入 · 6 合 1 渠道自动识别
   只展示"目前支持的来源"图标，识别到的渠道高亮。
   ============================================================ */
.smart-source-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 2px;
  flex-wrap: wrap;
}
.smart-source-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line, #e6e8ee);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
  flex: 0 0 auto;
}
.smart-source-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  filter: grayscale(0.55) opacity(0.78);
  transition: filter 0.18s ease;
}
.smart-source-icon.detected {
  border-color: #2f6cff;
  background: rgba(47, 108, 255, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(47, 108, 255, 0.18);
}
.smart-source-icon.detected img {
  filter: none;
}
.smart-detected-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #16a34a;
  font-weight: 500;
}
.smart-undetected-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #dc2626;
  font-weight: 500;
}

/* ============================================================ *
 *  /me sticky-head — avatar + 双行文字 + 退出胶囊                *
 *  与 /materials、/avatars 等 sticky-head 视觉高度一致           *
 * ============================================================ */
.brand-mark.me-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1;
}
.me-mark-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
  box-shadow: 0 4px 10px rgba(91, 92, 255, 0.18);
  filter: none;
}
.me-mark-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1;
}
.me-mark-text .brand-text {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.3px;
  line-height: 1.15;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.me-mark-sub {
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* /me 顶部退出按钮 — 复用 .mat-import-trigger 的胶囊设计，
   颜色改用浅灰底 + var(--text-2) 文字（不抢眼，但跟 head-actions 同高） */
.me-logout-compact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-inset);
  flex-shrink: 0;
  height: 32px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s, filter 0.15s, background-color 0.15s;
}
.me-logout-compact:hover {
  background: var(--surface-3);
  color: var(--text-1);
}
.me-logout-compact:active {
  transform: scale(0.96);
  background: var(--surface-3);
}
.me-logout-compact:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.me-logout-compact svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
  flex-shrink: 0;
}

/* /me 第一段（钱包卡）跟 sticky-head 之间留点呼吸空间 */
.me-page .sticky-head + .me-section {
  margin-top: 4px;
}

/* ============================================================
 * Material picker（共享版「选择素材」组件 MaterialChoosePicker）
 * 用在 /direct-rewrite 和 /rewrite 的 wizard step 里。
 * 整体宽度受外层 .quick-step-body 约束（≈440px），布局紧凑。
 * ============================================================ */
/* picker 根容器：纵向 flex，行间距和素材中心 .mat-toolbar-card 节奏一致 */
.mp-root {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* 在 wizard step 内部使用时，第一行（搜索栏）不应再叠 .mat-tools-row 默认的 margin-top */
.mp-root > .mat-tools-row { margin-top: 0; }

.mp-count {
  font-size: 11.5px;
  color: var(--muted);
  margin: 2px 0 0;
}

.mp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}
.mp-empty-btn {
  border: 1px solid var(--blue);
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.mp-empty-btn:hover { background: rgba(47, 108, 255, 0.08); }


/* ============================================================ *
 *  Personalization · AI 提取写作风格按钮 + 进度对话框           *
 * ============================================================ */
.pers-card-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pers-ai-banner-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1.5px solid rgba(31, 184, 122, 0.45);
  background: linear-gradient(135deg, rgba(31, 184, 122, 0.10), rgba(31, 184, 122, 0.04));
  color: var(--text);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  font: inherit;
  box-sizing: border-box;
}
.pers-ai-banner-btn:hover {
  background: linear-gradient(135deg, rgba(31, 184, 122, 0.18), rgba(31, 184, 122, 0.08));
  border-color: rgba(31, 184, 122, 0.6);
}
.pers-ai-banner-btn:active { transform: scale(0.997); }
.pers-ai-banner-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2bc587, #1fb87a);
  color: #fff;
  font-size: 18px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(31, 184, 122, 0.25);
}
.pers-ai-banner-body {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pers-ai-banner-body strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.pers-ai-banner-body small {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.45;
}
.pers-ai-banner-arrow {
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 700;
  color: #1fb87a;
  line-height: 1;
}

.pers-ai-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  padding: 24px;
}
.pers-ai-card {
  background: var(--surface-1);
  border-radius: 18px;
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 320px;
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.25);
}
.pers-ai-icon {
  font-size: 32px;
  line-height: 1;
}
.pers-ai-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
}
.pers-ai-msg {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  min-height: 36px;
}
.pers-ai-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--panel-soft);
  border-top-color: var(--blue);
  margin: 6px auto 0;
  animation: pers-ai-spin 0.8s linear infinite;
}
@keyframes pers-ai-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================ *
 *  /me 注销列表行（系统与账户末尾）                              *
 * ============================================================ */
.me-row.me-row-logout {
  color: var(--red);
}
.me-row.me-row-logout .me-row-title {
  color: var(--red);
  font-weight: 700;
}
.me-row.me-row-logout .me-row-sub {
  color: var(--red);
  opacity: 0.55;
}
.me-row.me-row-logout > svg {
  color: var(--red);
  opacity: 0.55;
}
.me-row.me-row-logout:hover {
  background: rgba(255, 77, 95, 0.06);
}
.me-row-ic.me-row-ic-logout {
  background: rgba(255, 77, 95, 0.12);
  color: var(--red);
}

/* ============================================================ *
 *  PersonalizationCategoryStep — 卡片式选择器（带名字/说明/提示词预览） *
 * ============================================================ */
.pp-card-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.pp-item {
  border: 1.5px solid var(--line);
  background: var(--surface-1);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.pp-item-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 12px 14px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.pp-item-toggle:active { transform: scale(0.997); }
.pp-item-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: var(--surface-1);
}
.pp-item.active .pp-item-check {
  border-color: transparent;
  color: #fff;
}
.pp-blue   .pp-item.active                 { border-color: var(--blue);     background: rgba(47, 108, 255, 0.06); }
.pp-blue   .pp-item.active .pp-item-check  { background: var(--blue); }
.pp-orange .pp-item.active                 { border-color: var(--orange);   background: rgba(255, 123, 43, 0.06); }
.pp-orange .pp-item.active .pp-item-check  { background: var(--orange); }
.pp-purple .pp-item.active                 { border-color: #8b5cf6;         background: rgba(139, 124, 246, 0.07); }
.pp-purple .pp-item.active .pp-item-check  { background: #8b5cf6; }
.pp-green  .pp-item.active                 { border-color: #1fb87a;         background: rgba(31, 184, 122, 0.06); }
.pp-green  .pp-item.active .pp-item-check  { background: #1fb87a; }

.pp-item-head {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pp-item-sub-tag {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text-2);
  white-space: nowrap;
}
.pp-blue   .pp-item.active .pp-item-sub-tag { background: rgba(47, 108, 255, 0.15);  color: var(--blue); }
.pp-orange .pp-item.active .pp-item-sub-tag { background: rgba(255, 123, 43, 0.18);  color: var(--orange); }
.pp-purple .pp-item.active .pp-item-sub-tag { background: rgba(139, 124, 246, 0.18); color: #8b5cf6; }
.pp-green  .pp-item.active .pp-item-sub-tag { background: rgba(31, 184, 122, 0.18);  color: #1fb87a; }
.pp-item-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  flex: 1 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-item-default {
  font-size: 10px;
  font-weight: 800;
  background: var(--orange);
  color: #fff;
  padding: 1px 6px;
  border-radius: 999px;
}

/* 选中后展开的提示词编辑区 */
.pp-item-edit-wrap {
  padding: 0 14px 12px;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.pp-item-edit-label {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 700;
}
.pp-item-edit {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  outline: 0;
  resize: vertical;
  min-height: 84px;
}
.pp-item-edit:focus { border-color: var(--blue); }

/* 类目末尾的"自定义提示词" textarea —— 任何类目都可独立写自己的本次要求 */
.pp-custom {
  margin-top: 6px;
  padding: 12px 14px;
  background: var(--panel-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.pp-custom-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-2);
}
.pp-custom-textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  outline: 0;
  resize: vertical;
  min-height: 64px;
}
.pp-custom-textarea:focus { border-color: var(--blue); }

/* ============================================================ *
 *  AI 提取 4 类预览弹窗                                          *
 * ============================================================ */
.pers-ai-sheet {
  background: var(--surface-1);
  border-radius: 18px;
  width: 100%;
  max-width: 440px;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.25);
}
.pers-ai-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.pers-ai-sheet-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}
.pers-ai-sheet-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}
.pers-ai-sheet-close {
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  flex: 0 0 auto;
}
.pers-ai-sheet-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 14px 16px 18px;
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}
.pers-ai-group { display: grid; grid-gap: 8px; gap: 8px; }
.pers-ai-group-title {
  font-size: 12px;
  font-weight: 800;
}
.pers-ai-group.pp-blue   .pers-ai-group-title { color: var(--blue); }
.pers-ai-group.pp-orange .pers-ai-group-title { color: var(--orange); }
.pers-ai-group.pp-purple .pers-ai-group-title { color: #8b5cf6; }
.pers-ai-group.pp-green  .pers-ai-group-title { color: #1fb87a; }

.pers-ai-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 18px;
  border-top: 1px solid var(--line);
}
.pers-ai-sheet-count {
  font-size: 12px;
  color: var(--text-2);
}
.pers-ai-sheet-foot .primary-btn {
  flex: 0 0 auto;
  padding: 10px 22px;
}

/* ============================================================ *
 *  AI 提取预览 sheet 用的旧 pp-item 描述/提示词文本（picker 不再用） *
 * ============================================================ */
.pers-ai-sheet-body .pp-item-body {
  flex: 1 1;
  min-width: 0;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}
.pers-ai-sheet-body .pp-item-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}
.pers-ai-sheet-body .pp-item-prompt {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  background: var(--panel-soft);
  padding: 6px 10px;
  border-radius: 8px;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}
.pers-ai-sheet-body .pp-item-prompt.expanded {
  -webkit-line-clamp: unset;
  display: block;
}
/* AI 预览里 pp-item 是一整个 button —— 让它布局成 row */
.pers-ai-sheet-body .pp-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface-1);
}
.pers-ai-sheet-body .pp-item .pp-item-check {
  margin-top: 2px;
}

/* ============================================================ *
 *  /avatars 新增分身抽屉 —— 复用 mat-import-* 抽屉壳，但内容更高 *
 * ============================================================ */
.avatar-create-drawer {
  /* 这个表单很长（人物源 + 声音源 + 背景源 + 姓名 等多段），给到接近全屏 */
  height: 92dvh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
}
.avatar-create-drawer > .mat-import-handle-area { flex: 0 0 auto; }
/* 让 CreatePanel 自身内容区滚动 */
.avatar-create-drawer .create-form,
.avatar-create-drawer > :not(.mat-import-handle-area) {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 最近成稿空态 */
.creation-recent-empty {
  margin: 0 4px;
  padding: 16px 14px;
  background: var(--panel-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.creation-recent-empty-tip {
  font-size: 13px;
  color: var(--text-2);
  flex: 1 1;
  min-width: 0;
}
.creation-recent-empty-cta {
  font-size: 12px;
  font-weight: 800;
  color: var(--blue);
  background: rgba(47, 108, 255, 0.1);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ============================================================
 * 衍生物链路（屏 1 + 屏 4 共用） — 2026-04-28 引入
 * 5 个共享组件：
 *  - LineagePill         "由：xx ↗" chip（衍生物身上）
 *  - MaterialToolsGrid   工具网格（primary 5 / next 4）
 *  - DerivativesList     "衍生作品 (N)" 列表（屏 1）
 *  - RelatedProductsRail "相关产物" 横向轨道（屏 4）
 *  - SourceLockBar       "正在基于：xx [换素材]" 顶部条（屏 2 /rewrite）
 * 设计原则：链路只读、入口扁平、不画进度条、不暗示流程必走。
 * ============================================================ */

/* ----- LineagePill ----- */
.lineage-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.lineage-pill:hover { background: rgba(47, 108, 255, 0.1); color: var(--blue); border-color: rgba(47, 108, 255, 0.2); }
.lineage-pill-md { font-size: 13px; padding: 5px 12px; }
.lineage-pill-md .lineage-pill-title { font-weight: 700; }
.lineage-pill .lineage-pill-label { color: var(--muted); margin-right: 2px; }
.lineage-pill .lineage-pill-title { font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

/* ----- MaterialToolsGrid ----- */
.mtools-card {
  background: var(--surface-1);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 6px 18px rgba(91, 111, 255, 0.06);
}
.mtools-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 12px;
}
.mtools-title-soft {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 10px;
}
.mtools-grid {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.mtools-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mtools-grid-4 { grid-template-columns: repeat(4, 1fr); }
.mtools-grid-5 { grid-template-columns: repeat(5, 1fr); }
.mtools-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px 4px 6px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
  transition: transform .1s, background .12s;
}
.mtools-cell:active { transform: scale(0.96); }
.mtools-cell:hover { background: var(--panel-soft); }
.mtools-icon-wrap {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--panel-soft);
  overflow: hidden;
}
.mtools-icon-wrap img {
  display: block;
  width: 34px;
  height: 34px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center center;
  transform: translate(var(--mtools-icon-x, 0), var(--mtools-icon-y, 0)) scale(var(--mtools-icon-scale, 1));
  transform-origin: center center;
}
.mtools-key-direct_rewrite { --mtools-icon-x: -5px; --mtools-icon-y: -3px; }
.mtools-key-article_rewrite,
.mtools-key-rewrite_again { --mtools-icon-x: 1px; --mtools-icon-y: -4px; --mtools-icon-scale: 0.94; }
.mtools-key-article_images { --mtools-icon-y: -5px; }
.mtools-key-wechat_layout { --mtools-icon-x: 3px; --mtools-icon-y: -4px; }
.mtools-key-video_quick { --mtools-icon-x: -3px; --mtools-icon-y: 1px; }
.mtools-cell-label {
  display: block;
  max-width: 100%;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* tone 色块底（淡色） */
.mtools-tone-orange  .mtools-icon-wrap { background: rgba(255, 123, 43, 0.12); }
.mtools-tone-purple  .mtools-icon-wrap { background: rgba(139, 92, 246, 0.12); }
.mtools-tone-blue    .mtools-icon-wrap { background: rgba(47, 108, 255, 0.12); }
.mtools-tone-green   .mtools-icon-wrap { background: rgba(31, 184, 122, 0.12); }
.mtools-tone-magenta .mtools-icon-wrap { background: rgba(236, 72, 153, 0.12); }
.mtools-tone-indigo  .mtools-icon-wrap { background: rgba(79, 70, 229, 0.12); }

/* next variant 卡片视觉略弱（不喧宾夺主） */
.mtools-next { box-shadow: none; padding: 12px 14px 10px; }

/* ----- DerivativesList (list 变体，屏 1 用) ----- */
.deriv-list-card {
  background: var(--surface-1);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 6px 18px rgba(91, 111, 255, 0.06);
}
.deriv-list-head {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0 0 10px;
}
.deriv-list-title { font-size: 14px; font-weight: 800; color: var(--text); }
.deriv-list-count { font-size: 12px; color: var(--muted); font-weight: 600; }
.deriv-list-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.deriv-list-rail::-webkit-scrollbar { display: none; }
.deriv-list-card-item {
  flex: 0 0 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--text);
}
.deriv-list-card-item:active { transform: scale(0.98); }
.deriv-list-cover {
  position: relative;
  width: 120px;
  height: 80px;
  border-radius: 10px;
  background: var(--panel-soft);
  overflow: hidden;
}
.deriv-list-cover img { width: 100%; height: 100%; object-fit: cover; }
.deriv-list-cover-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 24px;
  color: var(--muted);
}
.deriv-list-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.deriv-list-tag-orange { background: linear-gradient(135deg, #ff8e53, #ff6e2c); }
.deriv-list-tag-purple { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.deriv-list-tag-blue   { background: linear-gradient(135deg, #3a7dff, #2f6cff); }
.deriv-list-tag-green  { background: linear-gradient(135deg, #34d399, #1fb87a); }
.deriv-list-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px;
}
.deriv-list-meta strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
.deriv-list-meta small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.deriv-list-empty, .deriv-list-loading {
  background: var(--surface-1);
  border-radius: 16px;
  padding: 20px 14px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* ----- RelatedProductsRail (rail 变体，屏 4 用) -----
   不画"流程"，只画"同源衍生关系"。当前节点高亮 + "你在这里"。 */
.related-rail-card {
  background: var(--surface-1);
  border-radius: 16px;
  padding: 14px 14px 16px;
  box-shadow: 0 6px 18px rgba(91, 111, 255, 0.06);
}
.related-rail-head {
  margin-bottom: 12px;
}
.related-rail-title { font-size: 14px; font-weight: 800; color: var(--text); }
.related-rail-track {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 2px 4px;
}
.related-rail-track::-webkit-scrollbar { display: none; }
.related-rail-node {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--text);
  padding: 10px 8px 6px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: transparent;
  min-width: 64px;
  transition: border-color .12s, background .12s;
}
.related-rail-node:hover { background: var(--panel-soft); }
.related-rail-current {
  border-color: var(--blue);
  background: rgba(47, 108, 255, 0.06);
}
.related-rail-here {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(47, 108, 255, 0.25);
}
.related-rail-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.related-rail-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 16px;
  background: var(--panel-soft);
  color: var(--text-2);
}
.related-rail-icon-source { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.related-rail-icon-orange { background: rgba(255, 123, 43, 0.15); color: #ff7b2b; }
.related-rail-icon-purple { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.related-rail-icon-blue   { background: rgba(47, 108, 255, 0.15); color: var(--blue); }
.related-rail-icon-green  { background: rgba(31, 184, 122, 0.15); color: #1fb87a; }
.related-rail-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
}
.related-rail-sub {
  font-size: 10px;
  color: var(--muted);
}
.related-rail-connector {
  flex: 0 0 16px;
  height: 1.5px;
  background: var(--line);
  align-self: center;
}

/* ----- SourceLockBar (屏 2 /rewrite 顶部) ----- */
.source-lock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(47, 108, 255, 0.08), rgba(47, 108, 255, 0.03));
  border: 1px solid rgba(47, 108, 255, 0.18);
  border-radius: 14px;
  margin: 0 0 14px;
}
.source-lock-cover {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--panel-soft);
}
.source-lock-cover-fallback {
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--muted);
}
.source-lock-text {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}
.source-lock-prefix { color: var(--muted); font-weight: 600; }
.source-lock-title {
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.source-lock-meta { color: var(--muted); font-weight: 600; }
.source-lock-change {
  flex: 0 0 auto;
  border: 1.5px solid var(--blue);
  background: var(--surface-1);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s;
}
.source-lock-change:hover { background: rgba(47, 108, 255, 0.08); }
.source-lock-close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
.source-lock-close:hover { background: var(--panel-soft); color: var(--text); }

/* ----- mat-pop 内的衍生物区块 / 改写自回链 / AI生成角标 ----- */
.mat-pop-lineage {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--panel-soft);
  font-size: 13px;
  text-decoration: none;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
.mat-pop-lineage:hover { color: var(--blue); background: rgba(47, 108, 255, 0.06); }
.mat-pop-lineage-arrow { color: var(--muted); font-weight: 700; }
.mat-pop-lineage-prefix { color: var(--muted); }
.mat-pop-lineage-title {
  flex: 1 1;
  font-weight: 800;
  color: var(--blue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mat-pop-lineage-time { color: var(--muted); font-size: 12px; }

.mat-pop-cover { position: relative; }
.mat-pop-cover-aibadge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.65);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  letter-spacing: 0.5px;
}

.mat-pop-tools-slot {
  margin: 16px 0 8px;
}
.mat-pop-derivatives {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* /all 创作中心 - 卡片上的 LineagePill 排布 */
.creation-running-lineage { margin-top: 6px; }
.creation-recent-lineage { align-self: flex-start; margin: 4px 0; }

/* /rewrite 第 2 步顶部小提示，配合 SourceLockBar 使用 */
.rewrite-source-hint {
  margin: 0 0 10px;
  padding: 6px 10px;
  background: rgba(47, 108, 255, 0.08);
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
}

/* 最近成稿封面：无图无视频时用文字预览，按卡片大小自动截断（line-clamp） */
.creation-recent-cover-text {
  background: linear-gradient(135deg, rgba(47, 108, 255, 0.04), rgba(47, 108, 255, 0.10));
  padding: 34px 12px 12px;
  display: flex;
  align-items: flex-start;
}
.creation-recent-cover-textpreview {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  line-clamp: 5;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
  font-weight: 500;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ========== /article-images v2 三段式重构 ========== */
.article-image-page-v2 .section {
  gap: 14px;
  /* 给底部留双倍空间：tabbar (~76px) + sticky 操作条 (~70px) + 间距 (24px) */
  padding-bottom: calc(200px + env(safe-area-inset-bottom));
}

/* 顶部素材条 */
.material-strip {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--surface-1);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.material-strip-cover {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: pointer;
}
.material-strip-cover img { width: 100%; height: 100%; object-fit: cover; }
.material-strip-body {
  min-width: 0;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}
.material-strip-body strong {
  font-size: 15px;
  color: var(--text);
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.material-strip-body small {
  color: var(--text-3);
  font-size: 12px;
}
.material-strip-change {
  border: 0;
  background: transparent;
  color: var(--indigo);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
  white-space: nowrap;
}

.material-strip-empty {
  display: grid;
  grid-template-columns: 44px 1fr 18px;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background: var(--surface-1);
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  cursor: pointer;
  text-align: left;
}
.material-strip-empty-actions {
  grid-template-columns: 44px 1fr;
  cursor: default;
}
.material-strip-empty:disabled { opacity: 0.6; cursor: progress; }
.material-strip-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  color: var(--indigo);
}
.material-strip-empty-text { display: grid; grid-gap: 3px; gap: 3px; min-width: 0; }
.material-strip-empty-text strong {
  font-size: 15px;
  color: var(--text);
  font-weight: 700;
}
.material-strip-empty-text small {
  font-size: 12px;
  color: var(--text-3);
}
.material-strip-empty-arrow {
  color: var(--text-3);
  font-size: 18px;
}
.tool-empty-guide {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  text-align: left;
}
.tool-empty-guide strong {
  color: var(--text);
  font-size: 14px;
}
.tool-empty-guide span {
  display: block;
}
.tool-empty-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}
.material-strip-empty .tool-empty-links {
  grid-column: 2;
}
.tool-empty-links a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--surface-2);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

/* 工具栏：主按钮独占一行 + 下方 chips */
.article-toolbar {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.article-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.article-toolbar .chip-primary-block {
  width: 100%;
  justify-content: center;
  padding: 12px 14px;
  font-size: 14px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--indigo) 8%, var(--surface-1));
}
.article-toolbar .chip-primary-block:disabled { background: var(--surface-1); }
.article-toolbar .chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-1);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.article-toolbar .chip:hover:not(:disabled) { border-color: var(--text-3); }
.article-toolbar .chip:disabled { opacity: 0.5; cursor: not-allowed; }
.article-toolbar .chip-primary {
  border-color: var(--indigo);
  color: var(--indigo);
}
.article-toolbar .chip-primary:disabled {
  border-color: var(--line-strong);
  color: var(--text-3);
}
.article-toolbar-row .chip {
  flex: 1 1;
  min-width: 0;
  justify-content: center;
}
.article-toolbar .chip-select {
  padding: 5px 8px;
  gap: 0;
}
.article-toolbar .chip-select select {
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--text);
  font-weight: 600;
  outline: 0;
  padding: 4px 0;
  cursor: pointer;
  width: 100%;
  text-align: center;
  text-align-last: center;
  text-overflow: ellipsis;
  overflow: hidden;
}

.article-writing-note {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  padding: 11px 13px;
  background: color-mix(in oklab, var(--indigo) 6%, var(--surface-1));
  border: 1px solid color-mix(in oklab, var(--indigo) 18%, transparent);
  border-radius: 14px;
  line-height: 1.5;
}
.article-writing-note strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.article-writing-note small {
  font-size: 12px;
  color: var(--text-2);
}

.article-banner {
  background: color-mix(in oklab, var(--indigo) 8%, var(--surface-1));
  border: 1px solid color-mix(in oklab, var(--indigo) 20%, transparent);
  color: var(--text-2);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.article-banner.err {
  background: color-mix(in oklab, var(--red) 6%, var(--surface-1));
  border-color: color-mix(in oklab, var(--red) 22%, transparent);
  color: color-mix(in oklab, var(--red) 70%, var(--text));
}

/* 列表 header */
.article-list-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 4px 0;
}
.article-list-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.article-list-count {
  font-size: 12px;
  color: var(--text-3);
}

/* 配图卡片 v2 */
.article-image-list-v2 {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}
.article-card-v2 {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-gap: 12px;
  gap: 12px;
  padding: 12px;
  background: var(--surface-1);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
}
.article-card-v2.status-amber { border-color: color-mix(in oklab, var(--amber) 26%, transparent); }
.article-card-v2.status-green { border-color: color-mix(in oklab, var(--green) 18%, transparent); }
.article-card-v2.status-blue { border-color: color-mix(in oklab, var(--blue) 16%, transparent); }

.article-card-cover {
  width: 120px;
  height: 120px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-3);
  display: grid;
  place-items: center;
}
.article-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-card-cover-empty {
  width: 100%;
  height: 100%;
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
  background: transparent;
  color: var(--text-3);
  font-size: 11px;
  display: grid;
  place-items: center;
  grid-gap: 4px;
  gap: 4px;
  cursor: pointer;
  padding: 6px;
  text-align: center;
  line-height: 1.3;
}
.article-card-cover-empty:hover { border-color: var(--indigo); color: var(--indigo); }
.article-card-cover-empty:disabled { opacity: 0.6; cursor: progress; }
.article-card-cover-plus {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.article-card-body {
  min-width: 0;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  align-content: start;
}
.article-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.article-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.article-card-badge.amber {
  background: color-mix(in oklab, var(--amber) 14%, transparent);
  color: color-mix(in oklab, var(--amber) 70%, #4a3300);
}
.article-card-badge.green {
  background: color-mix(in oklab, var(--green) 14%, transparent);
  color: color-mix(in oklab, var(--green) 60%, #003a22);
}
.article-card-badge.blue {
  background: color-mix(in oklab, var(--blue) 12%, transparent);
  color: color-mix(in oklab, var(--blue) 60%, #001a55);
}
.article-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  flex: 1 1;
  min-width: 0;
}
.article-card-delete {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
}
.article-card-delete:hover { background: var(--surface-3); color: var(--red); }
.article-card-prompt {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card-form {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.article-card-form label {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}
.article-card-form label span {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
}
.article-card-form input,
.article-card-form select,
.article-card-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  outline: 0;
}
.article-card-form textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.5;
}
.article-card-form input:focus,
.article-card-form select:focus,
.article-card-form textarea:focus { border-color: var(--indigo); }

.article-card-generate {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 9px 12px;
  background: var(--indigo);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.article-card-generate:disabled {
  background: color-mix(in oklab, var(--indigo) 40%, var(--surface-3));
  cursor: not-allowed;
}
.article-card-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 12.5px;
}
.article-card-actions .vs-link-btn {
  color: var(--indigo);
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-weight: 600;
  cursor: pointer;
}
.article-card-actions .vs-link-btn:disabled { color: var(--text-3); cursor: not-allowed; }

.article-image-list-foot {
  display: flex;
  justify-content: flex-end;
  padding: 4px;
}

/* 吸底操作条 */
.article-sticky-bar {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 416px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px 10px 14px;
  background: color-mix(in oklab, var(--surface-1) 96%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12), 0 1px 0 var(--line);
  z-index: 20;
}
.article-sticky-status {
  display: grid;
  grid-template-columns: 8px 1fr;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.article-sticky-status .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-4);
  margin-top: 6px;
}
.article-sticky-status .status-dot.ok { background: var(--green); }
.article-sticky-status > div {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  min-width: 0;
}
.article-sticky-status strong {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 700;
}
.article-sticky-status small {
  font-size: 11px;
  color: var(--text-3);
}
.article-sticky-bar .primary-btn {
  margin: 0;
  padding: 10px 18px;
  font-size: 13.5px;
  border-radius: 12px;
  white-space: nowrap;
  min-width: 100px;
}

/* 素材选择抽屉 */
.article-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: ksl-fade-in 0.16s ease both;
}
.article-drawer {
  width: 100%;
  max-width: 440px;
  max-height: min(86vh, 720px);
  background: var(--surface-1);
  border-radius: 22px 22px 0 0;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  animation: ksl-slide-up 0.22s ease both;
  padding-bottom: env(safe-area-inset-bottom);
}
.article-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.article-drawer-head strong {
  font-size: 15px;
  color: var(--text);
  font-weight: 700;
}
.article-drawer-close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--text-3);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
}
.article-drawer-close:hover { background: var(--surface-3); color: var(--text); }
.article-drawer-body {
  overflow-y: auto;
  padding: 12px 16px 24px;
}

@keyframes ksl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ksl-slide-up {
  from { transform: translateY(40px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}

/* ============================================================ *
 *  /me/styles — 配置集列表 (pset-*)                             *
 * ============================================================ */
.personalization-page .pset-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px 8px;
  padding: 8px 12px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text-3);
}
.personalization-page .pset-search input {
  flex: 1 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--text);
}
.personalization-page .pset-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 16px 8px;
  font-size: 14px;
  color: var(--text-2);
}
.personalization-page .pset-list-head strong {
  font-weight: 800;
  color: var(--text);
}
.personalization-page .pset-list-head em {
  font-style: normal;
  color: var(--blue);
  margin-left: 4px;
}
.personalization-page .pset-new-link {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.personalization-page .pset-new-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.personalization-page .pset-list {
  list-style: none;
  margin: 0;
  padding: 0 16px 16px;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.personalization-page .pset-card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 12px 14px;
  display: flex;
  align-items: stretch;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.personalization-page .pset-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}
.personalization-page .pset-card.is-default {
  border-left: 3px solid var(--blue);
  padding-left: 12px;
}
.personalization-page .pset-card-body {
  flex: 1 1;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.personalization-page .pset-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.personalization-page .pset-card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}
.personalization-page .pset-default-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.pset-template-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  background: linear-gradient(135deg, #8B6FFF, #6b53d1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.personalization-page .pset-card.is-template {
  border-left: 3px solid #8B6FFF;
  padding-left: 12px;
}
.personalization-page .pset-card.is-template .pset-card-title {
  color: var(--text);
}
.personalization-page .pset-card-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  word-break: break-all;
}
.personalization-page .pset-card-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.personalization-page .pset-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.personalization-page .pset-chip-orange { background: rgba(255, 138, 76, 0.12); color: #c95f1d; }
.personalization-page .pset-chip-purple { background: rgba(139, 111, 255, 0.12); color: #6b53d1; }
.personalization-page .pset-chip-green  { background: rgba(76, 199, 138, 0.14); color: #2f8a5a; }
.personalization-page .pset-chip.off    { opacity: 0.5; }
.personalization-page .pset-card-menu {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--text-3);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  align-self: flex-start;
}
.personalization-page .pset-card-menu:hover { background: var(--surface-3); color: var(--text); }
.personalization-page .pset-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
}
.personalization-page .pset-menu {
  position: absolute;
  top: 44px;
  right: 12px;
  z-index: 51;
  min-width: 130px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
  padding: 4px;
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}
.personalization-page .pset-menu button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}
.personalization-page .pset-menu button:hover { background: var(--surface-3); }
.personalization-page .pset-menu button.danger { color: #d54848; }
.personalization-page .pset-menu button.danger:hover { background: rgba(213, 72, 72, 0.08); }

/* ============================================================ *
 *  /me/styles/[setId] — 配置集详情 (pset-detail-page)            *
 * ============================================================ */
.pset-detail-page .pset-meta-card {
  margin: 12px 16px 8px;
  padding: 14px 14px 12px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.pset-detail-page .pset-meta-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pset-detail-page .pset-meta-name-row strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.pset-detail-page .pset-meta-edit-btn {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.pset-detail-page .pset-meta-edit-btn:hover { background: rgba(79, 125, 255, 0.08); }
.pset-detail-page .pset-meta-desc {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.5;
}
.pset-detail-page .pset-meta-source {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.pset-detail-page .pset-meta-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.pset-detail-page .pset-meta-default-hint {
  font-size: 12px;
  color: var(--muted);
}
.pset-detail-page .pset-meta-name-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  background: var(--surface-2);
}
.pset-detail-page .pset-meta-desc-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  resize: vertical;
  font-family: inherit;
}
.pset-detail-page .pset-meta-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.pset-detail-page .pset-cat-card {
  margin: 12px 16px 0;
  padding: 12px 14px 10px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.pset-detail-page .pset-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pset-detail-page .pset-cat-chip {
  font-size: 13px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
}
.pset-detail-page .pset-cat-chip em {
  font-style: normal;
  margin-left: 4px;
  opacity: 0.8;
}
.pset-detail-page .pset-cat-orange .pset-cat-chip { background: rgba(255, 138, 76, 0.14); color: #c95f1d; }
.pset-detail-page .pset-cat-purple .pset-cat-chip { background: rgba(139, 111, 255, 0.14); color: #6b53d1; }
.pset-detail-page .pset-cat-green  .pset-cat-chip { background: rgba(76, 199, 138, 0.16); color: #2f8a5a; }
.pset-detail-page .pset-cat-empty {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 4px;
  line-height: 1.5;
}
.pset-detail-page .pset-cat-footer-hint {
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2, rgba(0,0,0,0.03));
  border-radius: 6px;
  padding: 6px 10px;
  margin: 10px 0 0;
  line-height: 1.5;
}
.pset-detail-page .pset-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.pset-detail-page .pset-item-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pset-detail-page .pset-item-body {
  flex: 1 1;
  cursor: pointer;
  min-width: 0;
}
.pset-detail-page .pset-item-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  display: inline;
}
.pset-detail-page .pset-item-sub {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(255, 138, 76, 0.12);
  color: #c95f1d;
  font-size: 11px;
  font-weight: 600;
}
.pset-detail-page .pset-item-desc {
  font-size: 12px;
  color: var(--text-2);
  margin: 4px 0 0;
  line-height: 1.5;
}
.pset-detail-page .pset-item-prompt {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.pset-detail-page .pset-item-delete {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--text-3);
  width: 28px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-start;
}
.pset-detail-page .pset-item-delete:hover { background: rgba(213, 72, 72, 0.1); color: #d54848; }

.pset-detail-page .pset-bottom-actions {
  display: flex;
  gap: 10px;
  margin: 16px;
  padding-top: 8px;
}
.pset-detail-page .pset-bottom-actions .ghost-btn,
.pset-detail-page .pset-bottom-actions .pers-delete-btn {
  flex: 1 1;
  height: 44px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

/* ============================================================ *
 *  /direct-rewrite & /rewrite — 文章类型 + 配置集 dropdown      *
 * ============================================================ */
.dr-type-select,
.dr-set-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  background: var(--surface-1);
  color: var(--text);
}
.dr-type-hint,
.dr-set-rewrite-note {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.5;
  font-style: italic;
}
.dr-set-empty {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0;
  line-height: 1.5;
}
.dr-set-empty a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}
.dr-set-preview {
  position: relative;
  margin-top: 10px;
  padding: 12px 14px 11px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dr-set-preview.is-default {
  border-left: 3px solid var(--blue);
  padding-left: 11px;
}
.dr-set-preview:hover {
  border-color: var(--line-strong);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}
.dr-set-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dr-set-preview-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dr-set-preview-edit-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  transition: background-color 0.12s ease;
}
.dr-set-preview-edit-link:hover {
  background: rgba(79, 125, 255, 0.1);
}
.dr-set-preview-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  word-break: break-all;
}
.dr-set-preview-rows {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin-top: 4px;
}
.dr-set-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.dr-set-preview-row-orange { background: rgba(255, 138, 76, 0.10); border-color: rgba(255, 138, 76, 0.18); }
.dr-set-preview-row-purple { background: rgba(139, 111, 255, 0.10); border-color: rgba(139, 111, 255, 0.18); }
.dr-set-preview-row-green  { background: rgba(76, 199, 138, 0.10); border-color: rgba(76, 199, 138, 0.18); }
.dr-set-preview-row-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dr-set-preview-row-orange .dr-set-preview-row-dot { background: #c95f1d; }
.dr-set-preview-row-purple .dr-set-preview-row-dot { background: #6b53d1; }
.dr-set-preview-row-green  .dr-set-preview-row-dot { background: #2f8a5a; }
.dr-set-preview-row-label {
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
}
.dr-set-preview-row-value {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.55);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.dr-set-preview-row-disabled {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  opacity: 0.7;
}
.dr-set-preview-row-disabled .dr-set-preview-row-dot {
  background: var(--text-3) !important;
}
.dr-set-preview-row-disabled .dr-set-preview-row-label {
  color: var(--text-2);
  font-weight: 600;
}
.dr-set-preview-row-disabled .dr-set-preview-row-value {
  color: var(--muted);
  background: transparent;
  padding: 0;
}
.dr-extra-label {
  display: block;
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
}
.dr-extra-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface-1);
  color: var(--text);
  resize: vertical;
}

/* ============================================================ *
 *  /article-images v5 — 简化为单 button + 自动保存                *
 * ============================================================ */
.article-image-page-v2 .article-plan-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 32px);
  margin: 12px 16px 6px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #4F7DFF, #3a66e0);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(79, 125, 255, 0.25);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.article-image-page-v2 .article-plan-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(79, 125, 255, 0.32);
}
.article-image-page-v2 .article-plan-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.article-image-page-v2 .article-autosave-note {
  margin: 6px 16px 6px;
  padding: 8px 12px;
  background: rgba(79, 125, 255, 0.08);
  border: 1px solid rgba(79, 125, 255, 0.18);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}
.article-image-page-v2 .article-toolbar-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0 16px;
}
.article-image-page-v2 .article-toolbar-stack .article-plan-btn {
  margin: 0;
}
.article-image-page-v2 .article-plan-btn-sub {
  margin: 6px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-3, #888);
  line-height: 1.5;
}
.article-image-page-v2 .article-card-position {
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 0;
  letter-spacing: 0.3px;
}

/* ================= Orders / Expenses pages ================= */
.orders-filter-section { padding-top: 12px; padding-bottom: 4px; }
.orders-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.orders-filter-row::-webkit-scrollbar { display: none; }
.orders-chip {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
}
.orders-chip.is-active {
  background: var(--blue, #3d7bff);
  color: #fff;
  border-color: transparent;
}

.order-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
}
.order-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.order-card-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  flex: 1 1;
  min-width: 0;
}
.order-card-amount {
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
}
.order-card-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.order-meta-sep { opacity: 0.5; }
.order-card-no {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.2px;
}
.order-card-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.order-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.order-btn-ghost {
  background: var(--surface-2);
  color: var(--text-2);
  border-color: var(--line);
}
.order-btn-primary {
  background: var(--blue, #3d7bff);
  color: #fff;
}
.order-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.order-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-2);
}
.order-status.status-pending          { background: #fff4d6; color: #a6761f; }
.order-status.status-paid             { background: #e0f5ea; color: #14a85a; }
.order-status.status-cancelled        { background: #f0f0f5; color: #6b7486; }
.order-status.status-refunded         { background: #ffe6ec; color: #e23d58; }
.order-status.status-partial_refunded { background: #ffe6ec; color: #e23d58; }

.orders-err {
  padding: 12px;
  background: rgba(226, 61, 88, .08);
  color: #c1273f;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 10px;
}
.orders-loading { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }
.orders-load-more {
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
}
.orders-load-more:disabled { opacity: 0.6; cursor: not-allowed; }

/* expenses summary */
.expenses-summary {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.expenses-summary-row { display: flex; align-items: center; }
.expenses-summary-cell { flex: 1 1; text-align: center; }
.expenses-summary-num { font-weight: 800; font-size: 18px; color: var(--text); }
.expenses-summary-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
.expenses-summary-sep {
  width: 1px;
  height: 28px;
  background: var(--line);
}
.expenses-summary-frozen {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* expense ledger row */
.expense-row {
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.expense-row:last-child { border-bottom: none; }
.expense-row-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.expense-row-title {
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
  flex: 1 1;
  min-width: 0;
}
.expense-row-memo { color: var(--muted); font-weight: 400; font-size: 12px; }
.expense-row-amount {
  font-weight: 800;
  font-size: 16px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.expense-row-amount.dir-credit { color: #14a85a; }
.expense-row-amount.dir-debit  { color: #e23d58; }
.expense-row-meta {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}
.expense-row-balance { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ===== utility tools (PR 4) ===== */
.tool-detail-page { padding-bottom: 80px; }
.tool-detail-subtitle { color: var(--muted); font-size: 13px; padding: 0 16px 8px; }
.tool-detail-body { padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.tool-input { display: flex; flex-direction: column; gap: 14px; }
.tool-input-row { display: block; }
.tool-input-label { font-size: 13px; color: var(--text); margin-bottom: 6px; }
.tool-input-required { color: #e54545; }
.tool-input-text {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 14px;
}
.tool-input-textarea {
  width: 100%; padding: 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 14px; line-height: 1.5; resize: vertical;
}
.tool-input-multitext { position: relative; }
.tool-input-counter {
  position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: var(--muted);
  background: var(--surface); padding: 0 4px; border-radius: 4px;
}
.tool-input-checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; color: var(--text); font-size: 13px;
}
.tool-input-checkbox input { width: 16px; height: 16px; accent-color: #2f6cff; }
.tool-input-help { color: var(--muted); font-size: 12px; margin-top: 4px; }
.tool-input-stub { color: var(--muted); font-size: 12px; }
.tool-input-file { display: flex; flex-direction: column; gap: 8px; }
.tool-input-file-row { display: flex; gap: 8px; }
.tool-input-file-btn,
.tool-input-file-clear {
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 13px;
}
.tool-input-file-btn:disabled { opacity: .55; }
.tool-input-file-url { color: var(--muted); font-size: 11px; word-break: break-all; }
.tool-input-file-error { color: #e54545; font-size: 12px; }
.tool-detail-error {
  background: rgba(229, 69, 69, 0.1); color: #e54545;
  padding: 8px 12px; border-radius: 8px; font-size: 13px;
}
.tool-detail-submit {
  padding: 13px 16px; border-radius: 13px; border: none;
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 10px 20px rgba(47, 108, 255, 0.25);
}
.tool-detail-submit:disabled { opacity: 0.55; box-shadow: none; }
.tool-detail-meta { color: var(--muted); font-size: 12px; text-align: center; }

/* ===== poster-generate 专属表单 ===== */
.poster-form { padding: 8px 16px calc(96px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.poster-form-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 10px;
}
.poster-form-card-head {
  display: flex; align-items: center; gap: 8px;
}
.poster-form-card-title {
  font-size: 14px; font-weight: 700; color: var(--text-1);
}
.poster-form-card-tag {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-3);
}
.poster-form-card-tag-need {
  background: rgba(47, 108, 255, 0.1); color: #2f6cff;
}
.poster-form-link-btn {
  margin-left: auto;
  background: transparent; border: 0;
  color: #2f6cff;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  padding: 4px 8px; border-radius: 8px;
}
.poster-form-link-btn:hover { background: rgba(47, 108, 255, 0.08); }
.poster-form-link-btn:disabled { opacity: 0.55; cursor: progress; }
.poster-form-source-chip {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  padding: 5px 6px 5px 10px;
  border-radius: 999px;
  background: rgba(47, 108, 255, 0.08);
  border: 1px solid rgba(47, 108, 255, 0.2);
  font-size: 12px;
  max-width: 100%;
}
.poster-form-source-chip-label { color: #2f6cff; font-weight: 700; flex-shrink: 0; }
.poster-form-source-chip-title {
  color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}
.poster-form-source-chip-clear {
  border: 0; background: transparent;
  width: 20px; height: 20px; border-radius: 50%;
  color: var(--text-3); cursor: pointer;
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.poster-form-source-chip-clear:hover { background: rgba(15, 23, 42, 0.06); color: var(--text-1); }
.poster-form-textarea:disabled { opacity: 0.7; cursor: progress; }
.poster-form-setting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  align-items: end;
}
.poster-form-setting {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--text-2);
  font-size: 12px;
}
.poster-form-setting select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-1);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 13px;
}
.poster-form-check {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 600;
  grid-column: 1 / -1;
}
.poster-form-check input { width: 16px; height: 16px; accent-color: #2f6cff; }
.poster-form-setting-help {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.5;
}

/* poster material picker bottom sheet */
.poster-sheet-mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
  animation: poster-sheet-fade .15s ease;
}
.poster-sheet {
  width: 100%; max-width: 440px;
  background: var(--surface-1);
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  display: flex; flex-direction: column;
  max-height: 85vh;
  animation: poster-sheet-up .2s ease;
  overflow: hidden;
}
.poster-sheet-handle {
  width: 36px; height: 4px;
  background: var(--text-4); border-radius: 999px;
  margin: 8px auto 0;
  flex-shrink: 0;
}
.poster-sheet-head {
  display: flex; align-items: center;
  padding: 10px 16px 6px;
  flex-shrink: 0;
}
.poster-sheet-title { font-size: 15px; font-weight: 700; color: var(--text-1); }
.poster-sheet-close {
  margin-left: auto;
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: transparent;
  color: var(--text-3); font-size: 22px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.poster-sheet-close:hover { background: var(--surface-3); color: var(--text-1); }
.poster-sheet-body {
  flex: 1 1; overflow-y: auto;
  padding: 8px 16px 12px;
}
.poster-sheet-foot {
  display: flex; gap: 10px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface-1);
  flex-shrink: 0;
}
.poster-sheet-foot .poster-form-mini-btn { flex: 0 0 88px; }
.poster-sheet-confirm {
  flex: 1 1; margin-top: 0;
  padding: 12px;
  font-size: 14px; letter-spacing: 0;
}
@keyframes poster-sheet-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes poster-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.poster-form-dropzone {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 360px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--surface-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--text-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.poster-form-dropzone:hover:not(:disabled) {
  border-color: #2f6cff;
  background: rgba(47, 108, 255, 0.04);
}
.poster-form-dropzone:disabled { opacity: 0.6; cursor: progress; }
.poster-form-dropzone-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-1); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 300; color: var(--text-3);
  margin-bottom: 4px;
}
.poster-form-dropzone-main { font-size: 14px; color: var(--text-1); font-weight: 600; }
.poster-form-dropzone-sub { font-size: 12px; color: var(--text-3); }
.poster-form-ref-preview {
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
}
.poster-form-ref-preview img {
  width: 100%; max-height: 360px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--surface-3);
}
.poster-form-ref-actions {
  display: flex; gap: 8px;
}
.poster-form-mini-btn {
  flex: 1 1;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-1); color: var(--text-1);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.poster-form-mini-btn:hover { background: var(--surface-3); }
.poster-form-mini-btn-danger { color: #c1271e; }
.poster-form-textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-1);
  padding: 12px;
  font-size: 14px; line-height: 1.6;
  color: var(--text-1);
  resize: vertical;
  min-height: 200px;
  font-family: inherit;
}
.poster-form-textarea:focus {
  outline: none; border-color: #2f6cff;
  box-shadow: 0 0 0 3px rgba(47, 108, 255, 0.12);
}
.poster-form-counter {
  font-size: 11px; color: var(--text-3); text-align: right;
}
.poster-form-error {
  background: rgba(229, 69, 69, 0.08);
  color: #c1271e;
  padding: 10px 12px; border-radius: 10px;
  font-size: 13px;
  border: 1px solid rgba(229, 69, 69, 0.2);
}
.poster-form-submit {
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff;
  font-size: 15px; font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 12px 24px rgba(47, 108, 255, 0.28);
  cursor: pointer;
  margin-top: 4px;
}
.poster-form-submit:disabled { opacity: 0.55; box-shadow: none; cursor: progress; }
.poster-form-meta { color: var(--text-3); font-size: 12px; text-align: center; }

.tool-result-page-body { padding: 16px; }
.tool-result-loading { padding: 40px 16px; text-align: center; color: var(--muted); }
.tool-result-progress { padding: 32px; text-align: center; color: var(--muted); }
.tool-result-back {
  display: inline-block; margin-top: 12px; padding: 8px 16px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; text-decoration: none;
}
.tool-result-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.6; }
.tool-result-clean-tag { display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: rgba(67, 175, 96, 0.12); color: #2ea051; font-size: 12px; margin-bottom: 8px; }
.tool-result-highlighted { display: flex; flex-direction: column; gap: 12px; }
.tool-result-highlight-summary { font-size: 13px; color: var(--muted); }
.tool-mark { padding: 1px 2px; border-radius: 3px; }
.tool-mark-high { background: rgba(229, 69, 69, 0.25); color: #c1271e; }
.tool-mark-med  { background: rgba(255, 158, 27, 0.25); color: #b9620a; }
.tool-mark-low  { background: rgba(120, 144, 156, 0.18); color: #45596a; }
.tool-result-hits summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.tool-result-hits ul { padding-left: 18px; margin: 6px 0; }
.tool-result-hits li { font-size: 13px; padding: 4px 0; }
.tool-result-hits code { background: var(--surface); padding: 1px 5px; border-radius: 4px; margin-right: 6px; }
.tool-result-hit-severity {
  display: inline-block; padding: 0 6px; border-radius: 3px; font-size: 11px; margin-right: 6px;
}
.tool-result-hit-high { background: rgba(229,69,69,.2); color: #c1271e; }
.tool-result-hit-med  { background: rgba(255,158,27,.2); color: #b9620a; }
.tool-result-hit-low  { background: rgba(120,144,156,.18); color: #45596a; }
.tool-result-hit-label { color: var(--muted); font-size: 12px; }
.tool-result-files { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tool-result-file {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; display: flex; align-items: center; gap: 12px;
}
.tool-result-file-name { flex: 1 1; font-size: 14px; }
.tool-result-file-meta { color: var(--muted); font-size: 12px; }
.tool-result-file-download {
  padding: 6px 12px; border-radius: 999px; background: #6b5df0; color: #fff;
  text-decoration: none; font-size: 13px;
}
.tool-result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tool-action-btn {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 13px;
}
.tool-action-btn:hover { background: var(--surface-hover, var(--surface)); }
.tool-result-empty { color: var(--muted); padding: 16px; text-align: center; }
.tool-result-debug { white-space: pre-wrap; word-break: break-all; font-size: 12px; color: var(--muted); }
.tool-result-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tool-result-list-title { font-size: 14px; }
.tool-result-list-sub { color: var(--muted); font-size: 12px; }
.tool-result-material-card {
  display: inline-block; padding: 12px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none;
}
.tool-result-image-wrap { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.tool-result-image {
  width: 100%; max-width: 520px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  box-shadow: var(--shadow-card);
  align-self: center;
}
.tool-result-image-download {
  display: inline-flex; align-self: center;
  padding: 11px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #3a7dff, #2f6cff);
  color: #fff;
  text-decoration: none;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 18px rgba(47, 108, 255, 0.25);
}

/* poster pending state */
.poster-pending {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 24px 8px;
}
.poster-pending-canvas {
  position: relative;
  width: 70%; max-width: 280px;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  background: var(--surface-3);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card);
}
.poster-pending-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 70%
  );
  background-size: 220% 100%;
  animation: poster-shimmer 1.6s linear infinite;
}
.poster-pending-glyph {
  position: relative;
  font-size: 28px; font-weight: 700; color: var(--text-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.poster-pending-title {
  font-size: 15px; font-weight: 700; color: var(--text-1);
}
.poster-pending-sub {
  font-size: 12px; color: var(--text-3); text-align: center; max-width: 280px; line-height: 1.6;
}
@keyframes poster-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.tool-result-prompt {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
}
.tool-result-prompt summary { cursor: pointer; font-size: 13px; color: var(--text); font-weight: 700; }
.tool-result-prompt .tool-result-text { margin: 8px 0 0; font-size: 12px; }

/* PR 8: utility 区空态 */
.tools-empty { color: var(--muted); padding: 32px 16px; text-align: center; font-size: 13px; }

/* PR 8: /me/tool-runs 历史页 */
.me-tool-runs-page { padding-bottom: 60px; }
.me-tool-runs-empty { padding: 60px 24px; color: var(--muted); text-align: center; font-size: 14px; }
.me-tool-runs-empty-link { color: #6b5df0; margin-left: 6px; text-decoration: underline; }
.me-tool-runs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.me-tool-runs-row { border-bottom: 1px solid var(--border); }
.me-tool-runs-link {
  display: flex; gap: 12px; padding: 14px 16px; align-items: flex-start;
  text-decoration: none; color: var(--text);
}
.me-tool-runs-link.is-archived { opacity: 0.55; pointer-events: none; }
.me-tool-runs-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px; background: var(--surface); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.me-tool-runs-icon img { width: 100%; height: 100%; object-fit: contain; }
.me-tool-runs-body { flex: 1 1; min-width: 0; }
.me-tool-runs-title-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.me-tool-runs-title { font-size: 14px; font-weight: 500; }
.me-tool-runs-primary {
  font-size: 11px; padding: 1px 6px; border-radius: 4px;
  background: rgba(107, 93, 240, 0.12); color: #6b5df0;
}
.me-tool-runs-summary {
  font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
.me-tool-runs-meta { font-size: 11px; color: var(--muted); display: flex; gap: 10px; }
.me-tool-runs-expires { color: #b9620a; }
.me-tool-runs-archived { color: #c1271e; }
.me-tool-runs-more-tip {
  padding: 16px; text-align: center; font-size: 12px; color: var(--muted);
}

/* ===== AI 视频页（/ai-video） ===== */
.aiv-img-card {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f5fa;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.aiv-img-card img { width: 100%; height: 100%; object-fit: cover; }
.aiv-img-tag {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.aiv-img-rm {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.aiv-img-rm:hover { background: rgba(214, 53, 74, 0.85); }
.aiv-img-add {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  border-radius: 10px;
  border: 1.5px dashed rgba(47, 108, 255, 0.3);
  background: rgba(47, 108, 255, 0.04);
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.aiv-img-add:hover:not(:disabled) {
  background: rgba(47, 108, 255, 0.08);
  border-color: var(--blue);
}
.aiv-img-add:disabled { opacity: 0.55; cursor: not-allowed; }

.aiv-mention-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47, 108, 255, 0.3);
  background: rgba(47, 108, 255, 0.06);
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.aiv-mention-chip:hover { background: rgba(47, 108, 255, 0.14); }

/* @-mention 弹窗（AI 视频提示词框敲 @ 触发）—— 内联在文本框上方 */
.aiv-mention-popup {
  background: linear-gradient(180deg, #f6f9ff 0%, #eef4ff 100%);
  border: 1px solid rgba(47, 108, 255, 0.22);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(47, 108, 255, 0.08);
}
.aiv-mention-popup.empty {
  background: #fff8e6;
  border-color: rgba(255, 156, 60, 0.3);
  color: #8a4408;
  font-size: 12.5px;
  font-style: italic;
}
.aiv-mention-popup-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.aiv-mention-popup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}
.aiv-mention-popup-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.aiv-mention-popup-item:hover {
  border-color: var(--blue);
  background: rgba(47, 108, 255, 0.04);
}
.aiv-mention-popup-item img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 6px;
  background: #f3f5fa;
}
.aiv-mention-popup-item span {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-1);
}