:root {
  /* Cyber Codex / Tactical Scribe palette — 与参考页一致 */
  --bg: #0a0909;
  --bg2: #141312;
  --bg3: #211f1e;
  --bg4: #2b2a28;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(230, 196, 135, 0.12);
  --text: #e6e1df;
  --text2: #d0c5b5;
  --text3: #998f81;
  --gold: #e6c487;
  --gold2: #ffdea4;
  --primary: #e6c487;
  --red: #ffb4ab;
  --teal: #7cd7c1;
  /* 卡片标题：参考顶栏/标签的青绿高亮（略亮于 --teal，便于正文级字号阅读） */
  --card-title-cyan: #a2d9ce;
  --blue: #6e9ec9;
  --font-serif: 'Noto Serif SC', serif;
  --font-sans: 'Inter', 'Noto Sans SC', sans-serif;
  --font-mono: 'Fira Code', 'Space Grotesk', monospace;
  --radius: 10px;
  --radius-lg: 18px;
  --content-card-radius: 18px;
  --btn-pill-radius: 999px;
  --btn-circle-radius: 50%;
  --modal-radius: 24px;
  --dialog-radius: 18px;
  --editor-column-radius: 20px;
  /* 悬浮玻璃分栏（glass-panel-heavy） */
  --layout-pad-x: 16px;
  --layout-pad-y: 12px;
  --layout-gap: 12px;
  --panel-radius: 20px;
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%),
    rgba(15, 14, 13, 0.55);
  --glass-border: rgba(230, 196, 135, 0.2);
  --glass-blur: blur(32px) saturate(180%);
  --glass-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.8), 0 0 15px rgba(230, 196, 135, 0.05),
    0 0 20px -5px rgba(230, 196, 135, 0.12), inset 0 0 10px rgba(230, 196, 135, 0.02);
  --popover-glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.018) 100%),
    rgba(18, 16, 14, 0.86);
  --popover-glass-border: rgba(230, 196, 135, 0.26);
  --popover-glass-shadow: 0 18px 42px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -18px 34px rgba(0, 0, 0, 0.18);
  --popover-glass-blur: blur(22px) saturate(145%);
  --popover-glass-radius: 18px;
  /* 顶栏：较轻 glass-panel */
  --glass-titlebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%),
    rgba(20, 19, 18, 0.4);
  --glass-titlebar-blur: blur(24px) saturate(160%);
  --glass-titlebar-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(230, 196, 135, 0.05);
  /* 动画时长 */
  --dur-fast: 150ms;
  --dur-normal: 280ms;
  --dur-slow: 420ms;
  --dur-slower: 600ms;
  /* 缓动曲线 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
button { border-radius: var(--btn-pill-radius); }
html, body { height: 100%; overflow: hidden; color: var(--text); font-family: var(--font-sans); }
html {
  background-color: #0a0909;
  background-image:
    linear-gradient(to right, transparent, rgba(230, 196, 135, 0.35), transparent),
    linear-gradient(to right, transparent, rgba(124, 215, 193, 0.35), transparent),
    radial-gradient(ellipse 72% 48% at 12% -8%, rgba(230, 196, 135, 0.09) 0%, transparent 52%),
    radial-gradient(ellipse 58% 42% at 94% 102%, rgba(124, 215, 193, 0.08) 0%, transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(230, 196, 135, 0.03) 0%, transparent 100%);
  background-size: 100% 2px, 100% 2px, auto, auto, auto;
  background-position: top left, bottom left, center, center, center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body {
  background: transparent;
  position: relative;
}
body[data-app-view="landing"],
body[data-app-view="project-hub"] {
  overflow: auto;
}
body[data-app-view="book-breakdown"] {
  overflow: hidden;
}
body[data-app-view="landing"] #titlebar,
body[data-app-view="landing"] #layout,
body[data-app-view="landing"] #works-modal,
body[data-app-view="project-hub"] #titlebar,
body[data-app-view="project-hub"] #layout,
body[data-app-view="project-hub"] #works-modal,
body[data-app-view="book-breakdown"] #titlebar,
body[data-app-view="book-breakdown"] #layout,
body[data-app-view="book-breakdown"] #works-modal {
  display: none !important;
}
body[data-app-view="editor"] #marketing-landing,
body[data-app-view="editor"] #project-hub,
body[data-app-view="editor"] #book-breakdown,
body[data-app-view="landing"] #project-hub,
body[data-app-view="landing"] #book-breakdown,
body[data-app-view="project-hub"] #marketing-landing,
body[data-app-view="project-hub"] #book-breakdown,
body[data-app-view="book-breakdown"] #marketing-landing,
body[data-app-view="book-breakdown"] #project-hub {
  display: none !important;
}
/* 边缘暗角（pointer-events: none，不遮挡交互） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.7);
}
body[data-app-view="landing"]::after,
body[data-app-view="project-hub"]::after,
body[data-app-view="book-breakdown"]::after {
  display: none;
}
::selection {
  background: rgba(230, 196, 135, 0.3);
  color: var(--gold);
}

/* Cyber Codex：面板噪点纹理 + 标题微光（不改变布局尺寸） */
.panel-texture {
  position: relative;
}
.panel-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.text-glow {
  text-shadow: 0 0 12px rgba(230, 196, 135, 0.5);
}

.app-screen {
  min-height: 100vh;
  position: relative;
  z-index: 10;
}

.landing-screen {
  --landing-background: #050505;
  --landing-foreground: #f5f5f5;
  --landing-card: #0f0f11;
  --landing-muted: #1f1f22;
  --landing-muted-foreground: #a1a1aa;
  --landing-primary: #d4af37;
  --landing-primary-soft: rgba(212, 175, 55, 0.2);
  --landing-border: #27272a;
  color: var(--landing-foreground);
  background: var(--landing-background);
}
.landing-screen button,
.landing-screen a {
  font-family: var(--font-sans);
}
.landing-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}
.landing-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid rgba(39, 39, 42, 0.9);
  background: rgba(5, 5, 5, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.landing-header__inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}
.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--landing-foreground);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.landing-logo {
  width: 32px;
  height: 32px;
  color: var(--landing-primary);
  flex: 0 0 auto;
}
.landing-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.landing-nav-link,
.landing-ghost-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--landing-muted-foreground);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 10px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.landing-nav-link:hover,
.landing-ghost-btn:hover,
.landing-footer-links a:hover,
.landing-footer-meta a:hover {
  color: var(--landing-foreground);
}
.landing-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.landing-primary-btn,
.landing-outline-btn {
  appearance: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 0 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.landing-primary-btn {
  border: 1px solid var(--landing-primary);
  background: var(--landing-primary);
  color: #050505;
}
.landing-primary-btn:hover {
  background: #e1bd48;
  border-color: #e1bd48;
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.18);
}
.landing-outline-btn {
  border: 1px solid var(--landing-border);
  background: transparent;
  color: var(--landing-foreground);
}
.landing-outline-btn:hover {
  border-color: rgba(212, 175, 55, 0.5);
  color: var(--landing-primary);
  transform: translateY(-1px);
}
.landing-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}
.landing-hero__inner {
  text-align: center;
}
.landing-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--landing-muted);
  color: var(--landing-primary);
  font-size: 13px;
  font-weight: 500;
}
.landing-title {
  max-width: 860px;
  margin: 0 auto 24px;
  color: var(--landing-foreground);
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
}
.landing-title__brand {
  display: inline-block;
  background: linear-gradient(90deg, var(--landing-primary), rgba(212, 175, 55, 0.6));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.landing-title__comma,
.landing-title__tagline {
  color: var(--landing-foreground);
}
.landing-subtitle {
  max-width: 680px;
  margin: 0 auto 32px;
  color: var(--landing-muted-foreground);
  font-size: 18px;
  line-height: 1.65;
}
.landing-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
}
.landing-hero-btn {
  min-height: 48px;
  padding: 0 22px;
  font-size: 16px;
}
.landing-hero-btn .material-symbols-outlined {
  font-size: 19px;
}
.landing-scene {
  position: relative;
  width: 100%;
  max-width: 1024px;
  height: 500px;
  margin: 0 auto;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}
.landing-scene-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--landing-primary);
  opacity: 0.4;
  pointer-events: none;
}
.landing-scene-lines line {
  stroke: url(#landingLineGradient);
  stroke-width: 2;
  animation: landingPulse 2.4s ease-in-out infinite;
}
.landing-scene-lines line:nth-child(2n) {
  animation-delay: 0.5s;
}
.floating-card {
  position: absolute;
  width: 160px;
  min-height: 112px;
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--landing-primary-soft);
  border-radius: 18px;
  background: var(--landing-card);
  color: var(--landing-foreground);
  box-shadow: var(--float-shadow-rest, 0 8px 24px rgba(0, 0, 0, 0.18), 0 4px 20px rgba(212, 175, 55, 0.05));
  text-align: left;
  transform-style: preserve-3d;
  transform-origin: center;
  backface-visibility: hidden;
  animation: landingFloat var(--float-duration, 7.2s) linear infinite;
  will-change: transform, box-shadow;
  z-index: var(--float-z-base, 2);
  --float-z-front: 56px;
  --float-z-back: -32px;
  --float-scale-front: 1.045;
  --float-scale-back: 0.975;
  --float-rz: 1.4deg;
  --float-shadow-front: 0 18px 34px rgba(0, 0, 0, 0.22), 0 0 18px rgba(212, 175, 55, 0.12);
  --float-shadow-back: 0 7px 18px rgba(0, 0, 0, 0.15), 0 0 8px rgba(212, 175, 55, 0.05);
}
.floating-card strong {
  color: var(--landing-muted-foreground);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}
.floating-card span {
  font-size: 12px;
  line-height: 1.2;
}
.floating-card--brainstorm {
  top: 64px;
  left: 8%;
  --float-x: 34px;
  --float-y: 28px;
  --float-rx: 4.8deg;
  --float-ry: -6.2deg;
  --float-rz: -3.8deg;
  --float-duration: 7.0s;
  --float-z-base: 5;
}
.floating-card--character {
  top: 132px;
  right: 2%;
  width: 144px;
  --float-x: -32px;
  --float-y: 34px;
  --float-rx: -5deg;
  --float-ry: 6.2deg;
  --float-rz: 4deg;
  --float-duration: 7.45s;
  --float-z-base: 4;
  animation-delay: -0.55s;
}
.floating-card--continue {
  bottom: 80px;
  left: 2%;
  --float-x: 36px;
  --float-y: -30px;
  --float-rx: -5.4deg;
  --float-ry: -6.2deg;
  --float-rz: 3.6deg;
  --float-duration: 7.15s;
  --float-z-base: 2;
  animation-delay: -1.1s;
}
.floating-card--plot {
  right: 14%;
  bottom: 78px;
  width: 144px;
  --float-x: -34px;
  --float-y: -34px;
  --float-rx: 5.4deg;
  --float-ry: 5.8deg;
  --float-rz: -3.4deg;
  --float-duration: 7.75s;
  --float-z-base: 3;
  animation-delay: -1.65s;
}
.floating-card--outline {
  top: 168px;
  right: 28%;
  --float-x: 28px;
  --float-y: 36px;
  --float-rx: 4.8deg;
  --float-ry: -6.8deg;
  --float-rz: 4.2deg;
  --float-duration: 6.85s;
  --float-z-base: 6;
  animation-delay: -2.2s;
}
.floating-card--skill {
  left: 31%;
  bottom: 24px;
  width: 144px;
  --float-x: -30px;
  --float-y: -36px;
  --float-rx: -4.8deg;
  --float-ry: 6.8deg;
  --float-rz: -4deg;
  --float-duration: 7.35s;
  --float-z-base: 3;
  animation-delay: -2.75s;
}
.floating-card--setting {
  top: 200px;
  left: 20%;
  width: 144px;
  --float-x: 34px;
  --float-y: -32px;
  --float-rx: 5.6deg;
  --float-ry: 5deg;
  --float-rz: -3.2deg;
  --float-duration: 7.2s;
  --float-z-base: 4;
  animation-delay: -3.3s;
}
.floating-card--draft {
  top: 34px;
  right: 34%;
  --float-x: -36px;
  --float-y: 28px;
  --float-rx: -5.4deg;
  --float-ry: -6.4deg;
  --float-rz: 4.8deg;
  --float-duration: 6.95s;
  --float-z-base: 7;
  animation-delay: -3.85s;
}
.landing-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.landing-particles span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
  animation: landingPulse var(--t) ease-in-out infinite;
  animation-delay: var(--d);
}
.landing-section {
  padding: 80px 0;
  background: var(--landing-background);
}
.landing-section-group + .landing-section-group {
  margin-top: 96px;
}
.landing-section-heading {
  max-width: 740px;
  margin: 0 auto 48px;
  text-align: center;
}
.landing-section-heading h2 {
  margin: 0 0 16px;
  color: var(--landing-foreground);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0;
}
.landing-section-heading p {
  margin: 0;
  color: var(--landing-muted-foreground);
  font-size: 18px;
  line-height: 1.6;
}
.landing-feature-grid,
.landing-testimonial-grid {
  display: grid;
  gap: 24px;
  margin: 0 auto;
}
.landing-feature-grid--three {
  max-width: 1024px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.landing-feature-grid--two {
  max-width: 1024px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.landing-testimonials {
  background: rgba(31, 31, 34, 0.5);
}
.landing-testimonial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.landing-card {
  min-width: 0;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--landing-border);
  border-radius: 12px;
  background: var(--landing-card);
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.landing-card::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -18px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.44) 0%, rgba(212, 175, 55, 0.18) 42%, transparent 72%);
  filter: blur(14px);
  opacity: 0;
  transform: scaleX(0.72);
  transform-origin: center;
  pointer-events: none;
}
.landing-card:hover {
  transform: translateY(-2px);
}
.landing-card:hover::after,
.landing-card:focus-within::after {
  animation: landingCardBreath 2.4s ease-in-out infinite;
}
.landing-card-icon {
  display: block;
  margin-bottom: 16px;
  color: var(--landing-primary);
  font-size: 40px;
  line-height: 1;
}
.landing-card h3 {
  margin: 0 0 12px;
  color: var(--landing-foreground);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
}
.landing-card p,
.landing-quote blockquote {
  margin: 0;
  color: var(--landing-muted-foreground);
  font-size: 16px;
  line-height: 1.65;
}
.landing-quote blockquote {
  color: var(--landing-foreground);
  font-size: 14px;
}
.landing-hero-demo {
  display: none;
}
.landing-demo-modal {
  position: fixed;
  inset: 0;
  z-index: 980;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  color: var(--landing-foreground, #f5f5f5);
}
.landing-demo-modal.visible {
  display: flex;
}
.landing-demo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
}
.landing-demo-panel {
  position: relative;
  z-index: 1;
  width: min(1040px, calc((100dvh - 56px) * 16 / 9), 100%);
  max-height: calc(100dvh - 56px);
  display: block;
}
.landing-demo-close {
  appearance: none;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--landing-foreground, #f5f5f5);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.landing-demo-close:hover {
  border-color: rgba(212, 175, 55, 0.52);
  background: rgba(212, 175, 55, 0.12);
  color: var(--landing-primary, #d4af37);
}
.landing-demo-close .material-symbols-outlined {
  font-size: 20px;
}
.landing-demo-video-shell {
  position: relative;
  min-height: 0;
}
.landing-demo-video {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 56px);
  aspect-ratio: 16 / 9;
  background: #000;
  object-fit: contain;
}
body.landing-demo-open {
  overflow: hidden;
}
.landing-context-demo {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr);
  gap: 20px;
  align-items: stretch;
}
.landing-context-graph-panel,
.landing-context-card-panel {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(15, 15, 17, 0.82);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.landing-context-panel-head {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.landing-context-panel-head .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--landing-primary);
  font-size: 28px;
}
.landing-context-panel-head div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.landing-context-panel-head strong {
  color: var(--landing-foreground);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
.landing-context-panel-head span:not(.material-symbols-outlined) {
  color: var(--landing-muted-foreground);
  font-size: 12px;
  line-height: 1.45;
}
.landing-context-graph {
  height: 520px;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(30, 35, 48, 0.94), rgba(7, 8, 12, 0.98));
}
.landing-context-vis-host {
  width: 100%;
  height: 100%;
  transition: filter var(--dur-fast) var(--ease-out);
}
.landing-context-vis-host.is-node-dragging {
  filter: saturate(1.14) brightness(1.04);
}
.landing-context-vis-host canvas {
  outline: none;
}
.landing-context-node-grid {
  min-height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  align-content: center;
}
.landing-context-node-btn {
  min-width: 0;
  min-height: 68px;
  display: grid;
  gap: 5px;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--landing-foreground);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  padding: 10px 12px;
}
.landing-context-node-btn:hover,
.landing-context-node-btn.is-active {
  border-color: rgba(212, 175, 55, 0.65);
  background: rgba(212, 175, 55, 0.12);
}
.landing-context-node-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.35;
}
.landing-context-node-btn small {
  color: var(--landing-muted-foreground);
  font-size: 12px;
  line-height: 1.3;
}
.landing-context-card {
  max-height: 520px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.5) rgba(255, 255, 255, 0.06);
}
.landing-context-smart-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}
.landing-context-card-head {
  display: grid;
  gap: 5px;
}
.landing-context-card-head span {
  color: var(--landing-primary);
  font-size: 12px;
  line-height: 1.3;
}
.landing-context-card-head strong {
  color: var(--landing-foreground);
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}
.landing-context-card-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  border: 1px solid rgba(124, 215, 193, 0.26);
  border-radius: 999px;
  background: rgba(124, 215, 193, 0.08);
  color: var(--teal);
  font-size: 12px;
  line-height: 1.45;
  padding: 4px 10px;
}
.landing-context-smart-card.is-setting .landing-context-card-status {
  border-color: rgba(212, 175, 55, 0.28);
  background: rgba(212, 175, 55, 0.08);
  color: var(--landing-primary);
}
.landing-context-card-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.landing-context-card-block-title {
  color: var(--landing-muted-foreground);
  font-size: 12px;
  line-height: 1.3;
}
.landing-context-card-block p {
  margin: 0;
  color: rgba(245, 245, 245, 0.9);
  font-size: 14px;
  line-height: 1.68;
}
.landing-context-timeline-list,
.landing-context-evidence-list,
.landing-context-graph-relations-list {
  display: grid;
  gap: 7px;
}
.landing-context-timeline-list span,
.landing-context-evidence-list span,
.landing-context-graph-relations-list span {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(245, 245, 245, 0.82);
  font-size: 12px;
  line-height: 1.55;
  padding: 7px 8px;
  overflow-wrap: anywhere;
}
.landing-context-graph-relations-list span {
  border-color: rgba(124, 215, 193, 0.18);
  background: rgba(124, 215, 193, 0.055);
}
.landing-footer {
  border-top: 1px solid var(--landing-border);
  background: rgba(31, 31, 34, 0.5);
}
.landing-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  padding-block: 20px;
}
.landing-footer-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  gap: 8px;
  margin: 0;
  color: var(--landing-muted-foreground);
  font-size: 14px;
}
.landing-footer-meta a {
  color: var(--landing-muted-foreground);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.landing-footer-beian {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.landing-footer-beian-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.landing-footer-sep {
  color: var(--landing-muted-foreground);
  opacity: 0.6;
}
.landing-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}
.landing-footer-links a {
  color: var(--landing-muted-foreground);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

/* 法务政策页（独立页面，不影响编辑器视图） */
.policy-page {
  min-height: 100vh;
}
.policy-page__topbar {
  border-bottom: 1px solid var(--landing-border);
  background: rgba(7, 7, 8, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.policy-page__container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}
.policy-page__topbar .policy-page__container {
  min-height: 62px;
  display: flex;
  align-items: center;
}
.policy-page__back {
  color: var(--landing-muted-foreground);
  font-size: 14px;
  text-decoration: none;
}
.policy-page__back:hover {
  color: var(--landing-foreground);
}
.policy-page__main {
  padding-top: 26px;
  padding-bottom: 40px;
}
.policy-page__card {
  background: rgba(15, 15, 17, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px 28px 24px;
  line-height: 1.75;
  color: rgba(244, 244, 245, 0.95);
}
.policy-page__card h1 {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.25;
  color: #f5f5f5;
}
.policy-page__meta {
  margin: 0 0 18px;
  color: var(--landing-muted-foreground);
  font-size: 14px;
}
.policy-page__card h2 {
  margin: 22px 0 8px;
  font-size: 22px;
  line-height: 1.4;
  color: #f4f4f5;
}
.policy-page__card h3 {
  margin: 14px 0 6px;
  font-size: 17px;
  line-height: 1.45;
  color: #ececef;
}
.policy-page__card p {
  margin: 0 0 12px;
}
.policy-page__card ul {
  margin: 0 0 12px 20px;
}
.policy-page__card li {
  margin: 0 0 8px;
}

@keyframes landingFloat {
  0%, 100% {
    box-shadow: var(--float-shadow-back);
    opacity: 0.93;
    transform: translate3d(
      calc(var(--float-x) * -0.45),
      calc(var(--float-y) * -0.08),
      var(--float-z-back)
    ) scale(var(--float-scale-back)) rotateX(calc(var(--float-rx) * -0.18)) rotateY(calc(var(--float-ry) * -0.18)) rotateZ(calc(var(--float-rz) * -0.85));
  }
  25% {
    box-shadow: var(--float-shadow-rest, 0 8px 24px rgba(0, 0, 0, 0.18), 0 4px 20px rgba(212, 175, 55, 0.05));
    opacity: 0.97;
    transform: translate3d(
      calc(var(--float-x) * 0.05),
      calc(var(--float-y) * -0.72),
      10px
    ) scale(1.005) rotateX(calc(var(--float-rx) * 0.08)) rotateY(calc(var(--float-ry) * -0.2)) rotateZ(calc(var(--float-rz) * 0.55));
  }
  50% {
    box-shadow: var(--float-shadow-front);
    opacity: 1;
    transform: translate3d(
      calc(var(--float-x) * 0.45),
      calc(var(--float-y) * 0.08),
      var(--float-z-front)
    ) scale(var(--float-scale-front)) rotateX(calc(var(--float-rx) * 0.28)) rotateY(calc(var(--float-ry) * 0.28)) rotateZ(var(--float-rz));
  }
  75% {
    box-shadow: var(--float-shadow-rest, 0 8px 24px rgba(0, 0, 0, 0.18), 0 4px 20px rgba(212, 175, 55, 0.05));
    opacity: 0.98;
    transform: translate3d(
      calc(var(--float-x) * -0.05),
      calc(var(--float-y) * 0.72),
      16px
    ) scale(1.01) rotateX(calc(var(--float-rx) * -0.08)) rotateY(calc(var(--float-ry) * 0.2)) rotateZ(calc(var(--float-rz) * -0.45));
  }
}
@keyframes landingPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}
@keyframes landingCardBreath {
  0%, 100% {
    opacity: 0.3;
    transform: scaleX(0.72);
  }
  50% {
    opacity: 0.82;
    transform: scaleX(1);
  }
}

.project-card,
.project-hub-loading__card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.project-hub-screen {
  padding-top: max(18px, env(safe-area-inset-top, 0px));
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  background:
    radial-gradient(circle at 8% 0%, rgba(230, 196, 135, 0.12), transparent 24%),
    radial-gradient(circle at 90% 10%, rgba(124, 215, 193, 0.08), transparent 20%),
    linear-gradient(180deg, rgba(10, 9, 9, 0.97) 0%, rgba(8, 8, 8, 0.99) 100%);
}
.project-hub-shell {
  width: 100%;
  box-sizing: border-box;
  min-height: calc(100vh - 56px);
  min-height: calc(100dvh - 56px);
  position: relative;
  display: flex;
  flex-direction: column;
}
.project-hub-fab-create {
  position: fixed;
  left: max(20px, env(safe-area-inset-left, 0px));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: 56px;
  height: 56px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(230, 196, 135, 0.35);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(18, 17, 16, 0.85);
  color: var(--gold);
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.project-hub-fab-create__icon {
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}
.project-hub-fab-create:hover {
  border-color: rgba(230, 196, 135, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)),
    rgba(22, 21, 20, 0.92);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(230, 196, 135, 0.12);
  transform: translateY(-2px);
}
.project-hub-fab-create:active {
  transform: translateY(0);
}
.project-hub-fab-create:focus-visible {
  outline: 2px solid rgba(230, 196, 135, 0.55);
  outline-offset: 3px;
}
.project-hub-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: flex-start;
  min-height: 72px;
}
.project-hub-invite-btn {
  grid-column: 2;
  justify-self: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 237, 186, 0.52);
  border-radius: 999px;
  padding: 4px 18px 4px 10px;
  background:
    linear-gradient(180deg, rgba(255, 244, 214, 0.34), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, #f1ce82 0%, #d2a354 52%, #9b6b2e 100%);
  color: #1d1710;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.32),
    0 0 24px rgba(230, 196, 135, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), filter 0.2s var(--ease-out);
}
.project-hub-invite-btn:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.38),
    0 0 28px rgba(230, 196, 135, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.project-hub-invite-btn:active {
  transform: translateY(0) scale(0.98);
}
.project-hub-invite-btn:focus-visible {
  outline: 2px solid rgba(255, 237, 186, 0.78);
  outline-offset: 3px;
}
.project-hub-invite-btn:disabled {
  opacity: 0.72;
  cursor: wait;
}
.project-hub-invite-gift {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 7px rgba(80, 42, 11, 0.34));
  transform-origin: 50% 82%;
  animation: projectInviteGiftShake 3.4s ease-in-out infinite;
}
.project-hub-invite-btn:hover .project-hub-invite-gift,
.project-hub-invite-btn:focus-visible .project-hub-invite-gift {
  animation-duration: 1.15s;
}
@keyframes projectInviteGiftShake {
  0%, 74%, 100% { transform: rotate(0deg) translateY(0); }
  78% { transform: rotate(-7deg) translateY(-1px); }
  82% { transform: rotate(6deg) translateY(0); }
  86% { transform: rotate(-4deg) translateY(-1px); }
  90% { transform: rotate(3deg) translateY(0); }
  94% { transform: rotate(0deg) translateY(0); }
}
.project-hub-account {
  grid-column: 3;
  justify-self: end;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  padding: 10px 2px 12px 0;
  outline: none;
}
.project-hub-account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text2);
}
.project-hub-account-icon {
  font-size: 28px;
  color: rgba(255, 244, 223, 0.9);
}
.project-hub-account-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.project-hub-account-copy strong {
  color: rgba(255, 244, 223, 0.92);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
}
.project-hub-usertext {
  color: rgba(208, 197, 181, 0.62);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.project-hub-account-actions {
  display: contents;
}
.project-hub-account-menu {
  position: absolute;
  top: calc(100% - 2px);
  right: 0;
  min-width: 152px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(230, 196, 135, 0.14);
  background: rgba(12, 12, 11, 0.88);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 4;
}
.project-hub-account:hover .project-hub-account-menu,
.project-hub-account:focus-within .project-hub-account-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.project-hub-logout,
.project-hub-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(230, 196, 135, 0.18);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text2);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
}
.project-hub-logout:hover,
.project-hub-secondary-btn:hover {
  color: var(--gold);
  background: rgba(230, 196, 135, 0.1);
  border-color: rgba(230, 196, 135, 0.28);
  transform: translateY(-1px);
}
.project-invite-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 720;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.project-invite-modal.visible {
  display: flex;
}
.project-invite-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.project-invite-panel {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  border-radius: 24px;
  border: 1px solid rgba(230, 196, 135, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(17, 15, 13, 0.96);
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.54), 0 0 34px rgba(230, 196, 135, 0.10);
  padding: 22px;
}
.project-invite-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.project-invite-panel__kicker {
  color: rgba(230, 196, 135, 0.72);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.project-invite-panel h3 {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.18;
  font-weight: 700;
}
.project-invite-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(230, 196, 135, 0.20);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text2);
  cursor: pointer;
}
.project-invite-close:hover {
  color: var(--gold);
  background: rgba(230, 196, 135, 0.10);
}
.project-invite-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}
#project-invite-text {
  margin: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(230, 196, 135, 0.18);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 244, 223, 0.92);
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-all;
}
.project-invite-copy-btn {
  min-width: 84px;
  border: 1px solid rgba(255, 237, 186, 0.52);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 244, 214, 0.26), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, #f1ce82 0%, #d2a354 56%, #9b6b2e 100%);
  color: #1d1710;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.project-invite-copy-btn:hover {
  filter: saturate(1.08);
}
.points-help-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 860;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.points-help-modal.visible {
  display: flex;
}
.points-help-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.points-help-panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(86vh, 780px);
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(230, 196, 135, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(17, 15, 13, 0.97);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58), 0 0 28px rgba(230, 196, 135, 0.08);
  padding: 20px;
}
.points-help-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.points-help-panel__kicker {
  color: rgba(230, 196, 135, 0.68);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.points-help-panel h3 {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 650;
}
.points-help-close {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(230, 196, 135, 0.20);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text2);
  cursor: pointer;
}
.points-help-close:hover {
  color: var(--gold);
  background: rgba(230, 196, 135, 0.10);
}
.points-help-note {
  margin: 0 0 6px;
  color: rgba(255, 244, 223, 0.78);
  font-size: 13px;
  line-height: 1.6;
}
.points-help-daily-bonus {
  margin: -4px 0 16px;
  color: rgba(230, 196, 135, 0.86);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}

