/* ============================================================
   AI 小说工坊 · 主样式表
   提取自 index.html，保持原样不做修改
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', 'Noto Serif SC', serif;
  padding: 1.5rem;
  margin: 0;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 30% 40%, rgba(230, 200, 150, 0.08) 0%, transparent 35%),
                    radial-gradient(circle at 70% 70%, rgba(180, 160, 220, 0.1) 0%, transparent 40%),
                    radial-gradient(circle at 10% 80%, rgba(140, 180, 210, 0.06) 0%, transparent 45%);
  pointer-events: none;
}
.menu-container {
  max-width: 950px;
  width: 100%;
  background: rgba(22, 20, 36, 0.96);
  border-radius: 3.5rem;
  padding: 2.5rem 2.8rem;
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(230, 210, 180, 0.25);
  position: relative;
  z-index: 2;
}
.menu-header { text-align: center; margin-bottom: 2.5rem; }
.menu-header h1 {
  font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: 3.2rem;
  letter-spacing: 2px; color: #f7e3c0; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center;
  gap: 0.8rem; flex-wrap: wrap;
}
.menu-header h1 i { font-size: 2.8rem; color: #e4b363; filter: drop-shadow(0 0 10px rgba(230, 180, 80, 0.6)); background: rgba(20, 20, 30, 0.3); border-radius: 50%; padding: 0.2rem; }
.subtitle {
  font-family: 'Inter', sans-serif; font-weight: 400; font-size: 1.1rem; color: #cbbaa0;
  letter-spacing: 0.3em; text-transform: uppercase; background: rgba(0, 0, 0, 0.55);
  display: inline-block; padding: 0.4rem 2rem; border-radius: 2rem;
  margin-top: 0.4rem; border: 1px solid rgba(200, 170, 120, 0.4);
}

/* ===== AI 输入框 ===== */
.ai-input-area {
  background: rgba(22, 20, 34, 0.92);
  border-radius: 2rem;
  padding: 1.5rem 1.8rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(210, 180, 140, 0.25);
}
.ai-input-area label {
  color: #d4c4b0;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 0.6rem;
}
.ai-input-area label i {
  color: #e4b363;
  margin-right: 0.5rem;
}
.ai-input-row {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.ai-input-row input {
  flex: 1;
  min-width: 200px;
  padding: 0.9rem 1.4rem;
  border-radius: 1.8rem;
  border: 1px solid rgba(210, 180, 140, 0.3);
  background: rgba(0, 0, 0, 0.6);
  color: #f0e4d4;
  font-family: 'Noto Serif SC', serif;
  font-size: 1rem;
  outline: none;
  transition: 0.3s;
}
.ai-input-row input::placeholder {
  color: #8a7a6a;
  font-style: italic;
}
.ai-input-row input:focus {
  border-color: #e4b363;
  box-shadow: 0 0 20px rgba(228, 179, 99, 0.15);
  background: rgba(0, 0, 0, 0.5);
}
.ai-input-row .send-btn {
  padding: 0.9rem 2rem;
  border-radius: 2rem;
  border: none;
  background: linear-gradient(135deg, #e4b363, #c29a4a);
  color: #1a1a2e;
  font-family: 'Noto Serif SC', serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(228, 179, 99, 0.3);
}
.ai-input-row .send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(228, 179, 99, 0.5);
  background: linear-gradient(135deg, #f5ca7c, #d4a852);
}
.ai-input-row .send-btn:active { transform: translateY(0); }
.ai-input-row .send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 15px rgba(228, 179, 99, 0.15);
}

/* ===== 冷却倒计时提示条 ===== */
.cooldown-bar {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding: 0.6rem 1rem;
  border-radius: 1.2rem;
  background: rgba(228, 179, 99, 0.12);
  border: 1px solid rgba(228, 179, 99, 0.35);
  color: #f5ca7c;
  font-size: 0.9rem;
}
.cooldown-bar i { color: #e4b363; }
#cooldownSeconds { font-weight: 700; color: #ffd799; font-size: 1.05rem; }

/* ===== 上下文记忆栏 ===== */
.context-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: 0.55rem 0.9rem;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(210, 180, 140, 0.18);
  border-radius: 1.8rem;
}
.context-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: #d4c4b0;
  font-size: 0.85rem;
  letter-spacing: 1px;
  user-select: none;
  transition: 0.3s;
}
.context-toggle:hover { color: #f0e4d4; }
.context-toggle i { color: #e4b363; }
.context-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(228,179,99,0.35);
  position: relative;
  cursor: pointer;
  transition: 0.25s;
  flex-shrink: 0;
}
.context-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #b0a090;
  transition: 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.context-toggle input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #e4b363, #c29a4a);
  border-color: #e4b363;
  box-shadow: 0 0 12px rgba(228, 179, 99, 0.35);
}
.context-toggle input[type="checkbox"]:checked::after {
  left: 18px;
  background: #1a1a2e;
}
.new-chat-btn {
  font-family: 'Noto Serif SC', serif;
  font-weight: 600;
  background: linear-gradient(135deg, #e4b363, #c29a4a);
  border: none;
  color: #1a1a2e;
  padding: 0.45rem 1.3rem;
  border-radius: 2rem;
  cursor: pointer;
  font-size: 0.85rem;
  letter-spacing: 1px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 4px 14px rgba(228, 179, 99, 0.28);
}
.new-chat-btn i { font-size: 0.78rem; }
.new-chat-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(228, 179, 99, 0.45);
  background: linear-gradient(135deg, #f5ca7c, #d4a852);
  color: #000;
}
.new-chat-btn:active { transform: translateY(0); }
.session-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #9b8c7a;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
}
.session-hint::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e4b363;
  box-shadow: 0 0 8px rgba(228, 179, 99, 0.8);
}