@keyframes daily-login-bonus-toast-shake {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  20% { opacity: 1; transform: translateX(calc(-50% - 10px)); }
  40% { transform: translateX(calc(-50% + 10px)); }
  60% { transform: translateX(calc(-50% - 7px)); }
  80% { transform: translateX(calc(-50% + 7px)); }
  100% { opacity: 1; transform: translateX(-50%); }
}

.toast-message--daily-login-bonus {
  animation: daily-login-bonus-toast-shake 620ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .toast-message--daily-login-bonus {
    animation: none;
  }
}
.points-pay {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}
.points-pay-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 12px;
  align-items: stretch;
}
.points-pay-panel,
.points-pay-qr-card {
  min-width: 0;
}
.points-pay-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 320px;
  padding: 34px 14px 14px;
}
.points-pay-qr-card {
  min-height: 320px;
  display: grid;
  grid-template-rows: minmax(220px, 1fr) auto;
  gap: 10px;
  padding: 14px;
}
.points-pay-label {
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
}
.points-pay-packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.points-pay-package {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(230, 196, 135, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 244, 223, 0.90);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.points-pay-package:hover,
.points-pay-package.active {
  border-color: rgba(255, 237, 186, 0.62);
  background: rgba(230, 196, 135, 0.16);
  color: var(--gold);
}
.points-pay-custom {
  display: grid;
  gap: 7px;
  color: var(--text3);
  font-size: 12px;
}
.points-pay-custom input {
  width: 100%;
  min-height: 44px;
  height: 44px;
  border: 1px solid rgba(230, 196, 135, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 244, 223, 0.94);
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
}
.points-pay-custom input:focus {
  border-color: rgba(230, 196, 135, 0.55);
  box-shadow: 0 0 0 1px rgba(230, 196, 135, 0.12);
}
.points-pay-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  width: 100%;
}
.points-pay-submit,
.points-pay-retry {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  border-radius: 999px;
  padding: 0 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.points-pay-submit {
  border: 1px solid rgba(255, 237, 186, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 244, 214, 0.26), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, #f1ce82 0%, #d2a354 56%, #9b6b2e 100%);
  color: #1d1710;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.points-pay-retry {
  border: 1px solid rgba(230, 196, 135, 0.24);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text2);
}
.points-pay-submit:disabled {
  opacity: 0.62;
  cursor: wait;
}
.points-pay-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 12px;
  border: 1px solid rgba(230, 196, 135, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}
.points-pay-qr--visible {
  background: rgba(255, 255, 255, 0.06);
}
.points-pay-qr img {
  width: min(210px, 68vw);
  height: auto;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}
.points-pay-qr-placeholder {
  color: rgba(230, 196, 135, 0.52);
  font-size: 13px;
  text-align: center;
}
.points-pay-status {
  min-height: 40px;
  margin: 0;
  color: var(--text3);
  font-size: 13px;
  line-height: 1.55;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.points-pay-status--loading {
  color: rgba(255, 237, 186, 0.90);
}
.points-pay-status--success {
  color: var(--teal);
}
.points-pay-status--error {
  color: var(--red);
}
.points-help-invite {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(230, 196, 135, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}
.points-help-label {
  color: rgba(208, 197, 181, 0.86);
  font-size: 12px;
  font-weight: 600;
}
.points-help-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}
#points-help-link {
  margin: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(230, 196, 135, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 244, 223, 0.92);
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-all;
}
.points-help-copy-btn {
  min-width: 118px;
  border: 1px solid rgba(255, 237, 186, 0.52);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 244, 214, 0.26), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, #f1ce82 0%, #d2a354 56%, #9b6b2e 100%);
  color: #1d1710;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.points-help-copy-btn:hover {
  filter: saturate(1.08);
}
.points-help-copy-btn:disabled {
  opacity: 0.6;
  cursor: wait;
  filter: none;
}
@media (max-width: 720px) {
  .points-help-modal {
    padding: 14px;
  }
  .points-help-panel {
    width: min(100%, 560px);
    max-height: calc(100vh - 28px);
    padding: 16px;
  }
  .points-pay-main {
    grid-template-columns: 1fr;
  }
  .points-pay-qr-card {
    min-height: 0;
  }
}
@media (max-width: 420px) {
  .points-help-panel {
    padding: 14px;
  }
  .points-help-panel h3 {
    font-size: 20px;
  }
  .points-pay-packages {
    grid-template-columns: 1fr;
  }
  .points-help-link-row {
    grid-template-columns: 1fr;
  }
  .points-pay-submit,
  .points-pay-retry,
  .points-help-copy-btn {
    width: 100%;
  }
}
.project-hub-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  width: 100%;
  padding: 12px 0 24px;
}
.project-hub-stage-viewport {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  padding: 28px 0 30px;
}
.project-hub-grid {
  /* --hub-card-approx：轨道内每张卡占位宽度 */
  --hub-card-approx: max(250px, min(22vw, 320px));
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: min(70vh, 600px);
  min-height: min(70dvh, 600px);
  padding: 56px 0 44px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.project-hub-carousel__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  width: max-content;
  margin-inline: auto;
  min-height: min(70vh, 600px);
  min-height: min(70dvh, 600px);
  max-height: none;
  padding: 8px clamp(12px, 3vw, 24px) 10px;
  box-sizing: border-box;
}
.project-hub-carousel-item {
  --dock-shift-x: 0px;
  position: relative;
  flex: 0 0 var(--hub-card-approx);
  width: var(--hub-card-approx);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transform: translate3d(var(--dock-shift-x), 0, 0);
  transition: transform 320ms var(--ease-out);
  will-change: transform;
}
.project-card {
  --dock-scale: 1;
  --dock-lift: 0px;
  --dock-shadow-opacity: 0;
  --project-card-hover-lift: 0px;
  --project-card-hover-scale-boost: 0;
  position: relative;
  width: min(22vw, 320px);
  min-width: 250px;
  aspect-ratio: 2 / 3;
  padding: 18px 18px 16px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  flex: 0 0 auto;
  border: 1px solid rgba(230, 196, 135, 0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)),
    rgba(15, 14, 13, 0.62);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.42),
    0 0 calc(8px + (var(--dock-shadow-opacity) * 26px)) rgba(230, 196, 135, 0.14);
  transform: translate3d(0, calc(var(--dock-lift) + var(--project-card-hover-lift)), 0) scale(calc(var(--dock-scale) + var(--project-card-hover-scale-boost)));
  transform-origin: center bottom;
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out), opacity var(--dur-normal) var(--ease-out), filter var(--dur-normal) var(--ease-out);
  will-change: transform;
}
.project-hub-carousel-item > .project-card {
  width: 100%;
  min-width: 0;
  max-width: none;
}
.project-hub-carousel-item--selected .project-card {
  border-color: rgba(230, 196, 135, 0.52);
  box-shadow:
    0 0 0 2px rgba(230, 196, 135, 0.38),
    0 18px 60px rgba(0, 0, 0, 0.42);
}
.project-card.is-switching {
  pointer-events: none;
  opacity: 0.72;
  filter: saturate(0.82) brightness(0.95);
}
.project-hub-carousel-item--selected .project-card:hover {
  --project-card-hover-lift: -4px;
  --project-card-hover-scale-boost: 0.012;
  box-shadow:
    0 0 0 2px rgba(230, 196, 135, 0.48),
    0 22px 68px rgba(0, 0, 0, 0.48),
    0 0 36px rgba(230, 196, 135, 0.12);
}
.project-hub-carousel-item:not(.project-hub-carousel-item--selected) .project-card:hover {
  --project-card-hover-lift: -2px;
  --project-card-hover-scale-boost: 0.008;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(230, 196, 135, 0.1);
  filter: brightness(1.03);
}
.project-card__badge {
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 244, 223, 0.84);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(230, 196, 135, 0.12);
}
.project-card__badge--right {
  position: absolute;
  top: 18px;
  right: 18px;
}
.project-card__edit {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(230, 196, 135, 0.14);
  border-radius: 999px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.03);
  color: var(--text2);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.project-card__edit:hover {
  color: var(--gold);
  background: rgba(230, 196, 135, 0.1);
  border-color: rgba(230, 196, 135, 0.26);
  transform: translateY(-1px);
}
.project-card__menu {
  display: none;
}
.project-card__body {
  margin-top: clamp(88px, 24%, 128px);
}
.project-card__title {
  margin-top: 0;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: clamp(32px, 2.8vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.project-card__desc {
  color: rgba(208, 197, 181, 0.78);
  font-size: 14px;
  line-height: 1.62;
  margin-top: 14px;
}
.project-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: rgba(208, 197, 181, 0.7);
  font-size: 13px;
}
.project-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}
.project-card__delete {
  border: 1px solid rgba(201, 110, 110, 0.18);
  border-radius: 999px;
  padding: 12px 18px;
  background: rgba(201, 110, 110, 0.08);
  color: #dca7a7;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.project-card__delete:hover {
  background: rgba(201, 110, 110, 0.14);
  color: #ffd4d4;
  transform: translateY(-1px);
}
.project-card__hint {
  color: rgba(208, 197, 181, 0.76);
  font-size: 13px;
  white-space: nowrap;
}
.project-hub-loading {
  position: absolute;
  inset: 8px 0 20px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(7, 7, 7, 0.58);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  z-index: 5;
}
.project-hub-loading.is-visible {
  display: flex;
}
.project-hub-loading__card {
  min-width: 260px;
  padding: 26px 24px;
  border-radius: 22px;
  text-align: center;
}
.project-hub-loading__spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto 14px;
  border-radius: 999px;
  border: 3px solid rgba(230, 196, 135, 0.12);
  border-top-color: var(--gold);
  animation: hubSpin 0.9s linear infinite;
}
.project-hub-loading__title {
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 24px;
}
.project-hub-loading__text {
  color: var(--text3);
  font-size: 14px;
  margin-top: 8px;
}
@keyframes hubSpin {
  to { transform: rotate(360deg); }
}
.project-card--preset {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)),
    radial-gradient(circle at top right, rgba(124, 215, 193, 0.08), transparent 28%),
    rgba(15, 14, 13, 0.6);
}
.project-card--new {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  background: rgba(255,255,255,0.025);
}
.project-card--new .project-card__badge {
  align-self: flex-start;
}
.project-card--new .project-card__title {
  margin-top: 0;
  font-size: clamp(36px, 3.1vw, 48px);
}
.project-card--new .project-card__desc {
  max-width: 220px;
}

@media (prefers-reduced-motion: reduce) {
  .project-hub-grid {
    scroll-behavior: auto;
  }
  .project-hub-carousel-item,
  .project-hub-invite-gift,
  .project-card,
  .floating-card,
  .landing-card::after,
  .landing-context-vis-host,
  .landing-particles span,
  .landing-scene-lines line {
    transition: none;
    animation: none;
  }
  .landing-card:hover::after,
  .landing-card:focus-within::after {
    opacity: 0.58;
    transform: scaleX(0.9);
  }
}

@media (max-width: 1040px) {
  .landing-header__inner {
    gap: 16px;
  }
  .landing-nav-links {
    gap: 16px;
  }
  .landing-title {
    font-size: 64px;
  }
  .landing-feature-grid--three,
  .landing-testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landing-context-demo {
    grid-template-columns: 1fr;
  }
  .landing-context-card {
    max-height: none;
  }
  .project-hub-shell {
    min-height: auto;
  }
  .project-hub-grid {
    --hub-card-approx: max(220px, min(36vw, 300px));
  }
  .project-card {
    width: 100%;
    min-width: 0;
    padding: 16px 16px 14px;
  }
  .project-card__title {
    font-size: clamp(28px, 4vw, 38px);
  }
  .project-card__desc {
    font-size: 13px;
  }
}

/* ── TITLEBAR ── */
#titlebar {
  height: 38px;
  margin: var(--layout-pad-y) var(--layout-pad-x) 0;
  background: var(--glass-titlebar-bg);
  backdrop-filter: var(--glass-titlebar-blur);
  -webkit-backdrop-filter: var(--glass-titlebar-blur);
  border: 1px solid rgba(230, 196, 135, 0.15);
  border-radius: var(--panel-radius);
  box-shadow: var(--glass-titlebar-shadow);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  -webkit-app-region: drag;
  user-select: none;
  position: relative;
  z-index: 70;
}
#titlebar.tactical-glow {
  box-shadow: var(--glass-titlebar-shadow), 0 0 20px -5px rgba(230, 196, 135, 0.15), inset 0 0 10px rgba(230, 196, 135, 0.02);
}
#titlebar button,
#titlebar .tl-badge,
#titlebar .titlebar-cluster {
  -webkit-app-region: no-drag;
}
#app-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.15em;
  font-weight: 400;
  transition: all var(--dur-slow) var(--ease-out);
}
#app-title:hover {
  letter-spacing: 0.35em;
  text-shadow: 0 0 20px rgba(230,196,135,0.3);
}
#title-right {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  row-gap: 4px;
  -webkit-app-region: no-drag;
}
/* 顶栏：四键同一药丸容器 + 统一分段样式 */
.titlebar-cluster {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.titlebar-btn {
  appearance: none;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 5px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
  border: none;
  background: transparent;
  color: rgba(232, 224, 208, 0.88);
  box-shadow: none;
  white-space: nowrap;
}
.titlebar-btn:hover {
  background: rgba(230, 196, 135, 0.14);
  color: var(--gold);
}
.titlebar-btn:active {
  transform: scale(0.98);
}
.titlebar-cluster .titlebar-btn:focus-visible {
  outline: 1px solid rgba(230, 196, 135, 0.5);
  outline-offset: 2px;
}
.titlebar-btn--ghost {
  padding: 4px 10px;
  font-size: 10px;
  color: var(--text3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.15);
}
.titlebar-btn--ghost:hover {
  color: var(--text2);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}
.titlebar-btn--warn {
  color: #e8a0a0;
  border: 1px solid rgba(201, 110, 110, 0.45);
  background: rgba(60, 22, 22, 0.35);
}
.titlebar-btn--warn:hover {
  color: #f5c4c4;
  background: rgba(80, 30, 30, 0.45);
}
.titlebar-btn--model {
  color: var(--teal);
  border: 1px solid rgba(124, 215, 193, 0.35);
  background: rgba(22, 60, 50, 0.35);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.titlebar-btn--model:hover {
  color: #9ee8d4;
  background: rgba(30, 80, 65, 0.45);
}
.titlebar-btn--context {
  min-width: 34px;
  height: 28px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  flex-shrink: 0;
}
.titlebar-btn--context:hover {
  color: var(--gold);
  background: rgba(230, 196, 135, 0.14);
  border-color: rgba(230, 196, 135, 0.22);
}
.titlebar-btn--context:focus-visible {
  outline: 1px solid rgba(230, 196, 135, 0.5);
  outline-offset: 2px;
}
.titlebar-btn--context .material-symbols-outlined {
  font-size: 17px;
  line-height: 1;
}
.titlebar-user {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.titlebar-points {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px 0 0;
  color: var(--text3);
  white-space: nowrap;
}
.titlebar-points-icon {
  font-size: 14px;
  color: var(--gold);
}
.titlebar-points strong {
  color: var(--gold2);
  font-size: 12px;
  font-family: var(--font-mono);
}
.titlebar-user .user-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  outline: none;
}
.titlebar-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(230, 196, 135, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text2);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.titlebar-avatar-btn .material-symbols-outlined {
  font-size: 18px;
}
.titlebar-avatar-btn:hover,
.titlebar-user .user-info:hover .titlebar-avatar-btn,
.titlebar-user .user-info:focus-within .titlebar-avatar-btn {
  color: var(--gold);
  border-color: rgba(230, 196, 135, 0.3);
  background: rgba(230, 196, 135, 0.08);
}
.titlebar-user-popover {
  position: absolute;
  top: calc(100% - 2px);
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.titlebar-user .user-info:hover .titlebar-user-popover,
.titlebar-user .user-info:focus-within .titlebar-user-popover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.titlebar-user-panel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.titlebar-user-name {
  font-size: 11px;
  color: var(--text3);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.titlebar-user-name span {
  color: var(--text2);
}
.titlebar-sep {
  width: 1px;
  height: 16px;
  background: rgba(230, 196, 135, 0.22);
  flex-shrink: 0;
  margin: 0 1px;
}
.tl-badge {
  font-size: 11px; color: var(--text3);
  border: 1px solid var(--border);
  border-radius: var(--btn-pill-radius); padding: 2px 8px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.tl-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.05) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.tl-badge:hover {
  color: var(--text2); border-color: var(--border2);
  transform: translateY(-1px);
}
.tl-badge:hover::before {
  transform: translateX(100%);
}

/* ── EDITOR FLOATING NAV ── */
body[data-app-view="editor"] #titlebar.editor-floating-nav {
  position: fixed;
  inset: 0;
  height: auto;
  margin: 0;
  padding: var(--layout-pad-y) var(--layout-pad-x);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
  z-index: 80;
  -webkit-app-region: no-drag;
  user-select: none;
}
body[data-app-view="editor"] .editor-floating-nav__left,
body[data-app-view="editor"] .editor-floating-nav__right,
body[data-app-view="editor"] .editor-float-capsule,
body[data-app-view="editor"] .editor-project-entry,
body[data-app-view="editor"] #app-title,
body[data-app-view="editor"] .editor-header-title {
  pointer-events: auto;
}
.editor-floating-nav__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.editor-floating-nav__right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
body[data-app-view="editor"] .editor-float-capsule {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #27272a;
  background: #0f0f11;
  color: #f5f5f5;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  -webkit-app-region: no-drag;
  box-shadow: none;
}
body[data-app-view="editor"] .editor-float-capsule:hover {
  color: #fafafa;
  border-color: #3f3f46;
  background: #18181b;
}
body[data-app-view="editor"] .editor-float-capsule:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
}
body[data-app-view="editor"] .editor-float-capsule__icon {
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}
body[data-app-view="editor"] .editor-float-capsule__icon.toggle-btn-icon {
  width: 18px;
  height: 18px;
}
body[data-app-view="editor"] .editor-float-capsule__label {
  white-space: nowrap;
}
body[data-app-view="editor"] #app-title,
body[data-app-view="editor"] .editor-header-title {
  position: static;
  left: auto;
  transform: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #f5f5f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(48vw, 520px);
  cursor: default;
  transition: color var(--dur-fast) var(--ease-out);
}
body[data-app-view="editor"] #app-title:hover,
body[data-app-view="editor"] .editor-header-title:hover {
  letter-spacing: 0.08em;
  text-shadow: none;
  color: #fafafa;
}
body[data-app-view="editor"] #sidebar-toggle.editor-project-entry,
body[data-app-view="editor"] .editor-project-entry {
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--landing-primary, #d4af37);
  color: #050505;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.28);
}
body[data-app-view="editor"] #sidebar-toggle.editor-project-entry:hover,
body[data-app-view="editor"] .editor-project-entry:hover {
  background: #e0bc4a;
  color: #050505;
  border-color: transparent;
}
body[data-app-view="editor"] .editor-project-entry__icon {
  width: 18px;
  height: 18px;
}

/* ── FILE MENU（左下文件图标上拉） ── */
#file-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  top: auto;
  left: 0;
  right: auto;
  background: var(--popover-glass-bg);
  border: 1px solid var(--popover-glass-border);
  border-radius: var(--popover-glass-radius);
  padding: 6px;
  z-index: 700;
  min-width: 216px;
  max-width: min(92vw, 280px);
  max-height: min(70vh, calc(100vh - 120px));
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: var(--popover-glass-shadow);
  backdrop-filter: var(--popover-glass-blur);
  -webkit-backdrop-filter: var(--popover-glass-blur);
  transform-origin: bottom left;
}
#file-menu.open {
  display: block;
  animation: scaleIn var(--dur-fast) var(--ease-spring);
}
.fm-item {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text2);
  border-radius: var(--btn-pill-radius);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.fm-item:hover {
  background: rgba(230, 196, 135, 0.10);
  color: var(--gold);
  transform: translateX(4px);
}
.fm-item-icon {
  font-size: 16px;
  line-height: 1;
  vertical-align: -3px;
  margin-right: 6px;
}
.fm-item.fm-danger { color: var(--red); }
.fm-item.fm-danger:hover { background: rgba(255,180,171,0.10); }
.fm-sep { height: 0; margin: 6px 0; background: transparent; overflow: hidden; border: none; }
/* 上下文菜单内分组间距（无横线） */
.ctx-menu-gap {
  height: 8px;
  min-height: 8px;
  margin: 0;
  flex-shrink: 0;
  pointer-events: none;
}
.fm-group-label {
  padding: 4px 14px 2px;
  font-size: 10px; color: var(--text3);
  letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--font-sans);
}
.fm-group-label--folder {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.fm-group-label--folder > span:first-child {
  flex-shrink: 0;
}
.fm-folder-name {
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  flex: 1;
  min-width: 0;
}

#kb-tag-bar .ktag-btn {
  padding: 2px 9px; font-size: 11px;
  border-radius: var(--btn-pill-radius); cursor: pointer;
  border: 1px solid var(--border2);
  font-family: var(--font-sans);
  background: transparent; color: var(--text3);
  transition: all 0.15s; white-space: nowrap;
}
#kb-tag-bar .ktag-btn.on { border-color: var(--gold); color: var(--gold); background: rgba(230,196,135,0.1); }
#kb-tag-bar .ktag-btn.on.teal { border-color: var(--teal); color: var(--teal); background: rgba(124,215,193,0.1); }
#kb-back-btn {
  font-size: 11px; color: var(--text3);
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--btn-pill-radius); padding: 3px 10px;
  cursor: pointer; font-family: var(--font-sans);
  transition: all 0.2s; white-space: nowrap; flex-shrink: 0;
}
#kb-back-btn:hover { color: var(--gold); border-color: var(--gold); }
#kb-hidden-input-wrap {
  padding: 0 80px 0;
  max-width: 840px; margin: -20px auto 20px;
}
#kb-hidden-field {
  width: 100%; padding: 7px 12px;
  background: rgba(201,110,110,0.06);
  border: 1px solid rgba(201,110,110,0.2);
  border-radius: var(--radius);
  color: var(--red); font-size: 12px;
  font-family: var(--font-sans); outline: none;
  resize: none;
}
#kb-hidden-field::placeholder { color: rgba(201,110,110,0.4); }
#kb-hidden-field:focus { border-color: rgba(201,110,110,0.4); }
#kb-hidden-label {
  font-size: 10px; color: rgba(201,110,110,0.6);
  margin-bottom: 4px; letter-spacing: 0.06em;
  font-family: var(--font-sans);
}
#kb-hidden-wrap {
  display: none;
  padding: 0 0 24px;
  max-width: none;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* ── CHAPTERS LIST ── */
.ch-preview {
  font-size: 11px; color: var(--text3);
  margin-top: 2px; line-height: 1.4;
  overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; max-width: 200px;
}

/* ── OUTLINE PLAN ── */
.outline-plan-item {
  padding: 8px 8px 10px;
  border-bottom: none;
}
.outline-plan-title {
  font-size: 12px; font-weight: 500;
  color: var(--text2); margin-bottom: 5px;
}
.outline-synopsis {
  width: 100%; min-height: 44px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text); font-size: 12px;
  line-height: 1.6; padding: 6px 9px;
  font-family: var(--font-sans);
  resize: none; outline: none;
  overflow: hidden;
  transition: border-color 0.15s;
}
.outline-synopsis:focus { border-color: var(--border2); }
.outline-synopsis::placeholder { color: var(--text3); }

/* ── KB GROUP HEADER ── */
.kb-group-header {
  display: flex; align-items: center;
  padding: 10px 4px 5px;
  gap: 4px;
}
.kb-group-name {
  font-size: 10px; color: var(--text3);
  letter-spacing: 0.12em; text-transform: uppercase;
  font-family: var(--font-sans); flex: 1;
}
.kb-group-actions {
  display: flex; gap: 2px; opacity: 0;
  transition: opacity 0.15s;
}
.kb-group-header:hover .kb-group-actions { opacity: 1; }
.kg-btn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text3); font-size: 11px;
  cursor: pointer; padding: 0;
  border-radius: var(--btn-circle-radius); line-height: 1;
  font-family: var(--font-sans);
  transition: all 0.15s;
}
.kg-btn:hover { background: var(--bg4); color: var(--text2); }
.kg-btn.kg-del:hover { color: var(--red); }

/* ── DRAG AND DROP ── */
.kb-card[draggable] { cursor: grab; }
.kb-card[draggable]:active { cursor: grabbing; }
.kb-card.dragging {
  opacity: 0.35;
  border-style: dashed;
}
.kb-drop-zone {
  min-height: 6px;
  border-radius: var(--radius);
  transition: all 0.15s;
  margin: 2px 0;
}
.kb-drop-zone.drag-over {
  min-height: 36px;
  background: rgba(230,196,135,0.08);
  border: 1px dashed rgba(230,196,135,0.4);
}
.kb-group-drop {
  border-radius: var(--radius);
  transition: background 0.15s;
}
.kb-group-drop.group-drag-over {
  background: rgba(230,196,135,0.05);
  outline: 1px dashed rgba(230,196,135,0.3);
  outline-offset: -2px;
}

.kb-ctx-item {
  padding: 7px 14px;
  font-size: 12px; color: var(--text2);
  border-radius: var(--btn-pill-radius);
  cursor: pointer; font-family: var(--font-sans);
  transition: background 0.12s;
}
.kb-ctx-item:hover { background: rgba(230, 196, 135, 0.10); color: var(--gold); }
.kb-ctx-danger { color: var(--red); }
.kb-ctx-danger:hover { background: rgba(255,180,171,0.10); color: var(--red); }

.kb-context-menu-surface {
  display: none;
  position: fixed;
  z-index: 600;
  min-width: 140px;
  padding: 5px;
  background: var(--popover-glass-bg);
  border: 1px solid var(--popover-glass-border);
  border-radius: var(--popover-glass-radius);
  box-shadow: var(--popover-glass-shadow);
  backdrop-filter: var(--popover-glass-blur);
  -webkit-backdrop-filter: var(--popover-glass-blur);
}

/* ── VOLUME / CHAPTER HEADERS ── */
.vol-header {
  display: flex; align-items: center;
  padding: 10px 4px 5px; gap: 4px;
  user-select: none;
}
.vol-name {
  font-size: 10px; color: var(--text3);
  letter-spacing: 0.12em; text-transform: uppercase;
  font-family: var(--font-sans); flex: 1;
  cursor: text;
}
.vol-name-input {
  flex: 1; background: transparent;
  border: none; border-bottom: 1px solid var(--gold);
  color: var(--gold); font-size: 10px;
  font-family: var(--font-sans); outline: none;
  letter-spacing: 0.1em; padding: 1px 2px;
}
.vol-actions {
  display: flex; gap: 2px; opacity: 0;
  transition: opacity 0.15s;
}
.vol-header:hover .vol-actions { opacity: 1; }
.vol-btn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text3); font-size: 11px;
  cursor: pointer; padding: 0;
  border-radius: var(--btn-circle-radius); line-height: 1;
  font-family: var(--font-sans); transition: all 0.15s;
}
.vol-btn:hover { background: var(--bg4); color: var(--text2); }
.vol-btn.vol-btn-del:hover { color: var(--red); }
.ch-item {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: var(--content-card-radius);
  cursor: pointer; margin-bottom: 6px;
  transition: transform var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              background var(--dur-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%),
    rgba(33, 31, 30, 0.42);
  border: 1px solid rgba(230, 196, 135, 0.10);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  box-shadow: 0 5px 16px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ch-item:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%),
    rgba(43, 42, 40, 0.50);
  border-color: rgba(255, 255, 255, 0.18);
  transform: perspective(900px) translateY(-3px) scale(1.012) rotateX(var(--tilt-x, 2.2deg)) rotateY(var(--tilt-y, -2.2deg));
  box-shadow: 0 14px 30px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08);
}
.ch-item.active-ch {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.035) 100%),
    rgba(12, 12, 12, 0.94);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 34px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -18px 34px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.055);
  transform: perspective(900px) translateZ(0);
}
/* 章节卡片涟漪效果 */
.ch-item::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: radial-gradient(circle, rgba(230,196,135,0.2) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ch-item:active::after {
  animation: ripple 400ms var(--ease-out);
}
.ch-item-title {
  flex: 1; font-size: 13px; color: var(--gold);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  min-width: 0;
}
.ch-item.active-ch .ch-item-title { color: var(--text); }
.ch-item-title-input {
  flex: 1; background: transparent;
  border: none; border-bottom: 1px solid var(--gold);
  color: var(--gold); font-size: 13px;
  font-family: var(--font-sans); outline: none;
  min-width: 0; padding: 0 2px;
}
.ch-item-preview {
  font-size: 11px; color: var(--text3);
  margin-top: 2px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.ch-item[draggable="true"] { cursor: grab; }
.ch-item[draggable="true"]:active { cursor: grabbing; }
.ch-item.ch-dragging { opacity: 0.4; }
.ch-item.ch-drag-over { border: 1px dashed var(--gold); border-radius: var(--content-card-radius); background: rgba(230,196,135,0.08); }

/* ── SELECTION INLINE SUGGESTION (原文后的方框) ── */
#editor .sel-ai-box {
  display: block;
  margin: 10px 0 8px;
  padding: 12px 14px;
  border: 1px solid rgba(124, 215, 193, 0.45);
  border-radius: var(--radius-lg);
  background: rgba(18, 22, 20, 0.92);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  max-width: 100%;
  user-select: text;
}
#editor .sel-ai-body { min-height: 1em; }
.sel-ai-loading {
  font-size: 12px;
  color: var(--text3);
  font-family: var(--font-sans);
}
.sel-ai-loading-tip {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text3);
  font-family: var(--font-sans);
  word-break: break-word;
}
#editor .sel-ai-text {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text);
  font-family: var(--font-serif);
  word-break: break-word;
}
.sel-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 10px;
  border-top: none;
}
.sel-replace-btn {
  background: var(--gold);
  border: none;
  border-radius: var(--btn-pill-radius);
  color: #1a1510;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s;
}
.sel-replace-btn:hover:not(:disabled) { background: var(--gold2); }
.sel-replace-btn:disabled { background: var(--bg4); color: var(--text3); cursor: default; }
.sel-regen-btn,
.sel-cancel-btn {
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: var(--btn-pill-radius);
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sel-regen-btn:hover:not(:disabled),
.sel-cancel-btn:hover:not(:disabled) {
  color: var(--teal);
  border-color: rgba(124, 215, 193, 0.45);
  background: rgba(124, 215, 193, 0.08);
}
.sel-regen-btn:disabled,
.sel-cancel-btn:disabled { opacity: 0.45; cursor: default; }

/* ── STYLE ZONE (below agent identity) ── */
#style-zone {
  border-bottom: none;
  padding: 8px 14px 10px;
  flex-shrink: 0;
}
#style-chips {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
}
#active-style-indicator {
  margin-top: 5px;
  font-size: 11px; color: var(--teal);
  font-family: var(--font-sans);
  display: none;
}

/* ── SETTINGS BUTTON ── */
#settings-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--btn-circle-radius); color: var(--text3);
  font-size: 14px; padding: 0; cursor: pointer;
  transition: all 0.2s; line-height: 1; flex-shrink: 0;
}
#settings-btn:hover { color: var(--gold); border-color: rgba(230,196,135,0.4); }

/* ── SETTINGS MODAL ── */
#settings-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.72); z-index: 800;
  align-items: center; justify-content: center;
}
#settings-modal.visible { display: flex; }
#settings-box {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  width: 520px; max-width: 94vw;
  max-height: 86vh; overflow: hidden;
  display: flex; flex-direction: column;
}
#settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: none;
  font-family: var(--font-serif); font-size: 15px; color: var(--text);
  font-weight: 400;
  flex-shrink: 0;
}
#settings-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
#settings-close {
  background: transparent; border: none;
  color: var(--text3); font-size: 14px; cursor: pointer;
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--btn-circle-radius);
  transition: color 0.15s;
}
#settings-close:hover { color: var(--text); }
.settings-section {
  padding: 16px 20px;
  border-bottom: none;
}
.settings-section-title {
  font-size: 11px; color: var(--text3);
  letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--font-sans); margin-bottom: 12px;
}
.settings-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.settings-field:last-child { margin-bottom: 0; }
.settings-field label {
  font-size: 12px; color: var(--text2);
  font-family: var(--font-sans);
}
.settings-field input, .settings-field select {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--radius); color: var(--text);
  font-size: 13px; padding: 8px 11px;
  font-family: var(--font-sans); outline: none; width: 100%;
}
.settings-field input:focus, .settings-field select:focus {
  border-color: rgba(230,196,135,0.4);
}
#api-key-toggle {
  background: transparent; border: 1px solid var(--border2);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--btn-circle-radius); color: var(--text3);
  font-size: 14px; padding: 0; cursor: pointer;
  flex-shrink: 0; transition: color 0.15s;
}
#api-key-toggle:hover { color: var(--text); }
.settings-hint {
  font-size: 11px; color: var(--text3);
  font-family: var(--font-sans); line-height: 1.6;
  padding-top: 2px;
}
.settings-hint a { color: var(--gold); text-decoration: none; }
.settings-hint a:hover { text-decoration: underline; }
#model-connection-status {
  font-size: 12px; font-family: var(--font-sans);
  min-height: 18px;
}
#model-connection-status.ok { color: var(--teal); }
#model-connection-status.err { color: var(--red); }
#settings-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px;
  border-top: none;
  flex-shrink: 0;
}
#settings-test-btn {
  padding: 8px 16px; font-size: 13px;
  background: transparent; border: 1px solid var(--border2);
  border-radius: var(--btn-pill-radius); color: var(--text2);
  cursor: pointer; font-family: var(--font-sans);
  transition: all 0.15s;
}
#settings-test-btn:hover { color: var(--text); border-color: var(--border2); }
#settings-save-btn {
  padding: 8px 20px; font-size: 13px;
  background: var(--gold); border: none;
  border-radius: var(--btn-pill-radius); color: #1a1510;
  cursor: pointer; font-weight: 500; font-family: var(--font-sans);
}
#settings-save-btn:hover { background: var(--gold2); }

.settings-section + .settings-section {
  border-top: 1px solid rgba(230, 196, 135, 0.06);
}
.model-choice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.model-choice-card {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(230, 196, 135, 0.12);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.model-choice-card:hover {
  border-color: rgba(230, 196, 135, 0.32);
  background: rgba(230, 196, 135, 0.05);
  transform: translateY(-1px);
}
.model-choice-card.active {
  border-color: rgba(230, 196, 135, 0.75);
  background: rgba(230, 196, 135, 0.1);
  box-shadow: inset 0 0 0 1px rgba(230, 196, 135, 0.15);
}
.model-choice-card.is-disabled {
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
  color: rgba(255, 255, 255, 0.38);
  transform: none;
  box-shadow: none;
}
.model-choice-card.is-disabled:hover {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
  transform: none;
}
.model-choice-main {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.model-choice-card.is-disabled .model-choice-main,
.model-choice-card.is-disabled .model-choice-meta {
  color: rgba(255, 255, 255, 0.38);
}
.model-choice-meta {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text3);
}
.model-choice-state {
  font-size: 11px;
  color: #8f8780;
}
#settings-view-picker {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#context-settings-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 810;
  align-items: center;
  justify-content: center;
}
#context-settings-modal.visible {
  display: flex;
}
#context-settings-box {
  --settings-panel-radius: var(--modal-radius);
  --settings-sidebar-edge-gap: 6px;
  --settings-sidebar-radius: var(--editor-column-radius);
  --settings-inner-radius: var(--dialog-radius);
  --settings-panel-bg: radial-gradient(ellipse 68% 42% at 22% 0%, rgba(230,196,135,0.08), transparent 58%),
    radial-gradient(ellipse 46% 36% at 94% 6%, rgba(255,222,164,0.045), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.012) 42%, rgba(0,0,0,0.08)),
    rgba(14, 12, 10, 0.72);
  --settings-panel-border: rgba(230,196,135,0.18);
  --settings-panel-shadow: 0 24px 70px rgba(0,0,0,0.72), 0 0 26px rgba(230,196,135,0.06),
    inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 24px rgba(230,196,135,0.035);
  --settings-sidebar-bg: radial-gradient(ellipse 84% 40% at 20% 0%, rgba(255,222,164,0.105), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035) 54%, rgba(0,0,0,0.04)),
    rgba(22, 19, 16, 0.64);
  --settings-sidebar-border: rgba(230,196,135,0.24);
  --settings-sidebar-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 18px rgba(230,196,135,0.045),
    0 18px 46px rgba(0,0,0,0.38), 0 0 18px rgba(230,196,135,0.04);
  --settings-close-size: 30px;
  --settings-close-inset: 26px;
  --settings-close-gap: 10px;
  --settings-close-reserve: calc(var(--settings-close-size) + var(--settings-close-gap));
  width: min(1040px, 94vw);
  height: min(760px, 92vh);
  max-height: 92vh;
  overflow: hidden;
  display: block;
  position: relative;
  background: var(--settings-panel-bg);
  border: 1px solid var(--settings-panel-border);
  border-radius: var(--settings-panel-radius);
  box-shadow: var(--settings-panel-shadow);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}
.context-settings-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--settings-sidebar-edge-gap) 26px var(--settings-sidebar-edge-gap) var(--settings-sidebar-edge-gap);
}
.context-settings-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.context-settings-titlebar {
  display: none;
}
.context-settings-titlebar h2 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0;
}
#context-settings-close {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(230,196,135,0.16);
  border-radius: 999px;
  background: rgba(230,196,135,0.06);
  color: var(--text3);
  font-size: 13px;
  cursor: pointer;
}
#context-settings-close:hover {
  color: var(--gold);
  background: rgba(230,196,135,0.12);
  border-color: rgba(230,196,135,0.36);
}
.context-settings-sidebar {
  padding: 14px 10px;
  border: 1px solid var(--settings-sidebar-border);
  border-radius: var(--settings-sidebar-radius);
  background: var(--settings-sidebar-bg);
  box-shadow: var(--settings-sidebar-shadow);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.settings-account-card {
  padding: 12px 14px 16px;
  margin-bottom: 10px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: default;
}
.settings-account-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.settings-account-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
  color: var(--gold2);
  background: rgba(230,196,135,0.1);
}
.settings-account-avatar-head {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 999px;
  transform: translateX(-50%);
}
.settings-account-avatar-body {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 18px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: none;
  border-radius: 999px 999px 0 0;
  transform: translateX(-50%);
}
.settings-account-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(230,225,223,0.48);
}
.settings-account-name {
  max-width: 190px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
}
.settings-account-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,0.07);
  color: var(--text3);
  font-size: 12px;
}
.settings-account-points-icon {
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 0 7px rgba(230,196,135,0.34);
}
.settings-account-meta strong {
  color: var(--gold2);
  font-family: var(--font-mono);
  font-size: 13px;
}
.settings-account-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.settings-account-btn {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid rgba(230,196,135,0.24);
  border-radius: 999px;
  background: rgba(230,196,135,0.12);
  color: var(--gold2);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.settings-account-btn:hover {
  color: var(--gold);
  background: rgba(230,196,135,0.18);
  border-color: rgba(230,196,135,0.38);
}
.settings-account-btn--ghost {
  color: var(--text3);
  border-color: rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.16);
}
.settings-account-btn--ghost:hover {
  color: var(--text2);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07);
}
.account-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.account-settings-modal.visible {
  display: flex;
}
.account-action-modal {
  z-index: 910;
}
.account-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 7, 5, 0.58);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.account-settings-panel {
  position: relative;
  width: min(100%, 520px);
  max-height: calc(100vh - 36px);
  overflow: hidden;
  border: 1px solid rgba(230,196,135,0.24);
  border-radius: var(--dialog-radius);
  background:
    radial-gradient(circle at top left, rgba(230,196,135,0.12), transparent 35%),
    rgba(31, 27, 23, 0.96);
  color: var(--text);
  box-shadow: 0 28px 70px rgba(0,0,0,0.42);
}
.account-action-panel {
  width: min(100%, 480px);
}
.account-settings-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 16px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.account-settings-head h3 {
  margin: 0;
  font-size: 20px;
  color: var(--gold2);
}
.account-settings-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text3);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.account-settings-close:hover {
  color: var(--text);
  background: rgba(255,255,255,0.1);
}
.account-settings-body {
  max-height: calc(100vh - 94px);
  overflow: auto;
  padding: 16px 20px 20px;
}
.account-info-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.account-info-row:last-child {
  border-bottom: 0;
}
.account-info-label,
.account-field span {
  display: block;
  margin-bottom: 5px;
  color: var(--text3);
  font-size: 12px;
}
.account-info-row strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-info-row small {
  display: block;
  margin-top: 4px;
  color: rgba(230,225,223,0.48);
  font-size: 12px;
  line-height: 1.45;
}
.account-info-row small:empty {
  display: none;
}
.settings-account-panel .context-detail-head {
  margin-bottom: 28px;
}
.settings-account-list {
  max-width: 720px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.settings-account-panel .account-info-row {
  min-height: 86px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.settings-account-panel .account-info-row:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.settings-account-panel .account-info-label {
  margin-bottom: 8px;
  color: rgba(230,225,223,0.54);
  font-size: 12px;
}
.settings-account-panel .account-info-row strong {
  font-size: 17px;
  font-weight: 650;
}
.account-row-action,
.account-save-btn,
.account-cancel-btn,
.account-secondary-btn {
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(230,196,135,0.24);
  padding: 7px 13px;
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
}
.account-row-action,
.account-save-btn {
  color: #1e1710;
  background: var(--gold2);
}
.account-row-action:disabled {
  cursor: not-allowed;
  color: rgba(230,225,223,0.42);
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
}
.account-cancel-btn,
.account-secondary-btn {
  color: var(--text3);
  background: rgba(0,0,0,0.18);
  border-color: rgba(255,255,255,0.12);
}
.account-save-btn:hover,
.account-row-action:not(:disabled):hover {
  filter: brightness(1.06);
}
.account-cancel-btn:hover,
.account-secondary-btn:hover {
  color: var(--text2);
  background: rgba(255,255,255,0.08);
}
.account-field {
  display: block;
  margin-bottom: 14px;
}
.account-field--nested {
  margin-top: 10px;
  margin-bottom: 0;
}
.account-bound-value {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
}
.account-field input {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}
.account-field input:focus {
  border-color: rgba(230,196,135,0.42);
  box-shadow: 0 0 0 3px rgba(230,196,135,0.08);
}
.account-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 8px;
}
.account-action-note {
  margin: 0 0 14px;
  color: var(--text3);
  font-size: 12px;
  line-height: 1.6;
}
.account-wechat-qr-shell {
  width: min(100%, 300px);
  min-height: 280px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.96);
}
.account-wechat-qr {
  width: 280px;
  height: 280px;
  max-width: 100%;
  display: grid;
  place-items: center;
  color: #089759;
  background: #fff;
}
.account-wechat-qr iframe {
  width: 280px !important;
  height: 280px !important;
  max-width: 100%;
  border: 0;
}
.account-wechat-qr .material-symbols-outlined {
  font-size: 64px;
}
.account-wechat-status {
  margin: 12px 0 0;
  color: var(--text3);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.account-action-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.settings-nav-item {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--btn-pill-radius);
  background: transparent;
  color: rgba(230,225,223,0.82);
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.settings-nav-item + .settings-nav-item,
.settings-custom-skill-block,
.settings-context-block {
  margin-top: 6px;
}
.settings-nav-item:hover {
  color: var(--text);
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.08);
}
.settings-nav-item.active {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.09));
  border-color: rgba(255,255,255,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 22px rgba(0,0,0,0.16);
}
.settings-nav-item:focus-visible,
.context-target-item:focus-visible {
  outline: none;
  border-color: rgba(230,196,135,0.34);
  box-shadow: 0 0 0 2px rgba(230,196,135,0.13);
}
.settings-nav-item .material-symbols-outlined {
  font-size: 18px;
}
.settings-custom-skill-block,
.settings-context-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.settings-custom-skill-nav-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--btn-pill-radius);
  background: transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.settings-custom-skill-nav-row:hover {
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.08);
}
.settings-custom-skill-nav-row:has(#settings-nav-custom-skill.active) {
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.09));
  border-color: rgba(255,255,255,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 22px rgba(0,0,0,0.16);
}
.settings-custom-skill-nav-item {
  flex: 1;
  min-width: 0;
  width: auto;
  border: none;
  background: transparent;
  box-shadow: none;
  padding-right: 0;
}
.settings-custom-skill-nav-item:hover,
.settings-custom-skill-nav-item.active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.settings-custom-skill-new-btn {
  position: static;
  flex-shrink: 0;
  margin-right: 12px;
  min-height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--teal);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s;
}
.settings-custom-skill-new-btn:hover {
  background: transparent;
  color: #9ae8d6;
}
.settings-custom-skill-new-btn:focus-visible {
  outline: 1px solid rgba(124, 215, 193, 0.45);
  outline-offset: 2px;
  box-shadow: none;
}
.settings-detail-panel[hidden] {
  display: none !important;
}
.context-target-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 0;
  margin-top: 0;
  margin-left: 24px;
  padding-left: 10px;
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.24s ease, opacity 0.18s ease, transform 0.18s ease, margin-top 0.18s ease;
}
.settings-custom-skill-block.is-expanded .context-target-list,
.settings-context-block.is-expanded .context-target-list {
  max-height: min(68vh, 760px);
  margin-top: 8px;
  overflow-y: auto;
  padding-right: 4px;
  opacity: 1;
  transform: translateY(0);
}
.context-target-section {
  margin: 12px 10px 6px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(230,225,223,0.48);
}
.context-target-item {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--btn-pill-radius);
  background: transparent;
  color: rgba(230,225,223,0.84);
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.context-target-item:hover {
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.08);
}
.context-target-item.active {
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.085));
  border-color: rgba(255,255,255,0.19);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 6px 18px rgba(0,0,0,0.14);
}
.settings-custom-skill-empty-row {
  padding: 8px 10px;
  color: var(--text3);
  font-size: 12px;
  font-family: var(--font-sans);
}
.settings-inline-btn {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid rgba(230,196,135,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--text2);
  font-family: var(--font-sans);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.settings-inline-btn:hover {
  color: var(--gold2);
  background: rgba(230,196,135,0.1);
  border-color: rgba(230,196,135,0.34);
}
.settings-custom-skill-create-hub {
  min-height: clamp(260px, 48vh, 460px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 24px 0;
}
.settings-custom-skill-create-hub[hidden] {
  display: none !important;
}
.settings-custom-skill-create-btn {
  min-width: 190px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 18px;
  border: 1px solid rgba(230,196,135,0.22);
  border-radius: var(--btn-pill-radius);
  background: rgba(255,255,255,0.055);
  color: var(--text2);
  font-family: var(--font-sans);
  font-size: 14px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.settings-custom-skill-create-btn:hover {
  color: var(--gold2);
  background: rgba(230,196,135,0.1);
  border-color: rgba(230,196,135,0.4);
  transform: translateY(-1px);
}
.settings-custom-skill-create-btn .material-symbols-outlined {
  font-size: 20px;
}
.settings-custom-skill-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-custom-skill-form[hidden] {
  display: none !important;
}
.context-target-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.context-target-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-settings-detail {
  margin-right: var(--settings-close-reserve);
  padding: 34px 16px 26px 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  min-height: 0;
}
.settings-model-hint {
  max-width: 620px;
  margin-bottom: 16px;
  padding: 0;
}
.context-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}
.context-detail-kind {
  color: var(--teal);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.context-detail-title {
  margin-top: 5px;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 720;
  color: var(--gold2);
}
.context-policy-options {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}
.context-policy-row {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.055);
}
.context-policy-row:last-child {
  border-bottom: none;
}
.context-policy-actions {
  display: flex;
  justify-content: flex-end;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.055);
}
.context-policy-reset-btn {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  border: 1px solid rgba(230,196,135,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--text2);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.context-policy-reset-btn:hover {
  color: var(--gold2);
  background: rgba(230,196,135,0.1);
  border-color: rgba(230,196,135,0.34);
}
.context-policy-reset-btn:focus-visible {
  outline: none;
  border-color: rgba(230,196,135,0.4);
  box-shadow: 0 0 0 2px rgba(230,196,135,0.13);
}
.context-policy-label {
  color: var(--text);
  font-size: 13px;
}
.context-policy-meta {
  color: var(--text3);
  font-size: 11px;
  margin-top: 3px;
}
.context-policy-controls {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.context-toggle {
  position: relative;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}
.context-toggle input {
  position: absolute;
  opacity: 0;
  inset: 0;
}
.context-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  transition: background 0.18s ease;
}
.context-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text2);
  transition: transform 0.18s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.context-toggle input:checked + .context-toggle-track {
  background: var(--teal);
}
.context-toggle input:checked + .context-toggle-track::after {
  transform: translateX(20px);
}
.context-toggle input:disabled + .context-toggle-track {
  opacity: 0.62;
}
.context-stepper {
  width: 76px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text);
  padding: 6px 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: center;
  outline: none;
}
.context-stepper-inline {
  width: 64px;
}
.context-stepper:focus {
  border-color: rgba(124,215,193,0.45);
}
/* ── OUTLINE RENAME ── */
.ch-title-input {
  background: transparent;
  border: none; border-bottom: 1px solid var(--gold);
  color: var(--gold); font-size: 13px;
  font-family: var(--font-sans); outline: none;
  width: calc(100% - 28px); padding: 1px 3px;
}

/* ── TOAST ── */
#toast {
  display: none;
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 10px 20px;
  font-size: 13px;
  color: var(--text);
  z-index: 999;
  font-family: var(--font-sans);
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: transform var(--dur-normal) var(--ease-spring);
}
#toast.show {
  display: block;
  transform: translateX(-50%) translateY(0);
  animation: slideInUp var(--dur-normal) var(--ease-spring);
}
#toast.success { border-color: rgba(124,215,193,0.4); color: var(--teal); }
#toast.error { border-color: rgba(201,110,110,0.4); color: var(--red); }

/* ── LAYOUT ── */
#layout {
  display: flex;
  gap: var(--layout-gap);
  height: calc(100vh - 38px - var(--layout-pad-y) * 2 - var(--layout-gap));
  margin: var(--layout-gap) var(--layout-pad-x) var(--layout-pad-y);
  min-height: 0;
}

/* ── LEFT PANEL ── */
#left {
  --left-top-edge-height: 76px;
  --left-bottom-edge-height: 56px;
  width: 260px;
  min-width: 200px;
  flex-shrink: 0;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
#left-top-glass {
  flex-shrink: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 7;
  isolation: isolate;
  background: rgba(14, 12, 10, 0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
#left-tabs {
  display: flex;
  border-bottom: none;
  flex-shrink: 0;
}
#left-tab-label {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text2);
  letter-spacing: 0.12em;
  font-family: var(--font-sans);
  flex-shrink: 0;
}
.ltab {
  flex: 1; padding: 9px 4px;
  text-align: center;
  font-size: 11px;
  color: var(--text3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--dur-normal) var(--ease-out);
  font-family: var(--font-sans);
  letter-spacing: 0.05em;
  position: relative;
}
.ltab .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.ltab::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%;
  width: 0; height: 2px;
  background: var(--gold);
  transition: all var(--dur-normal) var(--ease-spring);
  transform: translateX(-50%);
}
.ltab:hover { color: var(--text2); }
.ltab:hover .material-symbols-outlined {
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.08), 0 0 0 0.5px rgba(255,255,255,0.1);
}
.ltab.active { color: var(--gold); }
.ltab.active::after { width: 60%; }
#left-content {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
#left-content::-webkit-scrollbar { width: 4px; }
#left-content::-webkit-scrollbar-track { background: transparent; }
#left-content::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* 左侧栏底部：文件入口 + 废纸篓（所有标签页可见） */
.left-trash-footer {
  flex-shrink: 0;
  padding: 8px 12px 10px;
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  /* 供 #file-menu 绝对定位上拉 */
  isolation: isolate;
  background: rgba(14, 12, 10, 0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.18);
}
.left-trash-footer::before {
  display: none;
}

.left-footer-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}

.sidebar-file-menu-icon {
  display: block;
  pointer-events: none;
  opacity: 0.88;
  color: currentColor;
}

.tab-section {
  display: none;
  padding: calc(var(--left-top-edge-height) + 10px) 10px calc(var(--left-bottom-edge-height) + 10px);
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
  scroll-padding-block: calc(var(--left-top-edge-height) + 10px) calc(var(--left-bottom-edge-height) + 10px);
}
.tab-section.active {
  display: flex;
}

/* 含底部「新增」按钮区：滚动到底时预留悬浮废纸篓底栏高度，避免按钮被遮挡 */
#tab-materials.tab-section.active,
#tab-world.tab-section.active,
#tab-chars.tab-section.active {
  padding-bottom: calc(var(--left-bottom-edge-height) + 14px);
}

#tab-outline.tab-section.active,
#tab-chapters.tab-section.active {
  padding: 0;
}

.tab-section.active #outline-list,
.tab-section.active #chapters-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* 为卡片 hover 位移、外阴影与圆角留出空间，避免贴边被裁切 */
  padding: calc(var(--left-top-edge-height) + 12px) 6px calc(var(--left-bottom-edge-height) + 8px) 6px;
  box-sizing: border-box;
  scroll-padding-block: calc(var(--left-top-edge-height) + 12px) calc(var(--left-bottom-edge-height) + 8px);
}

.tab-section.active #kb-world-list,
.tab-section.active #kb-chars-list,
.tab-section.active #materials-list {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
  /* 为卡片 hover 位移、外阴影与圆角留出空间，避免贴边被裁切 */
  padding: 2px 6px 8px 6px;
  box-sizing: border-box;
}

.tab-section.active #kb-world-list,
.tab-section.active #kb-chars-list,
.tab-section.active #outline-list,
.tab-section.active #materials-list,
.tab-section.active #chapters-list {
  width: 100%;
  padding-bottom: 8px;
}

/* 仅无底部操作按钮的列表，预留给悬浮废纸篓栏的视觉空间 */
.tab-section.active #outline-list,
.tab-section.active #chapters-list {
  padding-bottom: calc(var(--left-bottom-edge-height) + 8px);
}

/* 世界观 / 人物志：底部操作区 + 左下废纸篓（无方框图标） */
.kb-tab-footer {
  flex-shrink: 0;
  padding-top: 2px;
  margin-top: 0;
  border-top: none;
}
.kb-tab-footer-adds {
  display: flex;
  gap: 6px;
  padding-bottom: 0;
}
.kb-tab-footer-trash {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 6px 0 2px;
  min-height: 40px;
}
.kb-trash-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 36px;
  min-height: 36px;
  padding: 6px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  box-shadow: none;
  transition: color 0.15s, background 0.18s ease, box-shadow 0.18s ease;
}
.kb-trash-btn:hover {
  color: var(--text2);
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.08), 0 0 0 0.5px rgba(255,255,255,0.1);
}
.kb-trash-btn:focus-visible {
  outline: 1px solid rgba(230, 196, 135, 0.45);
  outline-offset: 2px;
}
.kb-trash-btn .kb-trash-icon {
  display: block;
  pointer-events: none;
  opacity: 0.88;
  font-size: 22px;
  line-height: 1;
}

/* 设定废纸篓弹层 */
.kb-trash-modal {
  position: fixed;
  inset: 0;
  z-index: 850;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.kb-trash-modal.visible {
  display: flex;
}
.kb-trash-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(8px) saturate(125%);
  -webkit-backdrop-filter: blur(8px) saturate(125%);
}
.kb-trash-modal-panel {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: min(70vh, 420px);
  display: flex;
  flex-direction: column;
  background: var(--popover-glass-bg);
  border: 1px solid var(--popover-glass-border);
  border-radius: var(--popover-glass-radius);
  box-shadow: var(--popover-glass-shadow);
  backdrop-filter: var(--popover-glass-blur);
  -webkit-backdrop-filter: var(--popover-glass-blur);
  overflow: hidden;
}
.kb-trash-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: none;
}
.kb-trash-modal-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.kb-trash-modal-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 17px;
  cursor: pointer;
  padding: 0;
  border-radius: var(--btn-circle-radius);
  line-height: 1;
}
.kb-trash-modal-close:hover {
  color: var(--gold);
}
.kb-trash-modal-body {
  flex: 1;
  min-height: 100px;
  overflow-y: auto;
  padding: 10px 14px 8px;
}
.kb-trash-modal-footer {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.local-only-storage-hint {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text3);
  font-family: var(--font-sans);
}

/* 顶栏小说名编辑弹层（与 kb-trash / 顶栏金色衬线风格一致） */
.novel-title-modal {
  position: fixed;
  inset: 0;
  z-index: 870;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.novel-title-modal.visible {
  display: flex;
}
.novel-title-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.novel-title-modal-panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.novel-title-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.novel-title-modal-head h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.novel-title-modal-close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 17px;
  cursor: pointer;
  padding: 0;
  border-radius: var(--btn-circle-radius);
  line-height: 1;
}
.novel-title-modal-close:hover {
  color: var(--gold);
}
.novel-title-modal-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.novel-title-modal-input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(230, 196, 135, 0.16);
  background: rgba(10, 10, 10, 0.5);
  color: var(--text);
  padding: 12px 14px;
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.06em;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.novel-title-modal-input:focus {
  border-color: rgba(230, 196, 135, 0.32);
  box-shadow: 0 0 0 3px rgba(230, 196, 135, 0.08);
  background: rgba(16, 16, 15, 0.65);
}
.novel-title-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.novel-title-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.novel-title-modal-btn--ghost {
  border-color: rgba(230, 196, 135, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text2);
}
.novel-title-modal-btn--ghost:hover {
  color: var(--gold);
  background: rgba(230, 196, 135, 0.08);
  border-color: rgba(230, 196, 135, 0.24);
}
.novel-title-modal-btn--primary {
  border-color: rgba(230, 196, 135, 0.28);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
  color: #15120f;
  box-shadow: 0 8px 22px rgba(230, 196, 135, 0.14);
}
.novel-title-modal-btn--primary:hover {
  transform: translateY(-1px);
}

.kb-trash-empty {
  text-align: center;
  color: var(--text3);
  font-size: 13px;
  padding: 20px 8px;
  margin: 0;
}
.kb-trash-section {
  margin-bottom: 16px;
}
.kb-trash-section:last-child {
  margin-bottom: 0;
}
.kb-trash-section-title {
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  font-weight: 500;
  font-family: var(--font-sans);
}
.kb-trash-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(230, 196, 135, 0.12);
  border-radius: var(--radius);
}
.kb-trash-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kb-trash-title {
  font-size: 13px;
  color: var(--gold);
  font-weight: 500;
}
.kb-trash-meta {
  font-size: 11px;
  color: var(--text3);
}
.kb-trash-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.kb-trash-restore,
.kb-trash-purge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--btn-pill-radius);
  cursor: pointer;
  font-family: var(--font-sans);
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2);
}
.kb-trash-restore:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.kb-trash-purge {
  border-color: rgba(201, 110, 110, 0.35);
  color: var(--red);
}
.kb-trash-purge:hover {
  background: rgba(201, 110, 110, 0.08);
}