.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.2rem; margin-bottom: 2rem; }
.menu-item {
  background: rgba(30, 25, 40, 0.9); border-radius: 1.8rem;
  padding: 1.5rem 0.8rem 1.2rem; text-align: center; transition: all 0.25s ease-in-out;
  border: 1px solid rgba(210, 180, 140, 0.3); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem; cursor: pointer;
  position: relative; text-decoration: none; color: inherit; transform: translateY(0);
}
.menu-item:hover { background: rgba(50, 40, 65, 0.7); border-color: rgba(240, 200, 130, 0.7); box-shadow: 0 20px 28px -10px rgba(0, 0, 0, 0.7), 0 0 20px rgba(230, 180, 70, 0.25); transform: translateY(-6px); }
.menu-item:active { transform: translateY(-2px); transition: 0.1s; }
.icon-circle { background: linear-gradient(135deg, #3b2e4a, #1f1a2e); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 0.2rem; border: 2px solid rgba(230, 200, 140, 0.5); box-shadow: 0 0 18px rgba(230, 170, 60, 0.3); transition: all 0.3s; font-size: 1.8rem; color: #f5d78c; }
.menu-item:hover .icon-circle { border-color: #f3b95b; box-shadow: 0 0 28px rgba(243, 185, 91, 0.7); color: #ffddb0; background: linear-gradient(135deg, #4d385e, #2a1f38); }
.menu-item h3 { font-family: 'Noto Serif SC', serif; font-weight: 600; font-size: 1.2rem; color: #f3e1c4; letter-spacing: 1px; margin: 0; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.menu-item .desc { font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 400; color: #c0b09c; letter-spacing: 0.5px; text-transform: uppercase; background: rgba(0,0,0,0.3); padding: 0.15rem 0.8rem; border-radius: 20px; }
.menu-item .badge { position: absolute; top: -6px; right: -6px; background: #e4b363; color: #1a1a2e; font-size: 0.6rem; padding: 0.15rem 0.6rem; border-radius: 1rem; font-weight: 700; }

/* ===== 结果区域 ===== */
#resultArea {
  display: none; animation: fadeIn 0.5s; grid-column: 1 / -1;
  background: rgba(22, 20, 34, 0.92);
  border-radius: 2rem;
  padding: 1.8rem;
  border: 1px solid rgba(210, 180, 140, 0.2);
  margin-top: 0.5rem;
}
.result-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.8rem;
  padding-bottom: 1rem; border-bottom: 1px dashed rgba(200,170,120,0.3);
  margin-bottom: 1.2rem;
}
.result-header .left { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.result-header .left h3 {
  color: #f7e3c0; font-size: 1.4rem; display: flex; align-items: center; gap: 0.5rem;
}
.result-header .left h3 i { color: #e4b363; }
.result-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.result-actions button {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(230,210,180,0.2);
  padding: 0.4rem 1.2rem;
  border-radius: 1.8rem;
  color: #cbbaa0;
  cursor: pointer;
  transition: 0.3s;
  font-family: inherit;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.result-actions button:hover {
  background: rgba(255,255,255,0.18);
  color: #f7e3c0;
  border-color: #e4b363;
}
.result-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.result-actions button.primary {
  background: linear-gradient(135deg, #e4b363, #c29a4a);
  color: #1a1a2e;
  border-color: #e4b363;
}
.result-actions button.primary:hover {
  background: linear-gradient(135deg, #f5ca7c, #d4a852);
}
.result-actions button.danger {
  border-color: rgba(255, 107, 107, 0.35);
  color: #ff6b6b;
}
.result-actions button.danger:hover {
  background: rgba(255, 107, 107, 0.15);
  border-color: rgba(255, 107, 107, 0.7);
}
#resultTitle {
  color: #e4b363; font-size: 1rem;
  background: rgba(0,0,0,0.3); display: inline-block;
  padding: 0.2rem 1.2rem; border-radius: 2rem;
  margin-bottom: 0.8rem;
}
#resultContent {
  color: #e0d5c5; line-height: 2; font-size: 1.02rem;
  white-space: pre-wrap; background: rgba(0,0,0,0.2);
  padding: 1.5rem; border-radius: 1.2rem;
  border-left: 4px solid #e4b363;
  min-height: 150px;
  max-height: 500px;
  overflow-y: auto;
}
#resultContent .loading-placeholder {
  color: #8a7a6a; text-align: center; padding: 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
}
#resultContent .loading-placeholder i {
  font-size: 2.5rem;
  color: #e4b363;
  animation: spin 1.5s linear infinite;
}
#resultContent .streaming-cursor::after {
  content: "▌";
  color: #e4b363;
  animation: blink 0.8s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ===== 书架 ===== */
.bookshelf-area {
  margin-top: 1.5rem;
  border-top: 1px dashed rgba(200,170,120,0.2);
  padding-top: 1.2rem;
}
.bookshelf-header {
  display: flex; justify-content: space-between; align-items: center;
  color: #cbbaa0; font-size: 0.9rem;
  cursor: pointer;
  transition: 0.3s;
}
.bookshelf-header:hover { color: #e4b363; }
.bookshelf-header i { margin-right: 0.4rem; }
.bookshelf-list {
  display: none;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 0.8rem;
  padding: 0.5rem;
  background: rgba(0,0,0,0.2);
  border-radius: 1rem;
}
.bookshelf-list.show { display: block; }
.bookshelf-list .shelf-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(200,170,120,0.1);
  color: #d4c4b0;
  font-size: 0.9rem;
}
.bookshelf-list .shelf-item:last-child { border-bottom: none; }
.bookshelf-list .shelf-item .actions i {
  margin-left: 0.6rem;
  cursor: pointer;
  opacity: 0.5;
  transition: 0.3s;
}
.bookshelf-list .shelf-item .actions i:hover { opacity: 1; color: #e4b363; }
.shelf-empty { color: #6a5a4a; text-align: center; padding: 1.5rem; font-style: italic; }

.quick-action { display: flex; justify-content: center; margin-top: 1rem; margin-bottom: 0.5rem; }
.start-btn { background: linear-gradient(120deg, #d4a24c, #b27d3a); border: none; padding: 0.9rem 2.8rem; border-radius: 3rem; font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: 1.3rem; letter-spacing: 2px; color: #0d0b14; background: #eabb6e; box-shadow: 0 10px 20px -5px rgba(180, 120, 30, 0.6), 0 0 15px rgba(240, 190, 80, 0.5); display: flex; align-items: center; gap: 0.7rem; cursor: pointer; transition: 0.25s; border: 1px solid #ffda94; text-decoration: none; }
.start-btn i { font-size: 1.4rem; color: #1e1a24; }
.start-btn:hover { background: #f5ca7c; box-shadow: 0 15px 28px -3px rgba(210, 150, 30, 0.8), 0 0 24px #ffb861; transform: scale(1.03); color: #000; }
.footer-note { text-align: center; margin-top: 1.5rem; font-size: 0.85rem; color: #9b8c7a; display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-top: 1px dashed rgba(200, 170, 120, 0.4); padding-top: 1.2rem; font-family: 'Inter', sans-serif; }
.footer-note i { color: #cfb17b; font-size: 0.9rem; }

/* ===== Toast 提示 ===== */
.toast {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
  background: rgba(20,18,30,0.97);
  padding: 0.8rem 2rem; border-radius: 2rem;
  color: #f7e3c0; border: 1px solid rgba(228,179,99,0.3);
  font-family: 'Noto Serif SC', serif;
  font-size: 0.95rem;
  z-index: 9999;
  opacity: 0; transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast i { margin-right: 0.5rem; color: #e4b363; }

/* ===== 音乐播放器 ===== */
#musicBox {
  position: fixed; bottom: 30px; right: 30px; z-index: 999;
  display: flex; flex-direction: column; align-items: flex-end;
}
#musicToggle {
  width: 50px; height: 50px;
  background: rgba(30, 25, 40, 0.95);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(228, 179, 99, 0.4);
  box-shadow: 0 0 20px rgba(228, 179, 99, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}
#musicToggle:hover { border-color: rgba(228, 179, 99, 0.8); box-shadow: 0 0 28px rgba(228, 179, 99, 0.4); }
#musicToggle i { color: #e4b363; font-size: 1.2rem; transition: transform 0.3s; }
#musicPanel {
  margin-top: 12px;
  width: 280px;
  background: rgba(20, 18, 30, 0.97);
  border-radius: 20px;
  padding: 16px 20px 18px;
  border: 1px solid rgba(228, 179, 99, 0.25);
  box-shadow: 0 15px 35px rgba(0,0,0,0.6);
  display: none;
  transition: all 0.3s ease;
}
#playBtn {
  background: linear-gradient(135deg, #e4b363, #c29a4a);
  border: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: #1a1a2e;
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(228, 179, 99, 0.4);
  transition: 0.2s;
}
#playBtn:hover { box-shadow: 0 6px 18px rgba(228, 179, 99, 0.6); transform: scale(1.05); }

/* ===== 音量滑条 ===== */
#volumeSlider {
  accent-color: #e4b363;
  cursor: pointer;
}

/* ===== Markdown 渲染排版 ===== */
#resultContent.rendered { white-space: normal; }
#resultContent.rendered h1, #resultContent.rendered h2, #resultContent.rendered h3 {
  color: #f7e3c0; margin: 0.8em 0 0.4em; font-weight: 600; line-height: 1.4;
}
#resultContent.rendered h1 { font-size: 1.5rem; border-bottom: 1px solid rgba(228,179,99,0.3); padding-bottom: 0.3em; }
#resultContent.rendered h2 { font-size: 1.3rem; }
#resultContent.rendered h3 { font-size: 1.15rem; }
#resultContent.rendered p { margin: 0.6em 0; line-height: 1.9; }
#resultContent.rendered ul, #resultContent.rendered ol { margin: 0.5em 0; padding-left: 1.6em; line-height: 1.9; }
#resultContent.rendered li { margin: 0.2em 0; }
#resultContent.rendered strong { color: #f5d78c; font-weight: 600; }
#resultContent.rendered em { color: #e0d5c5; }
#resultContent.rendered code {
  background: rgba(0,0,0,0.35); padding: 0.1em 0.4em; border-radius: 0.3em;
  font-family: 'Consolas','Menlo',monospace; color: #ffd799; font-size: 0.9em;
}
#resultContent.rendered pre {
  background: rgba(0,0,0,0.35); padding: 0.8em 1em; border-radius: 0.6em;
  overflow-x: auto; margin: 0.8em 0; border: 1px solid rgba(228,179,99,0.2);
}
#resultContent.rendered pre code { background: transparent; padding: 0; }
#resultContent.rendered blockquote {
  border-left: 3px solid #e4b363; margin: 0.8em 0; padding: 0.3em 1em;
  color: #cbbaa0; background: rgba(0,0,0,0.15); border-radius: 0.4em;
}
#resultContent.rendered hr { border: none; border-top: 1px dashed rgba(228,179,99,0.3); margin: 1.2em 0; }
#resultContent.rendered a { color: #e4b363; text-decoration: none; }

/* ===== 结构化卡片 ===== */
.structured-card { display: flex; flex-direction: column; gap: 0.9rem; }
.card-head {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: 'Noto Serif SC', serif; font-weight: 700;
  font-size: 1.4rem; color: #f7e3c0; letter-spacing: 1px;
  padding-bottom: 0.8rem; border-bottom: 1px dashed rgba(228,179,99,0.35);
}
.card-head i { color: #e4b363; font-size: 1.3rem; }
.card-field { display: flex; gap: 1rem; align-items: flex-start; }
.field-label {
  flex-shrink: 0; min-width: 80px; color: #e4b363; font-weight: 600;
  font-size: 0.9rem; letter-spacing: 1px; padding-top: 0.15rem;
}
.field-value { flex: 1; color: #e0d5c5; line-height: 1.9; white-space: pre-line; word-break: break-word; }
.field-value ul { list-style: none; padding: 0; margin: 0; }
.field-value ul li { position: relative; padding-left: 1.1em; margin: 0.2em 0; }
.field-value ul li::before { content: "✦"; position: absolute; left: 0; color: #e4b363; font-size: 0.75em; top: 0.15em; }
.act-item {
  margin: 0.5em 0; padding: 0.7em 1em; background: rgba(0,0,0,0.2);
  border-left: 3px solid #e4b363; border-radius: 0.5em;
}
.act-title { color: #f5d78c; font-weight: 600; margin-bottom: 0.3em; }
.act-content { color: #e0d5c5; line-height: 1.85; white-space: pre-line; word-break: break-word; }

/* ===== 书架导出按钮 ===== */
.shelf-export-btn {
  background: transparent; border: 1px solid rgba(228,179,99,0.35);
  color: #cbbaa0; padding: 0.2rem 0.8rem; border-radius: 1.2rem;
  cursor: pointer; font-family: inherit; font-size: 0.78rem;
  display: inline-flex; align-items: center; gap: 0.35rem; transition: 0.3s;
}
.shelf-export-btn:hover { color: #f7e3c0; border-color: #e4b363; background: rgba(228,179,99,0.12); }

/* ===== 导出下拉菜单 ===== */
.export-wrap { position: relative; display: inline-flex; }
.export-menu {
  position: absolute; top: 100%; right: 0; margin-top: 0.45rem;
  background: rgba(20,18,30,0.98);
  border: 1px solid rgba(228,179,99,0.3); border-radius: 0.9rem;
  padding: 0.4rem; min-width: 178px; z-index: 30;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; gap: 0.2rem;
}
.export-menu button {
  background: transparent; border: none; color: #d4c4b0;
  padding: 0.5rem 0.8rem; border-radius: 0.6rem; cursor: pointer;
  text-align: left; font-family: inherit; font-size: 0.85rem;
  display: flex; align-items: center; gap: 0.5rem; transition: 0.2s;
  white-space: nowrap;
}
.export-menu button:hover { background: rgba(228,179,99,0.15); color: #f7e3c0; }
.export-menu button i { color: #e4b363; width: 16px; text-align: center; }

/* ===== 响应式 ===== */
@media (max-width: 650px) {
  .menu-container { padding: 1.5rem 1rem; border-radius: 2rem; }
  .menu-header h1 { font-size: 2rem; }
  .menu-header h1 i { font-size: 2rem; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .icon-circle { width: 48px; height: 48px; font-size: 1.4rem; }
  .menu-item h3 { font-size: 1rem; }
  .ai-input-area { padding: 1rem; }
  .ai-input-row input { min-width: 140px; padding: 0.7rem 1rem; font-size: 0.9rem; }
  .ai-input-row .send-btn { padding: 0.7rem 1.2rem; font-size: 0.9rem; }
  #resultArea { padding: 1rem; }
  #resultContent { max-height: 350px; font-size: 0.95rem; padding: 1rem; }
  .result-header .left h3 { font-size: 1.1rem; }
  .result-actions button { padding: 0.3rem 0.8rem; font-size: 0.75rem; }
  .start-btn { padding: 0.7rem 1.8rem; font-size: 1rem; }
  #musicPanel { width: 240px; padding: 12px 14px; }
}
@media (max-width: 420px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .menu-item { padding: 1rem 0.4rem; border-radius: 1.2rem; }
  .icon-circle { width: 40px; height: 40px; font-size: 1.2rem; }
  .menu-item h3 { font-size: 0.85rem; }
  .menu-item .desc { font-size: 0.6rem; }
  #musicBox { bottom: 15px; right: 15px; }
  #musicPanel { width: 200px; padding: 10px 12px; font-size: 0.8rem; }
}

/* ===== 自定义光标（.cur 静态，浏览器原生支持）===== */
body { cursor: url('/static/cursor/Normal.cur'), auto; }

button, a, [role="button"], [data-action], .menu-item, .context-toggle,
.bookshelf-header, .shelf-item .actions i, .export-menu button,
#musicToggle, #playBtn, .send-btn, .new-chat-btn, .start-btn,
.result-actions button, .quick-action, input[type="checkbox"], input[type="range"] {
  cursor: url('/static/cursor/Link.cur'), pointer !important;
}

input[type="text"], input[type="search"], textarea {
  cursor: url('/static/cursor/Text.cur'), text !important;
}

/* AI 生成中：忙碌光标 */
body.generating { cursor: url('/static/cursor/Working.cur'), progress !important; }
body.generating button, body.generating a, body.generating .menu-item {
  cursor: url('/static/cursor/Working.cur'), progress !important;
}

/* ===== 鼠标拖尾画布：固定悬浮层，不占布局 ===== */
#trailCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99998;
  background: transparent;
}
/* ===== 背景图片轮播 ===== */
.bg-layer {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  /* 压暗保可读 + 提饱和：背景照片颜色明艳，但不抢内容 */
  filter: brightness(0.68) saturate(1.25) contrast(1.05);
}
.bg-layer.active { opacity: 1; }
/* 暗色遮罩：保证文字可读 */
.bg-scrim {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* ===== 左上角设置按钮（空壳） ===== */
.settings-wrap { position: fixed; top: 16px; left: 16px; z-index: 9500; }   /* 永远在教程遮罩之上，设置面板随时可点 */
.settings-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(190, 150, 80, 0.55);
  background: rgba(255, 255, 255, 0.8);
  color: #a06f1d; font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(50, 35, 70, 0.18);
  display: flex; align-items: center; justify-content: center;
  transition: .2s;
}
.settings-btn:hover { background: #fff; color: #b07c2b; transform: rotate(25deg); }
/* ===== 设置弹窗（CFG：标题条 + 左侧编号标签 + 右侧内容） ===== */
.st-mask {
  position: fixed; inset: 0; z-index: 9700;
  display: none; align-items: center; justify-content: center;
  background: rgba(15, 12, 26, .42); padding: 24px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.st-mask.open { display: flex; }
body.st-lock { overflow: hidden; }
.st-modal {
  width: min(600px, 100%);
  max-width: 100%;
  min-width: 0;              /* 关键：flex 子项默认 min-width:auto，手机上会把卡片顶出屏幕 */
  max-height: min(560px, calc(100vh - 48px));
  max-height: min(560px, calc(100dvh - 48px));
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(190, 150, 80, .5);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(30, 20, 50, .32);
  display: flex; flex-direction: column; overflow: hidden;
  animation: stIn .18s ease-out;
}
@keyframes stIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.st-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid rgba(190, 150, 80, .3); }
.st-tag {
  font-family: "Inter", sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: 1px;
  color: #fff; background: linear-gradient(135deg, #d9a94f, #b8862f);
  padding: 3px 7px; border-radius: 6px;
}
.st-title { font-weight: 700; color: #332b3c; font-size: .95rem; letter-spacing: 1px; }
.st-close {
  margin-left: auto; width: 30px; height: 30px; border-radius: 8px; line-height: 1;
  border: 1px solid rgba(150, 125, 105, .3); background: transparent; color: #6a5a55;
  font-size: .9rem; cursor: pointer; font-family: inherit;
}
.st-close:hover { background: rgba(228, 179, 99, .14); border-color: #c29a4a; }
.st-body { display: flex; min-height: 0; min-width: 0; flex: 1; }
.st-tabs {
  width: 106px; flex: none; padding: 10px 8px; display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid rgba(190, 150, 80, .25); background: rgba(0, 0, 0, .02);
}
.st-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  padding: 7px 8px; border-radius: 9px; font-family: inherit; color: #6a5a55; text-align: left;
}
.st-tab i { font-style: normal; font-size: .62rem; color: #a08c7d; letter-spacing: 1px; }
.st-tab span { font-size: .84rem; }
.st-tab.on { background: #fff; border-color: rgba(190, 150, 80, .55); color: #7a4d10; font-weight: 600; box-shadow: 0 1px 4px rgba(50, 35, 70, .1); }
.st-tab.on i { color: #c29a4a; }
.st-tab:not(.on):hover { background: rgba(0, 0, 0, .04); }
.st-panes { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px; }
.st-pane { display: none; }
.st-pane.on { display: block; }
.st-h { font-weight: 700; color: #332b3c; font-size: .95rem; }
.st-sub { color: #9a8578; font-size: .76rem; margin: 3px 0 13px; }
.st-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 100%; }
.st-theme { flex: 1; min-width: 0; border: 1px solid rgba(150, 125, 105, .28); border-radius: 11px; background: transparent; cursor: pointer; padding: 6px; font-family: inherit; }
.st-theme.on { border-color: #c29a4a; box-shadow: 0 0 0 2px rgba(228, 179, 99, .22); }
.st-swatch {
  display: flex; align-items: center; justify-content: center; height: 62px; border-radius: 8px;
  font-family: "Noto Serif SC", serif; font-size: 1.1rem; border: 1px solid rgba(0, 0, 0, .06);
}
.st-swatch em { font-style: normal; }
.st-sw-light { background: linear-gradient(135deg, #fdfaf4, #f3ece1); color: #4a3f3a; }
.st-sw-dark { background: linear-gradient(135deg, #241f2e, #17131f); color: #f0e2c6; }
.st-theme-name { display: block; margin-top: 5px; font-size: .76rem; color: #6a5a55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fsRange { width: 100%; accent-color: #c29a4a; }
.st-preview {
  margin-top: 7px; padding: 9px 10px; border-radius: 9px; border: 1px dashed rgba(190, 150, 80, .5);
  background: rgba(228, 179, 99, .07); color: #4a3f3a;
  font-family: "Noto Serif SC", serif; font-size: 1rem; line-height: 1.7;
  word-break: break-word;
}
.st-usage {
  margin-bottom: 12px; padding: 9px 11px; border-radius: 10px;
  background: rgba(228, 179, 99, .1); border: 1px solid rgba(190, 150, 80, .32);
  color: #7a5a20; font-size: .82rem;
}
.settings-empty { color: #8a7a6f; font-size: .85rem; padding: 4px 0; }

/* 弹窗内的深色主题（只作用于弹窗，不影响别处） */
body.theme-dark .st-mask { background: rgba(8, 6, 14, .58); }
body.theme-dark .st-modal { background: rgba(22, 19, 30, .98); border-color: rgba(228, 179, 99, .45); }
body.theme-dark .st-title, body.theme-dark .st-modal .st-h { color: #f7e3c0; }
body.theme-dark .st-modal .st-sub { color: #a99a8c; }
body.theme-dark .st-head { border-bottom-color: rgba(228, 179, 99, .3); }
body.theme-dark .st-tabs { border-right-color: rgba(228, 179, 99, .25); background: rgba(255, 255, 255, .03); }
body.theme-dark .st-tab { color: #cbbfae; }
body.theme-dark .st-tab.on { background: rgba(45, 36, 55, .95); border-color: rgba(228, 179, 99, .5); color: #f5ca7c; }
body.theme-dark .st-close { color: #cbbfae; border-color: rgba(228, 179, 99, .3); }
body.theme-dark .st-modal .st-theme { border-color: rgba(228, 179, 99, .28); }
body.theme-dark .st-modal .st-theme-name { color: #cbbfae; }
body.theme-dark .st-modal .st-preview { background: rgba(228, 179, 99, .09); color: #f2e7d5; border-color: rgba(228, 179, 99, .4); }
body.theme-dark .st-modal .st-usage { background: rgba(228, 179, 99, .12); color: #f0d8a0; border-color: rgba(228, 179, 99, .35); }
body.theme-dark .st-modal .set-label { color: #d8ccbb; }
body.theme-dark .st-modal .set-label .hint { color: #a99a8c; }
body.theme-dark .st-modal .set-input { background: rgba(255, 255, 255, .06); color: #f2e7d5; border-color: rgba(228, 179, 99, .3); }
body.theme-dark .st-modal .vn-bg-pick-all { border-color: rgba(228, 179, 99, .5); color: #e4b363; }
body.theme-dark .st-modal .vn-bg-reset { color: #cbbfae; border-color: rgba(228, 179, 99, .28); }
body.theme-dark .st-modal .seg { background: rgba(255, 255, 255, .08); }
body.theme-dark .st-modal .seg button { color: #cbbfae; }
body.theme-dark .st-modal .seg button.on { background: rgba(45, 36, 55, .95); color: #f5ca7c; }
body.theme-dark .st-modal .switch { background: rgba(255, 255, 255, .18); }

/* ===== 05 密钥 ===== */
.st-key { margin-bottom: 12px; padding: 9px 11px; border-radius: 10px; background: rgba(0,0,0,.04); border: 1px solid rgba(150,125,105,.25); color: #6a5a55; font-size: .8rem; }
.st-key.on { background: rgba(90,170,90,.12); border-color: rgba(90,170,90,.45); color: #2f6b34; }
.st-key.bad { background: rgba(200,70,70,.1); border-color: rgba(200,70,70,.4); color: #a33333; }
.st-key-row { display: flex; gap: 8px; margin-top: 9px; }
.st-div { height: 1px; background: rgba(150,125,105,.2); margin: 15px 0 14px; }
body.theme-dark .st-modal .st-div { background: rgba(228,179,99,.22); }
.st-preset-hint { margin-top: 6px; color: #9a8578; font-size: .72rem; line-height: 1.5; word-break: break-all; }
body.theme-dark .st-modal .st-preset-hint { color: #a99a8c; }
.st-btn-primary { flex: 1; padding: 9px 12px; border-radius: 9px; border: 1px solid #c29a4a; background: linear-gradient(135deg, #e4b363, #c29a4a); color: #3a2a10; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.st-btn-primary:hover { filter: brightness(1.06); }
.st-btn-primary:disabled { opacity: .6; cursor: default; }
.st-btn-clear { padding: 9px 14px; border-radius: 9px; border: 1px solid rgba(150,125,105,.3); background: transparent; color: #8a7a6f; font: inherit; font-size: .84rem; cursor: pointer; }
.st-btn-clear:hover { border-color: #c29a4a; background: rgba(228,179,99,.1); }
.st-adv-toggle { width: 100%; text-align: left; padding: 8px 0 2px; border: none; background: transparent; color: #8a6422; font: inherit; font-size: .78rem; cursor: pointer; }
.st-adv { margin-top: 6px; }
.st-key-note { margin-top: 12px; color: #b06a1d; font-size: .74rem; line-height: 1.55; }
body.theme-dark .st-modal .st-key { background: rgba(255,255,255,.06); border-color: rgba(228,179,99,.3); color: #cbbfae; }
body.theme-dark .st-modal .st-key.on { background: rgba(90,170,90,.16); border-color: rgba(120,200,120,.4); color: #9ad79a; }
body.theme-dark .st-modal .st-key.bad { background: rgba(200,70,70,.16); border-color: rgba(220,110,110,.4); color: #f0a0a0; }
body.theme-dark .st-modal .st-adv-toggle { color: #e4b363; }
body.theme-dark .st-modal .st-btn-clear { color: #cbbfae; border-color: rgba(228,179,99,.3); }
body.theme-dark .st-modal .st-key-note { color: #e4b363; }

/* 手机上铺满全屏（不然 600px 的卡片在窄屏上挤） */
@media (max-width: 560px) {
  .st-mask { padding: 0; align-items: stretch; }
  .st-modal { width: 100%; min-width: 0; height: 100%; max-height: 100%; border-radius: 0; border: none; }
  .st-tabs { width: 86px; padding: 8px 6px; }
  .st-panes { padding: 12px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .st-swatch { height: 54px; }
}
/* ===== 设置面板控件 ===== */
.set-group { margin-bottom: 14px; }
.set-label {
  color: #5b4f58; font-size: .9rem; margin-bottom: 6px;
  display: flex; justify-content: space-between; align-items: center;
}
.set-label .hint { font-weight: 400; font-size: .75rem; color: #9a8578; }
.seg {
  display: flex; background: rgba(0,0,0,.06); border-radius: 10px;
  padding: 3px; gap: 3px;
}
.seg button {
  flex: 1; border: none; background: transparent; color: #6a5a55;
  padding: 6px 0; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: .85rem; transition: .2s;
}
.seg button.on { background: #fff; color: #7a4d10; font-weight: 600; box-shadow: 0 1px 4px rgba(50,35,70,.15); }
.seg button:not(.on):hover { background: rgba(0,0,0,.05); }
.switch {
  width: 46px; height: 25px; border-radius: 25px; background: rgba(0,0,0,.14);
  position: relative; cursor: pointer; transition: .2s;
}
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: .2s;
}
.switch.on { background: linear-gradient(135deg, #e4b363, #c29a4a); }
.switch.on .knob { left: 24px; }

/* ===== 动态效果关闭（总开关） ===== */
body.fx-off, body.fx-off * { cursor: auto !important; }
body.fx-off #trailCanvas { display: none !important; }

/* ===== 深色主题覆盖 ===== */
body.theme-dark .menu-container { background: rgba(20,18,32,0.97); border-color: rgba(220,200,160,0.18); }
body.theme-dark .menu-header h1 { color: #f7e3c0; text-shadow: 0 4px 12px rgba(0,0,0,.5); }
body.theme-dark .menu-header h1 i { color: #e4b363; background: rgba(20,20,30,.3); filter: drop-shadow(0 0 8px rgba(230,180,80,.35)); }
body.theme-dark .subtitle { background: rgba(0,0,0,.5); color: #cbbaa0; border-color: rgba(200,170,120,.4); }
body.theme-dark .ai-input-area { background: rgba(22,20,34,.93); border-color: rgba(210,180,140,.25); }
body.theme-dark .ai-input-area label { color: #d4c4b0; }
body.theme-dark .ai-input-area label i { color: #e4b363; }
body.theme-dark .ai-input-row input { background: rgba(0,0,0,.6); color: #f0e4d4; border-color: rgba(210,180,140,.3); }
body.theme-dark .ai-input-row input:focus { background: rgba(0,0,0,.7); border-color: #e4b363; }
body.theme-dark .ai-input-row input::placeholder { color: #8a7a6a; }
body.theme-dark .context-bar { background: rgba(0,0,0,.45); border-color: rgba(210,180,140,.18); }
body.theme-dark .context-toggle { color: #d4c4b0; }
body.theme-dark .context-toggle i { color: #e4b363; }
body.theme-dark .session-hint { color: #8a7a6a; }
body.theme-dark .menu-item { background: rgba(30,25,40,.93); border-color: rgba(210,180,140,.3); box-shadow: 0 10px 20px -8px rgba(0,0,0,.5); }
body.theme-dark .menu-item:hover { background: rgba(50,40,65,.95); border-color: rgba(240,200,130,.6); }
body.theme-dark .icon-circle { background: linear-gradient(135deg,#3b2e4a,#1f1a2e); color: #f5d78c; border-color: rgba(230,200,140,.5); }
body.theme-dark .menu-item:hover .icon-circle { color: #ffddb0; border-color: #f3b95b; background: linear-gradient(135deg,#4d385e,#2a1f38); }
body.theme-dark .menu-item h3 { color: #f3e1c4; text-shadow: 0 2px 5px rgba(0,0,0,.5); }
body.theme-dark .menu-item .desc { color: #c0b09c; background: rgba(0,0,0,.35); }
body.theme-dark #resultArea { background: rgba(20,18,30,.92); border-color: rgba(210,180,140,.2); }
body.theme-dark .result-header .left h3 { color: #f7e3c0; }
body.theme-dark .result-header .left h3 i { color: #e4b363; }
body.theme-dark .result-actions button { color: #cbbaa0; background: rgba(255,255,255,.08); border-color: rgba(230,210,180,.2); }
body.theme-dark .result-actions button:hover { color: #f7e3c0; background: rgba(255,255,255,.18); border-color: #e4b363; }
body.theme-dark #resultTitle { color: #e4b363; background: rgba(0,0,0,.3); }
body.theme-dark #resultContent { color: #e0d5c5; background: rgba(0,0,0,.45); border-left-color: #e4b363; }
body.theme-dark #resultContent .loading-placeholder { color: #8a7a6a; }
body.theme-dark #resultContent .loading-placeholder i { color: #e4b363; }
body.theme-dark .bookshelf-header { color: #cbbaa0; }
body.theme-dark .bookshelf-header i { color: #e4b363; }
body.theme-dark .bookshelf-list { background: rgba(0,0,0,.4); }
body.theme-dark .shelf-empty { color: #6a5a4a; }
body.theme-dark .shelf-item { color: #d4c4b0; }
body.theme-dark .shelf-item strong { color: #f3e1c4; }
body.theme-dark .shelf-export-btn { color: #cbbaa0; border-color: rgba(228,179,99,.35); }
body.theme-dark .footer-note { color: #9b8c7a; border-top-color: rgba(200,170,120,.4); }
body.theme-dark .footer-note i { color: #cfb17b; }
body.theme-dark .cooldown-bar { color: #f5ca7c; background: rgba(228,179,99,.12); border-color: rgba(228,179,99,.35); }
body.theme-dark #cooldownSeconds { color: #ffd799; }
body.theme-dark #resultContent.rendered h1, body.theme-dark #resultContent.rendered h2, body.theme-dark #resultContent.rendered h3 { color: #f7e3c0; border-bottom-color: rgba(228,179,99,.3); }
body.theme-dark #resultContent.rendered strong { color: #f5d78c; }
body.theme-dark #resultContent.rendered code, body.theme-dark #resultContent.rendered pre { background: rgba(0,0,0,.35); color: #ffd799; }
body.theme-dark #resultContent.rendered blockquote { color: #cbbaa0; background: rgba(0,0,0,.2); }
body.theme-dark #resultContent.rendered a { color: #e4b363; }
body.theme-dark .card-head { color: #f7e3c0; border-bottom-color: rgba(228,179,99,.35); }
body.theme-dark .card-head i { color: #e4b363; }
body.theme-dark .field-label { color: #e4b363; }
body.theme-dark .field-value { color: #e0d5c5; }
body.theme-dark .act-title { color: #f5d78c; }
body.theme-dark .act-content { color: #e0d5c5; }
body.theme-dark .act-item { background: rgba(0,0,0,.3); }
body.theme-dark .settings-btn { background: rgba(30,25,40,.85); color: #e4b363; border-color: rgba(228,179,99,.45); }
body.theme-dark .settings-btn:hover { background: rgba(45,36,55,.95); color: #f5ca7c; }
body.theme-dark .settings-panel { background: rgba(20,18,30,.96); border-color: rgba(228,179,99,.4); }
body.theme-dark .settings-head { color: #f7e3c0; }
body.theme-dark .set-label { color: #d4c4b0; }
body.theme-dark .set-label .hint { color: #8a7a6a; }
body.theme-dark .seg { background: rgba(255,255,255,.08); }
body.theme-dark .seg button { color: #cbbaa0; }
body.theme-dark .seg button.on { background: linear-gradient(135deg,#e4b363,#c29a4a); color: #1a1a2e; box-shadow: none; }
body.theme-dark .seg button:not(.on):hover { background: rgba(255,255,255,.1); }
body.theme-dark .switch { background: rgba(255,255,255,.18); }
body.theme-dark .switch.on { background: linear-gradient(135deg,#e4b363,#c29a4a); }
body.theme-dark #musicToggle { background: rgba(30,25,40,.85); color: #e4b363; border-color: rgba(228,179,99,.4); }
body.theme-dark #musicToggle i { color: #e4b363; }
body.theme-dark #musicPanel { background: rgba(20,18,30,.96); border-color: rgba(228,179,99,.25); }
body.theme-dark #musicPanel span { color: #d4c4b0 !important; }
body.theme-dark .export-menu { background: rgba(20,18,30,.98); border-color: rgba(228,179,99,.35); }
body.theme-dark .export-menu button { color: #cbbaa0; }
body.theme-dark .export-menu button:hover { background: rgba(228,179,99,.15); color: #f7e3c0; }
.set-input {
  width: 100%; margin-top: 2px; box-sizing: border-box;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(150, 125, 105, .35);
  background: rgba(255, 255, 255, .75); color: #332b3c;
  font-family: inherit; font-size: .85rem; outline: none;
}
.set-input:focus { border-color: #c29a4a; }
.vn-bg-settings { padding-top: 2px; border-top: 1px solid rgba(150,125,105,.18); }
.vn-bg-pick-all { display: block; padding: 7px 8px; border: 1px dashed rgba(190,150,80,.55); border-radius: 7px; color: #8a6422; text-align: center; font-size: .76rem; cursor: pointer; }
.vn-bg-pick-all input { display: none; }
.vn-bg-library { display: flex; flex-direction: column; gap: 5px; max-height: 130px; overflow-y: auto; margin-top: 7px; }
.vn-bg-item { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px; border-radius: 6px; background: rgba(255,255,255,.38); color: #6a5a55; font-size: .68rem; }
.vn-bg-tags { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 1px 2px; }
.vn-bg-tag {
  border: 1px solid rgba(150,125,105,.35); border-radius: 999px; background: transparent;
  color: #7b6a60; font: inherit; font-size: .64rem; padding: 2px 7px; cursor: pointer; line-height: 1.5;
}
.vn-bg-tag.on { background: rgba(228,179,99,.9); border-color: rgba(190,150,80,.9); color: #2a1d0c; font-weight: 600; }
.vn-bg-tag:hover { border-color: #c29a4a; }
body.theme-dark .vn-bg-tag { color: #cfc2b2; border-color: rgba(228,179,99,.28); }
body.theme-dark .vn-bg-tag.on { background: rgba(228,179,99,.85); color: #241a0c; }
.vn-bg-thumb { width: 38px; height: 25px; flex: 0 0 auto; border-radius: 4px; background-position: center; background-size: cover; }
.vn-bg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-bg-use, .vn-bg-delete { border: 0; background: transparent; cursor: pointer; padding: 2px 4px; font-size: .68rem; }
.vn-bg-use { color: #8a6422; }
.vn-bg-delete { color: #a06f1d; margin-left: auto; }
.vn-bg-reset { width: 100%; margin-top: 6px; padding: 5px 7px; border: 1px solid rgba(150,125,105,.28); border-radius: 7px; background: transparent; color: #8a7a6f; font: inherit; font-size: .74rem; cursor: pointer; }
.vn-bg-reset:hover, .vn-bg-pick-all:hover { border-color: #c29a4a; background: rgba(228,179,99,.1); }
body.theme-dark .vn-bg-item { background: rgba(0,0,0,.22); color: #d8ccbb; }
body.theme-dark .vn-bg-pick-all, body.theme-dark .vn-bg-reset { color: #f0d39a; border-color: rgba(228,179,99,.3); }
body.theme-dark .vn-bg-use { color: #f0d39a; }
.set-input::placeholder { color: #9a8578; }
body.theme-dark .set-input { background: rgba(0,0,0,.4); color: #f0e4d4; border-color: rgba(210,180,140,.3); }
body.theme-dark .set-input::placeholder { color: #8a7a6a; }


/* ===== 浅色主题：白透卡片 + 深色文字 ===== */
.bg-scrim { background: rgba(15, 12, 26, 0.22); }

.menu-container {
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 20px 45px rgba(50, 35, 70, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.menu-header h1 { color: #312a3c; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); }
.menu-header h1 i { color: #a06f1d; background: rgba(255, 255, 255, 0.5); filter: drop-shadow(0 0 6px rgba(180,120,40,0.25)); }
.subtitle { background: rgba(255, 255, 255, 0.4); color: #7a5a35; border-color: rgba(255, 255, 255, 0.7); }

.ai-input-area { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.45); }
.ai-input-area label { color: #5a4a44; }
.ai-input-area label i { color: #a06f1d; }
.ai-input-row input { background: rgba(255, 255, 255, 0.6); color: #2e2733; border-color: rgba(190, 165, 130, 0.5); }
.ai-input-row input:focus { background: rgba(255, 255, 255, 0.85); border-color: #c29a4a; box-shadow: 0 0 16px rgba(190, 140, 60, 0.2); }
.ai-input-row input::placeholder { color: #9a8578; }

.context-bar { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.4); }
.context-toggle { color: #5b4f58; }
.context-toggle i { color: #a06f1d; }
.session-hint { color: #8a7a6f; }

.menu-item { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 8px 18px -10px rgba(50,35,70,0.15); }
.menu-item:hover { background: rgba(255, 255, 255, 0.36); border-color: rgba(210, 160, 80, 0.6); box-shadow: 0 14px 24px -10px rgba(50,35,70,0.25); }
.icon-circle { background: rgba(255, 255, 255, 0.6); border-color: rgba(190, 150, 70, 0.55); color: #a06f1d; }
.menu-item:hover .icon-circle { color: #b07c2b; background: rgba(255, 255, 255, 0.85); border-color: #c29a4a; }
.menu-item h3 { color: #332b3c; text-shadow: none; }
.menu-item .desc { color: #6a5a55; background: rgba(255, 255, 255, 0.4); }

#resultArea { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.45); }
.result-header .left h3 { color: #332b3c; }
.result-header .left h3 i { color: #a06f1d; }
.result-actions button { color: #5b4f58; background: rgba(255, 255, 255, 0.3); border-color: rgba(150, 125, 105, 0.35); }
.result-actions button:hover { color: #332b3c; background: rgba(255, 255, 255, 0.55); border-color: #c29a4a; }
#resultTitle { color: #9a6a1f; background: rgba(255, 255, 255, 0.4); }
#resultContent { color: #3a3040; background: rgba(255, 255, 255, 0.6); border-left-color: #c29a4a; }
#resultContent .loading-placeholder { color: #8a7a6f; }
#resultContent .loading-placeholder i { color: #a06f1d; }

.bookshelf-header { color: #5b4f58; }
.bookshelf-header i { color: #a06f1d; }
.bookshelf-list { background: rgba(255, 255, 255, 0.4); }
.shelf-empty { color: #8a7a6f; }
.shelf-item { color: #4a3f4c; }
.shelf-item strong { color: #332b3c; }
.shelf-export-btn { color: #6a5a55; border-color: rgba(150, 120, 70, 0.5); }
.shelf-export-btn:hover { color: #332b3c; border-color: #c29a4a; background: rgba(255, 255, 255, 0.35); }

.footer-note { color: #6a5a55; border-top-color: rgba(150, 125, 100, 0.35); }
.footer-note i { color: #a06f1d; }

.cooldown-bar { color: #9a6a1f; background: rgba(255, 255, 255, 0.35); border-color: rgba(190, 150, 70, 0.5); }
.cooldown-bar i { color: #a06f1d; }
#cooldownSeconds { color: #7a4d10; }

/* Markdown / 卡片 深色文字 */
#resultContent.rendered h1, #resultContent.rendered h2, #resultContent.rendered h3 { color: #332b3c; border-bottom-color: rgba(190, 150, 70, 0.4); }
#resultContent.rendered strong { color: #9a6a1f; }
#resultContent.rendered code, #resultContent.rendered pre { background: rgba(0,0,0,0.07); color: #6a3d0a; }
#resultContent.rendered blockquote { color: #6a5a55; background: rgba(255,255,255,0.5); border-left-color: #c29a4a; }
#resultContent.rendered a { color: #9a6a1f; }
.structured-card .card-head { color: #332b3c; border-bottom-color: rgba(190, 150, 70, 0.5); }
.card-head i { color: #a06f1d; }
.field-label { color: #9a6a1f; }
.field-value { color: #3a3040; }
.field-value ul li::before { color: #c29a4a; }
.act-title { color: #9a6a1f; }
.act-content { color: #3a3040; }
.act-item { background: rgba(255, 255, 255, 0.55); border-left-color: #c29a4a; }

/* 悬浮层 */
.toast { background: rgba(45, 36, 52, 0.95); color: #f7e3c0; }
#musicToggle { background: rgba(255, 255, 255, 0.75); color: #a06f1d; border-color: rgba(190, 150, 80, 0.5); }
#musicToggle i { color: #a06f1d; }
#musicPanel { background: rgba(255, 255, 255, 0.94); border-color: rgba(190, 150, 80, 0.4); }
#musicPanel #playlist { border-top-color: rgba(150, 120, 70, 0.2); }
#musicPanel span { color: #6a4d20 !important; }
#exportMenu, .export-menu { background: rgba(255, 255, 255, 0.97); border-color: rgba(190, 150, 80, 0.5); }
.export-menu button { color: #5b4f58; }
.export-menu button:hover { background: rgba(190, 140, 60, 0.15); color: #332b3c; }
.export-menu button i { color: #a06f1d; }

/* ===== 创作线栏 + 历史面板 ===== */
.line-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; font-size: .82rem;
}
.line-title { color: #7a5a35; font-weight: 600; letter-spacing: 1px; }
.line-select {
  max-width: 230px; flex: 1; min-width: 120px;
  padding: 5px 8px; border-radius: 8px;
  border: 1px solid rgba(150, 125, 105, .35);
  background: rgba(255, 255, 255, .8); color: #332b3c;
  font-family: inherit; font-size: .82rem; outline: none;
}
.mini-btn {
  border: 1px solid rgba(150, 125, 105, .35); background: rgba(255, 255, 255, .7);
  color: #6a5a55; border-radius: 8px; padding: 4px 9px; cursor: pointer;
  font-family: inherit; font-size: .8rem; transition: .2s;
}
.mini-btn:hover { background: rgba(255, 255, 255, .95); color: #332b3c; border-color: #c29a4a; }
.history-panel {
  display: none; margin-top: 8px; max-height: 240px; overflow-y: auto;
  background: rgba(255, 255, 255, .85); border: 1px solid rgba(190, 150, 80, .4);
  border-radius: 10px; padding: 6px;
}
.history-panel.show { display: block; }
.history-empty { color: #9a8578; font-size: .8rem; text-align: center; padding: 10px; }
.his-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 9px; border-radius: 8px; cursor: pointer; transition: .15s;
}
.his-item:hover { background: rgba(190, 150, 80, .14); }
.his-item + .his-item { border-top: 1px dashed rgba(150, 120, 70, .2); }
.who {
  flex-shrink: 0; font-size: .72rem; padding: 1px 7px; border-radius: 8px;
  background: rgba(190, 150, 80, .2); color: #7a5a35; margin-top: 2px;
}
.who-user { background: rgba(90, 130, 200, .18); color: #3f6aa8; }
.his-text { color: #4a3f4c; font-size: .82rem; line-height: 1.6; }
body.theme-dark .line-title { color: #f5d78c; }
body.theme-dark .line-select { background: rgba(0,0,0,.45); color: #f0e4d4; border-color: rgba(210,180,140,.3); }
body.theme-dark .mini-btn { background: rgba(255,255,255,.09); color: #cbbaa0; border-color: rgba(228,179,99,.3); }
body.theme-dark .mini-btn:hover { background: rgba(228,179,99,.18); color: #f7e3c0; }
body.theme-dark .history-panel { background: rgba(20,18,30,.95); border-color: rgba(228,179,99,.35); }
body.theme-dark .history-empty { color: #8a7a6a; }
body.theme-dark .his-item:hover { background: rgba(228,179,99,.12); }
body.theme-dark .his-item + .his-item { border-top-color: rgba(228,179,99,.15); }
body.theme-dark .who { background: rgba(228,179,99,.18); color: #f5d78c; }
body.theme-dark .who-user { background: rgba(90,130,200,.25); color: #9cc2f5; }
body.theme-dark .his-text { color: #e0d5c5; }

/* ===== 内嵌重命名 / 二次确认 / 无弹窗 ===== */
.rename-box { display: flex; gap: 6px; margin-top: 8px; }
.mini-ok { background: linear-gradient(135deg, #e4b363, #c29a4a); color: #1a1a2e; border: none; font-weight: 600; }
.mini-btn.danger { border-color: rgba(255, 107, 107, .5); color: #ff6b6b; background: rgba(255, 107, 107, .08); }
.shelf-rename-input {
  border: 1px solid #c29a4a; background: rgba(255,255,255,.9); color: #332b3c;
  border-radius: 6px; padding: 2px 6px; font-size: .9rem; width: 60%; outline: none;
}
body.theme-dark .shelf-rename-input { background: rgba(0,0,0,.5); color: #f0e4d4; }

/* ===== 视图切换（首页 / 世界书） ===== */
.view-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; }
.vt {
  border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.65);
  color: #5b4f58; padding: 6px 22px; border-radius: 20px; cursor: pointer;
  font-family: inherit; font-size: .95rem; transition: .2s;
}
.vt:hover { border-color: #c29a4a; }
.vt.on { background: linear-gradient(135deg,#e4b363,#c29a4a); color: #1a1a2e; font-weight: 600; border-color: #e4b363; }
body.theme-dark .vt { background: rgba(255,255,255,.08); color: #cbbaa0; border-color: rgba(228,179,99,.3); }
body.theme-dark .vt.on { background: linear-gradient(135deg,#e4b363,#c29a4a); color: #1a1a2e; }

/* ===== 世界书（辐射脑图） ===== */
/* 入场动画统一由 JS 加 .entrance 驱动（见文件末尾） */
.wb-head { text-align: center; margin-bottom: 10px; }
.wb-title { font-size: 1.5rem; font-weight: 700; color: #332b3c; }
.wb-sub { color: #8a7a6f; font-size: .8rem; margin-top: 4px; }
.wb-canvas {
  position: relative; width: 100%; height: 430px; margin: 6px 0 14px;
}
.wb-node {
  position: absolute; transform: translate(-50%,-50%);
  cursor: pointer; text-align: center; user-select: none;
  border-radius: 14px; padding: 8px 10px; transition: .18s;
  background: rgba(255,255,255,.85); border: 1px solid rgba(190,150,80,.5);
  color: #5b4f58; box-shadow: 0 8px 20px rgba(60,40,90,.12);
  min-width: 66px;
}
.wb-node:hover { transform: translate(-50%,-50%) scale(1.08); border-color: #c29a4a; box-shadow: 0 10px 26px rgba(60,40,90,.2); }
.wb-node .wn-ico { font-size: 1.4rem; display: block; }
.wb-node .wn-label { font-weight: 700; font-size: .95rem; color: #332b3c; display: block; margin-top: 1px; }
.wb-node .wn-num {
  position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px;
  line-height: 18px; font-size: .72rem; border-radius: 9px;
  background: linear-gradient(135deg,#e4b363,#c29a4a); color: #1a1a2e; font-weight: 700;
}
.wb-trunk {
  background: linear-gradient(145deg, #e9c77f, #cfa44f);
  border-color: #b8860b; color: #2a1f0d; box-shadow: 0 10px 30px rgba(170,120,30,.35);
}
.wb-trunk .wn-label { color: #241a08; }
.wb-trunk .wn-count { color: #5c4508; }
.wb-node .wn-branchmark { color:#a06f1d; }
.wb-panel { min-height: 60px; }
.wb-card {
  background: rgba(255,255,255,.7); border: 1px solid rgba(190,150,80,.4);
  border-radius: 14px; padding: 12px 14px;
}
.wb-card h4 { margin: 0 0 8px; color: #332b3c; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; cursor: pointer; border-bottom: 1px dashed rgba(150,120,70,.18); }
.wb-row:hover { background: rgba(190,150,80,.12); }
.wb-row .r-title { color: #332b3c; font-size: .9rem; }
.wb-row .r-meta { color: #9a8578; font-size: .72rem; }
.wb-row .r-child { margin-left: 18px; font-size:.85rem; opacity:.9; }
.wb-mini {
  border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.75); color:#6a5a55;
  border-radius: 8px; padding: 3px 8px; cursor: pointer; font-size:.78rem; font-family:inherit; margin-left:4px; transition:.15s;
}
.wb-mini:hover { border-color:#c29a4a; color:#332b3c; }
.wb-mini.warn:hover { border-color: rgba(255,107,107,.7); color:#e05555; }
.wb-btn {
  background: linear-gradient(135deg,#e4b363,#c29a4a); border: none; color:#1a1a2e;
  padding: 7px 16px; border-radius: 18px; cursor: pointer; font-weight:600; font-family:inherit; font-size:.85rem;
}
.wb-btn.ghost { background: rgba(255,255,255,.5); color:#6a5a55; border:1px solid rgba(150,125,105,.35); font-weight:400; }
.wb-empty { color:#9a8578; font-size:.85rem; text-align:center; padding: 10px; }
.wb-leaf-content { white-space: pre-wrap; color:#3a3040; line-height:1.8; font-size:.95rem; background: rgba(255,255,255,.5); border-left:3px solid #c29a4a; border-radius:6px; padding:10px 12px; }
.wb-stream { white-space: pre-wrap; font-size:.9rem; line-height:1.7; color:#3a3040; background: rgba(0,0,0,.04); border:1px dashed rgba(150,120,70,.4); border-radius:8px; padding:10px; margin-top:10px; min-height:40px; }
body.theme-dark .wb-title { color:#f7e3c0; }
body.theme-dark .wb-sub { color:#8a7a6a; }
body.theme-dark .wb-node { background: rgba(30,25,40,.92); border-color: rgba(228,179,99,.4); color:#cbbaa0; }
body.theme-dark .wb-node .wn-label { color:#f3e1c4; }
body.theme-dark .wb-node .wn-count { color:#f5d78c; }
body.theme-dark .wb-trunk { background: linear-gradient(145deg,#8a6a2a,#6b4f18); }
body.theme-dark .wb-trunk .wn-label { color:#ffe9b0; }
body.theme-dark .wb-trunk .wn-count { color:#ffe2a0; }
body.theme-dark .wb-card { background: rgba(20,18,30,.7); border-color: rgba(228,179,99,.3); }
body.theme-dark .wb-card h4 { color:#f7e3c0; }
body.theme-dark .wb-row { border-bottom-color: rgba(228,179,99,.15); }
body.theme-dark .wb-row:hover { background: rgba(228,179,99,.12); }
body.theme-dark .wb-row .r-title { color:#f3e1c4; }
body.theme-dark .wb-row .r-meta { color:#8a7a6a; }
body.theme-dark .wb-mini { background: rgba(255,255,255,.09); color:#cbbaa0; border-color: rgba(228,179,99,.3); }
body.theme-dark .wb-btn.ghost { background: rgba(255,255,255,.1); color:#cbbaa0; }
body.theme-dark .wb-empty { color:#8a7a6a; }
body.theme-dark .wb-leaf-content { color:#e0d5c5; background: rgba(0,0,0,.25); border-left-color:#e4b363; }
body.theme-dark .wb-stream { color:#e0d5c5; background: rgba(0,0,0,.25); border-color: rgba(228,179,99,.3); }

/* 世界书：手写挂词 */
.wb-manual { display: flex; gap: 6px; margin-bottom: 8px; }
.wb-manual input {
  flex: 1; min-width: 0; padding: 5px 9px; border-radius: 8px;
  border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.85);
  color: #332b3c; font-size: .85rem; outline: none;
}
.wb-manual input:focus { border-color: #c29a4a; }
body.theme-dark .wb-manual input { background: rgba(0,0,0,.4); color: #f0e4d4; border-color: rgba(210,180,140,.3); }

/* 世界书：整本小说按钮 + 方向条 + 快捷题材 chips */
.wb-whole-row { margin-top: 10px; }
.wb-wholebtn {
  background: linear-gradient(135deg,#e4b363,#c29a4a); color:#1a1a2e; border:none;
  padding: 9px 22px; border-radius: 20px; cursor: pointer; font-weight: 700;
  font-family: inherit; font-size: .92rem;
  box-shadow: 0 6px 18px rgba(170,120,30,.22); transition: .2s;
}
.wb-wholebtn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(170,120,30,.38); }
.wb-dir { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.wb-tlabel { font-weight: 700; color: #a06f1d; font-size: .85rem; white-space: nowrap; }
.wb-dir input {
  flex: 1; min-width: 110px; padding: 5px 9px; border-radius: 8px;
  border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.85);
  color: #332b3c; font-size: .85rem; outline: none; font-family: inherit;
}
.wb-dir input:focus { border-color: #c29a4a; }
.wb-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 12px; }
.wb-chip {
  border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.6);
  color: #6a5a55; border-radius: 12px; padding: 2px 10px; cursor: pointer;
  font-size: .78rem; font-family: inherit; transition: .15s;
}
.wb-chip:hover { border-color: #c29a4a; color: #332b3c; background: rgba(228,179,99,.25); }
.wb-chip.on { border-color: #c29a4a; color: #332b3c; background: rgba(228,179,99,.4); font-weight: 700; }
/* 点树枝就地弹出的主题选项 */
.wb-pop {
  position: absolute; z-index: 40; width: 252px; transform: translateX(-50%);
  background: rgba(255,255,255,.97); border: 1px solid rgba(190,150,80,.5);
  border-radius: 14px; padding: 10px 12px; box-shadow: 0 14px 34px rgba(60,40,90,.22);
  text-align: left; animation: fadeIn .18s;
}
.wb-pop.up { transform: translate(-50%,-100%); }
.wb-pop-h { display: flex; justify-content: space-between; align-items: center; color: #332b3c; font-size: .9rem; }
.wb-pop-x { cursor: pointer; color: #9a8578; font-size: .85rem; padding: 0 2px; }
.wb-pop-x:hover { color: #e05555; }
.wb-pop-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.wb-pop-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-height: 158px; overflow-y: auto; }
.wb-ptag {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border-radius: 12px; font-size: .82rem; color: #332b3c;
  background: rgba(255,255,255,.85); border: 1px solid rgba(150,125,105,.3);
}
.wb-ptag em { font-style: normal; cursor: pointer; }
.wb-ptag em:hover { color: #a06f1d; }
.wb-pedit {
  width: 96px; padding: 3px 6px; border-radius: 8px; font-family: inherit;
  border: 1px solid #c29a4a; background: #fff; color: #332b3c; font-size: .82rem; outline: none;
}
.wb-px { cursor: pointer; color: #b9a89c; font-size: .78rem; padding: 0 2px; }
.wb-px:hover { color: #e05555; }
.wb-pempty { color: #9a8578; font-size: .78rem; padding: 2px 0 4px; }
.wb-padd { display: flex; gap: 5px; margin-top: 8px; }
.wb-padd input {
  flex: 1; min-width: 0; padding: 5px 8px; border-radius: 8px; font-family: inherit;
  border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.85);
  color: #332b3c; font-size: .82rem; outline: none;
}
.wb-padd input:focus { border-color: #c29a4a; }
.wb-padd .wb-btn { padding: 5px 13px; font-size: .82rem; border-radius: 10px; }
body.theme-dark .wb-ptag { background: rgba(255,255,255,.1); color: #f0e4d4; border-color: rgba(210,180,140,.3); }
body.theme-dark .wb-ptag em:hover { color: #e4b363; }
body.theme-dark .wb-pedit, body.theme-dark .wb-padd input { background: rgba(0,0,0,.4); color: #f0e4d4; border-color: rgba(210,180,140,.3); }
body.theme-dark .wb-pempty { color: #8a7a6a; }
body.theme-dark .wb-px { color: #8a7a6a; }
.wb-node .wn-dir {
  display: block; margin-top: 3px; font-size: .68rem; color: #a06f1d;
  background: rgba(228,179,99,.22); border-radius: 8px; padding: 0 6px;
}
body.theme-dark .wb-pop { background: rgba(24,21,33,.97); border-color: rgba(228,179,99,.4); }
body.theme-dark .wb-pop-h { color: #f7e3c0; }
body.theme-dark .wb-chip.on { color: #ffe9b0; background: rgba(228,179,99,.28); border-color: #e4b363; }
body.theme-dark .wb-node .wn-dir { color: #e4b363; background: rgba(228,179,99,.16); }
#wbWhole { margin-top: 12px; }
#wbWhole .wb-stream { max-height: 46vh; overflow-y: auto; }
body.theme-dark .wb-wholebtn { background: linear-gradient(135deg,#b3873f,#8a6422); color: #ffe9b0; }
body.theme-dark .wb-tlabel { color: #e4b363; }
body.theme-dark .wb-dir input { background: rgba(0,0,0,.4); color: #f0e4d4; border-color: rgba(210,180,140,.3); }
body.theme-dark .wb-chip { background: rgba(255,255,255,.08); color: #cbbaa0; border-color: rgba(228,179,99,.3); }
body.theme-dark .wb-chip:hover { background: rgba(228,179,99,.2); color: #ffe9b0; }

/* 世界书：设定勾选 */
.wb-pck { cursor: pointer; font-style: normal; font-size: .78rem; color: #c29a4a; }
.wb-pck:hover { color: #8a6422; }
.wb-ptag.off { opacity: .5; }
.wb-ptag.off em { text-decoration: line-through; }

/* 生成工具条 / 错误提示 */
.wb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.wb-note { color: #9a8578; font-size: .8rem; margin-right: 4px; }
.wb-err {
  margin-top: 8px; padding: 8px 10px; border-radius: 10px; font-size: .85rem; color: #b03a3a;
  background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.35);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* 作品库 */
.wr-msg { margin: 0 2px 8px; font-size: .82rem; color: #2f6b34; }
.wr-msg.bad { color: #a33333; }
body.theme-dark .wr-msg { color: #9ad79a; }
body.theme-dark .wr-msg.bad { color: #f0a0a0; }
.works-list { display: flex; flex-direction: column; gap: 8px; }
.work-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.7); border: 1px solid rgba(190,150,80,.35); transition: .15s;
}
.work-row:hover { border-color: #c29a4a; background: rgba(228,179,99,.14); }
.wr-title { color: #332b3c; font-weight: 600; font-size: .95rem; }
.wr-meta { color: #9a8578; font-size: .76rem; margin-top: 2px; }
.wr-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.wr-rename { width: 100%; padding: 6px 8px; border-radius: 8px; font-family: inherit; font-size: .92rem; font-weight: 600; border: 1px solid #c29a4a; background: rgba(255,255,255,.95); color: #332b3c; outline: none; }
body.theme-dark .wr-rename { background: rgba(30,25,40,.9); color: #f3e1c4; border-color: rgba(228,179,99,.5); }
.wk-title {
  width: 100%; padding: 8px 10px; border-radius: 10px; margin-bottom: 8px; font-family: inherit;
  border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.85);
  color: #332b3c; font-size: 1rem; font-weight: 600; outline: none;
}
.wk-title:focus { border-color: #c29a4a; }
.wk-text {
  width: 100%; min-height: 46vh; padding: 12px; border-radius: 10px; resize: vertical;
  border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.6);
  color: #3a3040; font-size: .95rem; line-height: 1.9; font-family: inherit; outline: none;
}
.wk-text:focus { border-color: #c29a4a; }
.wk-snap {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px; white-space: pre-wrap;
  font-size: .85rem; line-height: 1.7; color: #3a3040;
  background: rgba(0,0,0,.04); border: 1px dashed rgba(150,120,70,.4);
}
body.theme-dark .wb-pck { color: #e4b363; }
body.theme-dark .wb-note { color: #8a7a6a; }
body.theme-dark .work-row { background: rgba(20,18,30,.7); border-color: rgba(228,179,99,.3); }
body.theme-dark .wr-title { color: #f3e1c4; }
body.theme-dark .wr-meta { color: #8a7a6a; }
body.theme-dark .wk-title, body.theme-dark .wk-text {
  background: rgba(0,0,0,.35); color: #f0e4d4; border-color: rgba(210,180,140,.3);
}
body.theme-dark .wk-snap { color: #e0d5c5; background: rgba(0,0,0,.25); }
body.theme-dark .wb-err { color: #ffb3b3; background: rgba(255,107,107,.14); }

/* 剧情模块（一章一选） */
.plot-card { margin-bottom: 12px; }
.plot-hint { color: #8a7a6f; font-size: .82rem; line-height: 1.7; margin-bottom: 10px; }
.plot-prev {
  font-size: .84rem; color: #5b4f58; line-height: 1.7; margin-bottom: 8px;
  background: rgba(0,0,0,.04); border-left: 3px solid #c29a4a; border-radius: 6px; padding: 7px 10px;
  white-space: pre-wrap;
}
.plot-label { color: #a06f1d; font-size: .84rem; font-weight: 600; margin-bottom: 6px; }
.plot-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.plot-opt {
  display: flex; align-items: flex-start; gap: 6px; cursor: pointer;
  flex: 0 0 auto; width: 152px; padding: 6px 9px; border-radius: 10px;
  background: rgba(255,255,255,.7); border: 1px solid rgba(150,125,105,.3); transition: .15s;
}
.plot-opt:hover { border-color: #c29a4a; }
.plot-opt.on { border-color: #c29a4a; background: rgba(228,179,99,.24); }
.plot-opt input { accent-color: #c29a4a; flex: none; margin-top: 2px; }
.po-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.po-txt b { color: #332b3c; font-weight: 700; font-size: .87rem; }
.po-txt em { font-style: normal; color: #9a8578; font-size: .7rem; line-height: 1.35; }
.plot-add { display: inline-flex; align-items: center; gap: 5px; }
.plot-add input {
  width: 118px; padding: 5px 9px; border-radius: 8px; font-family: inherit;
  border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.85);
  color: #332b3c; font-size: .82rem; outline: none;
}
.plot-add input:focus { border-color: #c29a4a; }
body.theme-dark .plot-hint { color: #8a7a6a; }
body.theme-dark .plot-prev { color: #d8ccbb; background: rgba(0,0,0,.25); }
body.theme-dark .plot-label { color: #e4b363; }
body.theme-dark .plot-opt { background: rgba(30,25,40,.8); border-color: rgba(228,179,99,.3); }
body.theme-dark .plot-opt.on { background: rgba(228,179,99,.2); }
body.theme-dark .po-txt b { color: #f3e1c4; }
body.theme-dark .po-txt em { color: #8a7a6a; }
body.theme-dark .plot-add input { background: rgba(0,0,0,.4); color: #f0e4d4; border-color: rgba(210,180,140,.3); }

/* ===== 世界书 · 辐射型思维导图 ===== */
.wb-tree-tools { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.wb-tip { color: #9a8578; font-size: .76rem; }
.mb-glow {
  position: absolute; width: 260px; height: 260px; transform: translate(-50%,-50%);
  border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(228,179,99,.30) 0%, rgba(228,179,99,.10) 42%, rgba(228,179,99,0) 70%);
  animation: mbGlow 4s ease-in-out infinite;
}
@keyframes mbGlow { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
.mb-node {
  position: absolute; transform: translate(-50%,-50%);
  cursor: pointer; user-select: none; text-align: center;
  transition: opacity .18s, box-shadow .18s, border-color .18s; font-family: inherit;
}
.mb-node.hl { z-index: 7; }
.mb-node.dim { opacity: .28; }
.mb-root {
  z-index: 5; width: 96px; height: 96px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(145deg,#f0d49a,#d5aa55);
  border: 3px solid #b8860b; color: #2a1f0d;
  box-shadow: 0 12px 34px rgba(170,120,30,.4);
}
.mb-root .mb-ico { font-size: 1.6rem; }
.mb-root .mb-label { font-weight: 700; font-size: .95rem; }
.mb-root .mb-hi { font-size: .62rem; opacity: .78; }
.mb-branch {
  z-index: 4; min-width: 74px; padding: 8px 10px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255,255,255,.92); border: 2px solid rgba(190,150,80,.6);
  color: #5b4f58; box-shadow: 0 8px 22px rgba(60,40,90,.16);
}
.mb-branch:hover { border-color: #c29a4a; box-shadow: 0 0 0 7px rgba(228,179,99,.2), 0 10px 26px rgba(60,40,90,.2); }
.mb-branch .mb-ico { font-size: 1.35rem; }
.mb-branch .mb-label { font-weight: 700; font-size: .9rem; color: #332b3c; }
.mb-branch .mb-dirtag { font-size: .68rem; color: #a06f1d; background: rgba(228,179,99,.22); border-radius: 8px; padding: 0 6px; }
.mb-leaf {
  z-index: 3; max-width: 148px; padding: 5px 10px; border-radius: 12px;
  background: rgba(255,255,255,.86); border: 1px solid rgba(190,150,80,.45);
  color: #4a4050; font-size: .82rem; line-height: 1.35; box-shadow: 0 5px 14px rgba(60,40,90,.12);
}
.mb-leaf:hover { border-color: #c29a4a; box-shadow: 0 0 0 5px rgba(228,179,99,.18); }
.mb-leaf .mb-txt { display: block; word-break: break-word; }
.mb-leaf .mb-off {
  position: absolute; top: -6px; right: -6px; width: 15px; height: 15px; line-height: 15px;
  font-size: .7rem; color: #b03a3a; background: #fff; border-radius: 50%; border: 1px solid rgba(255,107,107,.5);
}
.mb-cnt {
  position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; line-height: 17px;
  font-size: .68rem; border-radius: 9px; background: linear-gradient(135deg,#e4b363,#c29a4a);
  color: #1a1a2e; font-weight: 700;
}
.mb-leaf.mb-d3 { font-size: .76rem; opacity: .92; background: rgba(255,255,255,.78); }
.mb-leaf.mb-d4, .mb-leaf.mb-d5, .mb-leaf.mb-d6 { font-size: .72rem; opacity: .82; background: rgba(255,255,255,.7); }
.mb-pop { width: 268px; max-height: 66vh; overflow-y: auto; z-index: 20; }
.mb-sub { color: #8a7a6f; font-size: .76rem; margin: 2px 0 8px; }
.mb-pri { font-size: .68rem; color: #a06f1d; background: rgba(228,179,99,.22); border-radius: 8px; padding: 1px 6px; margin-left: 6px; white-space: nowrap; }
body.theme-dark .wb-tip { color: #8a7a6a; }
body.theme-dark .mb-branch { background: rgba(20,18,30,.92); border-color: rgba(228,179,99,.4); color: #cbbaa0; }
body.theme-dark .mb-branch .mb-label { color: #f3e1c4; }
body.theme-dark .mb-branch .mb-dirtag { color: #e4b363; background: rgba(228,179,99,.16); }
body.theme-dark .mb-leaf { background: rgba(24,21,33,.9); border-color: rgba(228,179,99,.3); color: #d8ccbb; }
body.theme-dark .mb-leaf.mb-d3, body.theme-dark .mb-leaf.mb-d4 { background: rgba(24,21,33,.78); }
body.theme-dark .mb-root { background: linear-gradient(145deg,#8a6a2a,#6b4f18); border-color: #b8860b; color: #ffe9b0; }
body.theme-dark .mb-sub { color: #8a7a6a; }
body.theme-dark .mb-pri { color: #e4b363; background: rgba(228,179,99,.16); }
.mb-leaf { max-width: 118px; padding: 4px 9px; font-size: .78rem; }
.mb-leaf.on {
  background: linear-gradient(145deg,#f0d49a,#d5aa55);
  border-color: #b8860b; color: #2a1f0d; font-weight: 700;
  box-shadow: 0 6px 16px rgba(170,120,30,.35);
}
.mb-leaf.on .mb-txt { color: #2a1f0d; }
body.theme-dark .mb-leaf.on { background: linear-gradient(145deg,#b3873f,#8a6422); border-color: #e4b363; color: #ffe9b0; }
body.theme-dark .mb-leaf.on .mb-txt { color: #ffe9b0; }
.mb-del {
  position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; line-height: 18px;
  font-style: normal; text-align: center; font-size: .68rem; cursor: pointer; z-index: 9;
  border-radius: 50%; background: rgba(255,107,107,.92); color: #fff;
}
.mb-del.armed { background: #d93636; transform: scale(1.15); }
.mb-node:not(.on) .mb-txt { color: #7b6f78; }
.mb-leaf:not(.on) { opacity: .76; }
.wb-btn.ghost.on { border-color: #c29a4a; color: #332b3c; background: rgba(228,179,99,.28); }
body.theme-dark .wb-btn.ghost.on { color: #ffe9b0; background: rgba(228,179,99,.2); }
body.theme-dark .mb-node:not(.on) .mb-txt { color: #9a8c84; }
.mb-cat {
  z-index: 4; min-width: 66px; padding: 6px 9px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: rgba(255,250,240,.93); border: 1px dashed rgba(190,150,80,.7);
  color: #6a5a55; box-shadow: 0 6px 16px rgba(60,40,90,.12);
}
.mb-cat:hover { border-color: #c29a4a; box-shadow: 0 0 0 6px rgba(228,179,99,.16); }
.mb-cat.open { border-style: solid; background: rgba(255,246,226,.97); }
.mb-cat .mb-ico { font-size: 1.05rem; }
.mb-cat .mb-label { font-weight: 700; font-size: .8rem; color: #6a4f22; }
.mb-cat .mb-tot { font-size: .62rem; color: #b0a094; }
body.theme-dark .mb-cat { background: rgba(30,25,40,.86); border-color: rgba(228,179,99,.45); color: #cbbaa0; }
body.theme-dark .mb-cat .mb-label { color: #e4b363; }
body.theme-dark .mb-cat .mb-tot { color: #8a7a6a; }
.mb-role {
  z-index: 4; min-width: 70px; padding: 7px 10px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: rgba(255,247,235,.95); border: 2px solid rgba(190,150,80,.75);
  color: #6a4f22; box-shadow: 0 7px 18px rgba(60,40,90,.15);
}
.mb-role:hover { border-color: #c29a4a; box-shadow: 0 0 0 7px rgba(228,179,99,.18); }
.mb-role .mb-ico { font-size: 1.15rem; }
.mb-role .mb-label { font-weight: 700; font-size: .84rem; color: #5a4118; }
.mb-aspect { margin-bottom: 7px; }
.mb-aslabel { display: block; font-size: .72rem; color: #a06f1d; margin-bottom: 3px; }
body.theme-dark .mb-role { background: rgba(34,27,42,.92); border-color: rgba(228,179,99,.5); }
body.theme-dark .mb-role .mb-label { color: #f0d9a8; }
body.theme-dark .mb-aslabel { color: #e4b363; }

.mb-node { touch-action: none; }
.mb-branch, .mb-leaf, .mb-role, .mb-cat { cursor: grab; will-change: transform; }
.mb-node.dragging { cursor: grabbing; z-index: 30; }
.mb-leaf.dragging, .mb-role.dragging {
  box-shadow: 0 16px 34px rgba(60,40,90,.3), 0 0 0 8px rgba(228,179,99,.22);
}
.mb-branch.dragging {
  cursor: grabbing; z-index: 30;
  box-shadow: 0 18px 40px rgba(60,40,90,.32), 0 0 0 8px rgba(228,179,99,.25);
}
.mb-node.dim { opacity: .25; }

/* 手机版：外框保持半透明（能透出背景图），但比电脑版更实一点，保证看清 */
@media (max-width: 650px) {
  .menu-container {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 30px rgba(50, 35, 70, 0.18);
  }
  body.theme-dark .menu-container {
    background: rgba(20, 18, 32, 0.86);
    border-color: rgba(220, 200, 160, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  }
}

/* ===== 手机版：阅读优化（≤650px；桌面完全不变） ===== */
@media (max-width: 650px) {
  /* 1) 一进来就铺满屏幕：无外边距、无大圆角、无侧边框 */
  body { padding: 0; }
  .menu-container {
    width: 100%;
    max-width: 100%;
    padding: .9rem .8rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
  }

  /* 2) 正文：取消小框内滚动，字号与行高拉满 */
  #resultContent {
    max-height: none;
    font-size: 1rem;
    line-height: 2;
    padding: 1rem;
  }
  .wb-stream, .wk-text, .wb-leaf-content, .wk-snap {
    font-size: 1rem;
    line-height: 1.95;
  }
  #wbWhole .wb-stream, .plot-dock .wb-stream { max-height: none; }
  .wk-text { min-height: 58vh; }

  /* 3) 小字全部提到 12px 以上 */
  .menu-item .desc, .subtitle, .footer-note, .wb-tip { font-size: .78rem; }
  .wb-note, .wb-empty, .mb-aslabel, .po-txt em, .wr-meta, .plot-hint, .wb-sub {
    font-size: .78rem;
  }
  .result-actions button { font-size: .84rem; padding: .45rem .8rem; }
  .mb-txt, .wb-ptag em, .plot-opt b, .po-txt b, .mb-label, .ch-txt { font-size: .82rem; }

  /* 4) 触控目标不小于 44px（好点、不误触） */
  .vt { min-height: 44px; padding: .5rem 1rem; font-size: .95rem; }
  .wb-btn { min-height: 44px; padding: .55rem 1rem; font-size: .88rem; }
  .wb-chip { min-height: 40px; padding: .4rem .8rem; font-size: .84rem; }
  .plot-opt { min-height: 44px; padding: .5rem .6rem; }
  .plot-add input, .wb-padd input { min-height: 42px; font-size: .88rem; }
  .ai-input-row input, .ai-input-row .send-btn { min-height: 46px; font-size: .95rem; }
  .result-actions button, .shelf-export-btn { min-height: 40px; }
  .mb-leaf { max-width: 96px; }

  /* 0) 锁定缩放：防止 iPhone 点输入框自动放大 + 文字自动膨胀 */
  html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  input, textarea, select { font-size: 16px; }
}

/* ===== 手机版：禁止页面被撑宽（否则浏览器会整体缩到 75%） ===== */
@media (max-width: 650px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  body { display: block; padding: 0; }
  .menu-container {
    width: 100%; max-width: 100%; min-width: 0;
    padding: .9rem .8rem;
    border-radius: 0;
    border-left: none; border-right: none;
    box-shadow: none;
  }
  .view-tabs { flex-wrap: wrap; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .line-bar, .ai-input-row, .context-bar, .result-actions,
  .bookshelf-header, .wb-bar, .wb-tree-tools, .plot-add { flex-wrap: wrap; }
  .line-select { min-width: 0; max-width: 100%; }
  .ai-input-row input { min-width: 0; }
  .menu-item, .wb-card, .plot-card, #resultArea { min-width: 0; }
}

/* ===== 去掉大外框的半透明毛玻璃底（手机 + 电脑都去掉） ===== */
.menu-container {
  background: none;
  border-color: transparent;
  box-shadow: none;
}
body.theme-dark .menu-container {
  background: none;
  border-color: transparent;
  box-shadow: none;
}

/* ===== 画布内缩放：缩放层 + 缩放按钮 ===== */
.mb-world {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transform-origin: 0 0; will-change: transform;
}
.mb-zoom {
  position: absolute; top: 8px; right: 8px; z-index: 30;
  display: flex; flex-direction: column; gap: 6px;
}
.mb-zoom button {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid rgba(190,150,80,.55); background: rgba(255,255,255,.92);
  color: #6a4f22; font-size: 1.15rem; line-height: 1; font-family: inherit;
  box-shadow: 0 4px 12px rgba(60,40,90,.18);
}
.mb-zoom button:hover { border-color: #c29a4a; }
body.theme-dark .mb-zoom button {
  background: rgba(30,25,40,.92); color: #e4b363; border-color: rgba(228,179,99,.4);
}

/* ===== 手机端世界书专用优化（仅 ≤650px，桌面端不变） ===== */
@media (max-width: 650px) {
  /* 顶部工具栏允许自然换行，避免按钮和标题互相覆盖 */
  #worldView .wb-head { margin: .25rem 0 .7rem; }
  #worldView .wb-title { font-size: 1.25rem; }
  #worldView .wb-tree-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 0 .15rem;
  }
  #worldView .wb-tree-tools .wb-btn {
    width: 100%;
    min-width: 0;
    padding-left: .45rem;
    padding-right: .45rem;
    white-space: nowrap;
  }

  /* 画布保持在屏幕内，给节点一个清晰的独立区域 */
  #worldView .wb-canvas {
    height: min(62vh, 560px) !important;
    min-height: 420px;
    margin: .35rem 0 .8rem;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(190,150,80,.18);
  }
  body.theme-dark #worldView .wb-canvas {
    background: rgba(0,0,0,.14);
    border-color: rgba(228,179,99,.18);
  }

  /* 手机端先展示主干和浅层节点，深层词条通过“只看已选”或点击分支查看 */
  #worldView .mb-world .mb-d4,
  #worldView .mb-world .mb-d5,
  #worldView .mb-world .mb-d6 { display: none; }
  #worldView .mb-world > svg { opacity: .42; }
  #worldView .mb-world .mb-d3 {
    max-width: 82px;
    padding: 4px 7px;
    font-size: .68rem;
  }
  #worldView .mb-world .mb-d3 .mb-txt { font-size: .68rem; }

  /* 未选节点退到背景层，选中节点保持醒目 */
  #worldView .mb-world .mb-leaf:not(.on),
  #worldView .mb-world .mb-cat:not(.open) { opacity: .38; }
  #worldView .mb-world .mb-leaf.on,
  #worldView .mb-world .mb-cat.open,
  #worldView .mb-world .mb-branch,
  #worldView .mb-world .mb-role,
  #worldView .mb-world .mb-root { opacity: 1; }

  #worldView .mb-root {
    width: 86px;
    height: 86px;
  }
  #worldView .mb-root .mb-ico { font-size: 1.4rem; }
  #worldView .mb-root .mb-label { font-size: .88rem; }
  #worldView .mb-branch,
  #worldView .mb-role {
    min-width: 64px;
    padding: 6px 7px;
  }
  #worldView .mb-branch .mb-label,
  #worldView .mb-role .mb-label { font-size: .78rem; }

  /* 缩放按钮不遮挡节点 */
  #worldView .mb-zoom { top: 8px; right: 8px; gap: 5px; }
  #worldView .mb-zoom button { width: 38px; height: 38px; font-size: 1rem; }
}

/* ===== 视觉小说 ===== */
.vn-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 4px 0 14px; padding: 0 2px;
}
.vn-title { color: #332b3c; font-size: 1.5rem; font-weight: 700; }
.vn-sub { color: #8a7a6f; font-size: .82rem; margin-top: 4px; }
.vn-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vn-select-label { color: #8a7a6f; font-size: .78rem; display: inline-flex; align-items: center; gap: 5px; }
.vn-select {
  border: 1px solid rgba(190,150,80,.4); border-radius: 9px; padding: 7px 9px;
  background: rgba(255,255,255,.7); color: #5b4f58; font-family: inherit;
}
body.theme-dark .vn-title { color: #f7e3c0; }
body.theme-dark .vn-sub, body.theme-dark .vn-select-label { color: #8a7a6a; }
body.theme-dark .vn-select { background: rgba(0,0,0,.35); color: #f0e4d4; border-color: rgba(228,179,99,.3); }
.vn-layout { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 14px; align-items: start; }
.vn-stage-wrap { min-width: 0; }
.vn-stage {
  position: relative; min-height: 500px; overflow: hidden; border-radius: 18px;
  background-position: center; background-size: cover; border: 1px solid rgba(190,150,80,.45);
  box-shadow: 0 12px 30px rgba(40,25,60,.2);
}
.vn-stage-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  color: rgba(255,255,255,.8); font-size: .74rem; text-shadow: 0 1px 4px #21152a;
  pointer-events: none;
}
.vn-character {
  position: absolute; bottom: 142px; z-index: 2; font-size: 6.5rem;
  filter: drop-shadow(0 9px 9px rgba(20,10,30,.34)); user-select: none;
}
.vn-character-left { left: 13%; }
.vn-character-right { right: 13%; }
/* 暂无正式立绘时不显示 Emoji 占位，避免破坏视觉小说氛围 */
.vn-character { display: none; }
.vn-dialogue {
  position: absolute; left: 4%; right: 4%; bottom: 18px; z-index: 4;
  min-height: 130px; padding: 20px 24px 14px; border-radius: 16px;
  background: rgba(20,16,31,.86); border: 1px solid rgba(255,225,170,.45);
  color: #fff7e8; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.vn-dialogue:focus { outline: 2px solid #e4b363; outline-offset: 3px; }
.vn-dialogue.vn-line-narration { background: rgba(24,18,34,.72); }
.vn-dialogue.vn-line-narration .vn-speaker,
.vn-dialogue.vn-line-narration .vn-next { display: none; }
.vn-dialogue.vn-line-narration .vn-text { text-align: center; color: #f2e7d5; }
.vn-dialogue.vn-line-inner { background: rgba(38,25,48,.88); border-color: rgba(190,155,220,.55); }
.vn-dialogue.vn-line-inner .vn-speaker { background: linear-gradient(135deg,#c9a7d8,#9a76ad); color: #24172d; }
.vn-dialogue.vn-line-inner .vn-text { color: #e2c9ed; font-style: italic; text-align: center; }
.vn-dialogue.vn-line-dialogue .vn-text { color: #fff7e8; }
.vn-scene-change { animation: vnSceneChange .42s ease; }
@keyframes vnSceneChange { 0% { opacity: .35; } 100% { opacity: 1; } }
.vn-speaker {
  position: absolute; top: -15px; left: 20px; padding: 6px 16px; border-radius: 12px;
  background: linear-gradient(135deg,#e4b363,#c29a4a); color: #251a0c; font-weight: 700;
}
.vn-text { font-family: 'Noto Serif SC', serif; font-size: 1.06rem; line-height: 1.95; min-height: 58px; white-space: pre-wrap; }
.vn-next { color: #e4b363; text-align: right; font-size: .76rem; margin-top: 6px; }
.vn-next span { display: inline-block; animation: vnBlink 1.1s infinite; }
@keyframes vnBlink { 50% { opacity: .25; transform: translateY(3px); } }
.vn-toolbar { display: flex; justify-content: flex-end; gap: 7px; margin: 9px 0; flex-wrap: wrap; }
.vn-toolbar button, .vn-choice {
  border: 1px solid rgba(190,150,80,.4); border-radius: 10px; padding: 8px 12px;
  background: rgba(255,255,255,.64); color: #5b4f58; cursor: pointer; font-family: inherit; transition: .18s;
}
.vn-toolbar button:hover, .vn-choice:hover { border-color: #c29a4a; background: rgba(228,179,99,.2); }
body.theme-dark .vn-toolbar button, body.theme-dark .vn-choice { background: rgba(255,255,255,.08); color: #e8dac7; border-color: rgba(228,179,99,.3); }
.vn-choices { display: flex; flex-direction: column; gap: 8px; }
.vn-choice { width: 100%; text-align: left; background: rgba(255,249,235,.86); font-size: .95rem; }
.vn-choice-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: #e4b363; color: #291c0d; font-size: .78rem; font-weight: 700; }
body.theme-dark .vn-choice { background: rgba(25,21,33,.86); }
.vn-side-panel { padding: 14px; border: 1px solid rgba(190,150,80,.35); border-radius: 14px; background: rgba(255,255,255,.48); }
body.theme-dark .vn-side-panel { background: rgba(20,18,30,.62); border-color: rgba(228,179,99,.3); }
.vn-panel-card { padding: 10px; margin-top: 9px; border-radius: 10px; background: rgba(255,255,255,.45); color: #5b4f58; line-height: 1.6; }
body.theme-dark .vn-panel-card { background: rgba(255,255,255,.06); color: #d8ccbb; }
.vn-panel-label { color: #a06f1d; font-size: .74rem; margin-bottom: 3px; }
.vn-current-chapter {
  padding-top: 6px;
  border-top: 1px solid rgba(190,150,80,.28);
  color: #7a5a35;
  font-family: 'Noto Serif SC', serif;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
}
body.theme-dark .vn-current-chapter { border-top-color: rgba(228,179,99,.28); color: #f0d39a; }
.vn-save-row { display: flex; gap: 5px; align-items: center; }
.vn-save-row .vn-select { min-width: 0; flex: 1; padding: 6px 7px; font-size: .78rem; }
.vn-small-btn { border: 1px solid rgba(190,150,80,.4); border-radius: 8px; padding: 6px 8px; background: rgba(255,255,255,.65); color: #5b4f58; cursor: pointer; font-family: inherit; }
.vn-small-btn:hover { border-color: #c29a4a; background: rgba(228,179,99,.2); }
body.theme-dark .vn-small-btn { background: rgba(255,255,255,.08); color: #e8dac7; border-color: rgba(228,179,99,.3); }
.vn-slot-time { color: #9a8578; font-size: .68rem; margin-top: 6px; }
.vn-goal-input { width: 100%; resize: vertical; min-height: 66px; padding: 8px; border: 1px solid rgba(190,150,80,.35); border-radius: 8px; background: rgba(255,255,255,.58); color: #5b4f58; font: inherit; font-size: .78rem; outline: none; }
.vn-goal-input:focus { border-color: #c29a4a; }
body.theme-dark .vn-goal-input { background: rgba(0,0,0,.3); color: #e8dac7; border-color: rgba(228,179,99,.3); }
.vn-generate-btn { width: 100%; margin-top: 7px; padding: 8px 10px; border: 0; border-radius: 9px; background: linear-gradient(135deg,#e4b363,#c29a4a); color: #24190b; cursor: pointer; font-family: inherit; font-weight: 700; }
.vn-generate-btn:disabled { opacity: .55; cursor: wait; }
.vn-ai-status { min-height: 18px; margin-top: 7px; color: #8a7a6f; font-size: .74rem; line-height: 1.5; }
body.theme-dark .vn-ai-status { color: #a99a89; }
.vn-log { max-height: 220px; overflow-y: auto; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.06); color: #5b4f58; }
body.theme-dark .vn-log { background: rgba(0,0,0,.25); color: #d8ccbb; }
.vn-log-line { padding: 6px 0; border-bottom: 1px solid rgba(150,125,105,.18); font-size: .82rem; line-height: 1.6; }
.vn-log-line b { color: #a06f1d; margin-right: 8px; }
.vn-log-narration b { color: #8a7a6f; }
.vn-log-inner b { color: #9a76ad; }
.vn-log-empty { color: #9a8578; font-size: .82rem; }

/* 视觉小说手机端：独立适配，不影响桌面端 */
@media (max-width: 650px) {
  .vn-head { align-items: flex-start; flex-direction: column; margin-top: 2px; }
  .vn-head-actions { width: 100%; justify-content: flex-start; }
  .vn-select-label { flex: 1; }
  .vn-select { flex: 1; min-width: 0; }
  .vn-layout { display: block; }
  .vn-side-panel { margin-top: 10px; }
  .vn-stage { min-height: 520px; border-radius: 14px; }
  .vn-character { bottom: 160px; font-size: 4.5rem; }
  .vn-character-left { left: 6%; }
  .vn-character-right { right: 6%; }
  .vn-dialogue { left: 3%; right: 3%; bottom: 12px; min-height: 148px; padding: 21px 15px 12px; }
  .vn-text { font-size: 1rem; line-height: 1.85; }
  .vn-toolbar { justify-content: stretch; }
  .vn-toolbar button { flex: 1; min-height: 42px; padding: 7px 5px; font-size: .82rem; }
  .vn-choice { min-height: 48px; font-size: .9rem; }
  .vn-side-panel { padding: 11px; }
  .vn-side-panel .vn-panel-card { display: inline-block; vertical-align: top; width: calc(50% - 6px); margin: 6px 3px 0 0; }
  .vn-side-panel .vn-ai-card { display: block; width: 100%; margin-right: 0; }
}

/* ===== 手机版：小枝（短词）加重一档，但仍比大类（枝/角色）轻 ===== */
@media (max-width: 650px) {
  .mb-leaf {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(172, 132, 68, 0.55);
    box-shadow: 0 3px 10px rgba(60, 40, 90, 0.16);
    padding: 4px 8px;
  }
  .mb-leaf .mb-txt { font-size: .84rem; font-weight: 600; color: #3a3040; }
  .mb-leaf:not(.on) { opacity: .9; }
  .mb-node:not(.on) .mb-txt { color: #6a5f68; }
  .mb-leaf.mb-d3, .mb-leaf.mb-d4, .mb-leaf.mb-d5, .mb-leaf.mb-d6 { background: rgba(255, 255, 255, 0.92); }

  body.theme-dark .mb-leaf { background: rgba(30, 26, 40, 0.96); border-color: rgba(228, 179, 99, 0.45); }
  body.theme-dark .mb-leaf .mb-txt { color: #efe3d2; }
  body.theme-dark .mb-leaf.mb-d3, body.theme-dark .mb-leaf.mb-d4,
  body.theme-dark .mb-leaf.mb-d5, body.theme-dark .mb-leaf.mb-d6 { background: rgba(30, 26, 40, 0.92); }

  /* 大类保持更重：更粗的标签、更粗的边框 */
  .mb-branch .mb-label, .mb-role .mb-label, .mb-cat .mb-label { font-weight: 700; }
  .mb-branch, .mb-role { border-width: 2px; }
}

/* ===== 手机版：点大类时，它和它的小枝一起点亮（不压暗其它节点） ===== */
@media (max-width: 650px) {
  .mb-node.focus, .mb-node.focus-child { opacity: 1 !important; }
  .mb-branch.focus, .mb-role.focus {
    border-color: #c29a4a;
    box-shadow: 0 0 0 7px rgba(228, 179, 99, 0.30), 0 10px 26px rgba(60, 40, 90, 0.22);
  }
  .mb-leaf.focus-child {
    background: #ffffff;
    border-color: rgba(190, 150, 80, 0.72);
    box-shadow: 0 5px 16px rgba(60, 40, 90, 0.22);
  }
  .mb-leaf.focus-child .mb-txt { color: #332b3c; }
  body.theme-dark .mb-leaf.focus-child {
    background: #221d2e;
    border-color: rgba(228, 179, 99, 0.55);
  }
  body.theme-dark .mb-leaf.focus-child .mb-txt { color: #f6ecdc; }
  body.theme-dark .mb-branch.focus, body.theme-dark .mb-role.focus { border-color: #e4b363; }
}

/* ===== 入场动画（与世界树同款：淡入 + 自下 10px 上浮归位，0.4s） =====
   由 JS 在进入视图时给元素加 .entrance 并强制重排，保证一定重播；
   不使用 fill-mode: both（会占住 transform，破坏 hover 抬升）。 */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.entrance { animation: fadeInUp .4s ease; }
/* ===== 角色卡：重要度 / 改名 / 加词 / 关系 等控件 ===== */
.mb-pop { max-height: 72vh; overflow-y: auto; }
.mb-rolemeta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 2px 0 9px; }
.mb-rolemeta .mb-tlabel { font-size: .72rem; color: #a06f1d; }
.mb-tag {
  border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.7);
  color: #6a5a55; border-radius: 10px; padding: 2px 8px; cursor: pointer;
  font-size: .72rem; font-family: inherit; transition: .15s;
}
.mb-tag:hover { border-color: #c29a4a; }
.mb-tag.on { border-color: #c29a4a; background: rgba(228,179,99,.3); color: #4a3410; font-weight: 700; }
.mb-wx, .mb-asx, .mb-asd { font-style: normal; font-size: .68rem; margin-left: 4px; color: #b9a89c; cursor: pointer; }
.mb-wx:hover, .mb-asd:hover { color: #e05555; }
.mb-asx:hover { color: #a06f1d; }
.mb-addword { display: inline-flex; align-items: center; gap: 3px; }
.mb-addword input {
  width: 64px; padding: 2px 6px; border-radius: 8px; font-family: inherit;
  border: 1px dashed rgba(150,125,105,.45); background: rgba(255,255,255,.6);
  color: #4a4050; font-size: .72rem; outline: none;
}
.mb-addword input:focus { border-color: #c29a4a; background: #fff; }
.mb-plus {
  width: 21px; height: 21px; line-height: 1; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid rgba(150,125,105,.45); background: rgba(255,255,255,.85); color: #6a5a55; font-size: .74rem;
}
.mb-relrow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.mb-relrow select, .mb-relrow input {
  padding: 2px 6px; border-radius: 8px; font-family: inherit; font-size: .72rem;
  border: 1px solid rgba(150,125,105,.4); background: rgba(255,255,255,.85); color: #4a4050; outline: none;
}
.mb-relrow input { width: 96px; }
.mb-pedit {
  padding: 2px 6px; border-radius: 8px; font-family: inherit; font-size: .8rem; max-width: 110px;
  border: 1px solid #c29a4a; background: #fff; color: #332b3c; outline: none;
}
body.theme-dark .mb-tag { background: rgba(255,255,255,.08); color: #cbbaa0; border-color: rgba(228,179,99,.3); }
body.theme-dark .mb-tag.on { background: rgba(228,179,99,.28); color: #ffe9b0; }
body.theme-dark .mb-addword input, body.theme-dark .mb-relrow input, body.theme-dark .mb-relrow select {
  background: rgba(0,0,0,.4); color: #f0e4d4; border-color: rgba(210,180,140,.3);
}
body.theme-dark .mb-pedit { background: rgba(0,0,0,.5); color: #f0e4d4; }

/* ===== 世界树：标签不重叠 / 缩小后只留分类名 ===== */
.mb-label-hidden > .mb-label { display: none; }
.mb-label-hidden:hover > .mb-label { display: inline-block; }
.mb-zoomed-out .mb-leaf > .mb-label,
.mb-zoomed-out .mb-cat > .mb-label { display: none; }
.mb-zoomed-out .mb-leaf, .mb-zoomed-out .mb-cat { opacity: .92; }

/* ===== 登录 / 注册（弹窗） ===== */
.au-gate {
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: flex-start; justify-content: center; overflow: auto;
  background: rgba(20, 17, 30, .6); padding: 22px 16px 40px;
}
.au-gate.show { display: flex; }
.au-x {
  position: fixed; top: 16px; right: 18px; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.85); color: #6a5a55; font: inherit; font-size: 1rem; line-height: 1;
}
.au-x:hover { background: #fff; }
.au-note { font-size: .74rem; color: #8a7a6f; line-height: 1.65; margin-top: 8px; }
.au-card {
  width: min(360px, 100%); margin: max(20px, 8vh) auto 0; background: #fff;
  border-radius: 16px; padding: 22px 20px 18px; box-shadow: 0 20px 50px rgba(20,10,35,.35);
}
.au-title { font-size: 1.12rem; font-weight: 700; color: #332b3c; }
.au-sub { font-size: .8rem; color: #8a7a6f; margin: 6px 0 14px; line-height: 1.6; }
.au-label { display: block; font-size: .78rem; color: #6a5a55; margin: 10px 0 4px; }
.au-input {
  width: 100%; padding: 10px 12px; border: 1px solid rgba(150,125,105,.4); border-radius: 10px;
  font: inherit; font-size: .92rem; background: #fdfcfa; color: #332b3c;
}
.au-input:focus { outline: none; border-color: #c29a4a; box-shadow: 0 0 0 3px rgba(228,179,99,.18); }
.au-err { min-height: 18px; font-size: .78rem; color: #c0392b; margin-top: 8px; }
.au-btn {
  width: 100%; margin-top: 4px; padding: 11px; border: 0; border-radius: 10px;
  background: linear-gradient(135deg, #e4b363, #c29a4a); color: #241a0c;
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
}
.au-btn:disabled { opacity: .6; cursor: default; }
.au-code {
  margin: 12px 0 4px; padding: 12px; border-radius: 10px; text-align: center;
  background: #f6f1e6; border: 1px dashed rgba(190,150,80,.7);
  font-family: Consolas, Menlo, monospace; font-size: 1.1rem; letter-spacing: 2px; color: #6b4a1d;
  user-select: all; word-break: break-all;
}
body.theme-dark .au-code { background: #2a2418; color: #f0d39a; }
.au-switch { margin-top: 12px; text-align: center; font-size: .8rem; color: #8a7a6f; }
.au-switch a { color: #a06f1d; text-decoration: none; }
body.theme-dark .au-card { background: #221d2c; }
body.theme-dark .au-title { color: #f7e3c0; }
body.theme-dark .au-input { background: #1a1722; color: #f0e4d4; border-color: rgba(210,180,140,.3); }

/* ===== 新手教程 ===== */
.gd-mask { position: fixed; inset: 0; z-index: 9000; background: rgba(10, 8, 18, .52); pointer-events: none; }
.gd-ring {
  position: fixed; z-index: 9001; display: none; pointer-events: none;
  border-radius: 14px; box-shadow: 0 0 0 2px rgba(228,179,99,.95), 0 0 0 9999px rgba(10,8,18,.52);
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease;
}
.gd-card {
  position: fixed; z-index: 9002; left: 50%; transform: translateX(-50%);
  bottom: max(18px, env(safe-area-inset-bottom)); width: min(430px, calc(100vw - 28px));
  background: rgba(255,255,255,.98); border: 1px solid rgba(190,150,80,.5); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(20,10,35,.35); padding: 13px 15px 12px;
}
.gd-fab {
  position: fixed; left: 14px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 8000;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(190,150,80,.55);
  background: rgba(255,255,255,.92); color: #a06f1d; font-size: 1rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 6px 16px rgba(40,25,60,.22);
}
body.theme-dark .gd-fab { background: rgba(30,25,40,.92); color: #e4b363; }
.gd-step { font-size: .68rem; color: #a08c7d; letter-spacing: 1px; }
.gd-title { font-weight: 700; color: #332b3c; font-size: .98rem; margin: 3px 0 5px; }
.gd-text { font-size: .84rem; color: #5b4f58; line-height: 1.6; }
.gd-bar { display: flex; gap: 8px; justify-content: flex-end; margin-top: 11px; }
body.theme-dark .gd-card { background: rgba(24,20,32,.98); border-color: rgba(228,179,99,.45); }
body.theme-dark .gd-title { color: #f7e3c0; }
body.theme-dark .gd-text { color: #d8ccbb; }
@media (max-width: 650px) {
  .gd-card { bottom: max(12px, env(safe-area-inset-bottom)); }
  .gd-title { font-size: .94rem; }
  .gd-text { font-size: .82rem; }
}

/* ===== 视觉小说：背景双层淡入淡出 + 天气粒子 + 演出细节 ===== */
.vn-bg {
  position: absolute; inset: 0; z-index: 0;
  background-position: center; background-size: cover;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
.vn-bg.active { opacity: 1; }

.vn-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .92; }
.vn-fx-rain {
  background-image: repeating-linear-gradient(100deg, rgba(255,255,255,.16) 0 1px, rgba(255,255,255,0) 1px 9px);
  background-size: 140% 170px;
  animation: vnRain .6s linear infinite;
}
@keyframes vnRain { from { background-position: 0 0; } to { background-position: -40px 170px; } }
.vn-fx-snow {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1.7px, transparent 2.6px),
    radial-gradient(circle, rgba(255,255,255,.6) 0 1.2px, transparent 2px);
  background-size: 72px 72px, 132px 132px;
  animation: vnSnow 10s linear infinite, vnSnowDrift 6s ease-in-out infinite alternate;
}
@keyframes vnSnow { from { background-position: 0 0, 0 0; } to { background-position: 0 72px, 46px 132px; } }
@keyframes vnSnowDrift { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
body.fx-off .vn-fx { display: none; }

/* 对话用无衬线、旁白和内心用衬线；行高放宽 */
.vn-text { font-size: 1.08rem; line-height: 1.9; }
.vn-dialogue.vn-line-dialogue .vn-text { font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif; letter-spacing: .3px; }
.vn-dialogue.vn-line-narration .vn-text,
.vn-dialogue.vn-line-inner .vn-text { font-family: 'Noto Serif SC', serif; }

/* 选项：整行 + 左侧序号 + 按下轻微缩放 */
.vn-choices { gap: 9px; }
.vn-choice {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border-radius: 12px; font-size: .98rem; line-height: 1.5;
  border: 1px solid rgba(228,179,99,.5);
  background: linear-gradient(180deg, rgba(255,250,240,.94), rgba(246,238,225,.92));
  color: #4a3c33; text-align: left;
  transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vn-choice:hover { border-color: #d8a94f; background: linear-gradient(180deg, #fff8ea, #f7edd8); box-shadow: 0 6px 16px rgba(120,80,20,.16); }
.vn-choice:active { transform: scale(.985); }
.vn-choice .vn-choice-num { flex: 0 0 auto; margin: 0; }
body.theme-dark .vn-choice { border-color: rgba(228,179,99,.45); background: linear-gradient(180deg, rgba(48,40,58,.92), rgba(34,29,44,.92)); color: #f0e4d4; }
body.theme-dark .vn-choice:hover { background: linear-gradient(180deg, rgba(62,52,72,.95), rgba(42,35,52,.95)); }

@media (max-width: 650px) {
  .vn-text { font-size: 1rem; line-height: 1.85; }
  .vn-choice { padding: 13px 14px; font-size: 1rem; }
}

/* ===== 视觉小说侧栏（第几章 / 存档 / 读档 / 全屏） ===== */
.vn-chapter-card { text-align: center; }
.vn-chapter-num { font-family: 'Noto Serif SC', serif; font-size: 1.35rem; font-weight: 700; color: #7a4d10; letter-spacing: 1px; }
.vn-chapter-sub { margin-top: 4px; font-size: .74rem; color: #9a8578; }
body.theme-dark .vn-chapter-num { color: #f5ca7c; }
/* 这一部的名字（从作品库开演才有）：放章节号上面一行 */
.vn-work-title {
  font-size: .8rem; line-height: 1.3; color: #6b5b50; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.theme-dark .vn-work-title { color: #cbb89f; }
#vnFsWork { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.theme-dark .vn-chapter-sub { color: #a99a8c; }
.vn-act-card { display: flex; flex-wrap: wrap; gap: 8px; }
.vn-act-card .wb-btn { flex: 1; min-width: 84px; }
.vn-save-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.vn-save-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer; font-family: inherit; text-align: left;
  border: 1px solid rgba(190,150,80,.4); background: rgba(255,255,255,.72); color: #5b4f58;
}
.vn-save-row:hover { border-color: #c29a4a; background: rgba(228,179,99,.18); }
.vn-save-row b { font-size: .84rem; color: #7a4d10; }
.vn-save-row span { font-size: .72rem; color: #9a8578; }
body.theme-dark .vn-save-row { background: rgba(25,21,33,.8); color: #e8dac7; border-color: rgba(228,179,99,.3); }
body.theme-dark .vn-save-row b { color: #f5ca7c; }

/* ===== 全屏沉浸模式：整个屏幕都是 galgame ===== */
body.vn-fs-lock { overflow: hidden; }
.vn-fs { display: none; }
.vn-fs.on { display: block; }
.vn-fs-stage { position: fixed; inset: 0; z-index: 9000; background: #0b0912; }
.vn-fs .vn-stage {
  width: 100vw; height: 100vh; min-height: 0; border-radius: 0; border: 0; box-shadow: none;
}
.vn-fs .vn-dialogue { left: 6vw; right: 6vw; bottom: max(5vh, env(safe-area-inset-bottom)); width: auto; }
.vn-fs .vn-text { font-size: clamp(1.05rem, 2.2vw, 1.5rem); line-height: 2; }
.vn-fs .vn-choices {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 30vh;
  width: min(760px, 88vw); z-index: 9003;
}
.vn-fs-hud {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 14px; z-index: 9004;
  display: flex; align-items: center; gap: 8px;
}
.vn-fs-chapter {
  font-size: .8rem; color: #f0e2c6; background: rgba(12,9,20,.55);
  border: 1px solid rgba(228,179,99,.35); border-radius: 999px; padding: 5px 12px;
  backdrop-filter: blur(4px);
}
.vn-fs-btn {
  font-family: inherit; font-size: .8rem; cursor: pointer; color: #f6ead2;
  background: rgba(12,9,20,.55); border: 1px solid rgba(228,179,99,.4);
  border-radius: 999px; padding: 6px 14px; backdrop-filter: blur(4px);
}
.vn-fs-btn:hover { background: rgba(228,179,99,.3); border-color: #e4b363; }
.vn-fs .vn-save-list {
  position: fixed; right: 14px; top: 58px; width: 232px; z-index: 9005; margin: 0;
}

/* ===== 存档列表（带小预览） ===== */
.vn-save-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 42vh; overflow-y: auto; }
.vn-save-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; cursor: pointer; text-align: left;
  border: 1px solid rgba(190,150,80,.4); background: rgba(255,255,255,.72); }
.vn-save-row:hover { border-color: #c29a4a; background: rgba(228,179,99,.18); }
.vn-save-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vn-save-info b { font-size: .8rem; color: #7a4d10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-save-info em { font-style: normal; font-size: .72rem; color: #6a5a55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-save-info i { font-style: normal; font-size: .68rem; color: #9a8578; }
.vn-save-btns { display: flex; flex-direction: column; gap: 3px; }
.vn-save-btns button { font-family: inherit; font-size: .7rem; padding: 2px 6px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(190,150,80,.45); background: transparent; color: #7a4d10; }
.vn-save-btns button:hover { background: rgba(228,179,99,.25); }
.vn-save-empty { font-size: .78rem; color: #9a8578; padding: 6px 2px; }
body.theme-dark .vn-save-row { background: rgba(25,21,33,.82); border-color: rgba(228,179,99,.3); }
body.theme-dark .vn-save-info b { color: #f5ca7c; }
body.theme-dark .vn-save-info em { color: #d8ccbb; }
body.theme-dark .vn-save-btns button { color: #f0d39a; border-color: rgba(228,179,99,.35); }

/* ===== 存档 / 读档 全屏格子（Ren'Py 那套：缩略格 + 分页） ===== */
.vn-slots { display: none; position: fixed; inset: 0; z-index: 9900; background: rgba(10,8,18,.72); padding: 3vh 3vw; }
.vn-slots.on { display: flex; align-items: center; justify-content: center; }
.vn-slots-box {
  width: min(980px, 100%); max-height: 94vh; display: flex; flex-direction: column;
  background: rgba(255,255,255,.97); border: 1px solid rgba(190,150,80,.5); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(20,12,32,.45);
}
.vn-slots-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(190,150,80,.3); }
.vn-slots-tabs { display: flex; gap: 6px; }
.vn-slots-tab {
  font-family: inherit; font-size: .84rem; cursor: pointer; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(190,150,80,.45); background: transparent; color: #6a5a55;
}
.vn-slots-tab.on { background: linear-gradient(135deg, #e4b363, #c29a4a); color: #33240d; font-weight: 600; border-color: #c29a4a; }
.vn-slots-hint { flex: 1; text-align: center; font-size: .8rem; color: #9a8578; }
.vn-slots-close {
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-family: inherit;
  border: 1px solid rgba(150,125,105,.3); background: transparent; color: #6a5a55;
}
.vn-slots-close:hover { background: rgba(228,179,99,.15); border-color: #c29a4a; }
.vn-slots-grid {
  flex: 1; overflow-y: auto; padding: 14px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-content: start;
}
.vn-slot {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px;
  border: 1px solid rgba(190,150,80,.4); background: rgba(255,255,255,.75); cursor: pointer;
  font-family: inherit; text-align: left; min-width: 0;
}
.vn-slot:hover { border-color: #c29a4a; background: rgba(228,179,99,.16); }
.vn-slot.empty { border-style: dashed; }
.vn-slot.empty[disabled] { opacity: .5; cursor: default; }
.vn-slot-pic {
  display: flex; align-items: flex-end; height: 74px; border-radius: 8px; overflow: hidden;
  background-size: cover; background-position: center; border: 1px solid rgba(0,0,0,.12);
}
.vn-slot-pic i {
  font-style: normal; display: block; width: 100%; padding: 3px 5px; font-size: .62rem; line-height: 1.35;
  color: #fdf6e8; background: rgba(12,9,20,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vn-slot-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vn-slot-meta b { font-size: .78rem; color: #7a4d10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-slot-meta em { font-style: normal; font-size: .68rem; color: #9a8578; }
.vn-slot-del {
  position: absolute; top: 2px; right: 2px; z-index: 2; cursor: pointer; font-family: inherit;
  font-size: .66rem; padding: 1px 5px; border-radius: 6px; border: 1px solid rgba(190,150,80,.5);
  background: rgba(255,255,255,.9); color: #a33333;
}
.vn-slot-del:hover { background: #fff; border-color: #c0392b; }
.vn-slots-foot { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px; border-top: 1px solid rgba(190,150,80,.3); }
.vn-slots-pg {
  font-family: inherit; font-size: .95rem; cursor: pointer; padding: 3px 14px; border-radius: 8px;
  border: 1px solid rgba(190,150,80,.45); background: transparent; color: #7a4d10;
}
.vn-slots-pg[disabled] { opacity: .35; cursor: default; }
.vn-slots-pageno { font-size: .82rem; color: #6a5a55; }
.vn-slots-tip { grid-column: 1 / -1; text-align: center; color: #9a8578; font-size: .84rem; padding: 24px 0; }
body.theme-dark .vn-slots-box { background: rgba(22,19,30,.98); border-color: rgba(228,179,99,.45); }
body.theme-dark .vn-slots-head, body.theme-dark .vn-slots-foot { border-color: rgba(228,179,99,.28); }
body.theme-dark .vn-slot { background: rgba(30,25,40,.85); border-color: rgba(228,179,99,.3); }
body.theme-dark .vn-slot-meta b { color: #f5ca7c; }
body.theme-dark .vn-slot-meta em, body.theme-dark .vn-slots-hint { color: #a99a8c; }
@media (max-width: 640px) {
  .vn-slots { padding: 0; }
  .vn-slots-box { max-height: 100vh; height: 100vh; border-radius: 0; border: none; }
  .vn-slots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-slots-hint { display: none; }
}

/* 点画面任意处继续 */
.vn-stage { cursor: pointer; }
.vn-fs .vn-stage { cursor: pointer; }

/* ===== 手机端视觉小说：一屏看完，像真的 galgame ===== */
@media (max-width: 650px) {
  /* 标题不占地方（手机上看的是画面，不是标题） */
  .vn-head { display: none; }
  .vn-stage {
    min-height: 0;
    height: calc(100vh - 168px);
    height: calc(100dvh - 168px);
    border-radius: 12px;
  }
  /* 对话框：贴底、按内容自适应、左对齐更好读 */
  .vn-dialogue { left: 8px; right: 8px; bottom: 8px; min-height: 0; padding: 14px 14px 34px; }
  .vn-text { font-size: 1.06rem; line-height: 1.9; text-align: left !important; min-height: 0; }
  .vn-dialogue.vn-line-narration .vn-text,
  .vn-dialogue.vn-line-dialogue .vn-text,
  .vn-dialogue.vn-line-inner .vn-text { text-align: left !important; }
  /* 工具条：一条深色控制条，不再是一排漂浮的透明按钮 */
  .vn-toolbar {
    justify-content: space-between; gap: 6px; margin: 8px 0 0; padding: 6px;
    border-radius: 12px; background: rgba(20,16,28,.72);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .vn-toolbar button {
    flex: 1; min-height: 38px; padding: 6px 4px; font-size: .8rem; white-space: nowrap;
    background: rgba(255,255,255,.1); color: #f2e7d5; border-color: rgba(228,179,99,.35);
  }
  /* 侧栏：一行章节 + 一排按钮，紧凑 */
  .vn-side-panel { margin-top: 8px; padding: 10px; }
  .vn-side-panel .vn-panel-card { display: block; width: 100%; margin: 0 0 8px; }
  .vn-chapter-card { display: flex; align-items: baseline; gap: 8px; justify-content: flex-start; text-align: left; }
  .vn-chapter-num { font-size: 1.05rem; }
  .vn-chapter-sub { margin: 0; }
  .vn-act-card { display: flex; gap: 8px; }
  .vn-act-card .wb-btn { flex: 1; min-height: 40px; }
  .vn-ai-card { margin-bottom: 0; }
}

/* 手机端：侧栏分三行放下（章节+世界观 / 三个按钮 / AI 满宽），整页不滚动 */
@media (max-width: 650px) {
  .vn-side-panel { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; padding: 6px; }
  .vn-side-panel .vn-panel-card { margin: 0; padding: 6px 8px; }
  /* 第一行：第 N 章（前缀 .vn-side-panel 才压得过上面的 .vn-panel-card） */
  .vn-side-panel .vn-chapter-card { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left; }
  .vn-side-panel .vn-chapter-num { flex: 0 0 auto; font-size: 1rem; }
  .vn-side-panel .vn-work-title { flex: 0 1 auto; min-width: 0; max-width: 54%; margin: 0; font-size: .72rem; }
  .vn-chapter-sub { display: none; }
  /* 第二行：存档 / 读档 / 进入全屏（同样要前缀，否则被 .vn-panel-card 的 display:block 压住） */
  .vn-side-panel .vn-act-card { flex: 1 1 100%; display: flex; gap: 8px; }
  .vn-side-panel .vn-act-card .wb-btn { flex: 1 1 0; min-width: 0; min-height: 38px; padding: 6px 2px; font-size: .8rem; }
  /* 第三行：AI 状态 + 满宽按钮 */
  .vn-side-panel .vn-ai-card { flex: 1 1 100%; display: flex; flex-direction: column; gap: 5px; }
  .vn-ai-card .vn-ai-status { min-height: 16px; margin-top: 0; font-size: .7rem; line-height: 1.25; text-align: left; }
  .vn-ai-card .vn-generate-btn { width: 100%; min-height: 38px; margin-top: 0; font-size: .84rem; }
  .vn-stage { height: clamp(230px, calc(100dvh - 410px), 640px); }
  #musicBox { top: 62px; right: 12px; bottom: auto; }
}

/* ===== 自己写：选项下面一行输入（跟选项同宽同圆角，虚线更轻） ===== */
.vn-stage-wrap { position: relative; }
.vn-custom {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin: 11px auto 0;
  padding: 4px 5px 4px 6px; border-radius: 12px;
  border: 1px dashed rgba(228,179,99,.55);
  background: rgba(255,250,240,.5);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.vn-custom:focus-within {
  border-style: solid; border-color: #d8a94f;
  background: linear-gradient(180deg, rgba(255,250,240,.96), rgba(246,238,225,.94));
  box-shadow: 0 6px 16px rgba(120,80,20,.18);
}
.vn-custom-num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #e4b363; color: #2a1d0c; font-size: .72rem; font-weight: 700;
}
.vn-custom input {
  flex: 1; min-width: 0; height: 38px; border: 0; outline: none; background: transparent;
  color: #4a3c33; font-size: .95rem; font-family: inherit;
}
.vn-custom input::placeholder { color: #a89583; }
.vn-custom input:disabled { color: #b3a294; }
.vn-custom-send {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(190,150,80,.55); background: linear-gradient(135deg, #f5ca7c, #d4a852);
  color: #33240d; font-size: 1rem; line-height: 1; cursor: pointer;
  transition: filter .15s ease, transform .12s ease;
}
.vn-custom-send:hover { filter: brightness(1.06); }
.vn-custom-send:active { transform: scale(.94); }
.vn-custom-send:disabled { opacity: .5; cursor: wait; }
body.theme-dark .vn-custom { border-color: rgba(228,179,99,.45); background: rgba(25,21,33,.55); }
body.theme-dark .vn-custom:focus-within { background: linear-gradient(180deg, rgba(48,40,58,.95), rgba(34,29,44,.95)); }
body.theme-dark .vn-custom input { color: #f0e4d4; }
body.theme-dark .vn-custom input::placeholder { color: #9b8b7c; }
/* 全屏：选项 + 自己写 一起装进这个盒子（固定在 30vh，叠着排，压在对话框上方） */
.vn-fs-choicebox {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 30vh;
  width: min(760px, 88vw); z-index: 9003;
  display: flex; flex-direction: column; gap: 10px;
}
.vn-fs .vn-fs-choicebox > .vn-choices { position: static; left: auto; bottom: auto; transform: none; width: 100%; }
.vn-fs .vn-fs-choicebox > .vn-custom { position: static; left: auto; bottom: auto; transform: none; width: 100%; margin: 0; }
@media (max-width: 650px) {
  .vn-custom { margin-top: 8px; padding: 3px 4px 3px 5px; }
  .vn-custom input { height: 34px; font-size: .9rem; }
  .vn-custom-send { width: 32px; height: 32px; }
  /* 它一出现，剧情区自动矮 52px：页面不滚动，也不挡住对话 */
  .vn-stage-wrap.vn-custom-on .vn-stage { height: clamp(180px, calc(100dvh - 462px), 590px); }
}

/* ===== 背景升级①：剪影层次 + 暗角颗粒 + 缓慢推近 + 明暗氛围 + 天气 ===== */
/* 暗角 + 极轻颗粒：压在背景之上、对话框之下 */
.vn-stage::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    radial-gradient(132% 96% at 50% 42%, rgba(0,0,0,0) 50%, rgba(0,0,0,.34) 100%),
    radial-gradient(circle, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px);
  background-size: auto, 3px 3px;
}
/* 明暗氛围：按场景标签整块调色 */
.vn-stage::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: rgba(0,0,0,0); transition: background .9s ease;
}
.vn-stage.vn-mood-夜晚::before { background: linear-gradient(180deg, rgba(8,10,30,.12), rgba(4,6,16,.20)); }
.vn-stage.vn-mood-室内::before { background: linear-gradient(180deg, rgba(72,42,12,.07), rgba(28,15,4,.13)); }
.vn-stage.vn-mood-雨中::before { background: linear-gradient(180deg, rgba(18,32,46,.12), rgba(8,18,28,.18)); }
.vn-stage.vn-mood-黄昏::before { background: linear-gradient(180deg, rgba(126,54,20,.06), rgba(38,18,38,.13)); }
.vn-stage.vn-mood-雪::before  { background: linear-gradient(180deg, rgba(210,226,240,.05), rgba(118,138,164,.10)); }
.vn-stage.vn-mood-森林::before { background: linear-gradient(180deg, rgba(10,40,24,.06), rgba(4,20,12,.14)); }
/* 对话时背景缓慢推近（Ken Burns） */
.vn-bg.active { animation: vnKen 24s ease-out both; }
@keyframes vnKen { from { transform: scale(1); } to { transform: scale(1.055); } }
body.fx-off .vn-bg.active { animation: none; }
/* 场景切换：过一下黑 */
.vn-fade { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: #06050c; }
.vn-fade.on { animation: vnFade .58s ease both; }
@keyframes vnFade { 0% { opacity: 0; } 38% { opacity: .92; } 100% { opacity: 0; } }
/* 落叶 */
.vn-fx-leaf {
  opacity: .5;
  background-image:
    radial-gradient(ellipse 4px 7px at 50% 50%, rgba(226,178,98,.85), rgba(226,178,98,0) 72%),
    radial-gradient(ellipse 3px 6px at 50% 50%, rgba(190,128,70,.7), rgba(190,128,70,0) 72%);
  background-size: 90px 120px, 130px 170px;
  background-position: 0 0, 40px -60px;
  animation: vnLeaf 17s linear infinite, vnSnowDrift 9s ease-in-out infinite alternate;
}
@keyframes vnLeaf { from { background-position: 0 0, 40px -60px; } to { background-position: 34px 240px, 82px 320px; } }
/* 花瓣 */
.vn-fx-petal {
  opacity: .38;
  background-image:
    radial-gradient(ellipse 4px 5px at 50% 50%, rgba(255,205,225,.9), rgba(255,205,225,0) 72%),
    radial-gradient(ellipse 3px 4px at 50% 50%, rgba(255,235,245,.75), rgba(255,235,245,0) 72%);
  background-size: 150px 130px, 210px 190px;
  background-position: 0 0, 60px -40px;
  animation: vnPetal 22s linear infinite, vnSnowDrift 13s ease-in-out infinite alternate;
}
@keyframes vnPetal { from { background-position: 0 0, 60px -40px; } to { background-position: 60px 260px, 150px 380px; } }
/* 萤火 */
.vn-fx-firefly {
  background-image:
    radial-gradient(circle 3px at 50% 50%, rgba(255,240,168,.95), rgba(255,240,168,0) 72%),
    radial-gradient(circle 2px at 50% 50%, rgba(196,255,206,.85), rgba(196,255,206,0) 72%);
  background-size: 170px 150px, 240px 210px;
  animation: vnFirefly 9s ease-in-out infinite alternate, vnSnowDrift 12s ease-in-out infinite alternate;
}
@keyframes vnFirefly { from { opacity: .16; } to { opacity: .58; } }
/* 尘埃光束 */
.vn-fx-dust {
  opacity: .5;
  background-image:
    repeating-linear-gradient(102deg, rgba(255,240,205,.10) 0 3px, rgba(255,240,205,0) 3px 48px),
    radial-gradient(circle, rgba(255,255,255,.5) 0 1px, rgba(255,255,255,0) 1.6px);
  background-size: auto, 130px 96px;
  animation: vnDust 26s linear infinite;
}
@keyframes vnDust { from { background-position: 0 0, 0 0; } to { background-position: 64px 96px, 130px 192px; } }
/* 手机：剪影和暗角都留着，但推近慢一点省电 */
@media (max-width: 650px) {
  .vn-bg.active { animation-duration: 32s; }
}

/* ===== 背景升级② 设置项：背景风格开关 + 立绘管理 ===== */
.vn-bg-mode { display: flex; gap: 6px; margin-top: 6px; }
.vn-bg-mode button {
  flex: 1; padding: 6px 4px; border-radius: 8px; cursor: pointer; font-family: inherit;
  font-size: .72rem; border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.35); color: #6b5b50;
}
.vn-bg-mode button.on { background: linear-gradient(135deg, #f5ca7c, #d4a852); color: #33240d; border-color: rgba(190,150,80,.7); font-weight: 600; }
body.theme-dark .vn-bg-mode button { background: rgba(255,255,255,.06); color: #cfc2b2; border-color: rgba(228,179,99,.28); }
body.theme-dark .vn-bg-mode button.on { background: linear-gradient(135deg, #e0b063, #b98c3c); color: #241a0c; }
.vn-sprite-add { display: flex; gap: 6px; margin-top: 6px; }
.vn-sprite-add input[type="text"] {
  flex: 1; min-width: 0; height: 32px; padding: 0 9px; border-radius: 8px; font-family: inherit; font-size: .78rem;
  border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.5); color: #4a3c33;
}
.vn-sprite-add .vn-bg-pick-all { flex: 0 0 auto; margin: 0; padding: 7px 10px; }
body.theme-dark .vn-sprite-add input[type="text"] { background: rgba(0,0,0,.25); color: #e8dac7; border-color: rgba(228,179,99,.25); }
.vn-bg-thumb-tall { width: 34px; height: 44px; background-size: contain; background-repeat: no-repeat; background-color: transparent; }
.vn-sprite-empty { font-size: .72rem; opacity: .65; padding: 4px 2px; }

/* ===== 背景升级③：角色立绘图层 ===== */
.vn-sprite {
  position: absolute; bottom: 132px; height: 74%; width: 46%;
  background-repeat: no-repeat; background-position: bottom center; background-size: contain;
  z-index: 2; pointer-events: none; opacity: 0;
  transition: opacity .55s ease, filter .35s ease;
  filter: drop-shadow(0 14px 22px rgba(10,6,20,.55));
}
.vn-sprite.on { opacity: 1; }
.vn-sprite.dim { opacity: .95; filter: brightness(.52) saturate(.85) drop-shadow(0 12px 20px rgba(10,6,20,.45)); }
.vn-sprite-l { left: 1%; }
.vn-sprite-r { right: 1%; }
.vn-fs .vn-sprite { bottom: 15vh; height: 80%; width: 40%; }
.vn-fs .vn-sprite-l { left: 3vw; }
.vn-fs .vn-sprite-r { right: 3vw; }
body.fx-off .vn-sprite { transition: opacity .3s ease; }
@media (max-width: 650px) {
  .vn-sprite { bottom: 116px; height: 58%; width: 62%; }
  .vn-sprite-l { left: -8%; }
  .vn-sprite-r { right: -8%; }
}

/* 世界树汇总：勾选条数 + 设定字数（视觉小说上限提示） */
.wb-sum {
  margin: 6px 0 2px; padding: 5px 10px; border-radius: 8px; font-size: .74rem;
  color: #6b5b50; background: rgba(228,179,99,.10); border: 1px solid rgba(228,179,99,.28);
}
.wb-sum.over { color: #a33d2b; background: rgba(200,70,40,.10); border-color: rgba(200,70,40,.35); font-weight: 600; }
body.theme-dark .wb-sum { color: #cfc2b2; background: rgba(228,179,99,.08); }
body.theme-dark .wb-sum.over { color: #ffb4a0; background: rgba(200,70,40,.16); }

@media (max-width: 650px) {
  /* 手机上关掉毛玻璃：在整屏大图上面做 backdrop blur 是掉帧主因 */
  .st-modal, .st-modal *, #musicBox, .vn-toolbar, .vn-fs-btn, .vn-fs-chapter, .vn-choice, .vn-custom {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* ===== 导入文章 → 世界树：弹层 ===== */
.wb-imp-modal { flex-direction: column; width: min(660px, 94vw); max-height: 90vh; }
.wb-imp-body { flex-direction: column; gap: 10px; padding: 14px; overflow-y: auto; }
.wb-imp-row { display: flex; align-items: center; gap: 10px; font-size: .8rem; }
.wb-imp-row select {
  flex: 1; min-width: 0; height: 34px; padding: 0 8px; border-radius: 8px; font-family: inherit; font-size: .8rem;
  border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.6); color: #4a3c33;
}
.wb-imp-or { text-align: center; font-size: .72rem; opacity: .6; }
#wbImpText {
  width: 100%; min-height: 110px; max-height: 30vh; resize: vertical; padding: 9px 10px; border-radius: 10px;
  font-family: inherit; font-size: .8rem; line-height: 1.7;
  border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.6); color: #4a3c33;
}
.wb-imp-info { font-size: .74rem; opacity: .78; }
.wb-imp-prog { font-size: .82rem; }
.wb-imp-barwrap { height: 6px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; }
.wb-imp-barwrap i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #e4b363, #ffd799); transition: width .3s ease; }
.wb-imp-preview { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 2px; }
.wb-imp-group { margin-top: 6px; font-size: .74rem; font-weight: 600; color: #8a6422; }
.wb-imp-item {
  display: flex; align-items: flex-start; gap: 8px; padding: 5px 7px; border-radius: 8px;
  background: rgba(255,255,255,.38); font-size: .78rem; line-height: 1.55; cursor: pointer;
}
.wb-imp-item input { margin-top: 3px; flex: 0 0 auto; }
.wb-imp-item span { min-width: 0; overflow-wrap: anywhere; }
.wb-imp-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 2px; }
.wb-imp-msg { min-height: 1em; font-size: .74rem; color: #a33d2b; }
.wb-imp-done-line { font-size: .88rem; font-weight: 600; color: #2c7a4b; }
body.theme-dark .wb-imp-row select,
body.theme-dark #wbImpText { background: rgba(0,0,0,.28); color: #e8dac7; border-color: rgba(228,179,99,.25); }
body.theme-dark .wb-imp-item { background: rgba(255,255,255,.06); }
body.theme-dark .wb-imp-group { color: #f0d39a; }
body.theme-dark .wb-imp-barwrap { background: rgba(255,255,255,.12); }
@media (max-width: 650px) {
  .wb-imp-modal { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .wb-imp-preview { max-height: 46vh; }
  .wb-imp-foot { justify-content: stretch; }
  .wb-imp-foot .wb-btn { flex: 1; }
}

/* ===== 世界树：多世界选择行 ===== */
.wb-worlds { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.wb-worlds-label { font-size: .74rem; opacity: .7; }
.wb-worlds select {
  max-width: 42vw; height: 30px; padding: 0 8px; border-radius: 8px; font-family: inherit; font-size: .78rem;
  border: 1px solid rgba(150,125,105,.35); background: rgba(255,255,255,.6); color: #4a3c33;
}
.wb-worlds .wb-btn { padding: 5px 9px; font-size: .72rem; }
body.theme-dark .wb-worlds select { background: rgba(0,0,0,.28); color: #e8dac7; border-color: rgba(228,179,99,.25); }
@media (max-width: 650px) {
  .wb-worlds select { max-width: 100%; flex: 1 1 100%; }
  .wb-worlds .wb-btn { flex: 1; }
}

/* ============================================================
   小球对战（立绘当球）
   ============================================================ */
.nb-mask { position: fixed; inset: 0; z-index: 9950; display: none; align-items: center; justify-content: center;
  background: rgba(6, 7, 12, .82); padding: 12px; }
.nb-mask.on { display: flex; }
.nb-box { position: relative; width: min(1040px, 100%); max-height: 100%; overflow: auto;
  background: linear-gradient(180deg, #1b1e2b, #14161f); border: 1px solid rgba(190,150,80,.32);
  border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.nb-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; }
.nb-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 1rem; font-weight: 700; color: #f2e6c8; letter-spacing: .5px; }
.nb-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 1.1rem; font-weight: 700;
  color: #ffd98a; min-width: 2.2em; text-align: right; }
.nb-quit { flex: 0 0 auto; padding: 6px 12px; border-radius: 10px; cursor: pointer; font-size: .82rem;
  color: #e9dcc0; background: rgba(255,255,255,.06); border: 1px solid rgba(190,150,80,.4); }
.nb-quit:hover { background: rgba(255,255,255,.12); }
.nb-stagewrap { position: relative; padding: 0 12px; }
#nbCanvas { display: block; width: 100%; height: auto; border-radius: 14px; background: #14161f;
  touch-action: none; cursor: crosshair; }
.nb-hint { position: absolute; left: 24px; right: 24px; bottom: 14px; text-align: center;
  font-size: .78rem; color: rgba(226,230,240,.72); pointer-events: none; white-space: pre-line; }
.nb-hintbtns { position: absolute; left: 0; right: 0; top: 50%; display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; padding: 0 20px; }
.nb-hud { display: flex; align-items: center; gap: 14px; padding: 12px 16px 16px; }
.nb-hpwrap { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; }
.nb-hplab { font-size: .76rem; color: rgba(226,230,240,.7); }
.nb-hp { flex: 1 1 auto; height: 12px; border-radius: 8px; background: rgba(255,255,255,.09); overflow: hidden; }
.nb-hp > i { display: block; height: 100%; width: 100%; border-radius: 8px;
  background: linear-gradient(90deg, #4fc3f7, #7ee7c7); transition: width .12s linear; }
.nb-stick { flex: 0 0 auto; position: relative; width: 104px; height: 104px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid rgba(190,150,80,.35); touch-action: none; }
.nb-stick > .nb-knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: rgba(255,255,255,.72); box-shadow: 0 3px 12px rgba(0,0,0,.4); }
.nb-atk { flex: 0 0 auto; width: 92px; height: 92px; border-radius: 50%; cursor: pointer;
  font-size: 1rem; font-weight: 700; color: #2a1d05;
  background: radial-gradient(circle at 50% 35%, #ffe6a6, #e8b45f 60%, #d9a44c); border: none;
  box-shadow: 0 6px 20px rgba(217,164,76,.35); }
.nb-atk:active { transform: scale(.95); }
.nb-result { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 24px; text-align: center;
  background: rgba(10,11,16,.82); border-radius: 18px; }
.nb-result.on { display: flex; }
.nb-rt { font-size: 1.6rem; font-weight: 800; color: #ffe08a; }
.nb-rt.w { color: #8be2b0; }
.nb-rt.l { color: #ff9a9a; }
.nb-rd { max-width: 620px; font-size: .86rem; line-height: 1.7; color: rgba(232,236,246,.86); }
.nb-rb { display: flex; gap: 10px; margin-top: 6px; }
.nb-btn { padding: 9px 18px; border-radius: 10px; cursor: pointer; font-size: .88rem; color: #2a1d05;
  background: linear-gradient(180deg, #f0cf8a, #d9a44c); border: none; }
.nb-btn.ghost { background: rgba(255,255,255,.07); color: #e9dcc0; border: 1px solid rgba(190,150,80,.4); }

/* 立绘取景 */
.nb-edit-box { width: min(720px, 100%); background: linear-gradient(180deg, #1b1e2b, #14161f);
  border: 1px solid rgba(190,150,80,.32); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.nb-edit-head { display: flex; align-items: center; padding: 12px 14px; }
.nb-edit-head b { flex: 1 1 auto; color: #f2e6c8; font-size: .98rem; }
.nb-edit-x { cursor: pointer; color: rgba(226,230,240,.7); padding: 0 6px; }
.nb-edit-body { display: flex; gap: 16px; padding: 0 14px 8px; flex-wrap: wrap; }
.nb-crop { position: relative; flex: 0 0 auto; }
#nbCropCv { display: block; width: 320px; max-width: 60vw; height: auto; border-radius: 14px;
  background: #14151c; touch-action: none; cursor: grab; }
.nb-crop-hint { margin-top: 6px; font-size: .74rem; color: rgba(226,230,240,.6); text-align: center; }
.nb-edit-side { flex: 1 1 220px; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.nb-edit-file { display: block; text-align: center; padding: 10px; border-radius: 10px; cursor: pointer;
  color: #e9dcc0; background: rgba(255,255,255,.06); border: 1px dashed rgba(190,150,80,.5); font-size: .84rem; }
.nb-edit-file input { display: none; }
.nb-edit-lab { font-size: .76rem; color: rgba(226,230,240,.66); margin-top: 2px; }
.nb-edit-side select, .nb-edit-side input[type=range] { width: 100%; }
.nb-edit-side select { padding: 8px; border-radius: 9px; background: #21242f; color: #eae3d2;
  border: 1px solid rgba(190,150,80,.35); }
.nb-edit-note { font-size: .74rem; line-height: 1.6; color: rgba(226,230,240,.6); }
.nb-edit-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 10px 14px 16px; }

@media (max-width: 640px) {
  .nb-mask { padding: 0; }
  .nb-box { border-radius: 0; max-height: 100%; }
  .nb-hud { gap: 8px; padding: 8px 10px 12px; }
  .nb-stick { width: 84px; height: 84px; }
  .nb-stick > .nb-knob { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  .nb-atk { width: 78px; height: 78px; font-size: .9rem; }
  .nb-hplab { display: none; }
  .nb-edit-body { gap: 10px; }
}

.nb-pick { display: none; padding: 4px 14px 10px; }
.nb-pick.on { display: block; }
.nb-pick-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.nb-pick-lab { flex: 0 0 42px; padding-top: 7px; font-size: .78rem; color: rgba(226,230,240,.7); }
.nb-pick-chips { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.nb-chip { padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: .82rem;
  color: #ded6c2; background: rgba(255,255,255,.06); border: 1px solid rgba(190,150,80,.32); }
.nb-chip:hover { background: rgba(255,255,255,.12); }
.nb-chip.on { color: #2a1d05; background: linear-gradient(180deg, #f0cf8a, #d9a44c); border-color: transparent; font-weight: 700; }
.nb-pick-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.nb-pick-note { flex: 1 1 auto; min-width: 0; font-size: .76rem; color: rgba(226,230,240,.6); }
.nb-toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: none;
  max-width: 86%; padding: 9px 16px; border-radius: 999px; font-size: .82rem; color: #f7e3c0;
  background: rgba(20,18,28,.94); border: 1px solid rgba(228,179,99,.4); box-shadow: 0 8px 26px rgba(0,0,0,.5); }
.nb-toast.on { display: block; }

/* 对战一开，把所有会挡住操作的浮层压掉（新手引导 z-index 很高，会盖住摇杆/攻击键） */
.nb-mask { z-index: 99999; }
body.nb-open .gd-mask, body.nb-open .gd-ring, body.nb-open .gd-card { display: none !important; }

/* ===== 备案信息（工信部要求：备案号悬挂在首页底部，并可点击跳到备案官网）===== */
.beian-line { text-align: center; margin: 6px 0 2px; font-size: .76rem; line-height: 1.7;
  font-family: 'Inter', sans-serif; color: #FFFFFF; letter-spacing: .3px; }
.beian-line a { color: #FFFFFF; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.5); }
.beian-line a:hover { color: #FFFFFF; border-bottom-color: rgba(255,255,255,.95); }
/* 深色主题也是纯白（这条选择器权重更高，不改会把颜色压回去） */
body.theme-dark .beian-line { color: #FFFFFF; }