.section-label {
  font-size: 10px; color: var(--text3);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 4px 6px;
  font-family: var(--font-sans);
}
.kb-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 100%),
    rgba(33, 31, 30, 0.46);
  border: 1px solid rgba(230, 196, 135, 0.12);
  border-radius: var(--content-card-radius);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              background var(--dur-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 8px 22px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.06);
}
/* 卡片涟漪效果 */
.kb-card::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: radial-gradient(circle, rgba(230,196,135,0.2) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.kb-card:active::after {
  animation: ripple 400ms var(--ease-out);
}
.kb-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 100%),
    rgba(43, 42, 40, 0.54);
  transform: perspective(900px) translateY(-4px) scale(1.013) rotateX(var(--tilt-x, 2.4deg)) rotateY(var(--tilt-y, -2deg));
  box-shadow: 0 18px 34px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10);
}
.kb-card:active {
  transform: perspective(900px) translateY(-1px) scale(0.992) rotateX(0.8deg) rotateY(-0.6deg);
}
.foreshadow-card {
  margin-top: 8px;
  box-shadow: inset 3px 0 0 rgba(201, 110, 110, 0.42);
}

/* 智能追踪入口卡：对齐落地页 .landing-card 布局 */
.kb-card.tracking-entry-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 14px 14px 12px;
  cursor: pointer;
}
.kb-card.tracking-entry-card.setting-tracking-card,
.kb-card.tracking-entry-card.character-tracking-card,
.kb-card.tracking-entry-card.foreshadow-card,
.kb-card.tracking-entry-card.knowledge-graph-card {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.kb-card.tracking-entry-card .tracking-entry-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
}
.kb-card.tracking-entry-card .tracking-entry-card__icon {
  display: block;
  color: var(--landing-primary, #d4af37);
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.kb-card.tracking-entry-card .tracking-entry-card__title {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--landing-foreground, #f5f5f5);
}
.kb-card.tracking-entry-card .tracking-entry-card__desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.55;
  color: var(--landing-muted-foreground, #a1a1aa);
}
.kb-card.tracking-entry-card:hover .tracking-entry-card__title,
.kb-card.tracking-entry-card:focus-within .tracking-entry-card__title {
  padding-right: 0;
  color: var(--landing-foreground, #f5f5f5);
}
.kb-card.tracking-entry-card.active-card .tracking-entry-card__title {
  color: var(--text);
}
/* 世界观、人物志、大纲中选中卡片：内阴影描边，避免 .kb-card 的 overflow:hidden 裁切外扩 ring */
.kb-card.active-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.035) 100%),
    rgba(12, 12, 12, 0.94);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 34px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -18px 34px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.055);
}
.kb-card.active-card .kb-card-title {
  color: var(--text);
}
/* 卡片点击效果：轻微缩放 */
.kb-card:active {
  transform: perspective(900px) translateY(-1px) scale(0.992) rotateX(0.8deg) rotateY(-0.6deg);
  transition: transform 80ms var(--ease-out);
}
.card-history-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  min-width: 22px;
  min-height: 22px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text3);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: color 0.15s, opacity 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.kb-card:hover .card-history-btn,
.kb-card:focus-within .card-history-btn,
.ch-item:hover .card-history-btn,
.ch-item:focus-within .card-history-btn {
  opacity: 1;
  pointer-events: auto;
}
.card-history-btn:hover {
  color: var(--gold);
  background: transparent;
}
.card-history-btn:focus-visible {
  outline: 1px solid rgba(230, 196, 135, 0.45);
  outline-offset: 2px;
}
.card-history-btn .card-history-icon {
  display: block;
  pointer-events: none;
}
.card-history-popover {
  position: fixed;
  z-index: 760;
  min-width: 260px;
  max-width: min(440px, calc(100vw - 24px));
  padding: 14px;
  background: var(--popover-glass-bg);
  border: 1px solid var(--popover-glass-border);
  border-radius: var(--popover-glass-radius);
  box-shadow: var(--popover-glass-shadow);
  backdrop-filter: var(--popover-glass-blur);
  -webkit-backdrop-filter: var(--popover-glass-blur);
}
.card-history-popover-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text2);
  line-height: 1.5;
  padding: 4px 8px 10px;
  border-bottom: none;
  margin-bottom: 8px;
  font-family: var(--font-sans);
}
.card-history-popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 8px;
  border-radius: 14px;
}
.card-history-popover-row:hover {
  background: rgba(230, 196, 135, 0.08);
}
.card-history-popover-time {
  font-size: 17px;
  font-weight: 600;
  color: #e6ddd1;
  font-family: var(--font-sans);
}
.card-history-popover-restore {
  flex-shrink: 0;
  min-width: 76px;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  background: transparent;
  border: 1px solid rgba(124, 215, 193, 0.45);
  border-radius: var(--btn-pill-radius);
  padding: 9px 14px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.card-history-popover-restore:hover {
  background: rgba(124, 215, 193, 0.12);
  border-color: rgba(124, 215, 193, 0.6);
  transform: translateY(-1px);
}
.card-history-popover-footer {
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.app-popup-root {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}
.app-popup {
  position: fixed;
  min-width: 260px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 16px;
  background: var(--popover-glass-bg);
  border: 1px solid var(--popover-glass-border);
  border-radius: var(--popover-glass-radius);
  box-shadow: var(--popover-glass-shadow);
  backdrop-filter: var(--popover-glass-blur);
  -webkit-backdrop-filter: var(--popover-glass-blur);
  pointer-events: auto;
}
.app-popup[hidden] {
  display: none !important;
}
.app-popup-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 8px;
}
.app-popup-message {
  display: grid;
  gap: 8px;
}
.app-popup-message p {
  font-size: 15px;
  line-height: 1.7;
  color: #e6ddd1;
}
.app-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.app-popup-actions--single {
  justify-content: flex-end;
}
.app-popup-btn {
  min-width: 76px;
  padding: 9px 14px;
  border-radius: var(--btn-pill-radius);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.app-popup-btn:hover {
  transform: translateY(-1px);
}
.app-popup-btn--ghost {
  color: var(--text2);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(230, 196, 135, 0.18);
}
.app-popup-btn--ghost:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(230, 196, 135, 0.3);
}
.app-popup-btn--primary {
  color: var(--teal);
  background: transparent;
  border: 1px solid rgba(124, 215, 193, 0.45);
}
.app-popup-btn--primary:hover {
  background: rgba(124, 215, 193, 0.12);
  border-color: rgba(124, 215, 193, 0.6);
}
.app-popup-btn--danger {
  color: var(--red);
  background: transparent;
  border: 1px solid rgba(255, 180, 171, 0.38);
}
.app-popup-btn--danger:hover {
  background: rgba(255, 180, 171, 0.1);
  border-color: rgba(255, 180, 171, 0.58);
}
.tracking-rescan-picker {
  position: fixed;
  inset: 0;
  z-index: 1350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 8, 11, 0.64);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.tracking-rescan-picker[hidden] {
  display: none !important;
}
.tracking-rescan-picker__panel {
  width: min(720px, calc(100vw - 32px));
  max-height: min(82vh, 840px);
  background: rgba(20, 22, 25, 0.97);
  border: 1px solid rgba(230, 196, 135, 0.28);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tracking-rescan-picker__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(230, 196, 135, 0.16);
}
.tracking-rescan-picker__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--editor-clean-gold-strong);
}
.tracking-rescan-picker__hint {
  margin-top: 5px;
  color: var(--editor-clean-muted);
  font-size: 13px;
  line-height: 1.5;
}
.tracking-rescan-picker__close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(230, 196, 135, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: #efe6da;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.tracking-rescan-picker__close:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(230, 196, 135, 0.34);
}
.tracking-rescan-picker__bulk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 10px;
}
.tracking-rescan-picker__bulk-btn {
  min-width: 92px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(230, 196, 135, 0.28);
  border-radius: var(--btn-pill-radius);
  background: rgba(255, 255, 255, 0.04);
  color: #f3e7d6;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tracking-rescan-picker__bulk-btn:hover {
  background: rgba(230, 196, 135, 0.1);
  border-color: rgba(230, 196, 135, 0.46);
}
.tracking-rescan-picker__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding: 0 18px 14px;
}
.tracking-rescan-picker__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}
.tracking-rescan-picker__chapter {
  min-width: 0;
}
.tracking-rescan-picker__chapter-title {
  color: #efe6da;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  word-break: break-word;
}
.tracking-rescan-picker__chapter-meta {
  margin-top: 4px;
  color: var(--editor-clean-muted);
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}
.tracking-rescan-picker__segment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(124, 215, 193, 0.24);
  border-radius: var(--btn-pill-radius);
  background: rgba(0, 0, 0, 0.22);
}
.tracking-rescan-picker__choice {
  min-width: 62px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--btn-pill-radius);
  background: transparent;
  color: var(--editor-clean-muted);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.tracking-rescan-picker__choice.is-selected {
  color: #07110f;
  background: #7cd7c1;
}
.tracking-rescan-picker__choice:not(.is-selected):hover {
  color: #e9fff8;
  background: rgba(124, 215, 193, 0.12);
}
.tracking-rescan-picker__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(230, 196, 135, 0.16);
}
.tracking-rescan-picker__btn {
  min-width: 92px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--btn-pill-radius);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.tracking-rescan-picker__btn--ghost {
  color: var(--text2);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(230, 196, 135, 0.22);
}
.tracking-rescan-picker__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(230, 196, 135, 0.4);
}
.tracking-rescan-picker__btn--primary {
  color: var(--teal);
  background: transparent;
  border: 1px solid rgba(124, 215, 193, 0.5);
}
.tracking-rescan-picker__btn--primary:hover {
  background: rgba(124, 215, 193, 0.12);
  border-color: rgba(124, 215, 193, 0.68);
}
.tracking-status-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(7, 8, 11, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tracking-status-modal[hidden] {
  display: none !important;
}
.tracking-status-modal__panel {
  width: min(760px, calc(100vw - 32px));
  max-height: min(82vh, 860px);
  background: linear-gradient(180deg, rgba(23, 26, 32, 0.96), rgba(13, 15, 19, 0.96));
  border: 1px solid rgba(230, 196, 135, 0.26);
  border-radius: 14px;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
}
.tracking-status-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(230, 196, 135, 0.18);
}
.tracking-status-modal__title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--editor-clean-gold-strong);
}
.tracking-status-modal__close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #efe6da;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.tracking-status-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
}
.tracking-status-modal__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px 10px;
}
.tracking-status-modal__group {
  margin: 10px 0 8px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: #f1dcba;
}
.tracking-status-modal__record {
  margin: 0 0 10px;
  padding: 8px 10px 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.tracking-status-modal__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.tracking-status-modal__chapter {
  color: #7cd7c1;
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: 600;
}
.tracking-status-modal__position {
  color: #8fd9f8;
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 600;
}
.tracking-status-modal__content {
  color: #e5ded4;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}
.tracking-status-modal__empty {
  color: var(--editor-clean-muted);
  font-size: 14px;
  padding: 10px 2px 2px;
}
.tracking-status-modal__footer {
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(230, 196, 135, 0.14);
  display: flex;
  justify-content: flex-end;
}
.tracking-status-modal__ok {
  min-width: 84px;
  height: 32px;
  border-radius: var(--btn-pill-radius);
  border: 1px solid rgba(230, 196, 135, 0.35);
  background: rgba(255, 255, 255, 0.05);
  color: #f4e4cd;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tracking-status-modal__ok:hover {
  border-color: rgba(230, 196, 135, 0.58);
  background: rgba(255, 255, 255, 0.1);
}
.ch-item .card-history-btn {
  top: 8px;
  right: 8px;
}
.ch-item:hover > div:first-child,
.ch-item:focus-within > div:first-child {
  padding-right: 36px;
}
.kb-card-title {
  font-size: 13px; font-weight: 500; color: var(--gold);
  margin-bottom: 3px;
}
.kb-card:hover .kb-card-title,
.kb-card:focus-within .kb-card-title {
  padding-right: 32px;
}
.kb-card-sub { font-size: 11px; color: var(--text3); line-height: 1.5; }
.kb-tag {
  display: inline-block;
  padding: 1px 7px; font-size: 10px;
  border-radius: 3px; margin-top: 6px; margin-right: 4px;
  font-family: var(--font-sans);
}
.tag-world { background: rgba(124,215,193,0.12); color: var(--teal); }
.tag-char { background: rgba(230,196,135,0.12); color: var(--gold); }
.tag-plot { background: rgba(110,158,201,0.12); color: var(--blue); }
.tag-hidden { background: rgba(201,110,110,0.12); color: var(--red); }
.add-btn {
  width: 100%; padding: 8px;
  background: transparent;
  border: 1px dashed var(--border2);
  border-radius: var(--btn-pill-radius);
  color: var(--text3); font-size: 12px;
  cursor: pointer; font-family: var(--font-sans);
  transition: all 0.2s; margin-top: 6px;
}
.add-btn:hover { color: var(--text2); border-color: var(--gold); }
.kb-edit-icon {
  flex-shrink: 0;
  background: transparent; border: none;
  color: var(--text3); font-size: 13px;
  cursor: pointer; padding: 0 2px;
  line-height: 1; opacity: 0;
  transition: opacity 0.15s;
}
.kb-card:hover .kb-edit-icon { opacity: 1; }
.kb-hidden-line {
  margin-top: 5px; font-size: 10px;
  color: var(--red); line-height: 1.4;
}

/* 伏笔追踪 */
.fs-panel {
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px 0 40px;
  color: var(--text);
  font-family: var(--font-sans);
}
.fs-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  padding: 6px 0 16px;
  border-bottom: 1px solid var(--border);
}
.fs-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--teal);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.fs-hero h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--gold2);
  margin: 0;
}
.fs-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  font-size: 12px;
  color: var(--text3);
}
.fs-stats .fs-picker-button {
  width: auto;
  flex: 0 0 auto;
  min-width: 108px;
}
.fs-stat-btn,
.fs-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--border2);
  border-radius: var(--btn-pill-radius);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}
.fs-stat-btn {
  gap: 6px;
  color: var(--text3);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
}
.fs-stat-btn:hover {
  color: var(--gold);
  border-color: rgba(230, 196, 135, 0.35);
}
.fs-stat-btn.active {
  color: var(--teal);
  border-color: rgba(124, 215, 193, 0.35);
  background: rgba(124, 215, 193, 0.08);
}
.fs-stat-btn strong {
  margin-left: 5px;
  color: var(--gold);
}
.fs-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 0;
}
.fs-toolbar-main,
.fs-filters,
.fs-card-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fs-primary-btn,
.fs-ghost-btn,
.fs-danger-btn,
.fs-icon-btn {
  min-height: 30px;
  border-radius: var(--btn-pill-radius);
  border: 1px solid var(--border2);
  padding: 5px 10px;
  color: var(--text2);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
}
.fs-primary-btn {
  color: #16120d;
  border-color: rgba(230, 196, 135, 0.75);
  background: var(--gold);
}
.fs-ghost-btn:hover {
  color: var(--gold);
  border-color: rgba(230, 196, 135, 0.35);
}
.fs-danger-btn {
  color: var(--red);
  background: rgba(255, 180, 171, 0.06);
  border-color: rgba(255, 180, 171, 0.25);
}
.fs-primary-btn:disabled,
.fs-ghost-btn:disabled,
.fs-danger-btn:disabled {
  opacity: 0.58;
  cursor: wait;
}
.fs-scan-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text3);
  font-size: 12px;
  line-height: 1.5;
}
.fs-scan-status strong {
  color: var(--gold2);
  font-weight: 600;
}
.fs-select,
.fs-picker-button,
.fs-field {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12px;
  outline: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.fs-select:focus,
.fs-picker-button:focus,
.fs-field:focus {
  border-color: var(--border2);
  box-shadow: none;
}
.fs-select,
.fs-picker-button {
  min-height: 30px;
  padding: 5px 8px;
}
.fs-picker-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  cursor: pointer;
  text-align: left;
}
.fs-picker-button:hover,
.fs-picker-button[aria-expanded="true"] {
  border-color: rgba(230, 196, 135, 0.42);
  background: rgba(230, 196, 135, 0.07);
}
.fs-picker-button-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fs-picker-button-icon {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.72;
}
.fs-picker-popover {
  position: fixed;
  z-index: 1350;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--popover-glass-bg);
  border: 1px solid var(--popover-glass-border);
  border-radius: var(--popover-glass-radius);
  box-shadow: var(--popover-glass-shadow);
  backdrop-filter: var(--popover-glass-blur);
  -webkit-backdrop-filter: var(--popover-glass-blur);
  transform-origin: top left;
  animation: scaleIn var(--dur-fast) var(--ease-spring);
}
.fs-picker-option {
  display: block;
  width: 100%;
  min-height: 30px;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--btn-pill-radius);
  background: transparent;
  color: var(--text2);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--dur-fast) var(--ease-out);
}
.fs-picker-option:hover,
.fs-picker-option:focus,
.fs-picker-option.is-focused {
  outline: none;
  background: rgba(230, 196, 135, 0.10);
  color: var(--gold);
  transform: translateX(4px);
}
.fs-picker-option.is-active {
  color: var(--teal);
  background: rgba(124, 215, 193, 0.08);
}
.fs-board {
  display: block;
}
.fs-card-list {
  display: grid;
  gap: 12px;
}
.fs-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(20, 19, 18, 0.58);
  padding: 14px;
  box-shadow: inset 3px 0 0 rgba(110, 158, 201, 0.35);
}
.fs-card {
  cursor: pointer;
  padding-bottom: 40px;
}
.fs-card.is-expanded {
  cursor: default;
  padding-right: 46px;
  padding-bottom: 40px;
}
.fs-card-summary {
  min-height: 36px;
  display: flex;
  align-items: center;
}
.fs-card-preview {
  min-width: 0;
  color: var(--gold2);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fs-card.importance-high {
  box-shadow: inset 3px 0 0 rgba(255, 180, 171, 0.55);
}
.fs-card.status-paid_off {
  box-shadow: inset 3px 0 0 rgba(124, 215, 193, 0.55);
}
.fs-card-head,
.fs-card-badges {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.fs-card-head h3 {
  font-size: 15px;
  color: var(--gold2);
  margin: 0;
}
.fs-badge {
  min-height: 22px;
  font-size: 11px;
  color: var(--text3);
}
.fs-badge.importance {
  color: var(--gold);
}
.fs-badge.low {
  color: var(--red);
  border-color: rgba(255, 180, 171, 0.28);
  background: rgba(255, 180, 171, 0.06);
}
.fs-field {
  width: 100%;
  resize: vertical;
  padding: 8px;
  line-height: 1.55;
  margin-top: 8px;
}
.fs-card-stack {
  display: grid;
  gap: 16px;
}
.fs-card-field,
.fs-card-controls label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--text3);
  font-size: 11px;
}
.fs-card-top-field {
  padding-right: 0;
}
.fs-card-title-area,
.fs-card-answer-area,
.fs-evidence-input {
  width: 100%;
  resize: none;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid rgba(154, 146, 134, 0.45);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  padding: 3px 0 7px;
  outline: none;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.fs-card-title-area:focus,
.fs-card-answer-area:focus,
.fs-evidence-input:focus {
  border-bottom-color: rgba(230, 196, 135, 0.78);
}
.fs-card-title-area {
  color: var(--gold2);
  font-family: var(--font-serif);
  font-size: 17px;
}
.fs-card-title-area::placeholder,
.fs-card-answer-area::placeholder,
.fs-evidence-input::placeholder {
  color: rgba(154, 146, 134, 0.72);
}
.fs-evidence-section {
  gap: 10px;
}
.fs-evidence-input {
  min-height: 34px;
}
.fs-card-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  overflow: visible;
  padding-top: 4px;
}
.fs-card-controls .fs-select,
.fs-card-controls .fs-picker-button,
.fs-card-controls .fs-field {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.fs-card-delete {
  position: absolute;
  bottom: 10px;
  right: 10px;
  top: auto;
  width: auto;
  min-height: 26px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 180, 171, 0.25);
  border-radius: var(--btn-pill-radius);
  color: var(--red);
  background: rgba(255, 180, 171, 0.06);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}
.fs-card-delete:hover {
  border-color: rgba(255, 180, 171, 0.45);
  background: rgba(255, 180, 171, 0.12);
}
.fs-card-collapse {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(230, 196, 135, 0.25);
  border-radius: var(--btn-circle-radius);
  color: var(--text2);
  background: rgba(230, 196, 135, 0.06);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.fs-card-collapse:hover {
  border-color: rgba(230, 196, 135, 0.45);
  color: var(--gold2);
  background: rgba(230, 196, 135, 0.12);
}
.fs-evidence-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--text3);
  font-size: 12px;
}
.fs-evidence-list {
  display: grid;
  gap: 6px;
}
.fs-evidence {
  display: grid;
  grid-template-columns: auto minmax(90px, 150px) 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 12px;
}
.fs-evidence-type {
  color: var(--teal);
}
.fs-evidence-chapter,
.fs-muted {
  color: var(--text3);
}
.fs-icon-btn {
  width: 24px;
  min-height: 24px;
  padding: 0;
  color: var(--red);
}
.fs-empty {
  padding: 30px 10px;
  text-align: center;
  color: var(--text3);
  border: 1px dashed var(--border2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.fs-loading {
  display: grid;
  gap: 8px;
}

/* 智能设定追踪 */
.setting-tracking-card {
  box-shadow: inset 3px 0 0 rgba(124, 215, 193, 0.38);
}
.knowledge-graph-card {
  margin-top: 8px;
  box-shadow: inset 3px 0 0 rgba(98, 196, 170, 0.44);
}
.character-tracking-card {
  box-shadow: inset 3px 0 0 rgba(110, 158, 201, 0.42);
}
.kgv-panel {
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 0 40px;
  color: var(--text);
  font-family: var(--font-sans);
}
.kgv-toolbar,
.kgv-toolbar-main,
.kgv-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kgv-toolbar {
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.kgv-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.kgv-toolbar-meta {
  color: var(--text3);
  font-size: 12px;
}
.kgv-scan-status {
  width: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text3);
}
.kgv-scan-status strong {
  color: var(--text2);
  font-weight: 500;
}
.kgv-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.kgv-graph-wrap {
  height: clamp(420px, 62vh, 620px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  position: relative;
  overflow: hidden;
}
.kgv-graph-controls {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: none;
}
.kgv-control-btn {
  pointer-events: auto;
}
.kgv-control-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.kgv-search {
  position: static;
  pointer-events: auto;
}
.kgv-search-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(280px, calc(100vw - 48px));
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(16, 18, 25, 0.96);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  display: none;
  gap: 8px;
  z-index: 4;
}
.kgv-search.is-open .kgv-search-popover {
  display: grid;
}
.kgv-search-input {
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 6px 9px;
  color: var(--text2);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-sans);
  font-size: 12px;
  outline: none;
}
.kgv-search-input:focus {
  border-color: rgba(230, 196, 135, 0.58);
  box-shadow: 0 0 0 2px rgba(230, 196, 135, 0.1);
}
.kgv-search-results {
  display: grid;
  gap: 6px;
  max-height: 230px;
  overflow: auto;
}
.kgv-search-result {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 8px;
  color: var(--text2);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.kgv-search-result:hover,
.kgv-search-result:focus {
  color: var(--gold);
  border-color: rgba(230, 196, 135, 0.28);
  background: rgba(230, 196, 135, 0.08);
  outline: none;
}
.kgv-search-result-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.kgv-search-result-meta,
.kgv-search-empty {
  color: var(--text3);
  font-size: 11px;
}
.kgv-search-empty {
  padding: 8px;
}
.kgv-graph-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  cursor: grab;
}
.kgv-graph-stage:active {
  cursor: grabbing;
}
.kgv-graph-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.kgv-vis-host {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: radial-gradient(circle at 50% 45%, rgba(22, 26, 36, 0.9), rgba(10, 12, 18, 0.95));
  transition: filter 0.2s ease;
}
.kgv-vis-host.is-node-dragging {
  filter: saturate(1.16) brightness(1.04);
}
.kgv-vis-host canvas {
  outline: none;
}
.kgv-render-tip {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: 13px;
}
.kgv-edge line {
  stroke: rgba(168, 210, 228, 0.38);
  stroke-width: 1.4;
}
.kgv-node circle {
  fill: rgba(74, 154, 133, 0.4);
  stroke: rgba(150, 238, 210, 0.64);
  stroke-width: 1.3;
}
.kgv-node text {
  fill: #d8fff1;
  font-size: 11px;
  pointer-events: none;
}
.kgv-node.is-selected circle {
  fill: rgba(255, 198, 126, 0.5);
  stroke: rgba(255, 224, 172, 0.95);
  stroke-width: 1.8;
}
.kgv-empty-tip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: 13px;
}
.kgv-context-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
  gap: 12px;
  height: clamp(380px, 48vh, 560px);
  min-height: 0;
  align-items: stretch;
}
.kgv-detail {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(230, 196, 135, 0.42) rgba(255, 255, 255, 0.06);
}
.kgv-muted {
  color: var(--text3);
  font-size: 12px;
}
.kgv-detail-head {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}
.kgv-detail-head strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text2);
}
.kgv-detail-type-dot {
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 50%;
  flex: 0 0 9px;
}
.kgv-detail-head span {
  color: var(--text3);
  font-size: 12px;
}
.kgv-detail-list {
  display: grid;
  gap: 8px;
}
.kgv-detail-row {
  display: grid;
  gap: 2px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.kgv-smart-card-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.016)),
    rgba(255, 255, 255, 0.025);
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(230, 196, 135, 0.42) rgba(255, 255, 255, 0.06);
}
.kgv-smart-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 4px;
}
.kgv-smart-card + .kgv-smart-card {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
}
.kgv-smart-card-head {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.kgv-smart-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.kgv-smart-card-head strong {
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.kgv-original-btn {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid rgba(230, 196, 135, 0.34);
  border-radius: 999px;
  background: rgba(230, 196, 135, 0.08);
  color: var(--gold);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 0 12px;
}
.kgv-original-btn:hover {
  border-color: rgba(230, 196, 135, 0.58);
  background: rgba(230, 196, 135, 0.13);
}
.kgv-smart-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(124, 215, 193, 0.28);
  border-radius: 999px;
  background: rgba(124, 215, 193, 0.08);
  color: var(--teal);
  font-size: 13px;
  line-height: 1.45;
  padding: 4px 11px;
  overflow-wrap: anywhere;
}
.kgv-smart-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.kgv-smart-section > span {
  color: var(--text3);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.kgv-smart-section > p {
  margin: 0;
  color: var(--text2);
  font-size: 14px;
  line-height: 1.72;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.kgv-smart-timeline {
  display: grid;
  gap: 8px;
}
.kgv-smart-timeline-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  padding: 9px 10px;
}
.kgv-smart-timeline-item span {
  color: var(--text3);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.kgv-smart-timeline-item p {
  margin: 0;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.kgv-smart-empty,
.kgv-smart-muted {
  color: var(--text3);
  font-size: 13px;
  line-height: 1.6;
}
.kgv-smart-empty {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
.kgv-original-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.kgv-original-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 8, 11, 0.64);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.kgv-original-modal__panel {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  max-height: min(82vh, 820px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(230, 196, 135, 0.26);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(23, 26, 32, 0.97), rgba(13, 15, 19, 0.97));
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.kgv-original-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(230, 196, 135, 0.18);
}
.kgv-original-modal__header div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.kgv-original-modal__header strong {
  color: var(--gold2);
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.kgv-original-modal__header span {
  color: var(--text3);
  font-size: 12px;
}
.kgv-original-modal__close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.kgv-original-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
}
.kgv-original-modal__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 14px 16px;
}
.kgv-original-modal__content section {
  display: grid;
  gap: 8px;
}
.kgv-original-modal__content span {
  color: var(--text3);
  font-size: 13px;
  font-weight: 600;
}
.kgv-original-modal__content p {
  margin: 0;
  color: var(--text2);
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.kgv-original-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(230, 196, 135, 0.14);
}
.kgv-original-modal__ghost,
.kgv-original-modal__primary {
  min-height: 32px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 0 14px;
}
.kgv-original-modal__ghost {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text2);
}
.kgv-original-modal__primary {
  border: 1px solid rgba(230, 196, 135, 0.42);
  background: rgba(230, 196, 135, 0.13);
  color: var(--gold);
}
@media (max-width: 1100px) {
  .kgv-board,
  .kgv-context-grid {
    grid-template-columns: 1fr;
  }
  .kgv-context-grid {
    height: auto;
  }
  .kgv-detail {
    min-height: 240px;
    max-height: 400px;
  }
  .kgv-smart-card-panel {
    min-height: 280px;
    max-height: 520px;
  }
}
.st-panel {
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px 0 40px;
  color: var(--text);
  font-family: var(--font-sans);
}
.st-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  padding: 6px 0 16px;
  border-bottom: 1px solid var(--border);
}
.st-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--teal);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.st-hero h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--gold2);
  margin: 0;
}
.st-stats,
.st-toolbar-main,
.st-candidate-actions,
.st-card-badges,
.st-detail-header,
.st-evidence-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.st-stats {
  justify-content: flex-end;
  font-size: 12px;
  color: var(--text3);
}
.st-stat-btn,
.st-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--border2);
  border-radius: var(--btn-pill-radius);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}
.st-stat-btn {
  gap: 6px;
  color: var(--text3);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
}
.st-stat-btn:hover {
  color: var(--gold);
  border-color: rgba(230, 196, 135, 0.35);
}
.st-stat-btn.active {
  color: var(--teal);
  border-color: rgba(124, 215, 193, 0.35);
  background: rgba(124, 215, 193, 0.08);
}
.st-stat-btn strong {
  margin-left: 5px;
  color: var(--gold);
}
.st-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 0;
}
.st-scan-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text3);
  font-size: 12px;
  line-height: 1.5;
}
.st-scan-status strong {
  color: var(--gold2);
  font-weight: 600;
}
.tracking-scan-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  font-size: 12px;
  line-height: 1.5;
}
.tracking-scan-status strong {
  color: var(--text2);
  font-weight: 600;
}
.tracking-scan-status span {
  color: var(--text3);
}
.tracking-scan-status[data-scan-state="pending"] strong {
  color: var(--gold2);
}
.tracking-scan-status[data-scan-state="scanning"] strong,
.tracking-scan-status[data-scan-state="current"] strong {
  color: var(--teal);
}
.tracking-scan-status[data-scan-state="paused"] strong {
  color: var(--text2);
}
.tracking-scan-status[data-scan-state="error"] strong {
  color: var(--red);
}
.st-scan-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.st-primary-btn,
.st-ghost-btn,
.st-danger-btn {
  min-height: 30px;
  border-radius: var(--btn-pill-radius);
  border: 1px solid var(--border2);
  padding: 5px 10px;
  color: var(--text2);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
}
.st-primary-btn {
  color: #16120d;
  border-color: rgba(230, 196, 135, 0.75);
  background: var(--gold);
}
.st-ghost-btn:hover {
  color: var(--gold);
  border-color: rgba(230, 196, 135, 0.35);
}
.st-danger-btn {
  color: var(--red);
  background: rgba(255, 180, 171, 0.06);
  border-color: rgba(255, 180, 171, 0.25);
}
.st-select {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 12px;
}
.st-card-list,
.st-candidate-list,
.st-card-stack,
.st-evidence-list {
  display: grid;
  gap: 12px;
}
.st-card,
.st-candidate {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--content-card-radius);
  background: rgba(20, 19, 18, 0.58);
  padding: 14px;
  box-shadow: inset 3px 0 0 rgba(124, 215, 193, 0.42);
}
.st-card {
  cursor: pointer;
  padding-bottom: 40px;
}
.st-card.is-expanded {
  cursor: default;
  padding-right: 46px;
  padding-bottom: 40px;
}
.st-candidate.relation-status_change {
  box-shadow: inset 3px 0 0 rgba(230, 196, 135, 0.65);
}
.st-candidate.relation-conflict {
  box-shadow: inset 3px 0 0 rgba(255, 180, 171, 0.62);
}
.st-card-summary {
  min-height: 36px;
  display: grid;
  gap: 6px;
}
.st-card-preview {
  min-width: 0;
  color: var(--gold2);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.st-card-status,
.st-card-update,
.st-candidate-status {
  color: var(--teal);
  font-size: 12px;
  line-height: 1.5;
}
.st-card-update {
  color: var(--gold);
}
.st-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.st-card-head h3 {
  font-size: 15px;
  color: var(--gold2);
  margin: 0;
}
.st-badge {
  min-height: 22px;
  font-size: 11px;
  color: var(--text3);
}
.st-card-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--text3);
  font-size: 11px;
}
.st-detail-header,
.st-evidence-header {
  justify-content: space-between;
  color: var(--text3);
  font-size: 12px;
}
.st-linked-section {
  padding: 10px 0 2px;
}
.st-linked-list,
.st-linked-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.st-linked-actions .fs-picker-button {
  flex: 1;
  min-width: 160px;
}
.st-linked-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid rgba(124, 215, 193, 0.28);
  border-radius: 4px;
  background: rgba(124, 215, 193, 0.08);
  color: var(--text2);
  font-size: 12px;
  line-height: 1.4;
}
.st-linked-chip button {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: var(--btn-circle-radius);
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  line-height: 1;
}
.st-linked-chip button:hover {
  color: var(--red);
  background: rgba(255, 180, 171, 0.08);
}
.st-card-title-area,
.st-status-area,
.st-detail-area {
  width: 100%;
  resize: none;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid rgba(154, 146, 134, 0.45);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  padding: 3px 0 7px;
  outline: none;
}
.st-card-title-area:focus,
.st-status-area:focus,
.st-detail-area:focus {
  border-bottom-color: rgba(230, 196, 135, 0.78);
}
.st-card-title-area {
  color: var(--gold2);
  font-family: var(--font-serif);
  font-size: 17px;
}
.st-card-delete {
  position: absolute;
  bottom: 10px;
  right: 10px;
  top: auto;
  width: auto;
  min-height: 26px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 180, 171, 0.25);
  border-radius: var(--btn-pill-radius);
  color: var(--red);
  background: rgba(255, 180, 171, 0.06);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}
.st-card-delete:hover {
  border-color: rgba(255, 180, 171, 0.45);
  background: rgba(255, 180, 171, 0.12);
}
.st-card-collapse {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(230, 196, 135, 0.25);
  border-radius: var(--btn-circle-radius);
  color: var(--text2);
  background: rgba(230, 196, 135, 0.06);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.st-card-collapse:hover {
  border-color: rgba(230, 196, 135, 0.45);
  color: var(--gold2);
  background: rgba(230, 196, 135, 0.12);
}
.st-evidence {
  display: grid;
  grid-template-columns: auto minmax(90px, 170px) 1fr;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 12px;
}
.st-evidence-type,
.st-candidate-merge,
.st-candidate-linked {
  color: var(--teal);
}
.st-evidence-chapter,
.st-muted,
.st-candidate-source {
  color: var(--text3);
}
.st-candidate-detail {
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 8px;
}
.st-candidate-status,
.st-candidate-merge,
.st-candidate-linked,
.st-candidate-source {
  font-size: 12px;
  margin: 0 0 6px;
}
.st-candidate blockquote {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-left: 2px solid rgba(124, 215, 193, 0.45);
  color: var(--text2);
  background: rgba(124, 215, 193, 0.05);
  line-height: 1.55;
}
.st-empty {
  padding: 30px 10px;
  text-align: center;
  color: var(--text3);
  border: 1px dashed var(--border2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.st-loading {
  display: grid;
  gap: 8px;
}

/* 三类智能追踪共用的扫描等待页 */
.tracking-scan-stage {
  --tracking-scan-accent: #7cd7c1;
  --tracking-scan-accent-rgb: 124, 215, 193;
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 500px;
  padding: 46px 28px 34px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  border: 1px solid rgba(var(--tracking-scan-accent-rgb), 0.26);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 22%, rgba(var(--tracking-scan-accent-rgb), 0.14), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 42px rgba(0, 0, 0, 0.2);
}
.tracking-scan-stage::before,
.tracking-scan-stage::after {
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  content: '';
  border: 1px solid rgba(var(--tracking-scan-accent-rgb), 0.12);
  border-radius: 50%;
}
.tracking-scan-stage::before {
  top: -152px;
  right: -94px;
}
.tracking-scan-stage::after {
  bottom: -190px;
  left: -110px;
}
.tracking-scan-stage[data-tracking-scan-type="character"] {
  --tracking-scan-accent: #8ab9e8;
  --tracking-scan-accent-rgb: 138, 185, 232;
}
.tracking-scan-stage[data-tracking-scan-type="setting"] {
  --tracking-scan-accent: #7cd7c1;
  --tracking-scan-accent-rgb: 124, 215, 193;
}
.tracking-scan-stage[data-tracking-scan-type="foreshadow"] {
  --tracking-scan-accent: #e6c487;
  --tracking-scan-accent-rgb: 230, 196, 135;
}
.tracking-scan-stage__orbital {
  position: relative;
  display: grid;
  width: 148px;
  height: 148px;
  margin-bottom: 20px;
  place-items: center;
}
.tracking-scan-stage__ring,
.tracking-scan-stage__dot {
  position: absolute;
  border-radius: 50%;
}
.tracking-scan-stage__ring {
  border: 1px solid rgba(var(--tracking-scan-accent-rgb), 0.3);
}
.tracking-scan-stage__ring--outer {
  width: 146px;
  height: 146px;
  border-style: dashed;
  animation: tracking-scan-orbit 16s linear infinite;
}
.tracking-scan-stage__ring--middle {
  width: 106px;
  height: 106px;
  border-color: rgba(var(--tracking-scan-accent-rgb), 0.5);
  animation: tracking-scan-orbit-reverse 11s linear infinite;
}
.tracking-scan-stage__ring--inner {
  width: 70px;
  height: 70px;
  background: rgba(var(--tracking-scan-accent-rgb), 0.07);
  box-shadow: 0 0 30px rgba(var(--tracking-scan-accent-rgb), 0.17);
  animation: tracking-scan-pulse 2.2s ease-in-out infinite;
}
.tracking-scan-stage__dot {
  z-index: 1;
  width: 7px;
  height: 7px;
  background: var(--tracking-scan-accent);
  box-shadow: 0 0 12px rgba(var(--tracking-scan-accent-rgb), 0.9);
}
.tracking-scan-stage__dot--one {
  top: 13px;
  left: 39px;
  animation: tracking-scan-dot 3.4s ease-in-out infinite;
}
.tracking-scan-stage__dot--two {
  right: 15px;
  bottom: 36px;
  animation: tracking-scan-dot 3.4s ease-in-out -1.7s infinite;
}
.tracking-scan-stage__core {
  position: relative;
  z-index: 2;
  display: grid;
  width: 50px;
  height: 50px;
  color: var(--tracking-scan-accent);
  font-size: 26px;
  place-items: center;
  border: 1px solid rgba(var(--tracking-scan-accent-rgb), 0.5);
  border-radius: 50%;
  background: rgba(11, 16, 19, 0.8);
  box-shadow: 0 0 24px rgba(var(--tracking-scan-accent-rgb), 0.22);
}
.tracking-scan-stage__content {
  width: min(100%, 560px);
}
.tracking-scan-stage__eyebrow,
.tracking-scan-stage__tip-label {
  display: block;
  color: var(--tracking-scan-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.tracking-scan-stage__content h3 {
  margin: 7px 0 8px;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}
.tracking-scan-stage__chapter {
  min-height: 22px;
  margin: 0;
  overflow: hidden;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tracking-scan-stage__progress {
  width: 100%;
  height: 7px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.tracking-scan-stage__meter {
  display: block;
  width: var(--tracking-scan-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--tracking-scan-accent-rgb), 0.55), var(--tracking-scan-accent));
  box-shadow: 0 0 15px rgba(var(--tracking-scan-accent-rgb), 0.64);
  transition: width 380ms ease;
}
.tracking-scan-stage__meta {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
  color: var(--text3);
  font-size: 12px;
}
.tracking-scan-stage__tip-card {
  width: min(100%, 630px);
  min-height: 88px;
  margin-top: 34px;
  padding: 14px 18px;
  text-align: left;
  border: 1px solid rgba(var(--tracking-scan-accent-rgb), 0.17);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.16);
}
.tracking-scan-stage__tip-label {
  margin-bottom: 6px;
  font-size: 10px;
}
.tracking-scan-stage__tip {
  margin: 0;
  color: var(--text3);
  font-size: 12px;
  line-height: 1.7;
  transition: opacity 140ms ease, transform 140ms ease;
}
.tracking-scan-stage__tip.is-changing {
  opacity: 0;
  transform: translateY(-3px);
}
.tracking-scan-stage__stop {
  min-width: 104px;
  margin-top: 22px;
}

@keyframes tracking-scan-orbit {
  to { transform: rotate(360deg); }
}
@keyframes tracking-scan-orbit-reverse {
  to { transform: rotate(-360deg); }
}
@keyframes tracking-scan-pulse {
  50% { transform: scale(1.08); opacity: 0.72; }
}
@keyframes tracking-scan-dot {
  50% { transform: scale(1.7); opacity: 0.5; }
}

@media (max-width: 900px) {
  .fs-toolbar {
    grid-template-columns: 1fr;
  }
  .fs-card-controls {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
  .fs-evidence {
    grid-template-columns: 1fr auto;
  }
  .fs-evidence-chapter,
  .fs-evidence-text {
    grid-column: 1 / -1;
  }
  .st-evidence {
    grid-template-columns: 1fr;
  }
  .st-card-head {
    display: grid;
  }
  .tracking-scan-stage {
    min-height: 430px;
    padding: 36px 18px 28px;
  }
  .tracking-scan-stage__tip-card {
    margin-top: 26px;
  }
}
@media (max-width: 520px) {
  .tracking-scan-stage__chapter {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .tracking-scan-stage__meta {
    flex-direction: column;
    gap: 3px;
  }
  .tracking-scan-stage__tip-card {
    min-height: 106px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tracking-scan-stage *,
  .tracking-scan-stage::before,
  .tracking-scan-stage::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}
/* outline items */
.outline-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 2px;
  font-size: 13px;
  color: var(--text2);
  transition: all 0.2s;
}
.outline-item:hover { background: var(--bg3); color: var(--text); }
.outline-item.active-outline { background: var(--bg3); color: var(--gold); }
.outline-item.sub { padding-left: 24px; font-size: 12px; color: var(--text3); }
.outline-item.sub:hover { color: var(--text2); }
.outline-item.sub.active-outline { color: var(--gold); }
.drag-handle { color: var(--text3); font-size: 10px; cursor: grab; }
.ch-edit-icon {
  margin-left: auto; flex-shrink: 0;
  opacity: 0; font-size: 11px; color: var(--text3);
  cursor: pointer; padding: 0 2px;
  transition: opacity 0.15s;
}
.outline-item:hover .ch-edit-icon { opacity: 1; }
.outline-item:hover .ch-edit-icon:hover { color: var(--gold); }


/* ── MIDDLE EDITOR ── */
#middle {
  --editor-clean-text: #c7beb3;
  --editor-clean-text-soft: #aaa092;
  --editor-clean-muted: rgba(143, 133, 119, 0.78);
  --editor-clean-gold: rgba(213, 178, 114, 0.68);
  --editor-clean-gold-strong: rgba(229, 196, 137, 0.72);
  --editor-clean-teal: rgba(124, 215, 193, 0.62);
  --editor-clean-border: rgba(230, 196, 135, 0.14);
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: rgba(13, 12, 11, 0.95);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  border: 1px solid var(--editor-clean-border);
  border-radius: var(--panel-radius);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.58);
  position: relative;
}
#editor-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 15;
}
#editor-top-bar .editor-format-bar {
  flex: 1 1 auto;
  min-width: 0;
}
#editor-header {
  padding: 8px 24px 10px 8px;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  background: rgba(10, 9, 9, 0.1);
  min-width: 0;
}
#editor-header .editor-header-hint {
  color: var(--red);
  font-size: 11px;
  flex-shrink: 0;
}
/* 格式栏：顶栏左对齐，与正文区一体 */
.editor-format-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding: 6px 16px 4px 24px;
  border: none;
  border-bottom: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.editor-format-bar::-webkit-scrollbar {
  height: 3px;
}
.editor-format-bar::-webkit-scrollbar-thumb {
  background: rgba(230, 196, 135, 0.14);
  border-radius: 2px;
}
.editor-format-bar--focus {
  max-width: 100%;
  width: 100%;
  margin: 0 0 4px;
  padding: 6px 16px 4px 24px;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-self: stretch;
  box-sizing: border-box;
}
.editor-format-bar .material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
  color: rgba(230, 196, 135, 0.42);
  pointer-events: none;
}
/* 格式栏：仅图标，无圆形底 */
.fmt-btn {
  min-width: 38px;
  min-height: 38px;
  flex-shrink: 0;
  padding: 5px 7px;
  box-sizing: border-box;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--editor-clean-gold);
  font-size: 0;
  font-family: var(--font-sans);
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, opacity 0.15s ease, transform 0.12s ease;
  -webkit-appearance: none;
  appearance: none;
}
.fmt-btn:hover {
  transform: none;
}
.fmt-btn .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.fmt-btn:hover .material-symbols-outlined {
  color: rgba(230, 196, 135, 0.72);
  filter: none;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgba(230, 196, 135, 0.07);
}
.fmt-btn:active {
  transform: scale(0.92);
}
.fmt-btn:active .material-symbols-outlined {
  color: var(--editor-clean-teal);
  filter: none;
}
.fmt-btn.fmt-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fmt-btn:focus-visible {
  outline: 1px solid rgba(230, 196, 135, 0.42);
  outline-offset: 3px;
}
/* 标题在滚动区内，与参考布局一致 */
.editor-flow-inner {
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.editor-title-block {
  margin: 0 0 0.85rem;
  padding: 0 2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.editor-chapter-title-input,
#chapter-name,
#chapter-name-focus {
  display: block;
  min-width: 0;
  flex: 1 1 240px;
  width: auto;
  box-sizing: border-box;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--editor-clean-gold-strong);
  background: transparent;
  border: none;
  outline: none;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.editor-chapter-title-input::placeholder,
#chapter-name::placeholder,
#chapter-name-focus::placeholder {
  color: var(--editor-clean-muted);
  font-weight: 500;
}
.editor-title-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--btn-pill-radius);
  border: 1px solid rgba(230, 196, 135, 0.3);
  background: rgba(255, 255, 255, 0.04);
  color: var(--editor-clean-gold);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.editor-title-block .editor-title-action-btn:first-of-type,
#typo-correction-btn[hidden] + #tracking-status-btn {
  margin-left: auto;
}
.editor-title-action-btn:hover {
  border-color: rgba(230, 196, 135, 0.55);
  background: rgba(255, 255, 255, 0.08);
}
.editor-title-action-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
#typo-correction-btn[hidden] {
  display: none !important;
}
#typo-correction-btn.is-loading {
  cursor: progress;
}
.typo-correction-locked {
  caret-color: transparent;
}
#editor::highlight(typo-correction-origin) {
  background-color: rgba(230, 196, 135, 0.28);
  color: inherit;
}
.typo-correction-panel {
  margin: 1.2rem 0 0;
  padding: 0.9rem 0 0.2rem;
  border-top: 1px solid rgba(230, 196, 135, 0.18);
  font-family: var(--font-sans);
}
.typo-correction-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}
.typo-correction-title {
  color: rgba(230, 196, 135, 0.78);
  font-size: 11px;
  letter-spacing: 0.12em;
}
.typo-correction-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.typo-correction-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(230, 196, 135, 0.08);
}
.typo-correction-pair {
  min-width: 0;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.typo-correction-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.typo-correction-actions button {
  border: 1px solid rgba(230, 196, 135, 0.3);
  border-radius: var(--btn-pill-radius);
  background: transparent;
  color: var(--editor-clean-gold);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 3px 10px;
}
.typo-correction-actions button:hover {
  border-color: rgba(230, 196, 135, 0.55);
  background: rgba(255, 255, 255, 0.06);
}
.typo-correction-empty {
  color: var(--text3);
  font-size: 13px;
  line-height: 1.6;
}
#word-badge {
  font-size: 11px; color: var(--editor-clean-muted);
  font-family: var(--font-sans);
}
#focus-toggle {
  font-size: 11px; color: var(--editor-clean-muted);
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: var(--btn-pill-radius); padding: 3px 10px;
  cursor: pointer; font-family: var(--font-sans);
  transition: all 0.2s;
}
#focus-toggle:hover { color: var(--editor-clean-gold); border-color: rgba(230, 196, 135, 0.28); background: rgba(255, 255, 255, 0.025); }

/* ── 章节细纲：圆形按钮（绝对定位于 #middle 右下）+ 内嵌面板（正文流末尾） ── */

/* 圆形触发按钮，对标 #send-btn 样式 */
.synopsis-fab {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 12;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #c96e6e;
  color: #fff8f8;
  box-shadow: 0 1px 8px rgba(201, 110, 110, 0.45);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.synopsis-fab:hover {
  background: #db8484;
  box-shadow: 0 2px 14px rgba(201, 110, 110, 0.6);
}
.synopsis-fab:active { transform: scale(0.92); }
.synopsis-fab.synopsis-fab--panel-open { background: #b35e5e; }
.synopsis-fab:focus-visible {
  outline: 2px solid rgba(201, 110, 110, 0.7);
  outline-offset: 3px;
}
.synopsis-fab .material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-size: 22px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
  color: #fff8f8;
  pointer-events: none;
}

/* 内嵌面板：正文流末尾的普通块，不弹窗 */
#synopsis-dock {
  width: 100%;
  box-sizing: border-box;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201, 110, 110, 0.2);
}
#synopsis-dock[hidden] { display: none !important; }

.synopsis-dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0.7rem;
}
.synopsis-dock-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(220, 150, 150, 0.75);
  font-family: var(--font-sans);
}
.synopsis-panel-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.synopsis-panel-actions button {
  font-size: 11px;
  color: rgba(220, 150, 150, 0.85);
  background: transparent;
  border: 1px solid rgba(201, 110, 110, 0.35);
  border-radius: var(--btn-pill-radius);
  padding: 3px 10px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.synopsis-panel-actions button:hover:not(:disabled) {
  color: #f0b8b8;
  border-color: rgba(201, 110, 110, 0.7);
  background: rgba(201, 110, 110, 0.08);
}
.synopsis-panel-actions button:disabled {
  opacity: 0.4;
  cursor: default;
}
.chapter-synopsis-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
  max-height: 360px;
  overflow-y: auto;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(201, 110, 110, 0.15);
  color: var(--text2);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.75;
  padding: 2px 0 8px;
  outline: none;
  caret-color: #db8484;
}
.chapter-synopsis-input:focus {
  border-bottom-color: rgba(201, 110, 110, 0.45);
}
.chapter-synopsis-input.synopsis-loading {
  color: var(--text3);
  font-style: italic;
}

/* ── 头脑风暴：KB 编辑态右下 FAB + 对话框 ─────────────────────────────── */
.brainstorm-fab {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 12;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #c96e6e;
  color: #fff8f8;
  box-shadow: 0 1px 8px rgba(201, 110, 110, 0.45);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.brainstorm-fab[hidden] { display: none !important; }
.brainstorm-fab:hover {
  background: #db8484;
  box-shadow: 0 2px 14px rgba(201, 110, 110, 0.6);
}
.brainstorm-fab:active { transform: scale(0.92); }
.brainstorm-fab.brainstorm-fab--open { background: #b35e5e; }
.brainstorm-fab:focus-visible {
  outline: 2px solid rgba(201, 110, 110, 0.7);
  outline-offset: 3px;
}
.brainstorm-fab .material-symbols-outlined {
  font-size: 23px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  color: #fff8f8;
  pointer-events: none;
}

.brainstorm-modal {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.brainstorm-modal[hidden] { display: none !important; }
.brainstorm-panel {
  position: relative;
  width: min(760px, calc(100vw - 44px));
  max-height: min(82vh, 760px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  padding: 34px 18px 18px;
  border: 1px solid rgba(201, 110, 110, 0.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(27, 25, 24, 0.98), rgba(17, 16, 15, 0.98));
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.64),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.brainstorm-floating-title {
  position: absolute;
  top: -17px;
  left: 26px;
  max-width: calc(100% - 92px);
  padding: 7px 15px;
  border: 1px solid rgba(230, 196, 135, 0.28);
  border-radius: 999px;
  background: rgba(22, 19, 16, 0.96);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: var(--gold2);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brainstorm-close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}
.brainstorm-close-btn:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}
.brainstorm-close-btn:active { transform: scale(0.94); }
.brainstorm-close-btn .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}
.brainstorm-bubble-shell,
.brainstorm-input-shell {
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(6, 6, 5, 0.34);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}
.brainstorm-bubble-shell {
  padding: 14px;
  border-radius: 18px 22px 17px 24px;
}
.brainstorm-actions {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  pointer-events: auto;
}
.brainstorm-actions button,
.brainstorm-bubble-actions button {
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, opacity 0.15s;
}
.brainstorm-actions > button {
  font-size: 12px;
  color: rgba(241, 200, 196, 0.92);
  background: rgba(17, 13, 12, 0.76);
  border: 1px solid rgba(201, 110, 110, 0.42);
  border-radius: 999px;
  padding: 6px 13px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}
.brainstorm-actions > button:hover:not(:disabled) {
  color: #f0b8b8;
  border-color: rgba(201, 110, 110, 0.72);
  background: rgba(201, 110, 110, 0.14);
}
.brainstorm-actions button:disabled,
.brainstorm-bubble-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}
.brainstorm-bubbles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-height: 136px;
}
.brainstorm-bubble {
  position: relative;
  isolation: isolate;
  min-height: 136px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 17px 17px 48px;
  border: 1px solid rgba(230, 196, 135, 0.22);
  border-radius: 26px 18px 24px 16px;
  background:
    linear-gradient(155deg, rgba(28, 25, 20, 0.86), rgba(9, 9, 8, 0.82));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.24),
    inset 0 0 22px rgba(230, 196, 135, 0.025),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  box-sizing: border-box;
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.brainstorm-bubble::before,
.brainstorm-bubble::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(230, 196, 135, 0.28);
  border-radius: 48% 52% 44% 56%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 244, 215, 0.28), transparent 38%),
    rgba(230, 196, 135, 0.08);
  opacity: 0;
  pointer-events: none;
}
.brainstorm-bubble-text,
.brainstorm-bubble-actions {
  position: relative;
  z-index: 1;
}
.brainstorm-bubble::before {
  left: 16px;
  top: 24px;
}
.brainstorm-bubble::after {
  right: 18px;
  bottom: 28px;
}
.brainstorm-bubble:nth-child(2) { border-radius: 18px 28px 17px 25px; }
.brainstorm-bubble:nth-child(3) { border-radius: 25px 16px 28px 18px; }
.brainstorm-bubble:hover {
  transform: translateY(-1px);
  border-color: rgba(230, 196, 135, 0.34);
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.3),
    inset 0 0 28px rgba(230, 196, 135, 0.035),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.brainstorm-bubble.is-empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(0, 0, 0, 0.2);
}
.brainstorm-bubble.is-loading {
  border-color: rgba(201, 110, 110, 0.42);
}
.brainstorm-bubble.is-locked {
  pointer-events: none;
}
.brainstorm-bubble.is-bursting {
  pointer-events: none;
  animation: brainstormBubbleBurst 480ms cubic-bezier(0.2, 0.8, 0.22, 1) forwards;
}
.brainstorm-bubble.is-bursting::before {
  animation: brainstormBurstShardLeft 480ms cubic-bezier(0.18, 0.78, 0.24, 1) forwards;
}
.brainstorm-bubble.is-bursting::after {
  animation: brainstormBurstShardRight 480ms cubic-bezier(0.18, 0.78, 0.24, 1) forwards;
}
.brainstorm-bubble-text {
  color: var(--text2);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.72;
  word-break: break-word;
}
.brainstorm-bubble.is-empty .brainstorm-bubble-text,
.brainstorm-bubble.is-loading .brainstorm-bubble-text {
  color: var(--text3);
  font-style: italic;
}
.brainstorm-bubble-actions {
  position: absolute;
  right: 12px;
  bottom: 11px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  opacity: 0.58;
  transition: opacity 0.16s;
}
.brainstorm-bubble:hover .brainstorm-bubble-actions,
.brainstorm-bubble:focus-within .brainstorm-bubble-actions {
  opacity: 1;
}
.brainstorm-bubble-icon-btn {
  width: 29px;
  height: 29px;
  border: 1px solid rgba(230, 196, 135, 0.22);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.26);
  color: rgba(230, 196, 135, 0.82);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.brainstorm-bubble-icon-btn .material-symbols-outlined {
  font-size: 17px;
  line-height: 1;
}
.brainstorm-bubble-icon-btn:hover:not(:disabled) {
  color: var(--gold2);
  border-color: rgba(230, 196, 135, 0.52);
  background: rgba(230, 196, 135, 0.1);
}
.brainstorm-bubble-accept:hover:not(:disabled) {
  color: #bff5d4;
  border-color: rgba(142, 232, 177, 0.45);
}
.brainstorm-bubble-reject:hover:not(:disabled) {
  color: #f1b2b2;
  border-color: rgba(220, 150, 150, 0.5);
}
.brainstorm-bubble-ghost {
  position: fixed;
  z-index: 2200;
  pointer-events: none;
  margin: 0;
  transform-origin: center;
  will-change: transform, opacity, filter;
  animation: brainstormAdoptFly 620ms cubic-bezier(0.2, 0.82, 0.22, 1) forwards;
}
.brainstorm-bubble-ghost .brainstorm-bubble-actions {
  opacity: 0;
}
.brainstorm-input-shell {
  position: relative;
  padding: 0;
  border-color: rgba(201, 110, 110, 0.28);
  border-radius: 18px 20px 16px 22px;
  background:
    linear-gradient(180deg, rgba(9, 9, 8, 0.58), rgba(0, 0, 0, 0.34));
}
.brainstorm-input {
  width: 100%;
  min-height: 170px;
  max-height: min(34vh, 320px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 17px 18px 62px;
  outline: none;
  border: none;
  border-radius: inherit;
  background: transparent;
  color: var(--text2);
  caret-color: #db8484;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.75;
}
.brainstorm-input:focus {
  box-shadow: inset 0 0 0 1px rgba(201, 110, 110, 0.28);
}
.brainstorm-input:empty::before {
  content: attr(data-placeholder);
  color: rgba(191, 181, 159, 0.42);
  pointer-events: none;
}
.brainstorm-input.is-loading {
  color: var(--text3);
  font-style: italic;
}

@keyframes brainstormAdoptFly {
  0% {
    opacity: 0.98;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    filter: blur(0);
  }
  54% {
    opacity: 0.78;
    transform: translate3d(
      calc(var(--brainstorm-fly-x, 0px) * 0.74),
      calc(var(--brainstorm-fly-y, 0px) * 0.72),
      0
    ) scale(0.56) rotate(-2deg);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--brainstorm-fly-x, 0px), var(--brainstorm-fly-y, 0px), 0) scale(0.18) rotate(4deg);
    filter: blur(4px);
  }
}

@keyframes brainstormBubbleBurst {
  0% {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(230, 196, 135, 0.26);
    box-shadow:
      0 18px 34px rgba(0, 0, 0, 0.24),
      inset 0 0 22px rgba(230, 196, 135, 0.025),
      inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  }
  34% {
    opacity: 1;
    transform: scale(1.035);
    border-color: rgba(255, 226, 170, 0.68);
    box-shadow:
      0 24px 48px rgba(0, 0, 0, 0.34),
      0 0 0 2px rgba(230, 196, 135, 0.12),
      inset 0 0 30px rgba(230, 196, 135, 0.08);
  }
  100% {
    opacity: 0;
    transform: scale(0.76) rotate(-1.5deg);
    border-color: rgba(255, 226, 170, 0);
    box-shadow:
      0 8px 22px rgba(0, 0, 0, 0.16),
      0 0 0 0 rgba(230, 196, 135, 0),
      inset 0 0 10px rgba(230, 196, 135, 0);
  }
}

@keyframes brainstormBurstShardLeft {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.5) rotate(0deg);
  }
  30% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate3d(-44px, -24px, 0) scale(1.18) rotate(-24deg);
  }
}

@keyframes brainstormBurstShardRight {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.5) rotate(0deg);
  }
  30% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: translate3d(48px, 22px, 0) scale(1.08) rotate(28deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brainstorm-bubble-ghost {
    animation: none;
    display: none;
  }
  .brainstorm-bubble.is-bursting,
  .brainstorm-bubble.is-bursting::before,
  .brainstorm-bubble.is-bursting::after {
    animation: none;
  }
}

#editor-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 12px 80px 96px;
  position: relative;
  min-height: 0;
}
#editor-wrap::-webkit-scrollbar { width: 4px; }
#editor-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
#editor {
  min-height: 12rem;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 2.1;
  color: var(--editor-clean-text, var(--text));
  outline: none;
  max-width: none;
  margin: 0;
  width: 100%;
  position: relative;
  caret-color: var(--editor-clean-gold, var(--gold));
}
/* 正文段落首行缩进二字（换行产生的新块级段落） */
#editor > p,
#editor > div:not(.sel-ai-box):not(.editor-chat-insert) {
  text-indent: 2em;
}
#editor .sel-ai-box,
#editor .sel-ai-box *,
#editor .sel-org-title,
#editor .sel-org-summary,
#editor .sel-org-section,
#editor .sel-org-item,
#editor .sel-org-line,
#editor .sel-org-gap,
#editor .ai-rich-title,
#editor .ai-rich-lead,
#editor .ai-rich-section,
#editor .ai-rich-li,
#editor .ai-rich-p,
#editor .ai-rich-gap {
  text-indent: 0;
}
#editor::before {
  content: attr(data-placeholder);
  color: var(--editor-clean-muted, var(--text3));
  font-style: italic;
  pointer-events: none;
  position: absolute;
}
#editor:not(:empty)::before { display: none; }
#editor .sel-org-title,
#editor .sel-org-summary,
#editor .sel-org-section,
#editor .sel-org-item,
#editor .sel-org-line,
#editor .sel-org-gap,
#editor .ai-rich-title,
#editor .ai-rich-lead,
#editor .ai-rich-section,
#editor .ai-rich-li,
#editor .ai-rich-p,
#editor .ai-rich-gap {
  margin: 0 0 0.38em;
}
#editor .sel-org-title,
#editor .ai-rich-title {
  color: var(--editor-clean-gold-strong, var(--gold2));
  font-size: 1.08em;
  letter-spacing: 0.01em;
}
#editor .sel-org-summary,
#editor .ai-rich-lead {
  color: var(--editor-clean-text, var(--text));
}
#editor .sel-org-section,
#editor .ai-rich-section {
  color: var(--editor-clean-gold, var(--gold));
}
#editor .sel-org-item,
#editor .ai-rich-li {
  color: var(--editor-clean-text, var(--text));
  padding-left: 1.05em;
}
#editor .sel-org-line,
#editor .ai-rich-p {
  color: var(--editor-clean-text, var(--text));
}
#editor .sel-org-line strong,
#editor .sel-org-item strong,
#editor .ai-rich-p strong,
#editor .ai-rich-li strong,
#editor .ai-rich-section strong,
#editor .ai-rich-lead strong,
#editor .ai-rich-title strong {
  color: var(--editor-clean-gold, var(--gold));
  font-weight: 600;
}
#editor h3 {
  font-size: 1.12em;
  font-weight: 600;
  margin: 0.45em 0 0.2em;
  color: var(--editor-clean-gold-strong, var(--gold2));
  text-indent: 0;
}
#editor blockquote {
  margin: 0.5em 0;
  padding: 0.45em 0 0.45em 1em;
  border-left: 3px solid rgba(230, 196, 135, 0.28);
  color: var(--editor-clean-text-soft, var(--text2));
  text-indent: 0;
}
#editor ul, #editor ol {
  margin: 0.35em 0 0.55em;
  padding-left: 1.65em;
  text-indent: 0;
}
#editor li { margin: 0.12em 0; }
#editor hr {
  border: none;
  height: 1.15em;
  margin: 0.75em 0;
  background: transparent;
}

/* 侧栏「插入编辑器」：HTML 与气泡一致，字号/行高继承 #editor，间距与强调色对齐气泡 */
#editor .editor-chat-insert {
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  color: inherit;
}
#editor .editor-chat-insert .ai-rich-title {
  color: var(--gold2);
  font-weight: 600;
  margin: 0.4em 0 0.15em;
  font-size: 1.02em;
  letter-spacing: 0.01em;
  text-indent: 0;
}
#editor .editor-chat-insert .ai-rich-p {
  margin: 0.2em 0;
  line-height: inherit;
  text-indent: 0;
}
#editor .editor-chat-insert .ai-rich-li {
  margin: 0.15em 0;
  padding-left: 0.6em;
  line-height: inherit;
  text-indent: 0;
}
#editor .editor-chat-insert .ai-rich-hr {
  border: none;
  height: 0.85em;
  margin: 0.45em 0;
  background: transparent;
}
#editor .editor-chat-insert .ai-rich-lead,
#editor .editor-chat-insert .ai-rich-section {
  margin: 0.25em 0;
  line-height: inherit;
  text-indent: 0;
}
#editor .editor-chat-insert .ai-rich-gap {
  margin: 0.15em 0;
  line-height: 1.4;
  text-indent: 0;
}
#editor .editor-chat-insert strong,
#editor .editor-chat-insert b {
  color: var(--agent-accent, var(--gold));
  font-weight: 500;
}
#editor .editor-chat-insert em {
  color: var(--agent-accent, var(--teal));
  font-style: normal;
}

/* selection toolbar（拖选：横向条保留外框；各功能按钮无边框） */
#sel-toolbar {
  display: none;
  position: fixed;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 4px 6px;
  gap: 2px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
#sel-toolbar.visible { display: flex; }
.sel-custom-toolbar-list {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.sel-custom-toolbar-list:empty {
  display: none;
}
.sel-context-pinned-list:empty {
  display: none;
}
.sel-more-wrap {
  position: relative;
  display: inline-flex;
}
.sel-btn {
  padding: 5px 11px;
  font-size: 12px;
  background: transparent;
  border: none;
  border-radius: var(--btn-pill-radius);
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  box-shadow: none;
}
.sel-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.sel-btn.gold {
  color: var(--gold);
}
.sel-btn.gold:hover {
  background: rgba(230, 196, 135, 0.14);
  color: var(--gold2);
}
.sel-more-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  min-width: 176px;
  max-width: min(260px, calc(100vw - 16px));
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  background: rgba(24, 23, 22, 0.96);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}
.sel-more-menu.visible {
  display: block;
}
.sel-more-list {
  max-height: 220px;
  overflow: auto;
}
.sel-more-item,
.sel-more-empty {
  width: 100%;
  min-height: 30px;
  padding: 6px 10px;
  border: none;
  border-radius: var(--btn-pill-radius);
  background: transparent;
  color: rgba(245, 242, 237, 0.95);
  font: 400 13px var(--font-sans);
  text-align: left;
}
.sel-more-item {
  cursor: pointer;
}
.sel-more-item:hover,
.sel-more-item:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.sel-more-empty {
  color: var(--text3);
  cursor: default;
}
.sel-more-sep {
  height: 1px;
  margin: 5px 4px;
  background: rgba(255, 255, 255, 0.08);
}
.sel-more-manage,
.sel-context-manage {
  color: var(--teal);
}

.selection-instruction-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 780;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.selection-instruction-modal.visible {
  display: flex;
}
.selection-instruction-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.46);
}
.selection-instruction-panel {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  background: var(--bg3);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.selection-instruction-panel h3 {
  margin: 0 0 12px;
  color: var(--gold);
  font: 600 16px var(--font-sans);
}
.selection-instruction-panel textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  outline: none;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: 14px/1.6 var(--font-sans);
}
.selection-instruction-panel textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(230, 196, 135, 0.12);
}
.selection-instruction-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.selection-instruction-btn {
  min-height: 32px;
  padding: 6px 14px;
  border: none;
  border-radius: var(--btn-pill-radius);
  cursor: pointer;
  font: 500 13px var(--font-sans);
}
.selection-instruction-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text2);
}
.selection-instruction-cancel:hover {
  background: rgba(255, 255, 255, 0.13);
  color: var(--text);
}
.selection-instruction-confirm {
  background: var(--gold);
  color: #1a1510;
}
.selection-instruction-confirm:hover {
  background: var(--gold2);
}
/* 「联合作家」：完善、润色 — 横向条与右键里同一套金字 + ✦（类名 .sel-ai-cowriter） */
.sel-ai-cowriter .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
  vertical-align: -2px;
  margin-right: 3px;
}

/* 右键菜单内联作家人：与横向条 var(--gold) 对齐 */
.sel-context-item.sel-context-ai-gold.sel-ai-cowriter {
  color: var(--gold);
}
.sel-context-item.sel-context-ai-gold.sel-ai-cowriter:hover,
.sel-context-item.sel-context-ai-gold.sel-ai-cowriter:focus-visible {
  color: var(--gold2);
  background: rgba(230, 196, 135, 0.14);
}

/* 右键选区：参考系统竖条菜单 — 圆角毛玻璃、细边框、柔和投影、分组线 */
.sel-context-menu {
  display: none;
  position: fixed;
  z-index: 262;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 196px;
  max-width: min(280px, calc(100vw - 16px));
  padding: 5px 0;
  margin: 0;
  pointer-events: auto;
  background: linear-gradient(
    165deg,
    rgba(52, 50, 48, 0.82) 0%,
    rgba(28, 27, 26, 0.9) 48%,
    rgba(18, 17, 16, 0.92) 100%
  );
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
}
.sel-context-menu.visible {
  display: flex;
}
.sel-context-clip,
.sel-context-ai {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 5px;
}
.sel-context-custom-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sel-context-item {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  min-height: 30px;
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  outline: none;
  background: transparent;
  color: rgba(245, 242, 237, 0.95);
  border-radius: var(--btn-pill-radius);
  transition: background 0.1s ease, color 0.1s ease;
  box-shadow: none;
  -webkit-font-smoothing: antialiased;
}
.sel-context-item:hover,
.sel-context-item:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.sel-context-item:active {
  background: rgba(255, 255, 255, 0.07);
}
/* 与参考图一致：剪贴与 AI 同一套浅色字，无单独色块 */
.sel-context-copy,
.sel-context-cut,
.sel-context-paste {
  color: rgba(240, 236, 230, 0.94);
}
.sel-context-copy:hover,
.sel-context-cut:hover,
.sel-context-paste:hover {
  color: #fff;
}
.sel-context-sep {
  height: 0;
  margin: 6px 11px;
  background: transparent;
  border: none;
  padding: 0;
  flex-shrink: 0;
  overflow: hidden;
}
.sel-context-ai-gold {
  color: rgba(252, 246, 232, 0.96);
}
.sel-context-ai-gold:hover,
.sel-context-ai-gold:focus-visible {
  color: #fff;
  background: rgba(230, 196, 135, 0.14);
}

/* focus overlay：标题+正文同区滚动（专注模式不显示格式工具栏） */
#focus-format-bar {
  display: none !important;
}
#focus-overlay {
  display: none;
  flex-direction: column;
  position: absolute;
  inset: 0;
  background: #000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: inherit;
  z-index: 50;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}
#focus-overlay.visible {
  display: flex;
}
#focus-scroll-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 80px 48px;
  box-sizing: border-box;
}
#focus-editor {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 2.2;
  color: var(--editor-clean-text, var(--text));
  max-width: none;
  width: 100%;
  margin: 0;
  outline: none;
  min-height: 50vh;
  position: relative;
  caret-color: var(--editor-clean-gold, var(--gold));
  cursor: text;
}
#focus-editor > p,
#focus-editor > div {
  text-indent: 2em;
}
#focus-editor h3 {
  font-size: 1.12em;
  font-weight: 600;
  margin: 0.45em 0 0.2em;
  color: var(--editor-clean-gold-strong, var(--gold2));
  text-indent: 0;
}
#focus-editor blockquote {
  margin: 0.5em 0;
  padding: 0.45em 0 0.45em 1em;
  border-left: 3px solid rgba(230, 196, 135, 0.28);
  color: var(--editor-clean-text-soft, var(--text2));
  text-indent: 0;
}
#focus-editor ul, #focus-editor ol {
  margin: 0.35em 0 0.55em;
  padding-left: 1.65em;
  text-indent: 0;
}
#focus-editor li { margin: 0.12em 0; }
#focus-editor hr {
  border: none;
  height: 1.15em;
  margin: 0.75em 0;
  background: transparent;
}

/* 统一富文本排版：编辑器、专注模式、细纲、选区建议、AI 聊天共用语义规则 */
#editor :is(h3, .ai-rich-title, .ai-rich-section, .sel-org-title, .sel-org-section),
#focus-editor :is(h3, .ai-rich-title, .ai-rich-section, .sel-org-title, .sel-org-section),
.chapter-synopsis-input :is(h3, .ai-rich-title, .ai-rich-section, .sel-org-title, .sel-org-section),
.sel-ai-text :is(h3, .ai-rich-title, .ai-rich-section, .sel-org-title, .sel-org-section),
.msg.ai .msg-bubble :is(h3, .ai-rich-title, .ai-rich-section, .msg-md-h) {
  color: var(--editor-clean-gold-strong, var(--gold2));
  font-size: 1.06em;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0.42em 0 0.18em;
  line-height: 1.45;
  text-indent: 0;
}
#editor :is(p, .ai-rich-p, .ai-rich-lead, .sel-org-line, .sel-org-summary),
#focus-editor :is(p, .ai-rich-p, .ai-rich-lead, .sel-org-line, .sel-org-summary),
.chapter-synopsis-input :is(p, .ai-rich-p, .ai-rich-lead, .sel-org-line, .sel-org-summary),
.sel-ai-text :is(p, .ai-rich-p, .ai-rich-lead, .sel-org-line, .sel-org-summary),
.msg.ai .msg-bubble :is(p, .ai-rich-p, .ai-rich-lead, .msg-md-p) {
  margin: 0.18em 0 0.42em;
  line-height: 1.75;
}
#editor > p,
#editor .editor-chat-insert > p,
#focus-editor > p,
.chapter-synopsis-input > p,
.sel-ai-text > p,
.msg.ai .msg-bubble > p {
  text-indent: 2em;
}
#editor :is(blockquote, ul, ol, li, hr),
#focus-editor :is(blockquote, ul, ol, li, hr),
.chapter-synopsis-input :is(blockquote, ul, ol, li, hr),
.sel-ai-text :is(blockquote, ul, ol, li, hr),
.msg.ai .msg-bubble :is(blockquote, ul, ol, li, hr) {
  text-indent: 0;
}
#editor :is(ul, ol, .sel-org-item, .ai-rich-li),
#focus-editor :is(ul, ol, .sel-org-item, .ai-rich-li),
.chapter-synopsis-input :is(ul, ol, .sel-org-item, .ai-rich-li),
.sel-ai-text :is(ul, ol, .sel-org-item, .ai-rich-li),
.msg.ai .msg-bubble :is(ul, ol, .msg-md-li, .ai-rich-li) {
  margin: 0.25em 0 0.55em;
  padding-left: 1.45em;
}
#editor :is(li, .sel-org-item, .ai-rich-li),
#focus-editor :is(li, .sel-org-item, .ai-rich-li),
.chapter-synopsis-input :is(li, .sel-org-item, .ai-rich-li),
.sel-ai-text :is(li, .sel-org-item, .ai-rich-li),
.msg.ai .msg-bubble :is(li, .msg-md-li, .ai-rich-li) {
  margin: 0.14em 0;
  line-height: 1.75;
  color: var(--editor-clean-text, var(--text));
}
#editor :is(blockquote),
#focus-editor :is(blockquote),
.chapter-synopsis-input :is(blockquote),
.sel-ai-text :is(blockquote),
.msg.ai .msg-bubble :is(blockquote) {
  margin: 0.5em 0;
  padding: 0.45em 0 0.45em 1em;
  border-left: 3px solid rgba(230, 196, 135, 0.28);
  color: var(--editor-clean-text-soft, var(--text2));
}
#editor :is(hr, .ai-rich-hr),
#focus-editor :is(hr, .ai-rich-hr),
.chapter-synopsis-input :is(hr, .ai-rich-hr),
.sel-ai-text :is(hr, .ai-rich-hr),
.msg.ai .msg-bubble :is(hr, .msg-md-hr, .ai-rich-hr) {
  border: none;
  height: 0.95em;
  margin: 0.45em 0 0.6em;
  background: transparent;
}
#editor :is(p, li, blockquote, .ai-rich-p, .ai-rich-li, .sel-org-line, .sel-org-item) strong,
#focus-editor :is(p, li, blockquote, .ai-rich-p, .ai-rich-li, .sel-org-line, .sel-org-item) strong,
.chapter-synopsis-input :is(p, li, blockquote, .ai-rich-p, .ai-rich-li, .sel-org-line, .sel-org-item) strong,
.sel-ai-text :is(p, li, blockquote, .ai-rich-p, .ai-rich-li, .sel-org-line, .sel-org-item) strong,
.msg.ai .msg-bubble :is(p, li, blockquote, .msg-md-p, .msg-md-li, .ai-rich-p, .ai-rich-li) strong,
.msg.ai .msg-bubble :is(p, li, blockquote, .msg-md-p, .msg-md-li, .ai-rich-p, .ai-rich-li) b {
  color: var(--editor-clean-gold, var(--gold));
  font-weight: 600;
}
#editor :is(em),
#focus-editor :is(em),
.chapter-synopsis-input :is(em),
.sel-ai-text :is(em),
.msg.ai .msg-bubble :is(em) {
  color: var(--editor-clean-teal, var(--teal));
  font-style: normal;
}
#exit-focus {
  position: fixed; top: 20px; right: 28px;
  font-size: 12px; color: var(--text3);
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--btn-pill-radius); padding: 4px 12px;
  cursor: pointer; z-index: 60; font-family: var(--font-sans);
}
#exit-focus:hover { color: var(--gold); border-color: var(--gold); }

/* ── RIGHT PANEL ── */
#right {
  --right-top-edge-height: 142px;
  --right-bottom-edge-height: 148px;
  width: 320px;
  min-width: 260px;
  flex-shrink: 0;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
#right-top-glass,
#right-bottom-glass {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 7;
  isolation: isolate;
  background: rgba(14, 12, 10, 0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
#right-top-glass {
  top: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
#right-bottom-glass {
  bottom: 0;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.18);
}
#agent-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: none;
  flex-shrink: 0;
  padding: 0 8px;
  gap: 4px;
  overflow-x: auto;
}
#agent-tabs::-webkit-scrollbar { height: 2px; }
.atab {
  flex-shrink: 0; padding: 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  font-size: 11px; color: var(--text3);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: all var(--dur-normal) var(--ease-out);
  font-family: var(--font-sans);
  white-space: nowrap;
  position: relative;
}
.atab .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.atab::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%;
  width: 0; height: 2px;
  background: var(--gold);
  transition: all var(--dur-normal) var(--ease-spring);
  transform: translateX(-50%);
}
.atab:hover { color: var(--text2); }
.atab.active { color: var(--gold); }
.atab.active::after { width: 70%; }
/* agent 悬停圆形背景：颜色与各 agent 对应，玻璃效果 */
.atab[data-agent]:hover .material-symbols-outlined {
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.1), 0 0 0 0.5px rgba(255,255,255,0.12);
}
.atab[data-agent="cowriter"]:hover .material-symbols-outlined {
  background: rgba(201, 169, 110, 0.2);
}
.atab[data-agent="mentor"]:hover .material-symbols-outlined {
  background: rgba(201, 110, 110, 0.2);
}
.atab[data-agent="fan"]:hover .material-symbols-outlined {
  background: rgba(110, 201, 180, 0.2);
}
.atab[data-agent="editor"]:hover .material-symbols-outlined {
  background: rgba(110, 158, 201, 0.2);
}

#agent-identity {
  padding: 12px 14px 10px;
  border-bottom: none;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
#agent-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
#agent-avatar .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}
#agent-name { font-size: 13px; font-weight: 500; color: var(--text); }
#agent-desc { font-size: 11px; color: var(--text3); margin-top: 2px; line-height: 1.4; }


#chat-area {
  flex: 1; overflow-y: auto;
  min-height: 0;
  height: 100%;
  padding: calc(var(--right-top-edge-height) + 14px) 14px calc(var(--right-bottom-edge-height) + 14px);
  box-sizing: border-box;
  scroll-padding-block: calc(var(--right-top-edge-height) + 14px) calc(var(--right-bottom-edge-height) + 14px);
  display: flex; flex-direction: column; gap: 10px;
}
#chat-area::-webkit-scrollbar { width: 3px; }
#chat-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.msg {
  display: flex; flex-direction: column; gap: 4px;
  animation: slideInUp var(--dur-normal) var(--ease-out);
}
.msg-role { font-size: 10px; color: var(--text3); letter-spacing: 0.06em; font-family: var(--font-sans); }
.msg.ai .msg-role { color: var(--agent-accent, var(--gold)); }
.msg-bubble {
  padding: 10px 13px;
  border-radius: var(--radius-lg);
  font-size: 13px; line-height: 1.7;
  font-family: var(--font-sans);
}
.msg.user .msg-bubble {
  background: rgba(29, 27, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  align-self: flex-end;
  max-width: 85%;
}
.msg.ai .msg-bubble {
  background: linear-gradient(
    180deg,
    rgba(var(--agent-accent-rgb, 230, 196, 135), 0.10) 0%,
    rgba(36, 34, 32, 0.72) 58%
  );
  border: 1px solid rgba(var(--agent-accent-rgb, 230, 196, 135), 0.35);
  color: var(--text);
  align-self: flex-start;
  max-width: 92%;
}
.insert-btn {
  align-self: flex-start;
  font-size: 11px; color: var(--text3);
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--btn-pill-radius); padding: 3px 10px;
  cursor: pointer; font-family: var(--font-sans);
  transition: all 0.2s; margin-top: 2px;
}
.insert-btn:hover {
  color: var(--agent-accent, var(--gold));
  border-color: rgba(var(--agent-accent-rgb, 230, 196, 135), 0.45);
}
.msg.user { align-items: flex-end; }
.msg.ai { align-items: flex-start; }

#typing-indicator { display: none; align-items: center; gap: 6px; }
#typing-indicator.visible { display: flex; }
.dot-anim {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text3); animation: bounce 1.2s infinite;
}
.dot-anim:nth-child(2) { animation-delay: 0.2s; }
.dot-anim:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }

/* ── WRITING STYLES ── */
#quick-prompts {
  padding: 8px 14px 6px;
  border-top: none;
  display: flex; gap: 5px; flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
}
.style-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; font-size: 11px;
  border: 1px solid var(--border2);
  border-radius: var(--btn-pill-radius); color: #5a5a5a;
  cursor: pointer; font-family: var(--font-sans);
  background: transparent;
  transition: all 0.15s; white-space: nowrap;
  position: relative;
}
.style-tag:hover { background: var(--bg4); border-color: rgba(124,215,193,0.35); color: #4a4a4a; }
.style-tag.active-style {
  background: rgba(124, 215, 193, 0.82);
  border-color: rgba(124, 215, 193, 0.95);
  color: #2d2d2d;
}
.style-add-btn {
  padding: 3px 9px; font-size: 11px;
  border: 1px dashed var(--border2);
  border-radius: var(--btn-pill-radius); color: var(--text3);
  cursor: pointer; font-family: var(--font-sans);
  background: transparent; transition: all 0.15s;
  white-space: nowrap;
}
.style-add-btn:hover { color: var(--teal); border-color: rgba(124,215,193,0.4); }

/* Style editor modal */
#style-modal,
#style-detect-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.7); z-index: 600;
  align-items: center; justify-content: center;
}
#style-modal.visible,
#style-detect-modal.visible { display: flex; }
#style-box,
#style-detect-box {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  padding: 22px 24px; width: 440px; max-width: 94vw;
  display: flex; flex-direction: column; gap: 14px;
}
#style-detect-modal { z-index: 610; }
#style-box h3,
#style-detect-box h3 {
  font-family: var(--font-serif); font-size: 15px;
  color: var(--teal); font-weight: 400;
}
#style-detect-box p {
  margin: -4px 0 0;
  color: var(--text3);
  font-size: 12px;
  line-height: 1.7;
  font-family: var(--font-sans);
}
.style-field { display: flex; flex-direction: column; gap: 5px; }
.style-field label {
  font-size: 11px; color: var(--text3);
  font-family: var(--font-sans); letter-spacing: 0.04em;
}
.style-field input, .style-field textarea {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--radius); color: var(--text);
  font-size: 13px; padding: 8px 11px;
  font-family: var(--font-sans); outline: none;
  resize: vertical; line-height: 1.6;
}
.style-field input:focus, .style-field textarea:focus {
  border-color: rgba(124,215,193,0.4);
}
#style-footer,
#style-detect-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.style-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
#style-detect-footer { justify-content: flex-end; }
#style-cancel,
#style-detect-cancel,
#style-detect-open {
  padding: 8px 16px; font-size: 13px;
  background: transparent; border: 1px solid var(--border2);
  border-radius: var(--btn-pill-radius); color: var(--text2);
  cursor: pointer; font-family: var(--font-sans);
}
#style-detect-open {
  color: var(--teal);
  border-color: rgba(124,215,193,0.32);
}
#style-detect-open:hover {
  border-color: rgba(124,215,193,0.55);
}
#style-save,
#style-detect-confirm {
  padding: 8px 20px; font-size: 13px;
  background: var(--teal); border: none;
  border-radius: var(--btn-pill-radius); color: #0a1a15;
  cursor: pointer; font-weight: 500; font-family: var(--font-sans);
}
#style-save:hover,
#style-detect-confirm:hover { filter: brightness(1.1); }
#style-delete {
  margin-left: auto;
  padding: 8px 16px;
  font-size: 13px;
  background: transparent;
  border: 1px solid rgba(201, 110, 110, 0.45);
  border-radius: var(--btn-pill-radius);
  color: #e8a0a0;
  cursor: pointer;
  font-family: var(--font-sans);
}
#style-delete:hover {
  background: rgba(201, 110, 110, 0.12);
  border-color: rgba(201, 110, 110, 0.65);
}
#style-delete[hidden] {
  display: none;
}
#style-detect-confirm:disabled {
  opacity: 0.62;
  cursor: wait;
  filter: none;
}
#active-style-bar {
  padding: 5px 14px 0;
  font-size: 11px; color: var(--teal);
  font-family: var(--font-sans);
  display: none;
}

/* 编辑器视图：对齐落地页深黑 + 卡片面板 */
body[data-app-view="editor"] {
  --editor-page-bg: #050505;
  --editor-panel-bg: #0f0f11;
  --editor-panel-bg-soft: #0f0f11;
  --editor-chat-box-bg: #0a0a0c;
  --editor-panel-border: #27272a;
  --editor-panel-shadow: 0 18px 48px rgba(0,0,0,0.45);
  --editor-control-bg: rgba(255,255,255,0.045);
  --editor-control-bg-hover: rgba(255,255,255,0.075);
  --editor-control-border: rgba(255,255,255,0.09);
  --editor-gold-soft: rgba(213, 178, 114, 0.68);
  --editor-gold-strong: rgba(229, 196, 137, 0.74);
  --editor-text-read: #c7beb3;
  --editor-text-read-soft: #aaa092;
  --editor-text-muted: rgba(143, 133, 119, 0.82);
  --editor-project-entry-size: 40px;
  --editor-float-nav-offset: calc(var(--layout-pad-y) + var(--editor-project-entry-size) + var(--layout-gap));
  --editor-panel-radius: 18px;
  background: var(--editor-page-bg);
}

body[data-app-view="editor"]::after {
  display: none;
}

body[data-app-view="editor"] #left,
body[data-app-view="editor"] #middle,
body[data-app-view="editor"] #right {
  background: var(--editor-panel-bg);
  border: 1px solid var(--editor-panel-border);
  border-radius: var(--editor-panel-radius);
  box-shadow: var(--editor-panel-shadow);
  backdrop-filter: blur(20px) saturate(126%);
  -webkit-backdrop-filter: blur(20px) saturate(126%);
}

body[data-app-view="editor"] #layout {
  margin-top: calc(var(--layout-pad-y) + var(--editor-float-nav-offset));
  margin-right: var(--layout-pad-x);
  margin-bottom: var(--layout-pad-y);
  margin-left: var(--layout-pad-x);
  height: calc(100vh - var(--layout-pad-y) - var(--editor-float-nav-offset) - var(--layout-pad-y));
}

body[data-app-view="editor"] .titlebar-btn:not(.editor-float-capsule),
body[data-app-view="editor"] .toggle-btn:not(.editor-float-capsule):not(.editor-project-entry),
body[data-app-view="editor"] .ltab,
body[data-app-view="editor"] .atab,
body[data-app-view="editor"] #word-badge,
body[data-app-view="editor"] #focus-toggle,
body[data-app-view="editor"] .msg-role,
body[data-app-view="editor"] #agent-desc {
  color: var(--editor-text-muted);
}

body[data-app-view="editor"] .titlebar-btn:not(.editor-float-capsule):hover,
body[data-app-view="editor"] .toggle-btn:not(.editor-float-capsule):not(.editor-project-entry):hover,
body[data-app-view="editor"] #focus-toggle:hover,
body[data-app-view="editor"] .insert-btn:hover,
body[data-app-view="editor"] .qp:hover,
body[data-app-view="editor"] .style-tag:hover {
  color: var(--editor-gold-strong);
  background: rgba(230, 196, 135, 0.075);
  border-color: rgba(230, 196, 135, 0.22);
}

body[data-app-view="editor"] #left,
body[data-app-view="editor"] #right {
  background: var(--editor-panel-bg-soft);
}

body[data-app-view="editor"] #middle {
  background: var(--editor-panel-bg);
}

body[data-app-view="editor"] #editor-header,
body[data-app-view="editor"] #editor-top-bar,
body[data-app-view="editor"] #agent-tabs,
body[data-app-view="editor"] #agent-identity,
body[data-app-view="editor"] #quick-prompts,
body[data-app-view="editor"] #input-area {
  background: transparent;
  border-color: rgba(230, 196, 135, 0.10);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-app-view="editor"] #left-top-glass,
body[data-app-view="editor"] .left-trash-footer,
body[data-app-view="editor"] #right-top-glass,
body[data-app-view="editor"] #right-bottom-glass {
  background: rgba(12, 11, 10, 0.52);
  border-top: none;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

body[data-app-view="editor"] #left-top-glass,
body[data-app-view="editor"] #right-top-glass {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

body[data-app-view="editor"] .left-trash-footer,
body[data-app-view="editor"] #right-bottom-glass {
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.18);
}

body[data-app-view="editor"] .left-trash-footer::before {
  display: none;
}

body[data-app-view="editor"] .ltab:hover .material-symbols-outlined,
body[data-app-view="editor"] .atab[data-agent]:hover .material-symbols-outlined,
body[data-app-view="editor"] .fmt-btn:hover .material-symbols-outlined {
  background: var(--editor-control-bg-hover);
  box-shadow: inset 0 0 0 1px rgba(230, 196, 135, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-app-view="editor"] .ltab.active,
body[data-app-view="editor"] .atab.active,
body[data-app-view="editor"] .outline-item.active-outline,
body[data-app-view="editor"] .kb-card.active-card {
  color: var(--editor-gold-strong);
}

body[data-app-view="editor"] .ltab::after,
body[data-app-view="editor"] .atab::after {
  background: var(--editor-gold-soft);
}

body[data-app-view="editor"] .outline-item:hover,
body[data-app-view="editor"] .outline-item.active-outline,
body[data-app-view="editor"] .kb-card,
body[data-app-view="editor"] .msg.user .msg-bubble,
body[data-app-view="editor"] .qp,
body[data-app-view="editor"] .style-tag,
body[data-app-view="editor"] .style-add-btn {
  background: var(--editor-control-bg);
  border-color: var(--editor-control-border);
}

body[data-app-view="editor"] .style-tag.active-style {
  background: rgba(124, 215, 193, 0.82);
  border-color: rgba(124, 215, 193, 0.95);
  color: #2d2d2d;
}
body[data-app-view="editor"] .style-tag.active-style:hover {
  background: rgba(124, 215, 193, 0.9);
  border-color: rgba(124, 215, 193, 0.95);
  color: #2d2d2d;
}

body[data-app-view="editor"] .kb-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

body[data-app-view="editor"] .kb-card:hover,
body[data-app-view="editor"] .context-target-item:hover {
  background: var(--editor-control-bg-hover);
  border-color: rgba(230, 196, 135, 0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

body[data-app-view="editor"] .kb-card.active-card,
body[data-app-view="editor"] .kb-card.active-card:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.035) 100%),
    rgba(12, 12, 12, 0.94);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 34px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -18px 34px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.055);
  color: var(--text);
}

body[data-app-view="editor"] .fmt-btn,
body[data-app-view="editor"] .editor-format-bar .material-symbols-outlined {
  color: var(--editor-gold-soft);
}

body[data-app-view="editor"] .fmt-btn:hover .material-symbols-outlined {
  color: var(--editor-gold-strong);
}

body[data-app-view="editor"] #chapter-name,
body[data-app-view="editor"] #chapter-name-focus,
body[data-app-view="editor"] #editor h3,
body[data-app-view="editor"] #focus-editor h3,
body[data-app-view="editor"] #editor .ai-rich-title,
body[data-app-view="editor"] #focus-editor .ai-rich-title,
body[data-app-view="editor"] #editor .sel-org-title,
body[data-app-view="editor"] #focus-editor .sel-org-title {
  color: var(--editor-gold-strong);
}

body[data-app-view="editor"] #editor,
body[data-app-view="editor"] #focus-editor {
  color: var(--editor-text-read);
  caret-color: var(--editor-gold-soft);
  text-shadow: none;
}

body[data-app-view="editor"] #editor::before,
body[data-app-view="editor"] #chapter-name::placeholder,
body[data-app-view="editor"] #chapter-name-focus::placeholder,
body[data-app-view="editor"] #chat-input::placeholder {
  color: var(--editor-text-muted);
}

body[data-app-view="editor"] #editor :is(p, li, blockquote, .ai-rich-p, .ai-rich-li, .sel-org-line, .sel-org-item) strong,
body[data-app-view="editor"] #focus-editor :is(p, li, blockquote, .ai-rich-p, .ai-rich-li, .sel-org-line, .sel-org-item) strong,
body[data-app-view="editor"] #editor .ai-rich-section,
body[data-app-view="editor"] #focus-editor .ai-rich-section,
body[data-app-view="editor"] #editor .sel-org-section,
body[data-app-view="editor"] #focus-editor .sel-org-section {
  color: var(--editor-gold-soft);
}

body[data-app-view="editor"] #editor blockquote,
body[data-app-view="editor"] #focus-editor blockquote,
body[data-app-view="editor"] #editor :is(blockquote),
body[data-app-view="editor"] #focus-editor :is(blockquote) {
  color: var(--editor-text-read-soft);
  border-left-color: rgba(230, 196, 135, 0.24);
}

body[data-app-view="editor"] #editor em,
body[data-app-view="editor"] #focus-editor em {
  color: rgba(124, 215, 193, 0.58);
}

body[data-app-view="editor"] .msg-bubble,
body[data-app-view="editor"] #chat-input,
body[data-app-view="editor"] #agent-name {
  color: var(--editor-text-read);
}

body[data-app-view="editor"] .msg.ai .msg-bubble {
  background:
    linear-gradient(180deg, rgba(var(--agent-accent-rgb, 230, 196, 135), 0.055), rgba(18, 16, 14, 0.86));
  border-color: rgba(var(--agent-accent-rgb, 230, 196, 135), 0.22);
}

body[data-app-view="editor"] #chat-box {
  background: var(--editor-chat-box-bg);
  border-color: var(--editor-panel-border, #27272a);
}
body[data-app-view="editor"] #chat-box:focus-within {
  border-color: rgba(230, 196, 135, 0.34);
  box-shadow: 0 0 0 2px rgba(230, 196, 135, 0.055);
}

body[data-app-view="editor"] #chat-skill-chip {
  background: var(--editor-control-bg);
  border-color: rgba(var(--agent-accent-rgb, 230, 196, 135), 0.22);
  color: var(--editor-text-read-soft);
}
body[data-app-view="editor"] #synopsis-fab,
body[data-app-view="editor"] #brainstorm-fab {
  background: rgba(14, 12, 10, 0.9);
  border-color: rgba(230, 196, 135, 0.20);
  color: var(--editor-gold-soft);
  box-shadow: 0 10px 28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.04);
}

body[data-app-view="editor"] #synopsis-fab:hover,
body[data-app-view="editor"] #brainstorm-fab:hover {
  background: rgba(230, 196, 135, 0.10);
  color: var(--editor-gold-strong);
}


.qp {
  font-size: 11px; padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: var(--btn-pill-radius); color: var(--text3);
  cursor: pointer; font-family: var(--font-sans);
  transition: all 0.15s; background: transparent;
  white-space: nowrap;
}
.qp:hover { color: var(--text2); border-color: var(--border2); background: var(--bg3); }

#input-area {
  padding: 10px 14px 14px;
  border-top: none;
  display: block;
  flex-shrink: 0;
}

/* AI 输入区：圆角矩形卡片 */
#chat-box {
  background: #000;
  border: 1px solid rgba(196, 161, 95, 0.45);
  border-radius: var(--panel-radius);
  padding: 10px 10px 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#chat-box:focus-within {
  border-color: rgba(196, 161, 95, 0.75);
  box-shadow: 0 0 0 1px rgba(196, 161, 95, 0.2);
}
#chat-input {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  padding: 0;
  font-family: var(--font-sans);
  resize: none;
  outline: none;
  min-height: 48px;
  max-height: 160px;
  line-height: 1.6;
}
#chat-input::placeholder { color: rgba(153, 143, 129, 0.85); }

#input-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
}

#chat-skill-wrap {
  position: relative;
  min-width: 0;
}

#chat-skill-chip {
  height: 28px;
  max-width: 180px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(var(--agent-accent-rgb, 230, 196, 135), 0.32);
  border-radius: 999px;
  background: rgba(20, 18, 16, 0.78);
  color: var(--text2);
  padding: 0 9px;
  font-size: 11px;
  line-height: 1;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
#chat-skill-chip:hover,
#chat-skill-chip.active,
#chat-skill-chip.resolved {
  color: var(--agent-accent, var(--gold));
  border-color: rgba(var(--agent-accent-rgb, 230, 196, 135), 0.62);
  background: rgba(var(--agent-accent-rgb, 230, 196, 135), 0.10);
}
#chat-skill-chip .material-symbols-outlined {
  font-size: 15px;
}
#chat-skill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chat-skill-menu {
  display: none;
  position: absolute;
  left: 0;
  bottom: 34px;
  z-index: 50;
  width: 210px;
  padding: 5px;
  border: 1px solid rgba(var(--agent-accent-rgb, 230, 196, 135), 0.30);
  border-radius: var(--radius-lg);
  background: rgba(18, 16, 14, 0.96);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}
#chat-skill-menu.visible {
  display: block;
}
.chat-skill-item {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  border-radius: var(--btn-pill-radius);
  background: transparent;
  color: var(--text2);
  padding: 0 8px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
}
.chat-skill-item:hover,
.chat-skill-item.active {
  color: var(--agent-accent, var(--gold));
  background: rgba(var(--agent-accent-rgb, 230, 196, 135), 0.10);
}
.chat-skill-item.chat-skill-route-item,
.chat-skill-item.chat-skill-route-item:hover,
.chat-skill-item.chat-skill-route-item.active {
  color: #fff;
  font-weight: 700;
}
.chat-skill-item.chat-skill-route-item:hover {
  background: rgba(255, 255, 255, 0.075);
}
.chat-skill-item.chat-skill-route-item.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.09));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.chat-skill-route-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-skill-route-hint {
  margin-left: 2px;
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
}
.chat-skill-item .material-symbols-outlined {
  font-size: 15px;
}
.chat-skill-menu-divider {
  height: 1px;
  margin: 5px 2px;
  background: rgba(var(--agent-accent-rgb, 230, 196, 135), 0.18);
}
.chat-skill-manage-item {
  color: var(--teal);
}

#chat-submit-wrap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

#userPoints {
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#userPoints:hover {
  color: var(--agent-accent, var(--gold));
}
#userPoints:focus-visible {
  outline: 1px solid rgba(var(--agent-accent-rgb, 230, 196, 135), 0.52);
  outline-offset: 3px;
  border-radius: 999px;
}

.chat-points-icon {
  color: var(--agent-accent, var(--gold));
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 0 7px rgba(var(--agent-accent-rgb, 230, 196, 135), 0.34);
}

#send-btn {
  background: var(--gold);
  border: none;
  border-radius: 50%;
  color: #1a1510;
  padding: 0;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 1px 6px rgba(196, 161, 95, 0.35);
}
#send-btn:hover {
  background: var(--gold2);
  box-shadow: 0 2px 10px rgba(196, 161, 95, 0.55);
}
#send-btn.generating {
  background: #d66b5d;
  color: #fff7f2;
  box-shadow: 0 1px 8px rgba(214, 107, 93, 0.38);
}
#send-btn.generating:hover {
  background: #e07869;
  box-shadow: 0 2px 12px rgba(214, 107, 93, 0.56);
}
#send-btn:active {
  transform: scale(0.92);
}

.custom-skill-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 760;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.custom-skill-modal.visible {
  display: flex;
}
.custom-skill-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.custom-skill-panel {
  position: relative;
  width: min(920px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(230, 196, 135, 0.20);
  border-radius: var(--panel-radius);
  background: rgba(15, 14, 13, 0.96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.72);
  overflow: hidden;
}
.custom-skill-guide-panel {
  width: min(680px, calc(100vw - 32px));
}
.custom-skill-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(230, 196, 135, 0.12);
}
.custom-skill-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(230, 196, 135, 0.10);
}
.custom-skill-tab {
  height: 30px;
  min-width: 70px;
  border: 1px solid rgba(230, 196, 135, 0.18);
  border-radius: var(--btn-pill-radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font-sans);
}
.custom-skill-tab.active {
  border-color: rgba(230, 196, 135, 0.48);
  background: rgba(230, 196, 135, 0.14);
  color: var(--gold);
}
.custom-skill-hidden {
  display: none !important;
}
.custom-skill-head h3 {
  margin: 0;
  color: var(--gold);
  font-size: 18px;
  font-family: var(--font-serif);
  font-weight: 600;
}
.custom-skill-head p {
  margin: 5px 0 0;
  color: var(--text3);
  font-size: 12px;
}
.custom-skill-close {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(230, 196, 135, 0.18);
  border-radius: 50%;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
}
.custom-skill-close:hover {
  color: var(--gold);
  border-color: rgba(230, 196, 135, 0.45);
}
.custom-skill-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  overflow: hidden;
}
.custom-skill-guide-editor {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
  overflow: auto;
}
.custom-skill-sidebar {
  min-height: 0;
  border-right: 1px solid rgba(230, 196, 135, 0.12);
  background: rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
}
.custom-skill-sidebar-head {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  color: var(--text2);
  font-size: 12px;
  border-bottom: 1px solid rgba(230, 196, 135, 0.10);
}
#custom-skill-new {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(124, 215, 193, 0.35);
  border-radius: 50%;
  background: rgba(22, 60, 50, 0.28);
  color: var(--teal);
  cursor: pointer;
}
#custom-skill-new .material-symbols-outlined {
  font-size: 18px;
}
.custom-skill-list {
  min-height: 0;
  overflow: auto;
  padding: 8px;
}
.custom-skill-empty {
  color: var(--text3);
  font-size: 12px;
  padding: 14px 8px;
}
.custom-skill-row {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: none;
  border-radius: var(--btn-pill-radius);
  background: transparent;
  color: var(--text2);
  padding: 8px 10px;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
}
.custom-skill-row:hover,
.custom-skill-row.active {
  background: rgba(230, 196, 135, 0.10);
  color: var(--gold);
}
.custom-skill-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.custom-skill-row-main strong,
.custom-skill-row-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-skill-row-main strong {
  font-size: 13px;
  font-weight: 500;
}
.custom-skill-row-main span,
.custom-skill-row-state {
  color: var(--text3);
  font-size: 11px;
}
.custom-skill-row-state {
  flex-shrink: 0;
}
.custom-skill-editor {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow: auto;
}
.custom-skill-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.custom-skill-editor-switches {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.custom-skill-editor-head h4 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}
.custom-skill-switch,
.custom-skill-auto-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text2);
  font-size: 12px;
}
.custom-skill-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 12px;
}
.custom-skill-grid label,
.custom-skill-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text3);
  font-size: 12px;
}
.custom-skill-field.custom-skill-auto-row {
  flex-direction: row;
  align-items: center;
  color: var(--text2);
}
.custom-skill-grid input,
.custom-skill-grid .fs-picker-button,
.custom-skill-field textarea {
  width: 100%;
  border: 1px solid rgba(230, 196, 135, 0.18);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.30);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
}
.custom-skill-grid input,
.custom-skill-grid .fs-picker-button {
  height: 34px;
  padding: 0 10px;
}
.custom-skill-grid .fs-picker-button {
  width: 100%;
}
.custom-skill-field textarea {
  min-height: 54px;
  padding: 9px 10px;
  resize: vertical;
  line-height: 1.55;
}
.custom-skill-prompt-field textarea {
  min-height: 240px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.custom-skill-guide-editor .custom-skill-prompt-field textarea {
  min-height: 190px;
}
.custom-skill-prompt-note {
  color: var(--text3);
  font-size: 11px;
  line-height: 1.5;
}
.custom-skill-context-field {
  gap: 8px;
}
.custom-skill-context-note {
  color: var(--text3);
  font-size: 11px;
  line-height: 1.5;
}
.custom-skill-context-options {
  margin-top: 4px;
}
.custom-skill-grid input:focus,
.custom-skill-grid .fs-picker-button:focus,
.custom-skill-field textarea:focus {
  border-color: rgba(230, 196, 135, 0.55);
  box-shadow: 0 0 0 1px rgba(230, 196, 135, 0.12);
}
.custom-skill-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.custom-skill-guide-editor .custom-skill-actions {
  justify-content: flex-end;
}
.custom-skill-action-spacer {
  flex: 1;
}
.custom-skill-btn {
  min-width: 72px;
  height: 34px;
  border-radius: var(--btn-pill-radius);
  border: 1px solid rgba(230, 196, 135, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font-sans);
}
.custom-skill-btn--primary {
  border-color: rgba(230, 196, 135, 0.55);
  background: rgba(230, 196, 135, 0.18);
  color: var(--gold);
}
.custom-skill-btn--danger {
  border-color: rgba(255, 180, 171, 0.35);
  color: var(--red);
}
.custom-skill-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
/* scrollbar globals */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* 编辑器专注模式：隐藏顶栏、知识库、AI 侧栏、作品侧栏，布局铺满视口 */
body.editor-focus-full {
  background: #000;
}
body.editor-focus-full #titlebar,
body.editor-focus-full #left,
body.editor-focus-full #right,
body.editor-focus-full #works-modal {
  display: none !important;
}
body.editor-focus-full #layout {
  margin: 0;
  height: 100vh;
  min-height: 100vh;
  gap: 0;
  background: #000;
}
body.editor-focus-full #middle {
  border-radius: 0;
  border-left: none;
  border-right: none;
  background: #000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
body.editor-focus-full #middle.panel-texture::before {
  opacity: 0;
}
body.editor-focus-full #focus-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  border-radius: 0;
  padding: 0;
  background: #000;
}
body.editor-focus-full #focus-scroll-inner {
  padding: 8px clamp(24px, 8vw, 120px) clamp(32px, 6vh, 72px);
}
body.editor-focus-full #exit-focus {
  z-index: 210;
}
body.editor-focus-full #sel-toolbar,
body.editor-focus-full .sel-context-menu {
  z-index: 300;
}

/* 查找与替换（格式栏放大镜） */
.find-replace-panel {
  display: none;
  position: fixed;
  z-index: 260;
  min-width: 300px;
  max-width: min(420px, calc(100vw - 16px));
  padding: 12px 14px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  font-family: var(--font-sans);
}
.find-replace-panel.visible {
  display: block;
}
.find-replace-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.find-replace-row label {
  flex: 0 0 52px;
  font-size: 12px;
  color: var(--text3);
}
.find-replace-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  outline: none;
}
.find-replace-input:focus {
  border-color: rgba(230, 196, 135, 0.45);
}
.find-replace-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 10px;
  cursor: pointer;
  user-select: none;
}
.find-replace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.find-replace-btn {
  padding: 5px 10px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: var(--btn-pill-radius);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.find-replace-btn:hover {
  color: var(--gold);
  border-color: rgba(230, 196, 135, 0.45);
}
.find-replace-btn--primary {
  border-color: rgba(124, 215, 193, 0.35);
  color: var(--teal);
}
.find-replace-btn--primary:hover {
  border-color: rgba(124, 215, 193, 0.55);
  color: #9ee8d4;
}

/* ═══════════════════════════════════
   动画关键帧定义
   ═══════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes scaleInBounce {
  from { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.03); }
  to { transform: scale(1); opacity: 1; }
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes breathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* 减少动画支持 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* 模态框遮罩层 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    padding: 24px;
    background: radial-gradient(circle at top, rgba(255, 233, 203, 0.2), transparent 35%), rgba(32, 21, 13, 0.52);
    backdrop-filter: blur(18px) saturate(120%);
}
.modal-content {
    background:
      radial-gradient(circle at top left, rgba(255, 238, 212, 0.78), transparent 36%),
      linear-gradient(180deg, rgba(255, 250, 241, 0.95), rgba(246, 236, 220, 0.92));
    color: #4a3720;
    margin: auto;
    padding: 30px 28px 18px;
    border-radius: 28px;
    width: min(100%, 470px);
    position: relative;
    border: 1px solid rgba(123, 94, 50, 0.12);
    box-shadow: 0 28px 60px rgba(60, 37, 13, 0.18);
}
.auth-modal-content {
    max-height: calc(100vh - 48px);
    overflow: auto;
}
.close {
    position: absolute;
    right: 16px;
    top: 12px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(93, 70, 40, 0.64);
    background: rgba(255,255,255,0.46);
    border: 0;
    font-size: 22px;
    cursor: pointer;
}
.close:hover {
    color: #5a4325;
    background: rgba(255,255,255,0.8);
}
.modal-content h3 {
    font-family: var(--font-serif);
    font-size: 34px;
    line-height: 1;
    color: #392817;
    margin-bottom: 10px;
}
.modal-content h3::after {
    content: "你负责注入灵魂，杂活交给 AI。";
    display: block;
    margin-top: 12px;
    color: #8b7659;
    font-size: 15px;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.5;
}
.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 5px;
    margin: 18px 0 18px;
    border-radius: 18px;
    background: rgba(130, 99, 56, 0.09);
    border: 1px solid rgba(112, 89, 53, 0.12);
}
.auth-tabs--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.auth-tab {
    appearance: none;
    border: none;
    border-radius: 14px;
    min-height: 42px;
    padding: 9px 10px;
    color: #735d3f;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.auth-tab.active {
    color: #fffdf8;
    background: linear-gradient(135deg, #18ae62 0%, #089759 100%);
    box-shadow: 0 12px 24px rgba(13, 143, 91, 0.14);
}
.auth-panel {
    margin-top: 4px;
}
.auth-panel-note {
    margin-bottom: 14px;
    padding: 10px 12px;
    color: #6a573c;
    background: rgba(43, 175, 207, 0.09);
    border: 1px solid rgba(43, 175, 207, 0.16);
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.55;
}
.wechat-login-qr-wrap {
    position: relative;
    width: min(100%, 300px);
    height: 260px;
    min-height: 260px;
    margin: 60px auto 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wechat-login-qr {
    width: 100%;
    height: 260px;
    min-height: 260px;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #6f5b3f;
    text-align: center;
    overflow: hidden;
}
.wechat-login-iframe-crop {
    width: 260px;
    height: 260px;
    max-width: 100%;
    overflow: hidden;
}
.wechat-login-iframe-crop iframe {
    width: 440px;
    height: 440px;
    border: 0;
    background: transparent;
    transform: scale(0.59) translate(0, -42px);
    transform-origin: top left;
    display: block;
    overflow: hidden;
}
.wechat-login-qr .material-symbols-outlined {
    font-size: 64px;
    color: #089759;
}
.wechat-login-qr p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}
.auth-secondary-btn {
    min-height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}
.auth-secondary-btn {
    border: 1px solid rgba(8, 151, 89, 0.16);
    background: rgba(255, 255, 255, 0.68);
    color: #087c50;
    cursor: pointer;
}
.auth-form .form-group {
    margin-bottom: 16px;
}
.auth-form label {
    display: block;
    color: #7c684e;
    font-size: 13px;
    margin-bottom: 7px;
}
.auth-form input {
    width: 100%;
    padding: 13px 14px;
    margin-top: 0;
    border: 1px solid rgba(112, 89, 53, 0.14);
    border-radius: 16px;
    background: rgba(255,255,255,0.72);
    color: #44311b;
    font-size: 15px;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.auth-form input:focus {
    border-color: rgba(51, 176, 202, 0.42);
    box-shadow: 0 0 0 4px rgba(51, 176, 202, 0.08);
}
.auth-form button {
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(135deg, #18ae62 0%, #089759 100%);
    color: #fffdf8;
    border: none;
    border-radius: var(--btn-pill-radius);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 16px 30px rgba(13, 143, 91, 0.18);
}
.auth-form button:hover {
    transform: translateY(-1px);
}
.sms-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 10px;
    align-items: center;
}
.auth-form .sms-code-row input {
    min-width: 0;
}
.auth-form .sms-code-row .auth-secondary-btn {
    width: auto;
    height: 48px;
    padding: 0 12px;
    border: 1px solid rgba(8, 151, 89, 0.16);
    background: rgba(255, 255, 255, 0.68);
    color: #087c50;
    box-shadow: none;
    font-size: 13px;
}
.auth-form .sms-code-row .auth-secondary-btn:disabled {
    cursor: not-allowed;
    color: #927d61;
    background: rgba(124, 104, 78, 0.1);
    transform: none;
}

.error-msg {
    color: #9f2e49;
    background: rgba(207, 94, 127, 0.08);
    border: 1px solid rgba(169, 43, 75, 0.12);
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 13px;
    margin-top: 8px;
    display: none;
}

.aliyun-captcha-element {
    position: fixed;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.aliyun-captcha-trigger {
    position: fixed;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.auth-agreement {
    text-align: center;
    margin-top: 10px;
    color: #856f53;
    font-size: 13px;
    line-height: 1.6;
}
.auth-policy-link {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: #2bafcf;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}
.auth-policy-link:hover {
    color: #167ca1;
    text-decoration: underline;
}
.auth-policy-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.auth-policy-modal.visible {
    display: flex;
}
.auth-policy-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 10, 8, 0.58);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.auth-policy-panel {
    position: relative;
    width: min(100%, 760px);
    max-height: min(780px, calc(100vh - 48px));
    background: #fffaf1;
    color: #4a3720;
    border-radius: 22px;
    border: 1px solid rgba(123, 94, 50, 0.14);
    box-shadow: 0 30px 70px rgba(36, 23, 10, 0.28);
    overflow: hidden;
}
.auth-policy-head {
    min-height: 62px;
    padding: 0 18px 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(112, 89, 53, 0.12);
}
.auth-policy-head h3 {
    margin: 0;
    font-size: 22px;
    color: #392817;
}
.auth-policy-close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background: rgba(112, 89, 53, 0.08);
    color: rgba(75, 55, 32, 0.72);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}
.auth-policy-body {
    max-height: calc(min(780px, 100vh - 48px) - 62px);
    overflow: auto;
    padding: 22px 24px 24px;
    line-height: 1.75;
}
.auth-policy-body .policy-page__card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
}
.auth-policy-body .policy-page__card h1,
.auth-policy-body .policy-page__card h2,
.auth-policy-body .policy-page__card h3 {
    color: #392817;
}
.auth-policy-body .policy-page__meta {
    color: #856f53;
}
.auth-policy-fallback {
    color: #6a573c;
}
.auth-policy-fallback a {
    color: #2b77cf;
    font-weight: 600;
}

/* 我的作品：与 .titlebar-btn 同色系、同悬停气质 */
.toggle-btn {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: rgba(232, 224, 208, 0.88);
    line-height: 1;
    cursor: pointer;
    margin-right: 6px;
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    -webkit-app-region: no-drag;
}
.toggle-btn-icon {
    display: block;
    flex-shrink: 0;
    opacity: 0.95;
}
.toggle-btn:hover {
    color: var(--gold);
    background: rgba(230, 196, 135, 0.14);
    border-color: rgba(230, 196, 135, 0.22);
}
.toggle-btn:active {
    transform: scale(0.98);
}
.toggle-btn:focus-visible {
    outline: 1px solid rgba(230, 196, 135, 0.5);
    outline-offset: 2px;
}
/* 我的作品弹窗（对齐 #settings-modal / #settings-box） */
#works-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    z-index: 800;
    align-items: center;
    justify-content: center;
}
#works-modal.visible {
    display: flex;
}
.project-form-modal {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,0.72);
    z-index: 900;
}
.project-form-modal.visible {
    display: flex;
}
.project-form-dialog {
    width: min(100%, 680px);
    padding: 28px 28px 24px;
    border-radius: 28px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(230, 196, 135, 0.18);
    box-shadow: var(--glass-shadow);
}
.project-form-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.project-form-dialog__kicker {
    color: var(--text3);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.project-form-dialog h3 {
    margin-top: 8px;
    color: var(--gold);
    font-family: var(--font-serif);
    font-size: clamp(34px, 4vw, 46px);
    line-height: 1.08;
}
.project-form-dialog__subtitle {
    margin-top: 12px;
    color: var(--text2);
    font-size: 15px;
    line-height: 1.7;
    max-width: 560px;
}
.project-form-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(230, 196, 135, 0.14);
    background: rgba(255,255,255,0.03);
    color: var(--text2);
    cursor: pointer;
}
.project-form-dialog__close:hover {
    color: var(--gold);
    border-color: rgba(230, 196, 135, 0.24);
    background: rgba(230, 196, 135, 0.08);
}
.project-form {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}
.project-form__field {
    display: grid;
    gap: 8px;
}
.project-form__label {
    color: var(--text3);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.project-form__input,
.project-form__textarea {
    width: 100%;
    border-radius: 18px;
    border: 1px solid rgba(230, 196, 135, 0.14);
    background: rgba(10, 10, 10, 0.48);
    color: var(--text);
    padding: 14px 16px;
    font: inherit;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.project-form__input {
    font-size: 18px;
    font-family: var(--font-serif);
}
.project-form__textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.75;
}
.project-form__input:focus,
.project-form__textarea:focus {
    border-color: rgba(230, 196, 135, 0.3);
    box-shadow: 0 0 0 3px rgba(230, 196, 135, 0.08);
    background: rgba(16, 16, 15, 0.66);
}
.project-form__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}
.project-form__ghost,
.project-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 12px 18px;
    cursor: pointer;
    font-weight: 600;
    transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.project-form__ghost {
    border: 1px solid rgba(230, 196, 135, 0.14);
    background: rgba(255,255,255,0.03);
    color: var(--text2);
}
.project-form__ghost:hover {
    color: var(--gold);
    background: rgba(230, 196, 135, 0.08);
    border-color: rgba(230, 196, 135, 0.24);
}
.project-form__submit {
    border: 1px solid rgba(230, 196, 135, 0.28);
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
    color: #15120f;
    box-shadow: 0 10px 28px rgba(230, 196, 135, 0.16);
}
.project-form__submit:hover {
    transform: translateY(-1px);
}
#works-box {
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg);
    width: 400px;
    max-width: 94vw;
    max-height: 86vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#works-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: none;
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--text);
    font-weight: 400;
    flex-shrink: 0;
}
#works-title-text {
    flex: 1;
}
#works-close {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text3);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    border-radius: var(--btn-circle-radius);
    transition: color 0.15s;
}
#works-close:hover {
    color: var(--text);
}
#works-sidebar-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px 20px;
}
#works-list {
    margin-bottom: 20px;
}
.work-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    cursor: pointer;
}
.work-card h4 {
    margin: 0 0 6px;
    color: var(--gold);
}
.work-card p {
    font-size: 12px;
    color: var(--text3);
    margin: 0;
}
.create-work-btn {
    width: 100%;
    padding: 8px;
    background: var(--gold);
    border: none;
    border-radius: var(--btn-pill-radius);
    cursor: pointer;
    font-weight: bold;
}
.create-work-btn:hover {
    background: var(--gold2);
}

/* 左侧栏过渡效果 */
#left {
    width: 260px;               /* 正常宽度 */
    transition: width 0.2s ease-out;
    overflow-x: hidden;         /* 避免内容溢出 */
}
#left.collapsed {
    width: 0;
    min-width: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    overflow: hidden;
}

/* 当侧边栏折叠时，隐藏内部内容 */
#left.collapsed #left-tabs,
#left.collapsed #left-top-glass,
#left.collapsed #left-tab-label,
#left.collapsed #left-content,
#left.collapsed #left-trash-footer,
#left.collapsed #project-sidebar {
    display: none;
}

/* Unified rounded language: text buttons are capsules; square icon buttons remain circular by dimensions. */
button {
    border-radius: var(--btn-pill-radius);
}

#left,
#middle,
#right {
    border-radius: var(--editor-column-radius);
}

#context-settings-box,
#works-box,
#settings-box,
.project-form-dialog {
    border-radius: var(--modal-radius);
}

.account-settings-panel,
.kb-trash-modal-panel,
.novel-title-modal-panel,
.tracking-status-modal__panel,
.selection-instruction-panel,
#style-box,
#style-detect-box,
.custom-skill-panel,
.brainstorm-panel {
    border-radius: var(--dialog-radius);
}

/* ── 拆书助手 ───────────────────────────────────────────────────────────── */
.project-hub-book-breakdown {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  z-index: 42;
  min-width: 236px;
  height: 58px;
  padding: 0 16px 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  transform: translateX(-50%);
  border: 1px solid rgba(230, 196, 135, 0.34);
  background:
    linear-gradient(120deg, rgba(230, 196, 135, 0.12), rgba(124, 215, 193, 0.075)),
    rgba(16, 15, 14, 0.88);
  color: var(--gold2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48), 0 0 26px rgba(230, 196, 135, 0.08), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur-normal) var(--ease-spring), border-color var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out), background var(--dur-normal) var(--ease-out);
}
.project-hub-book-breakdown::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.12) 45%, transparent 68%);
  transform: translateX(-120%);
  transition: transform 680ms var(--ease-out);
  pointer-events: none;
}
.project-hub-book-breakdown:hover {
  transform: translateX(-50%) translateY(-4px);
  border-color: rgba(230, 196, 135, 0.64);
  background:
    linear-gradient(120deg, rgba(230, 196, 135, 0.18), rgba(124, 215, 193, 0.11)),
    rgba(20, 19, 18, 0.94);
  box-shadow: 0 22px 52px rgba(0,0,0,.56), 0 0 32px rgba(230,196,135,.14), 0 0 22px rgba(124,215,193,.07);
}
.project-hub-book-breakdown:hover::before { transform: translateX(120%); }
.project-hub-book-breakdown:active { transform: translateX(-50%) translateY(-1px) scale(.985); }
.project-hub-book-breakdown:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.project-hub-book-breakdown__icon { width: 31px; height: 31px; flex: 0 0 auto; filter: drop-shadow(0 0 8px rgba(230,196,135,.28)); }
.project-hub-book-breakdown__copy { min-width: 0; display: grid; text-align: left; line-height: 1.15; }
.project-hub-book-breakdown__copy strong { color: var(--gold2); font-family: var(--font-serif); font-size: 15px; letter-spacing: .08em; }
.project-hub-book-breakdown__copy small { margin-top: 4px; color: var(--text3); font-size: 10px; letter-spacing: .04em; }
.project-hub-book-breakdown__arrow { margin-left: auto; color: var(--teal); font-size: 19px; transition: transform var(--dur-fast) var(--ease-out); }
.project-hub-book-breakdown:hover .project-hub-book-breakdown__arrow { transform: translateX(3px); }

body[data-app-view="project-hub"] .toast-message {
  bottom: calc(max(24px, env(safe-area-inset-bottom, 0px)) + 70px) !important;
}

.book-breakdown-screen {
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 7% 0%, rgba(230,196,135,.115), transparent 26%),
    radial-gradient(circle at 95% 100%, rgba(124,215,193,.09), transparent 30%),
    linear-gradient(155deg, #0b0a0a 0%, #080808 55%, #090a09 100%);
}
.book-breakdown-screen [hidden] { display: none !important; }
.book-breakdown-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .2;
  background-image:
    linear-gradient(rgba(230,196,135,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,196,135,.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}
.book-breakdown-ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.book-breakdown-ambient span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); opacity: .2; animation: bookBreakdownFloat 8s ease-in-out infinite; }
.book-breakdown-ambient span:nth-child(1) { left: 12%; top: 25%; }
.book-breakdown-ambient span:nth-child(2) { right: 18%; top: 15%; width: 3px; height: 3px; animation-delay: -3s; }
.book-breakdown-ambient span:nth-child(3) { right: 8%; bottom: 18%; background: var(--teal); box-shadow: 0 0 14px var(--teal); animation-delay: -5s; }
@keyframes bookBreakdownFloat { 0%,100% { transform: translate3d(0,0,0); opacity:.16; } 50% { transform: translate3d(8px,-18px,0); opacity:.5; } }

.book-breakdown-shell {
  width: 100%;
  height: 100%;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.book-breakdown-topbar {
  min-height: 66px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  border: 1px solid rgba(230,196,135,.18);
  border-radius: 21px;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.018)), rgba(16,15,14,.68);
  box-shadow: 0 16px 38px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}
.book-breakdown-topbar__left { min-width: 0; display: flex; align-items: center; gap: 12px; }
.book-breakdown-brand { min-width: 0; display: flex; align-items: center; gap: 11px; }
.book-breakdown-brand__mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: #14120e; background: linear-gradient(145deg, var(--gold2), #b8873c); box-shadow: 0 8px 20px rgba(230,196,135,.18), inset 0 1px 0 rgba(255,255,255,.46); }
.book-breakdown-brand__mark .material-symbols-outlined { font-size: 23px; }
.book-breakdown-kicker { color: var(--teal); font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.book-breakdown-brand h1 { margin-top: 1px; color: var(--text); font-family: var(--font-serif); font-size: 20px; font-weight: 700; letter-spacing: .08em; }
.book-breakdown-topbar__meta { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; color: var(--text3); font-size: 11px; }
.book-breakdown-topbar__meta .material-symbols-outlined { color: var(--teal); font-size: 14px; }
.book-breakdown-back-btn { justify-self: end; min-height: 40px; padding: 0 15px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.045); color: var(--text2); font: 500 12px var(--font-sans); cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.book-breakdown-back-btn:hover { color: var(--gold2); border-color: rgba(230,196,135,.35); transform: translateY(-1px); }
.book-breakdown-back-btn .material-symbols-outlined { font-size: 17px; }
.book-breakdown-icon-btn { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; background: rgba(255,255,255,.04); color: var(--text2); cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.book-breakdown-icon-btn:hover { color: var(--gold2); border-color: rgba(230,196,135,.34); background: rgba(230,196,135,.08); transform: translateY(-1px); }
.book-breakdown-icon-btn .material-symbols-outlined { font-size: 20px; }
.book-breakdown-workspace { position: relative; flex: 1; min-height: 0; min-width: 0; }
.book-breakdown-panels { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(320px,.9fr) minmax(420px,1.1fr); gap: 12px; }
.book-breakdown-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(230,196,135,.16);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.015)), rgba(15,14,13,.7);
  box-shadow: 0 20px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.052);
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  animation: bookBreakdownPanelIn 520ms var(--ease-out) both;
}
.book-breakdown-report-panel { animation-delay: 80ms; }
@keyframes bookBreakdownPanelIn { from { opacity:0; transform:translateY(12px) scale(.992); } to { opacity:1; transform:none; } }
.book-breakdown-panel__head { min-height: 68px; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.065); background: rgba(255,255,255,.018); }
.book-breakdown-panel__head > div:first-child { min-width:0; display:flex; align-items:center; gap:11px; }
.book-breakdown-panel__index { width: 34px; height: 34px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(230,196,135,.22); border-radius:11px; color:var(--gold); background:rgba(230,196,135,.055); font:500 10px var(--font-mono); }
.book-breakdown-panel__head h2 { color:var(--text); font:700 15px var(--font-serif); letter-spacing:.06em; }
.book-breakdown-panel__head p { max-width:320px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text3); font-size:10px; }
.book-breakdown-primary-btn,
.book-breakdown-secondary-btn,
.book-breakdown-ghost-btn { min-height:38px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid transparent; font:600 11px var(--font-sans); letter-spacing:.03em; cursor:pointer; transition:transform var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); }
.book-breakdown-primary-btn { border-color:rgba(230,196,135,.56); color:#17130e; background:linear-gradient(145deg,var(--gold2),#c08b40); box-shadow:0 8px 22px rgba(230,196,135,.13), inset 0 1px 0 rgba(255,255,255,.38); }
.book-breakdown-primary-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 12px 28px rgba(230,196,135,.21); }
.book-breakdown-secondary-btn { border-color:rgba(230,196,135,.2); color:var(--gold2); background:rgba(230,196,135,.055); }
.book-breakdown-secondary-btn:hover:not(:disabled) { transform:translateY(-1px); border-color:rgba(230,196,135,.42); background:rgba(230,196,135,.09); }
.book-breakdown-ghost-btn { border-color:rgba(255,255,255,.09); color:var(--text2); background:rgba(255,255,255,.03); }
.book-breakdown-primary-btn:disabled,
.book-breakdown-secondary-btn:disabled,
.book-breakdown-ghost-btn:disabled { opacity:.38; cursor:not-allowed; box-shadow:none; }
.book-breakdown-primary-btn .material-symbols-outlined,
.book-breakdown-secondary-btn .material-symbols-outlined { font-size:17px; }
.book-breakdown-source-wrap { position:relative; flex:1; min-height:0; }
#book-breakdown-source { width:100%; height:100%; min-height:0; padding:24px 26px 32px; resize:none; border:0; outline:0; background:transparent; color:#d9d2c7; caret-color:var(--gold2); font:400 14px/1.92 var(--font-serif); letter-spacing:.025em; scrollbar-color:rgba(230,196,135,.24) transparent; }
#book-breakdown-source::placeholder { color:rgba(153,143,129,.54); }
.book-breakdown-source-panel:not(.has-source):not(.is-paste-ready) #book-breakdown-source { opacity:.12; }
.book-breakdown-empty { text-align:center; }
.book-breakdown-source-empty { position:absolute; inset:0; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 44%,rgba(230,196,135,.065),transparent 42%); transition:opacity var(--dur-normal), transform var(--dur-normal), visibility var(--dur-normal); }
.book-breakdown-source-panel.has-source .book-breakdown-source-empty,
.book-breakdown-source-panel.is-paste-ready .book-breakdown-source-empty { opacity:0; visibility:hidden; transform:scale(.98); pointer-events:none; }
.book-breakdown-empty__orb { width:72px; height:72px; margin-bottom:16px; display:grid; place-items:center; border:1px solid rgba(230,196,135,.25); border-radius:24px; color:var(--gold2); background:linear-gradient(145deg,rgba(230,196,135,.12),rgba(255,255,255,.025)); box-shadow:0 18px 42px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08); transform:rotate(-3deg); }
.book-breakdown-empty__orb .material-symbols-outlined { font-size:31px; }
.book-breakdown-empty__orb--report { color:var(--teal); border-color:rgba(124,215,193,.23); background:linear-gradient(145deg,rgba(124,215,193,.11),rgba(255,255,255,.025)); transform:rotate(3deg); }
.book-breakdown-empty h3 { margin-top:7px; color:var(--text); font:700 19px var(--font-serif); letter-spacing:.04em; }
.book-breakdown-empty p { max-width:380px; margin:9px auto 0; color:var(--text3); font-size:11px; line-height:1.8; }
.book-breakdown-empty__actions { margin-top:18px; display:flex; justify-content:center; gap:8px; }
.book-breakdown-panel__footer { min-height:52px; padding:8px 15px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.085); }
.book-breakdown-source-stats { display:flex; align-items:center; gap:10px; color:var(--text3); font:500 10px var(--font-mono); }
.book-breakdown-source-stats span + span { padding-left:10px; border-left:1px solid rgba(255,255,255,.08); }
.book-breakdown-source-panel.is-over-limit #book-breakdown-word-count,
.book-breakdown-source-panel.is-over-limit #book-breakdown-source-status { color:var(--red); }
.book-breakdown-privacy-note { color:rgba(153,143,129,.62); font-size:9px; text-align:right; }
.book-breakdown-report-actions { display:flex; align-items:center; gap:7px; }
.book-breakdown-cancel-btn { color:var(--red); border-color:rgba(255,180,171,.25); }
.book-breakdown-report-body { position:relative; flex:1; min-height:0; overflow:auto; scrollbar-color:rgba(124,215,193,.22) transparent; }
.book-breakdown-report-empty { min-height:100%; padding:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.book-breakdown-report-empty > .book-breakdown-primary-btn { margin-top:19px; }
.book-breakdown-progress { min-height:100%; padding:34px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.book-breakdown-progress[hidden],
.book-breakdown-report[hidden] { display:none !important; }
.book-breakdown-progress__visual { position:relative; width:104px; height:78px; margin-bottom:20px; }
.book-breakdown-progress__book { position:absolute; inset:8px 9px; display:flex; gap:4px; align-items:stretch; perspective:260px; }
.book-breakdown-progress__book span { flex:1; border:1px solid rgba(230,196,135,.28); border-radius:8px 3px 3px 8px; background:linear-gradient(135deg,rgba(230,196,135,.18),rgba(255,255,255,.025)); transform-origin:right center; animation:bookBreakdownPage 1.8s ease-in-out infinite; }
.book-breakdown-progress__book span:nth-child(2) { animation-delay:-1.15s; }
.book-breakdown-progress__book span:nth-child(3) { animation-delay:-.55s; }
@keyframes bookBreakdownPage { 0%,100%{transform:rotateY(0);opacity:.55} 45%{transform:rotateY(-32deg);opacity:1} }
.book-breakdown-progress__scan { position:absolute; left:5px; right:5px; top:12px; height:2px; background:linear-gradient(90deg,transparent,var(--teal),transparent); box-shadow:0 0 14px rgba(124,215,193,.75); animation:bookBreakdownScan 1.7s ease-in-out infinite; }
@keyframes bookBreakdownScan { 0%,100%{transform:translateY(0);opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{transform:translateY(54px);opacity:0} }
.book-breakdown-progress h3 { margin-top:7px; color:var(--text); font:700 18px var(--font-serif); }
.book-breakdown-progress p { margin-top:8px; color:var(--text3); font-size:11px; }
.book-breakdown-progress__track { width:min(340px,80%); height:5px; margin-top:22px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.06); }
.book-breakdown-progress__track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold),var(--teal)); box-shadow:0 0 12px rgba(124,215,193,.35); transition:width 420ms var(--ease-out); }
.book-breakdown-progress > strong { margin-top:9px; color:var(--gold2); font:500 10px var(--font-mono); }
.book-breakdown-report { max-width:880px; margin:0 auto; padding:32px clamp(24px,4vw,52px) 58px; color:var(--text2); animation:bookBreakdownReportReveal 520ms var(--ease-out) both; }
@keyframes bookBreakdownReportReveal { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.book-report-cover { padding:6px 0 28px; border-bottom:1px solid rgba(230,196,135,.16); }
.book-report-cover__eyebrow { display:flex; align-items:center; gap:8px; color:var(--teal); font:500 9px var(--font-mono); letter-spacing:.16em; }
.book-report-cover__eyebrow::before { content:""; width:24px; height:1px; background:var(--teal); }
.book-report-cover h2 { margin-top:13px; color:var(--text); font:800 clamp(25px,3vw,38px)/1.3 var(--font-serif); letter-spacing:.035em; }
.book-report-cover p { margin-top:9px; color:var(--text3); font-size:11px; }
.book-report-section { padding:29px 0 3px; }
.book-report-section + .book-report-section { margin-top:9px; border-top:1px solid rgba(255,255,255,.055); }
.book-report-section__head { margin-bottom:17px; display:flex; align-items:center; gap:12px; }
.book-report-section__number { color:rgba(230,196,135,.45); font:500 10px var(--font-mono); }
.book-report-section__head h3 { color:var(--gold2); font:700 18px var(--font-serif); letter-spacing:.05em; }
.book-report-list { display:grid; gap:10px; }
.book-report-card { padding:14px 16px; border:1px solid rgba(255,255,255,.07); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.book-report-card strong { display:block; color:var(--card-title-cyan); font:600 13px var(--font-serif); }
.book-report-card p { margin-top:6px; color:var(--text2); font-size:12px; line-height:1.82; white-space:pre-wrap; }
.book-report-card small { display:block; margin-top:7px; color:var(--text3); font-size:10px; line-height:1.7; }
.book-report-storyline { position:relative; padding-left:22px; }
.book-report-storyline::before { content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:linear-gradient(var(--gold),rgba(124,215,193,.18)); }
.book-report-storyline li { position:relative; margin:0 0 12px; color:var(--text2); font-size:12px; line-height:1.75; list-style:none; }
.book-report-storyline li::before { content:""; position:absolute; left:-20px; top:7px; width:7px; height:7px; border:1px solid var(--gold); border-radius:50%; background:#11100f; box-shadow:0 0 8px rgba(230,196,135,.18); }
.book-report-chapters { display:grid; gap:8px; counter-reset:chapter; }
.book-report-chapter { padding:13px 15px 13px 46px; position:relative; border-bottom:1px solid rgba(255,255,255,.05); }
.book-report-chapter::before { counter-increment:chapter; content:counter(chapter,decimal-leading-zero); position:absolute; left:4px; top:14px; color:rgba(124,215,193,.52); font:500 10px var(--font-mono); }
.book-report-chapter strong { color:var(--text); font:600 12px var(--font-serif); }
.book-report-chapter p { margin-top:5px; color:var(--text3); font-size:11px; line-height:1.78; white-space:pre-wrap; }
.book-report-callout { padding:18px 20px; border:1px solid rgba(124,215,193,.16); border-radius:16px; background:linear-gradient(135deg,rgba(124,215,193,.07),rgba(230,196,135,.035)); }
.book-report-callout + .book-report-callout { margin-top:10px; }
.book-report-callout strong { color:var(--teal); font:600 13px var(--font-serif); }
.book-report-callout p { margin-top:7px; color:var(--text2); font-size:12px; line-height:1.82; }
.book-report-callout small { display:block; margin-top:8px; color:var(--text3); font-size:10px; line-height:1.7; }
.book-report-empty-note { color:var(--text3); font-size:11px; }

.book-breakdown-history { position:absolute; inset:0 auto 0 0; z-index:45; width:min(330px,calc(100vw - 32px)); padding:17px; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(230,196,135,.24); border-radius:22px; background:linear-gradient(180deg,rgba(32,29,25,.98),rgba(14,14,13,.98)); box-shadow:20px 0 54px rgba(0,0,0,.54),inset 0 1px 0 rgba(255,255,255,.06); transform:translateX(calc(-100% - 24px)); opacity:0; visibility:hidden; transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-normal),visibility var(--dur-normal); }
.book-breakdown-history.is-open { transform:translateX(0); opacity:1; visibility:visible; }
.book-breakdown-history__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.book-breakdown-history__head h2 { margin-top:4px; color:var(--text); font:700 18px var(--font-serif); }
.book-breakdown-history__note { margin:12px 0 14px; padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.065); color:var(--text3); font-size:10px; line-height:1.65; }
.book-breakdown-history__list { flex:1; min-height:0; padding-top:2px; display:grid; align-content:start; gap:8px; overflow:auto; scrollbar-color:rgba(230,196,135,.2) transparent; }
.book-history-item { width:100%; padding:12px; display:grid; grid-template-columns:minmax(0,1fr) 30px; gap:8px; border:1px solid rgba(255,255,255,.07); border-radius:14px; background:rgba(255,255,255,.025); text-align:left; cursor:pointer; transition:border-color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast); }
.book-history-item:hover,
.book-history-item.is-active { border-color:rgba(230,196,135,.28); background:rgba(230,196,135,.065); transform:translateY(-1px); }
.book-history-item__main { min-width:0; }
.book-history-item__main strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text2); font:600 12px var(--font-serif); }
.book-history-item__main span { display:block; margin-top:5px; color:var(--text3); font:500 9px var(--font-mono); }
.book-history-item__delete { width:30px; height:30px; padding:0; display:grid; place-items:center; align-self:center; border:0; border-radius:50%; background:transparent; color:var(--text3); cursor:pointer; }
.book-history-item__delete:hover { color:var(--red); background:rgba(255,180,171,.08); }
.book-history-item__delete .material-symbols-outlined { font-size:16px; }
.book-breakdown-history__empty { flex:1; min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--text3); }
.book-breakdown-history__empty[hidden] { display:none; }
.book-breakdown-history__empty .material-symbols-outlined { margin-bottom:10px; color:rgba(230,196,135,.44); font-size:31px; }
.book-breakdown-history__empty strong { color:var(--text2); font:600 12px var(--font-serif); }
.book-breakdown-history__empty p { max-width:210px; margin-top:7px; font-size:10px; line-height:1.65; }
.book-breakdown-drawer-backdrop { position:absolute; inset:0; z-index:40; border-radius:22px; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity var(--dur-normal); }
.book-breakdown-drawer-backdrop.is-visible { opacity:1; pointer-events:auto; }
.book-breakdown-mobile-tabs { display:none; }

@media (max-width: 900px) {
  .project-hub-book-breakdown { min-width:210px; bottom:max(18px,env(safe-area-inset-bottom,0px)); }
  body[data-app-view="project-hub"] .toast-message { bottom:calc(max(18px,env(safe-area-inset-bottom,0px)) + 70px) !important; }
  .project-hub-book-breakdown__copy small { display:none; }
  .book-breakdown-screen { min-height:0; }
  .book-breakdown-shell { padding:10px; gap:8px; }
  .book-breakdown-topbar { min-height:58px; grid-template-columns:minmax(0,1fr) auto; border-radius:18px; }
  .book-breakdown-brand__mark { width:36px; height:36px; border-radius:11px; }
  .book-breakdown-brand h1 { font-size:17px; }
  .book-breakdown-topbar__meta { display:none; }
  .book-breakdown-back-btn { grid-column:2; font-size:0; width:40px; height:40px; padding:0; }
  .book-breakdown-back-btn .material-symbols-outlined { font-size:19px; }
  .book-breakdown-mobile-tabs { min-height:42px; padding:4px; display:grid; grid-template-columns:1fr 1fr; border:1px solid rgba(255,255,255,.07); border-radius:15px; background:rgba(255,255,255,.025); }
  .book-breakdown-mobile-tab { border:0; background:transparent; color:var(--text3); font:600 11px var(--font-sans); cursor:pointer; }
  .book-breakdown-mobile-tab.active { color:var(--gold2); background:rgba(230,196,135,.08); box-shadow:inset 0 0 0 1px rgba(230,196,135,.13); }
  .book-breakdown-panels { display:block; }
  .book-breakdown-panel { height:100%; display:none; border-radius:18px; animation:none; }
  .book-breakdown-panel.active { display:flex; }
  .book-breakdown-panel__head { min-height:62px; padding:9px 11px; }
  .book-breakdown-panel__index { width:30px; height:30px; }
  .book-breakdown-panel__head h2 { font-size:14px; }
  .book-breakdown-panel__head p { max-width:140px; }
  .book-breakdown-secondary-btn,
  .book-breakdown-primary-btn { min-height:35px; padding:0 11px; }
  #book-breakdown-source { padding:20px 18px 26px; font-size:13px; }
  .book-breakdown-panel__footer { align-items:flex-start; }
  .book-breakdown-privacy-note { max-width:145px; }
  .book-breakdown-history { inset:0 auto 0 0; width:min(340px,calc(100vw - 20px)); border-radius:18px; }
  .book-breakdown-drawer-backdrop { border-radius:18px; }
  .book-breakdown-report { padding:26px 20px 48px; }
}

@media (max-width: 520px) {
  .project-hub-book-breakdown { bottom:max(14px,env(safe-area-inset-bottom,0px)); height:52px; min-width:184px; padding:0 12px; }
  body[data-app-view="project-hub"] .toast-message { bottom:calc(max(14px,env(safe-area-inset-bottom,0px)) + 64px) !important; }
  .project-hub-book-breakdown__icon { width:26px; height:26px; }
  .project-hub-book-breakdown__copy strong { font-size:13px; }
  .book-breakdown-kicker { font-size:8px; }
  .book-breakdown-brand__mark { display:none; }
  .book-breakdown-panel__head p { max-width:105px; }
  .book-breakdown-report-actions .book-breakdown-primary-btn { font-size:0; width:37px; padding:0; }
  .book-breakdown-report-actions .book-breakdown-primary-btn .material-symbols-outlined { font-size:18px; }
  .book-breakdown-cancel-btn { font-size:0; width:37px; padding:0; }
  .book-breakdown-panel__footer { min-height:58px; }
  .book-breakdown-source-stats { display:grid; gap:3px; }
  .book-breakdown-source-stats span + span { padding-left:0; border-left:0; }
  .book-breakdown-empty { padding-inline:16px; }
  .book-breakdown-empty__orb { width:62px; height:62px; border-radius:20px; }
  .book-breakdown-empty h3 { font-size:17px; }
  .book-breakdown-empty__actions { flex-direction:column; width:min(220px,100%); }
  .book-breakdown-empty__actions > button { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .project-hub-book-breakdown,
  .project-hub-book-breakdown::before,
  .project-hub-book-breakdown__arrow,
  .book-breakdown-panel,
  .book-breakdown-history,
  .book-breakdown-progress__book span,
  .book-breakdown-progress__scan,
  .book-breakdown-ambient span,
  .book-breakdown-report {
    animation:none !important;
    transition:none !important;
  }
}