/* ============================================
   ClipRadar 素材雷达 - 原生 CSS
   完全沿用 React 版视觉规范，无构建工具
   ============================================ */

:root {
  --bg: #FFFFFF;
  --bg2: #F0F5FF;
  --bg3: #F8FAFC;
  --bg4: #F1F5F9;
  --ink: #0F172A;
  --muted: #64748B;
  --muted2: #94A3B8;
  --rule: #E2E8F0;
  --accent: #2563EB;
  --accent-light: #DBEAFE;
  --accent-dark: #1D4ED8;
  --accent-hover: #1E40AF;
  --green: #059669;
  --green-light: #D1FAE5;
  --green-bg: #ECFDF5;
  --orange: #D97706;
  --orange-light: #FEF3C7;
  --orange-bg: #FFFBEB;
  --red: #DC2626;
  --red-light: #FEE2E2;
  --red-bg: #FEF2F2;
  --purple: #7C3AED;
  --purple-light: #EDE9FE;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 全局隐藏原生滚动条，保留滚动功能（Firefox + Chromium 系） */
* { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

html { font-size: 16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  color: var(--ink);
  background: var(--bg3);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

code {
  background: #fff;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.85em;
  border: 1px solid var(--rule);
}

/* ============ 导航栏 ============ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand { display: flex; align-items: center; gap: 0.5rem; }
.logo-icon { font-size: 1.5rem; }
.brand-text { font-size: 1.2rem; font-weight: 700; color: var(--accent); }
.brand-en { font-size: 0.8rem; color: var(--muted2); font-style: italic; font-weight: 400; }

.nav-actions { display: flex; gap: 0.5rem; align-items: center; }

.nav-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.nav-btn:hover { background: var(--bg4); color: var(--ink); }
.nav-btn.active { background: var(--accent-light); color: var(--accent); }

.server-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-right: 0.75rem;
  font-weight: 500;
}
.server-status.online { background: rgba(34,197,94,0.1); color: #22c55e; }
.server-status.offline { background: rgba(251,146,60,0.1); color: #fb923c; }
.server-status.warn { background: rgba(245,158,11,0.1); color: #f59e0b; }

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ============ 离线提示条 ============ */
.offline-banner {
  background: #fef3c7;
  color: #92400e;
  padding: 0.75rem 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 1px solid #fde68a;
  line-height: 1.5;
}

/* ============ 主内容 ============ */
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem;
  flex: 1 0 auto;
  width: 100%;
}

.upload-section { margin-bottom: 1.5rem; }

.upload-zone {
  background: var(--bg);
  border: 2px dashed var(--rule);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}
.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--accent);
  background: var(--bg2);
}
.upload-zone.drag-over { transform: scale(1.01); }

.upload-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.upload-title { font-size: 1.15rem; font-weight: 600; color: var(--ink); margin-bottom: 0.5rem; }
.upload-desc { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.35rem; }
.upload-hint { font-size: 0.8rem; color: var(--accent); font-weight: 500; }
/* 上传目标文件夹提示（网盘化：拖拽 / 扫码上传都会落入当前打开的文件夹） */
.upload-folder-hint {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  background: var(--accent-light);
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,0.18);
  animation: ufhIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.upload-folder-hint .ufh-icon { font-size: 0.85rem; line-height: 1; }
.upload-folder-hint .ufh-text { color: var(--muted); font-weight: 500; }
.upload-folder-hint .ufh-sep { color: var(--muted); opacity: 0.55; font-weight: 700; }
.upload-folder-hint .ufh-name {
  color: var(--accent);
  font-weight: 700;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes ufhIn {
  from { opacity: 0; transform: translateY(-3px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============ 工具栏 ============ */
.toolbar-section {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.search-bar { position: relative; margin-bottom: 1rem; }
.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  opacity: 0.5;
}
.search-bar input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--bg3);
  transition: all 0.2s;
}
.search-bar input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.filter-bar { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.filter-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.filter-group label { font-size: 0.85rem; color: var(--muted); font-weight: 500; }

.filter-chip {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  color: var(--muted);
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.active { background: var(--accent); color: white; border-color: var(--accent); }
.filter-chip.good.active { background: var(--green); border-color: var(--green); }
.filter-chip.bad.active { background: var(--orange); border-color: var(--orange); }

.active-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.75rem; }

.scene-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  background: var(--purple-light);
  color: var(--purple);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-family: inherit;
}
.scene-tag:hover { background: var(--purple); color: white; }
.scene-tag.active { background: var(--purple); color: white; }
.scene-tag.consolidate-btn {
  background: var(--accent-light);
  color: var(--accent);
  border: 1px dashed var(--accent);
  font-weight: 600;
}
.scene-tag.consolidate-btn:hover { background: var(--accent); color: white; border-style: solid; }
.scene-tag.consolidate-btn.has-map { border-style: solid; background: var(--green-light); color: var(--green); border-color: var(--green); }
.scene-tag.consolidate-btn.has-map:hover { background: var(--green); color: white; }
.scene-tag.consolidate-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============ 统计栏 ============ */
.stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0 0.25rem;
}
.stats-text { font-size: 0.88rem; color: var(--muted); }
.stats-text strong { color: var(--accent); }

/* ============ 素材网格 ============ */
.view-section { min-height: 300px; }
.material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.material-card {
  background: var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
}
.material-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.card-thumb {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--bg4);
  overflow: hidden;
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }

.card-thumb .video-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.card-thumb .video-badge.demo-video { background: rgba(124, 58, 237, 0.85); }

.card-delete {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}
.card-delete:hover { background: var(--red); opacity: 1 !important; }
.material-card:hover .card-delete { opacity: 1; }

.card-thumb .quality-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
}
.quality-badge.good { background: var(--green); color: white; }
.quality-badge.bad { background: var(--orange); color: white; }
.quality-badge.normal { background: rgba(0,0,0,0.5); color: white; }

.card-thumb .ai-processing {
  position: absolute;
  inset: 0;
  background: rgba(37, 99, 235, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  gap: 0.5rem;
  padding: 0.5rem;
  text-align: center;
}

.ai-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 处理中卡片：排队/分析进度展示 */
.ai-processing-eta {
  font-size: 0.72rem;
  opacity: 0.9;
  margin-top: -0.2rem;
}
.ai-processing-progress {
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.2rem;
}
.ai-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  overflow: hidden;
}
.ai-progress-fill {
  height: 100%;
  background: white;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.ai-progress-text {
  font-size: 0.7rem;
  opacity: 0.95;
}

/* 失败卡片样式 */
.card-thumb-failed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(220, 38, 38, 0.18);
  pointer-events: none;
}
.card-failed-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: var(--red);
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  z-index: 2;
}
.card-retry {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, transform 0.2s;
  z-index: 2;
}
.card-retry:hover { background: var(--accent-hover); transform: scale(1.1); opacity: 1 !important; }
.material-card:hover .card-retry { opacity: 1; }

/* ============ 队列指示器（导航栏） ============ */
.queue-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  margin-right: 0.5rem;
  position: relative;
}
.queue-indicator:hover { border-color: var(--accent); color: var(--accent); }
.queue-indicator .qi-icon { font-size: 0.9rem; line-height: 1; }
.queue-indicator .qi-text { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-indicator .qi-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bg4);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.queue-indicator.has-active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}
.queue-indicator.has-active .qi-badge { background: var(--accent); color: white; }
.queue-indicator.has-active .qi-icon { animation: pulse-dot 1.4s ease-in-out infinite; }
.queue-indicator.has-failed {
  border-color: var(--red);
  background: var(--red-light);
  color: var(--red);
}
.queue-indicator.has-failed .qi-badge { background: var(--red); color: white; }

/* ============ 队列详情面板（下拉） ============ */
.queue-panel {
  position: fixed;
  top: 70px;
  right: 1.5rem;
  width: 360px;
  max-width: calc(100vw - 2rem);
  max-height: 70vh;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: qpSlideIn 0.18s ease-out;
}
@keyframes qpSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.queue-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--bg3);
}
.qp-title { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.qp-title-icon { font-size: 1.05rem; }
.qp-close {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 0.3rem;
  border-radius: 4px;
  transition: all 0.2s;
}
.qp-close:hover { background: var(--bg4); color: var(--ink); }
.queue-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}
.qp-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted2);
  font-size: 0.88rem;
}
.qp-item {
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius);
  margin-bottom: 0.4rem;
  background: var(--bg3);
  border: 1px solid var(--rule);
}
.qp-item:last-child { margin-bottom: 0; }
.qp-item-processing { background: var(--accent-light); border-color: var(--accent); }
.qp-item-pending { background: var(--orange-bg); border-color: var(--orange-light); }
.qp-item-failed { background: var(--red-bg); border-color: var(--red-light); }
.qp-item-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.qp-item-icon { font-size: 0.95rem; }
.qp-item-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qp-item-status { font-size: 0.75rem; color: var(--muted); font-weight: 500; }
.qp-progress-bar {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.5);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.35rem 0;
}
.qp-item-processing .qp-progress-bar { background: rgba(37,99,235,0.18); }
.qp-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.qp-item-meta { font-size: 0.72rem; color: var(--muted2); }
.qp-item-error {
  font-size: 0.78rem;
  color: var(--red);
  margin: 0.2rem 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qp-retry-btn {
  padding: 0.2rem 0.6rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}
.qp-retry-btn:hover { background: var(--accent-hover); }
.queue-panel-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--rule);
  background: var(--bg3);
}
.qp-retry-all-btn {
  width: 100%;
  padding: 0.6rem;
  background: var(--red);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.qp-retry-all-btn:hover { background: #b91c1c; }

@media (max-width: 640px) {
  .queue-panel { right: 0.5rem; left: 0.5rem; width: auto; top: 64px; max-height: 60vh; }
  .queue-indicator .qi-text { display: none; }
}

.card-info { padding: 0.75rem; }
.card-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.4rem;
}
.card-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.card-tag {
  padding: 0.15rem 0.45rem;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
}

.card-description {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.35rem;
}
.card-description.is-error { color: var(--red); }

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--muted2);
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  background: var(--bg);
  border-radius: var(--radius);
  border: 2px dashed var(--rule);
}
.empty-icon { font-size: 3.5rem; margin-bottom: 1rem; opacity: 0.5; }
.empty-title { font-size: 1.1rem; font-weight: 600; color: var(--ink); margin-bottom: 0.5rem; }
.empty-desc { font-size: 0.9rem; color: var(--muted); }

/* ============ 创意空间（待开发） ============ */
.creative-coming-soon {
  max-width: 640px;
  margin: 4rem auto;
  text-align: center;
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 3.5rem 2rem;
  box-shadow: var(--shadow-sm);
  border: 2px dashed var(--rule);
  animation: creativeFadeIn 0.4s ease;
}
@keyframes creativeFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.creative-cs-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  animation: creativeFloat 3s ease-in-out infinite;
}
@keyframes creativeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.creative-cs-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.creative-cs-sub {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.creative-cs-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: var(--orange-bg);
  color: var(--orange);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--orange-light);
  margin-bottom: 2rem;
}
.creative-cs-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.creative-cs-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  background: var(--bg3);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  opacity: 0.7;
}
.creative-cs-card-icon { font-size: 1.6rem; }
.creative-cs-card-text {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
}
@media (max-width: 540px) {
  .creative-coming-soon { margin: 2rem 1rem; padding: 2.5rem 1.2rem; }
  .creative-cs-preview { grid-template-columns: 1fr; }
}

/* ============ 选题辅助 ============ */
.topic-container {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.topic-header { text-align: center; margin-bottom: 2rem; }
.topic-header h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.topic-header p { color: var(--muted); }

.topic-input-area {
  display: flex;
  gap: 0.75rem;
  max-width: 600px;
  margin: 0 auto 2rem;
}
.topic-input {
  flex: 1;
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
}
.topic-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.btn-primary {
  padding: 0.85rem 1.75rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.topic-results { display: none; }
.topic-results.visible { display: block; }
.topic-loading { text-align: center; padding: 2rem; }

/* 选题辅助布局：主区域 + 侧边栏 */
.topic-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.topic-main { flex: 1; min-width: 0; }
.topic-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg3);
  border-radius: var(--radius);
  padding: 1rem;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.topic-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.topic-sidebar-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.topic-clear-btn {
  padding: 0.2rem 0.5rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.72rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.topic-clear-btn:hover { color: var(--red); border-color: var(--red); }

.topic-history-list { display: flex; flex-direction: column; gap: 0.4rem; }
.topic-history-item {
  padding: 0.5rem 0.65rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.topic-history-item:hover { border-color: var(--accent); background: var(--accent-light); }
.topic-history-item.active { border-color: var(--accent); background: var(--accent-light); }
.topic-history-topic {
  font-size: 0.82rem;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.15rem;
}
.topic-history-time { font-size: 0.7rem; color: var(--muted2); }
.topic-history-empty {
  font-size: 0.8rem;
  color: var(--muted2);
  text-align: center;
  padding: 1.5rem 0.5rem;
  line-height: 1.5;
}

.topic-section { margin-bottom: 2rem; }
.topic-section h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.matched-materials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}
.mini-card {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg);
}
.mini-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.mini-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.mini-card .mini-name {
  padding: 0.4rem 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-card .mini-reason {
  padding: 0.3rem 0.5rem 0.4rem;
  font-size: 0.7rem;
  color: var(--accent);
  background: var(--accent-light);
  line-height: 1.4;
  border-top: 1px solid var(--rule);
}

.suggestion-card {
  background: var(--bg3);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  border-left: 4px solid var(--accent);
}
.suggestion-card h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.suggestion-card p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.7;
}

/* ============ 对话容器 ============ */
.topic-chat-container {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 180px);
  padding: 1rem 1rem 0;
}

/* 欢迎屏 */
.topic-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem 3rem;
  animation: fadeUp 0.5s ease;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.welcome-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}
.welcome-subtitle {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 2.5rem;
}
.topic-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  max-width: 640px;
}
.suggestion-tag {
  padding: 0.55rem 1.1rem;
  background: var(--bg4);
  color: var(--ink);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  font-family: inherit;
}
.suggestion-tag:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.suggestion-tag-loading {
  cursor: default;
  color: var(--muted2);
  background: transparent;
}
.suggestion-tag-loading:hover { transform: none; background: transparent; border-color: transparent; color: var(--muted2); }

/* 消息流 */
.topic-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
  scroll-behavior: smooth;
}
.msg-row {
  display: flex;
  margin-bottom: 1.5rem;
  animation: msgIn 0.3s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.msg-row.user { justify-content: flex-end; }
.msg-row.assistant { justify-content: flex-start; }
.msg-bubble {
  max-width: 85%;
  padding: 0.9rem 1.1rem;
  border-radius: 16px;
  line-height: 1.7;
  font-size: 0.95rem;
  word-break: break-word;
}
.msg-row.user .msg-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-row.assistant .msg-bubble {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm);
}
.msg-bubble h1, .msg-bubble h2, .msg-bubble h3 { margin: 0.75rem 0 0.4rem; font-weight: 600; }
.msg-bubble h1 { font-size: 1.1rem; }
.msg-bubble h2 { font-size: 1.02rem; color: var(--accent); }
.msg-bubble h3 { font-size: 0.95rem; }
.msg-bubble h2:first-child, .msg-bubble h3:first-child { margin-top: 0; }
.msg-bubble ul, .msg-bubble ol {
  padding-left: 1.8rem;
  margin: 0.4rem 0;
}
.msg-bubble li { margin: 0.2rem 0; padding-left: 0.15rem; }
.msg-bubble li > ul, .msg-bubble li > ol { margin: 0.25rem 0; }
.msg-bubble p { margin: 0.4rem 0; }
.msg-bubble p:first-child { margin-top: 0; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble code {
  background: var(--bg3);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.85em;
  border: 1px solid var(--rule);
}
.msg-bubble strong { font-weight: 600; }
.msg-bubble em { font-style: italic; color: var(--muted); }

/* 思考过程折叠块 */
.thinking-block {
  margin-bottom: 0.75rem;
  border-left: 3px solid var(--purple);
  background: var(--purple-light);
  border-radius: 0 8px 8px 0;
  overflow: hidden;
}
.thinking-header {
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--purple);
  font-weight: 500;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}
.thinking-header::before { content: '🧠'; }
.thinking-arrow {
  transition: transform 0.2s;
  margin-left: auto;
}
.thinking-block.expanded .thinking-arrow { transform: rotate(90deg); }
.thinking-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 0.8rem;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: pre-wrap;
  line-height: 1.6;
}
.thinking-block.expanded .thinking-content {
  max-height: 600px;
  padding: 0 0.8rem 0.6rem;
}

/* 消息内匹配素材卡片 */
.msg-materials {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.msg-materials .mini-card { cursor: pointer; }
.msg-materials .mini-card .mini-name { font-size: 0.72rem; }

/* AI 思考中 loading */
.msg-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.chat-loading-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.chat-loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: dotBounce 1.2s infinite;
}
.chat-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* 底部输入区（通栏 sticky） */
.topic-chat-input-area {
  position: sticky;
  bottom: 0;
  background: var(--bg3);
  padding: 0.75rem 0 1rem;
  border-top: 1px solid var(--rule);
  z-index: 10;
}
.topic-chat-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}
.topic-chat-input {
  flex: 1;
  min-height: 48px;
  max-height: 160px;
  padding: 0.85rem 1.1rem;
  resize: none;
  border: 1px solid var(--rule);
  border-radius: 20px;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;
}
.topic-chat-input::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */
.topic-chat-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.topic-chat-input::placeholder { color: var(--muted2); }
.topic-chat-send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topic-chat-send:hover { background: var(--accent-hover); transform: scale(1.05); }
.topic-chat-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* 工具栏 */
.topic-chat-toolbar {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.topic-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.topic-tool-btn:hover { border-color: var(--accent); color: var(--accent); }
.topic-tool-btn.active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}
.topic-tool-btn .tool-icon { font-size: 0.9rem; }

/* 引用素材 chips */
.topic-chat-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--ink);
}
.ref-chip img,
.ref-chip .ref-chip-placeholder {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}
.ref-chip-remove {
  cursor: pointer;
  color: var(--muted2);
  border: none;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
  font-family: inherit;
}
.ref-chip-remove:hover { color: var(--red); }

/* 历史侧栏抽屉 */
.topic-sidebar-drawer {
  position: fixed;
  top: 0;
  right: -260px;
  width: 250px;
  height: 100vh;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  padding: 1rem;
  z-index: 150;
  transition: right 0.3s ease;
  overflow-y: auto;
  border-radius: 0;
  position: fixed;
  max-height: none;
}
.topic-sidebar-drawer.open { right: 0; }
.topic-sidebar-toggle {
  position: fixed;
  right: 1rem;
  bottom: 90px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--rule);
  cursor: pointer;
  z-index: 149;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.topic-sidebar-toggle:hover { box-shadow: var(--shadow-lg); transform: scale(1.05); }

/* ============ 左侧常驻历史栏 ============ */
.topic-chat-layout {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
  padding: 1rem;
}
.topic-main {
  flex: 1;
  min-width: 0;
  position: relative;
}
.topic-sidebar-resident {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem;
  flex-shrink: 0;
  transition: width .28s ease, opacity .28s ease, padding .28s ease;
}
.topic-chat-layout.collapsed {
  gap: 0;
}
.topic-chat-layout.collapsed .topic-sidebar-resident {
  width: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  border: none;
}
.topic-chat-layout.collapsed .topic-expand-btn {
  display: flex;
}
.topic-expand-btn {
  display: none;
  position: absolute;
  left: 0;
  top: 6px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--rule);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--muted);
  font-family: inherit;
}
.topic-expand-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}
.topic-sidebar-top {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.topic-new-btn {
  width: 100%;
  padding: 0.65rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.topic-new-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}
.topic-icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--rule);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
  font-family: inherit;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topic-icon-btn:hover {
  background: var(--bg4);
  color: var(--ink);
}
.topic-sidebar-section-title {
  font-size: 0.72rem;
  color: var(--muted2);
  margin: 0.3rem 0 0.2rem;
  padding-left: 0.2rem;
  font-weight: 500;
}
.topic-sidebar-resident .topic-history-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.topic-sidebar-resident .topic-clear-btn {
  margin-top: auto;
  padding: 0.3rem;
  font-size: 0.75rem;
  color: var(--muted2);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s;
}
.topic-sidebar-resident .topic-clear-btn:hover {
  color: var(--red);
}

/* ============ 延伸问题按钮（AI 回复底部） ============ */
.msg-followups {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--rule);
}
.msg-followups-title {
  font-size: 0.75rem;
  color: var(--muted2);
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.msg-followups-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.followup-btn {
  padding: 0.5rem 0.9rem;
  background: var(--bg3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  text-align: left;
  max-width: 100%;
  line-height: 1.4;
}
.followup-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.followup-btn::before {
  content: '→ ';
  color: var(--accent);
  font-weight: 700;
}

/* ============ 推送至飞书按钮（AI 回复最下方） ============ */
.msg-feishu-push {
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
}
.feishu-push-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.95rem;
  background: var(--bg3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.feishu-push-btn img {
  width: 0.95rem;
  height: 0.95rem;
  object-fit: contain;
}
.feishu-push-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

/* ============ 飞书未配置引导弹窗 ============ */
.feishu-modal-card {
  max-width: 400px;
  padding: 2rem 1.8rem;
  text-align: center;
}
.feishu-modal-icon img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}
.feishu-modal-title {
  margin-top: 0.9rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.feishu-modal-msg {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
}
.feishu-modal-actions {
  margin-top: 1.3rem;
  display: flex;
  gap: 0.7rem;
  justify-content: center;
}
.feishu-modal-btn {
  min-width: 100px;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: none;
  transition: transform 0.15s, background 0.2s;
}
.feishu-modal-btn:active {
  transform: scale(0.98);
}

/* 素材选择器弹窗 */
.material-picker-modal {
  max-width: 720px;
  width: 92%;
  padding: 0;
  overflow: hidden;
  animation: pickerIn 0.25s ease;
}
@keyframes pickerIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.material-picker-modal .modal-close {
  top: 0.9rem;
  right: 0.9rem;
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
  background: var(--bg4);
  z-index: 2;
}
.material-picker-modal .modal-close:hover { background: var(--red-bg); color: var(--red); }
.material-picker-header {
  padding: 1.5rem 1.5rem 1rem;
  background: linear-gradient(135deg, var(--accent-light), var(--purple-light));
  border-bottom: 1px solid var(--rule);
}
.material-picker-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.material-picker-desc { color: var(--muted); font-size: 0.85rem; margin: 0; }
.material-picker-body {
  padding: 1rem 1.5rem;
}
.material-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
  max-height: 420px;
  overflow-y: auto;
  padding: 0.25rem;
  margin-bottom: 0;
  scrollbar-width: thin;
}
.material-picker-grid::-webkit-scrollbar { width: 6px; }
.material-picker-grid::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.material-picker-item {
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  background: var(--bg);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: var(--shadow-sm);
}
.material-picker-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--accent-light);
}
.material-picker-item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}
.material-picker-item.selected::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(37,99,235,0.4);
}
.material-picker-item .picker-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg4);
  overflow: hidden;
}
.material-picker-item img,
.material-picker-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.material-picker-item .picker-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: linear-gradient(135deg, var(--bg4), var(--bg3));
}
.material-picker-item .picker-name {
  padding: 0.4rem 0.5rem;
  font-size: 0.76rem;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.material-picker-item .picker-tags {
  padding: 0 0.5rem 0.4rem;
  display: flex;
  gap: 0.2rem;
  flex-wrap: wrap;
}
.material-picker-item .picker-tag {
  font-size: 0.66rem;
  padding: 0.05rem 0.35rem;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 3px;
}
.material-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--rule);
  background: var(--bg3);
}
.material-picker-count {
  font-size: 0.86rem;
  color: var(--muted);
  font-weight: 500;
}
.material-picker-count strong { color: var(--accent); font-size: 1rem; }
.material-picker-footer .btn-primary {
  padding: 0.55rem 1.6rem;
  font-size: 0.9rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(37,99,235,0.3);
  transition: all 0.2s;
}
.material-picker-footer .btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(37,99,235,0.4);
}
.material-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted2);
}

/* ============ 历史侧栏遮罩（点击外部收起） ============ */
.topic-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 140;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.topic-sidebar-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ============ 内联素材小标签（用户气泡 & AI 文本引用） ============ */
.mat-chip-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem 0.1rem 0.1rem;
  background: var(--bg4);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--ink);
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.2s;
  margin: 0 0.1rem;
}
.mat-chip-inline:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.mat-chip-inline .mat-chip-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
}
.mat-chip-inline .mat-chip-name {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* AI 气泡内（白底）的 chip 用浅色 */
.msg-row.assistant .mat-chip-inline {
  background: var(--bg4);
  color: var(--ink);
}
/* 用户气泡内（蓝底）的 chip 用半透明白 */
.msg-row.user .mat-chip-inline {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.msg-row.user .mat-chip-inline:hover {
  background: rgba(255,255,255,0.35);
  border-color: rgba(255,255,255,0.6);
}
.msg-row.user .mat-chip-inline .mat-chip-thumb {
  background: rgba(255,255,255,0.25);
}
/* 用户气泡内引用区 */
.msg-bubble-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.25);
}

/* ============ 素材悬浮卡片（hover 浮窗） ============ */
.material-hover-card {
  position: fixed;
  z-index: 500;
  width: 260px;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--rule);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.material-hover-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.material-hover-card .mhc-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: var(--bg4);
}
.material-hover-card .mhc-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: var(--bg4);
}
.material-hover-card .mhc-body {
  padding: 0.65rem 0.8rem 0.75rem;
}
.material-hover-card .mhc-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.material-hover-card .mhc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}
.material-hover-card .mhc-tag {
  padding: 0.1rem 0.4rem;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
}
.material-hover-card .mhc-meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.74rem;
  color: var(--muted);
}
.material-hover-card .mhc-meta .mhc-quality {
  font-weight: 600;
}
.material-hover-card .mhc-quality.good { color: var(--green); }
.material-hover-card .mhc-quality.bad { color: var(--orange); }

/* ============ 模式切换浮窗 ============ */
.mode-switch-popup {
  position: fixed;
  z-index: 400;
  width: 280px;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--rule);
  padding: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.97);
  transform-origin: bottom left;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.mode-switch-popup.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.mode-switch-popup .msp-header {
  font-size: 0.74rem;
  color: var(--muted2);
  padding: 0.25rem 0.5rem 0.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mode-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.65rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.mode-option:hover { background: var(--bg4); }
.mode-option.active {
  background: var(--accent-light);
}
.mode-option .mode-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.mode-option .mode-text { flex: 1; }
.mode-option .mode-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.mode-option .mode-check {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  margin-left: auto;
}
.mode-option .mode-desc {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ============ 记忆库切换浮窗（扩展模式切换浮窗） ============ */
.memory-switch-popup { width: 320px; }
.msp-section-title {
  font-size: 0.74rem;
  color: var(--muted2);
  padding: 0.4rem 0.5rem 0.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.msp-divider {
  height: 1px;
  background: var(--rule);
  margin: 0.4rem 0.25rem;
}
.mem-opt, .mem-mode-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.65rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.mem-opt:hover, .mem-mode-opt:hover {
  background: var(--bg4);
  transform: translateX(2px);
}
.mem-opt.active, .mem-mode-opt.active {
  background: var(--accent-light);
}
.mem-opt-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.mem-opt-text { flex: 1; }
.mem-opt-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.mem-opt-check {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  margin-left: auto;
  transition: opacity 0.15s;
}
.mem-opt-desc {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.45;
}

/* ============ 弹窗 ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.modal-overlay.visible {
  display: flex;
  animation: modalOverlayIn 0.2s ease;
}
.modal-overlay.visible .feishu-modal-card {
  animation: modalContentIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalContentIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-content {
  background: var(--bg);
  border-radius: var(--radius-lg);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  position: relative;
}

.demo-modal {
  max-width: 680px;
  padding: 2rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.demo-modal::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* 隐藏素材预览/编辑弹窗的滚动条（保留滚动） */
#previewContent,
.edit-material-modal {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#previewContent::-webkit-scrollbar,
.edit-material-modal::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.demo-modal h2 { font-size: 1.35rem; margin-bottom: 1.25rem; color: var(--accent); }
.demo-content h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
}
.demo-content h4:first-child { margin-top: 0; }
.demo-content p { font-size: 0.88rem; color: var(--muted); line-height: 1.7; }
.demo-content ul { padding-left: 1.25rem; }
.demo-content li { font-size: 0.88rem; color: var(--muted); line-height: 1.8; }
.demo-content .help-privacy-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed var(--accent);
  transition: all 0.2s;
}
.demo-content .help-privacy-link:hover {
  color: var(--accent-hover);
  border-bottom-style: solid;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg4);
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s;
  color: var(--muted);
}
.modal-close:hover { background: var(--red-light); color: var(--red); }

/* ============ 预览弹窗 ============ */
.preview-container {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}
.preview-container img,
.preview-container video {
  max-width: 100%;
  max-height: 60vh;
}

.preview-info { padding: 1.5rem; }
.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.preview-name {
  font-size: 1.1rem;
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-actions { display: flex; gap: 0.5rem; }
.btn-reanalyze {
  padding: 0.4rem 0.8rem;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: inherit;
}
.btn-reanalyze:hover { background: var(--accent); color: white; }
.btn-reanalyze:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-delete {
  padding: 0.4rem 0.8rem;
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-light);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  font-family: inherit;
}
.btn-delete:hover { background: var(--red); color: white; }

.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 2rem;
  text-align: center;
}

.preview-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* 大视频首次预览加载提示栏（preview-tags 下方，不遮挡视频画面） */
.preview-cdn-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
  background: var(--orange-light);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink);
}
.preview-cdn-notice-text {
  flex: 1;
  min-width: 0;
}
.preview-cdn-notice-close {
  flex: none;
  border: none;
  background: transparent;
  color: var(--muted2);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.preview-cdn-notice-close:hover {
  color: var(--ink);
  background: var(--bg3);
}

.preview-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  font-size: 0.85rem;
}
.preview-meta-item { display: flex; flex-direction: column; gap: 0.15rem; }
.preview-meta-item label { color: var(--muted2); font-size: 0.75rem; }
.preview-meta-item span { font-weight: 500; color: var(--ink); }

.preview-description {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--bg3);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.preview-description.is-error { border-left-color: var(--red); background: var(--red-bg); }
.preview-description.is-mock { border-left-color: var(--orange); background: var(--orange-bg); }
.preview-description label {
  display: block;
  color: var(--muted2);
  font-size: 0.75rem;
  margin-bottom: 0.35rem;
}
.preview-description p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink);
}
.preview-description.is-error p { color: var(--red); }
.preview-description.is-mock p { color: var(--orange); }

/* ============ Toast ============ */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #1f2937;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  z-index: 300;
  transition: transform 0.3s;
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  text-align: center;
}
.toast.visible { transform: translateX(-50%) translateY(0); }

/* ============ 上传进度 ============ */
.upload-progress {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-lg);
  z-index: 250;
  display: none;
  min-width: 280px;
}
.upload-progress.visible { display: block; }
.upload-progress-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
}
.progress-bar {
  height: 6px;
  background: var(--bg4);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s;
  width: 0%;
}

/* ============ 页脚 ============ */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--rule);
  padding: 1.5rem 1.5rem;
  margin-top: 2rem;
  flex-shrink: 0;
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.footer-copyright {
  font-weight: 500;
  color: var(--ink);
}
.footer-beian {
  color: var(--muted);
  text-decoration: none;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  border: 1px solid transparent;
}
.footer-beian:hover {
  color: var(--accent);
  background: var(--accent-light);
  border-color: var(--accent-light);
}

/* ============ 响应式 ============ */
@media (max-width: 768px) {
  .nav-container { padding: 0 1rem; height: 56px; }
  .brand-en { display: none; }
  .main-content { padding: 1rem; }
  .upload-zone { padding: 1.5rem 1rem; }
  .upload-icon { font-size: 2.5rem; }
  .upload-title { font-size: 1rem; }
  .filter-bar { gap: 1rem; }
  .material-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; }
  .topic-container { padding: 1.25rem; }
  .topic-input-area { flex-direction: column; }
  .topic-layout { flex-direction: column; }
  .topic-sidebar { width: 100%; position: static; max-height: none; }
  /* 移动端：左侧常驻栏回退为抽屉式 */
  .topic-chat-layout { flex-direction: column; padding: 0.5rem; }
  .topic-sidebar-resident {
    position: fixed;
    top: 0;
    left: -280px;
    width: 260px;
    height: 100vh;
    z-index: 150;
    margin: 0;
    opacity: 1;
    transition: left 0.28s ease;
    border-radius: 0;
    max-height: none;
  }
  .topic-sidebar-resident.open { left: 0; }
  .topic-expand-btn { display: flex !important; position: static; }
  .modal-overlay { padding: 1rem; }
  .nav-btn { padding: 0.4rem 0.7rem; font-size: 0.82rem; }
}

@media (max-width: 480px) {
  .material-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ 导航栏登录按钮 ============ */
.nav-auth-btn {
  background: var(--accent);
  color: #fff;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
  transition: all 0.25s;
}
.nav-auth-btn:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.nav-auth-btn.logged-in {
  background: var(--bg3);
  color: var(--ink);
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem 0.3rem 0.4rem;
}
.nav-auth-btn.logged-in:hover {
  background: var(--bg4);
  transform: none;
}
.nav-auth-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ============ 登录弹窗 ============ */
.auth-modal {
  max-width: 420px;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  animation: modal-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}

/* 注册/忘记密码：固定高度，内容超出时 body 内部滚动，不显示滚动条 */
.auth-modal.has-fixed-body {
  height: 560px;
  max-height: 90vh;
}
.auth-modal.has-fixed-body .auth-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.auth-modal.has-fixed-body .auth-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.auth-header {
  background: linear-gradient(135deg, var(--accent) 0%, #6366f1 100%);
  padding: 1.75rem 2rem 1.5rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.auth-header::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}
.auth-header::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -20px;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}
.auth-header .logo-icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 0.4rem;
  position: relative;
  z-index: 1;
}
.auth-header h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  position: relative;
  z-index: 1;
}
.auth-header p {
  font-size: 0.82rem;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

.auth-body {
  padding: 1.5rem 2rem 2rem;
}

.auth-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--bg3);
  border-radius: var(--radius-sm);
  padding: 0.25rem;
  margin-bottom: 1.25rem;
}
.auth-tab {
  flex: 1;
  padding: 0.5rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.auth-tab.active {
  background: var(--bg);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.auth-field {
  margin-bottom: 0.85rem;
  position: relative;
}
.auth-label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
  font-weight: 500;
}
.auth-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--ink);
  transition: all 0.2s;
  outline: none;
}
.auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.auth-input::placeholder { color: var(--muted2); }

.auth-code-row {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.36s ease, opacity 0.28s ease, margin-top 0.28s ease;
  margin-top: 0;
}
.auth-code-row.visible {
  max-height: 180px;
  opacity: 1;
  margin-top: 0.85rem;
}
.auth-code-row .auth-label { margin-bottom: 0.4rem; }
.auth-code-row .auth-input { margin-bottom: 0.5rem; }

.auth-code-btn {
  display: block;
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--accent);
  background: var(--bg);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.auth-code-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}
.auth-code-btn:disabled {
  border-color: var(--rule);
  color: var(--muted2);
  cursor: not-allowed;
  background: var(--bg3);
}

.auth-submit {
  width: 100%;
  padding: 0.85rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  margin-top: 0.5rem;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.auth-submit:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}
.auth-submit:disabled {
  background: var(--muted2);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.auth-submit.success {
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-light);
  animation: success-pulse 0.5s ease;
}

.auth-switch-row {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.auth-switch-link {
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.auth-switch-link:hover { text-decoration: underline; }

.auth-error {
  background: var(--red-bg);
  color: var(--red);
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  margin-top: 0.75rem;
  border-left: 3px solid var(--red);
  display: none;
}
.auth-error.visible {
  display: block;
  animation: shake 0.32s ease;
}

.auth-hint {
  font-size: 0.76rem;
  color: var(--muted2);
  margin-top: 0.75rem;
  text-align: center;
  line-height: 1.5;
}

/* 隐私政策勾选 */
.auth-privacy-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.auth-privacy-checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.auth-privacy-text { line-height: 1.5; }
.auth-privacy-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.auth-privacy-link:hover { text-decoration: underline; }

/* Tab 切换条 */
.auth-tab-bar {
  display: flex;
  gap: 0.25rem;
  padding: 0 2rem 0;
  border-bottom: 1px solid var(--rule);
}
.auth-tab {
  flex: 1;
  padding: 0.75rem 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  margin-bottom: -1px;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.auth-switch-text { color: var(--muted); }

/* 演示账号弹窗 */
.demo-notice-card {
  max-width: 460px;
  text-align: center;
  padding: 2rem 2rem 1.5rem;
}
.demo-notice-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.demo-notice-title {
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.demo-notice-msg {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  text-align: left;
}
.demo-notice-btn {
  width: 100%;
  padding: 0.625rem 1.5rem;
  font-size: 0.95rem;
}

.auth-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.auth-close:hover { background: rgba(255, 255, 255, 0.35); }

/* ============ 个人中心弹窗 ============ */
.profile-modal {
  max-width: 480px;
  width: 100%;
  padding: 0;
  overflow: hidden;
  animation: modal-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.profile-header {
  background: linear-gradient(135deg, var(--accent) 0%, #6366f1 100%);
  padding: 2rem 1.75rem 1.5rem;
  color: #fff;
  text-align: center;
  position: relative;
}
.profile-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.profile-close:hover { background: rgba(255, 255, 255, 0.35); }

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.6rem;
  border: 3px solid rgba(255, 255, 255, 0.4);
}
.profile-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.profile-phone {
  font-size: 0.85rem;
  opacity: 0.85;
}
.profile-ip-line {
  font-size: 0.78rem;
  opacity: 0.9;
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}
.profile-ip-line .profile-ip-icon { margin-right: 0; }

.profile-body {
  padding: 1.25rem 1.75rem 1.75rem;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.profile-body::-webkit-scrollbar {
  display: none;
}
.profile-header {
  flex-shrink: 0;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.profile-stat {
  background: var(--bg3);
  border-radius: var(--radius);
  padding: 0.85rem 0.5rem;
  text-align: center;
  border: 1px solid var(--rule);
}
.profile-stat-num {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.profile-stat-label {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.profile-section {
  margin-bottom: 1rem;
}
.profile-section-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 存储空间统计 */
.profile-storage {
  background: linear-gradient(135deg, var(--bg3), var(--bg4));
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule);
}
.profile-storage .storage-total {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.profile-storage .storage-icon {
  font-size: 1.1rem;
}
.profile-storage .storage-num {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.profile-storage .storage-label {
  font-size: 0.78rem;
  color: var(--muted2);
}
.profile-storage .storage-breakdown {
  display: flex;
  gap: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
}
.profile-storage .storage-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.profile-storage .storage-item-label {
  font-size: 0.72rem;
  color: var(--muted2);
}
.profile-storage .storage-item-num {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.profile-input-row {
  display: flex;
  gap: 0.5rem;
}
.profile-input-row .auth-input { flex: 1; }
.profile-mini-btn {
  padding: 0 0.9rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.2s;
}
.profile-mini-btn:hover { background: var(--accent-hover); }
.profile-mini-btn:disabled { background: var(--muted2); cursor: not-allowed; }

/* IP 归属地 & 设备管理 */
.profile-value-muted { color: var(--muted); font-size: 0.85rem; }
.profile-ip-icon { margin-right: 0.35rem; }

/* 已登录设备弹窗 */
.devices-modal {
  max-width: 560px;
  width: 100%;
  padding: 0;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: devices-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes devices-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.devices-header {
  padding: 1.4rem 1.4rem 0.6rem;
  position: relative;
}
.devices-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 1.4rem;
  color: var(--muted2);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s;
  line-height: 1;
}
.devices-close:hover { background: var(--bg4); color: var(--ink); }
.devices-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.2rem;
}
.devices-subtitle {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 1rem;
}
.devices-loading, .devices-empty, .devices-error {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.devices-error { color: var(--red); }

.devices-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.5rem 1.4rem 0.8rem;
  max-height: 60vh;
  overflow-y: auto;
}
.device-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0.95rem;
  background: var(--bg3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: all 0.22s;
  animation: device-card-in 0.3s ease;
}
@keyframes device-card-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.device-card:hover {
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
}
.device-card.device-current {
  background: linear-gradient(135deg, var(--purple-light), #F5F3FF);
  border-color: #DDD6FE;
}
.device-card-icon {
  font-size: 1.6rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 50%;
  flex-shrink: 0;
}
.device-current .device-card-icon { background: rgba(124, 58, 237, 0.08); }
.device-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.device-card-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.device-current-badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--purple);
  background: rgba(124, 58, 237, 0.15);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.device-card-meta {
  font-size: 0.78rem;
  color: var(--muted);
}
.device-card-loc {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.device-loc-icon { font-size: 0.85rem; }
.device-card-time {
  font-size: 0.72rem;
  color: var(--muted2);
  margin-top: 0.1rem;
}
.device-revoke-btn {
  padding: 0.4rem 0.8rem;
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
}
.device-revoke-btn:hover {
  background: var(--red);
  color: #fff;
}

.devices-footer {
  padding: 0.6rem 1.4rem 1.2rem;
  border-top: 1px solid var(--rule);
}
.devices-logout-others-btn {
  width: 100%;
  padding: 0.65rem;
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.devices-logout-others-btn:hover {
  background: var(--red);
  color: #fff;
}

.profile-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.profile-action-btn {
  flex: 1;
  padding: 0.7rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.profile-action-btn:hover { background: var(--bg3); }
a.profile-action-btn { text-decoration: none; text-align: center; display: flex; align-items: center; justify-content: center; }
.profile-action-btn.danger {
  color: var(--red);
  border-color: var(--red-light);
}
.profile-action-btn.danger:hover {
  background: var(--red-bg);
}

/* ============ 关键帧动画 ============ */
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes slide-up-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
@keyframes success-pulse {
  0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5); }
  100% { box-shadow: 0 0 0 12px rgba(5, 150, 105, 0); }
}

@media (max-width: 480px) {
  .auth-modal, .profile-modal { max-width: 100%; }
  .auth-header, .profile-header { padding: 1.25rem 1.25rem 1rem; }
  .auth-body, .profile-body { padding: 1.25rem; }
  .profile-stats { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
  .profile-stat-num { font-size: 1.15rem; }
}

/* ============ 记忆素材库 ============ */
.memory-view {
  max-width: 1200px;
  margin: 0 auto;
  animation: slide-up-fade 0.3s ease;
}

.memory-header {
  margin-bottom: 1.5rem;
}
.memory-header-title h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.memory-header-sub {
  font-size: 0.88rem;
  color: var(--muted);
}

/* Tab 栏 */
.memory-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 0;
}
.memory-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.2rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}
.memory-tab:hover { color: var(--ink); background: var(--bg3); }
.memory-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--accent-light);
}
.memory-tab-icon { font-size: 1.05rem; }
.memory-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--bg4);
  color: var(--muted);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}
.memory-tab.active .memory-tab-badge { background: var(--accent); color: #fff; }

/* 工具栏 */
.memory-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  background: var(--bg);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.memory-search-bar {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.memory-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  opacity: 0.5;
}
.memory-search-bar input {
  width: 100%;
  padding: 0.6rem 1rem 0.6rem 2.4rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--bg3);
  transition: all 0.2s;
}
.memory-search-bar input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.memory-tag-filter {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.memory-toolbar-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

/* 操作按钮（通用，也用于卡片内） */
.memory-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  white-space: nowrap;
}
.memory-action-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg3); }
.memory-action-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.memory-action-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.memory-action-btn.small { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.memory-action-btn.danger { color: var(--red); border-color: var(--red-light); }
.memory-action-btn.danger:hover { background: var(--red-bg); color: var(--red); border-color: var(--red); }

/* 标签 chip（卡片内 + 筛选区共用） */
.memory-tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  background: var(--bg4);
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.memory-tag-chip:hover { background: var(--accent-light); color: var(--accent); }
.memory-tag-chip.active { background: var(--accent); color: #fff; }

/* 列表区 */
.memory-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

/* 素材卡片 */
.memory-card {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.25s;
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  animation: slide-up-fade 0.25s ease;
}
.memory-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent-light); }
.memory-card.pinned {
  border-left: 3px solid var(--orange);
  background: linear-gradient(90deg, var(--orange-bg) 0%, var(--bg) 30%);
}

.memory-card-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.memory-card-icon { font-size: 1rem; }
.memory-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.memory-card-title.muted { color: var(--muted2); font-weight: 500; }
.memory-card-pin { font-size: 0.95rem; }

.memory-card-content {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

.memory-card-meta {
  font-size: 0.78rem;
  color: var(--muted2);
}
.memory-card-link {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: none;
  margin-top: 0.2rem;
}
.memory-card-link:hover { text-decoration: underline; }

.memory-card-tags {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.memory-card-note {
  display: flex;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted2);
  background: var(--bg3);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.memory-card-note-icon { flex-shrink: 0; }

.memory-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.3rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
}
.memory-card-time {
  font-size: 0.72rem;
  color: var(--muted2);
}
.memory-card-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* 空状态 */
.memory-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  background: var(--bg);
  border-radius: var(--radius);
  border: 2px dashed var(--rule);
}
.memory-empty-icon { font-size: 3.5rem; margin-bottom: 1rem; opacity: 0.5; }
.memory-empty-text { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; }
.memory-empty-hint { font-size: 0.85rem; color: var(--muted); }

/* ============ 选题辅助 - 记忆折叠面板 ============ */
.topic-memory-panel {
  margin-top: 0.5rem;
  background: var(--bg3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.25s;
}
.topic-memory-panel.collapsed .memory-panel-body { display: none; }
.topic-memory-panel.collapsed .memory-panel-arrow { transform: rotate(0deg); }
.topic-memory-panel .memory-panel-arrow { transform: rotate(90deg); }

.memory-panel-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  text-align: left;
  transition: background 0.2s;
}
.memory-panel-header:hover { background: var(--bg4); }
.memory-panel-icon { font-size: 1rem; }
.memory-panel-title { font-weight: 600; }
.memory-panel-summary {
  flex: 1;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 400;
}
.memory-panel-arrow {
  font-size: 1.1rem;
  color: var(--muted2);
  transition: transform 0.25s;
  line-height: 1;
}

.memory-panel-body {
  padding: 0.5rem 0.85rem 0.75rem;
  border-top: 1px solid var(--rule);
}
.memory-panel-checks {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.memory-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink);
}
.memory-check input { cursor: pointer; accent-color: var(--accent); }

.memory-panel-mode {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.memory-mode-label { font-size: 0.8rem; color: var(--muted); }
.memory-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  border-radius: 999px;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
  color: var(--accent);
  transition: all 0.2s;
}
.memory-mode-btn:hover { background: var(--accent-light); border-color: var(--accent); }

.memory-panel-hint {
  font-size: 0.75rem;
  color: var(--muted2);
  line-height: 1.5;
}

/* ============ 记忆库编辑弹窗 ============ */
.memory-editor-modal {
  max-width: 560px;
  padding: 1.75rem;
  animation: modal-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.memory-editor-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.memory-editor-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.memory-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.memory-form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.memory-form-req { color: var(--red); }
.memory-form-input {
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--bg3);
  transition: all 0.2s;
}
.memory-form-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.memory-form-textarea {
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--bg3);
  resize: vertical;
  min-height: 80px;
  line-height: 1.55;
  transition: all 0.2s;
}
.memory-form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.memory-form-extra {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--rule);
}
.memory-form-inline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.memory-form-inline input, .memory-form-inline select {
  flex: 1;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-family: inherit;
  background: var(--bg);
}
.memory-form-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.memory-form-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink);
}
.memory-form-check input { cursor: pointer; accent-color: var(--accent); }
.memory-form-polish-btn {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--purple);
  background: var(--purple-light);
  color: var(--purple);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.memory-form-polish-btn:hover { background: var(--purple); color: #fff; }

/* ============ 音乐上传区域 ============ */
.memory-form-divider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0;
  color: var(--muted2);
  font-size: 0.75rem;
}
.memory-form-divider::before,
.memory-form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.memory-music-upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
.memory-music-upload-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--purple-light) 100%);
  opacity: 0;
  transition: opacity 0.3s;
}
.memory-music-upload-btn:hover {
  border-color: var(--purple);
  border-style: solid;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.15);
}
.memory-music-upload-btn:hover::before { opacity: 0.5; }
.memory-music-upload-btn:active { transform: translateY(0); }
.memory-music-upload-btn > * { position: relative; z-index: 1; }
.upload-main-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.upload-sub-text {
  font-size: 0.72rem;
  color: var(--muted);
}

.memory-music-upload-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  margin-top: 0.5rem;
  animation: slide-up-fade 0.25s ease;
}
.memory-music-upload-status.loading {
  background: var(--accent-light);
  color: var(--accent);
}
.memory-music-upload-status.success {
  background: var(--green-bg);
  color: var(--green);
}
.memory-music-upload-status.error {
  background: var(--red-bg);
  color: var(--red);
}
.memory-music-upload-status .status-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: currentColor;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.memory-music-upload-status.loading .status-icon { background: transparent; }
.memory-music-upload-status .status-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(37, 99, 235, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
.memory-music-upload-status .status-clear {
  margin-left: auto;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.35rem;
  opacity: 0.6;
  font-family: inherit;
}
.memory-music-upload-status .status-clear:hover { opacity: 1; }

/* ============ 记忆库弹窗隐藏滚动条 ============ */
.memory-editor-modal,
.memory-polish-modal,
.memory-editor-body,
.memory-polish-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.memory-editor-modal::-webkit-scrollbar,
.memory-polish-modal::-webkit-scrollbar,
.memory-editor-body::-webkit-scrollbar,
.memory-polish-content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ============ 音乐播放器卡片 ============ */
.memory-card.music-player-card {
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg3) 100%);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.memory-card.music-player-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  opacity: 0.7;
}
.memory-card.music-player-card.playing {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.15);
}
.memory-card.music-player-card.playing::before {
  opacity: 1;
  animation: mpc-bar 1.2s ease-in-out infinite;
}
@keyframes mpc-bar {
  0%, 100% { opacity: 0.7; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.02); }
}

.mpc-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  padding-right: 0.25rem;
}
.mpc-type-icon { font-size: 1.1rem; }
.mpc-pin { font-size: 0.85rem; margin-left: auto; }
.mpc-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mpc-title.muted { color: var(--muted2); }
.mpc-video-badge {
  font-size: 0.66rem;
  padding: 0.1rem 0.4rem;
  background: var(--orange-light);
  color: var(--orange);
  border-radius: 4px;
  font-weight: 600;
  flex-shrink: 0;
}

.mpc-player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  margin-bottom: 0.5rem;
  transition: all 0.25s;
}
.music-player-card.playing .mpc-player {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--purple-light) 100%);
  border-color: var(--accent-light);
}

.mpc-play-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: all 0.25s;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.mpc-play-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45);
}
.mpc-play-btn:active { transform: scale(0.95); }
.mpc-play-btn.playing {
  background: linear-gradient(135deg, var(--purple), var(--accent));
  animation: mpc-pulse 1.6s ease-in-out infinite;
}
@keyframes mpc-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3); }
  50% { box-shadow: 0 4px 16px rgba(124, 58, 237, 0.55); }
}
.mpc-play-icon-play,
.mpc-play-icon-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mpc-play-icon-play {
  transform: translateX(1px);
}

.mpc-progress-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.mpc-time-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.mpc-current-time { color: var(--accent); font-weight: 600; }
.mpc-duration { color: var(--muted2); }

.mpc-progress-track {
  position: relative;
  height: 5px;
  background: var(--bg4);
  border-radius: 999px;
  cursor: pointer;
  transition: height 0.15s;
}
.mpc-progress-track:hover { height: 7px; }
.mpc-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  border-radius: 999px;
  transition: width 0.1s linear;
}
.mpc-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: left 0.1s linear, transform 0.15s;
  pointer-events: none;
}
.mpc-progress-track:hover .mpc-progress-thumb {
  transform: translate(-50%, -50%) scale(1.2);
}

/* ============ 选题辅助音乐浮窗（播放器样式） ============ */
.memory-hover-card.music-hover {
  width: 300px;
}
.memory-hover-card .mhc-player {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg2) 100%);
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  margin-bottom: 0.5rem;
}
.memory-hover-card .mhc-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}
.memory-hover-card .mhc-play-btn:hover {
  transform: scale(1.08);
}
.memory-hover-card .mhc-play-btn.playing {
  animation: mpc-pulse 1.6s ease-in-out infinite;
}
.memory-hover-card .mhc-progress-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.memory-hover-card .mhc-time-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.66rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.memory-hover-card .mhc-current-time { color: var(--accent); font-weight: 600; }
.memory-hover-card .mhc-duration { color: var(--muted2); }
.memory-hover-card .mhc-progress-track {
  position: relative;
  height: 4px;
  background: var(--bg4);
  border-radius: 999px;
  cursor: pointer;
  transition: height 0.15s;
}
.memory-hover-card .mhc-progress-track:hover { height: 6px; }
.memory-hover-card .mhc-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  border-radius: 999px;
  transition: width 0.1s linear;
}
.memory-hover-card .mhc-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  transform: translate(-50%, -50%);
  transition: left 0.1s linear;
  pointer-events: none;
}

.memory-editor-footer {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* ============ AI 润色对比弹窗 ============ */
.memory-polish-modal {
  max-width: 800px;
  padding: 1.75rem;
  animation: modal-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.memory-polish-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.memory-polish-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.memory-polish-col {
  display: flex;
  flex-direction: column;
}
.memory-polish-col-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--rule);
}
.memory-polish-col-title.polished { color: var(--purple); border-bottom-color: var(--purple); }
.memory-polish-content {
  flex: 1;
  padding: 0.85rem;
  background: var(--bg3);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
}
.memory-polish-content.polished {
  background: var(--purple-light);
  border: 1px solid var(--purple);
}
.memory-polish-footer {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

/* ============ 批量导入弹窗 ============ */
.memory-batch-modal {
  max-width: 560px;
  padding: 1.75rem;
  animation: modal-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.memory-batch-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.memory-batch-hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

/* ============ AI 回复 - 本次参考模块（紧凑版） ============ */
.ref-memory-block {
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--bg3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  animation: slide-up-fade 0.25s ease;
}
.ref-memory-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.3rem;
  letter-spacing: 0.02em;
}
.ref-memory-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.ref-memory-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.5rem;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s;
  max-width: 180px;
}
.ref-memory-chip .ref-memory-chip-icon {
  font-size: 0.7rem;
  flex-shrink: 0;
}
.ref-memory-chip .ref-memory-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ref-memory-chip:hover {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ============ AI 正文 - 内联记忆小标签 ============ */
.mem-chip-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.08rem 0.45rem 0.08rem 0.08rem;
  background: var(--purple-light);
  border: 1px solid var(--purple-light);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--purple);
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.2s;
  margin: 0 0.1rem;
  font-weight: 500;
}
.mem-chip-inline:hover {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
  transform: translateY(-1px);
}
.mem-chip-inline .mem-chip-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  flex-shrink: 0;
}
.msg-row.user .mem-chip-inline {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}
.msg-row.user .mem-chip-inline:hover {
  background: rgba(255,255,255,0.35);
  border-color: rgba(255,255,255,0.6);
}
.msg-row.user .mem-chip-inline .mem-chip-icon {
  background: rgba(255,255,255,0.3);
}
.mem-chip-inline .mem-chip-name {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============ 记忆引用悬浮卡片 ============ */
.memory-hover-card {
  position: fixed;
  z-index: 1000;
  width: 280px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.7rem 0.85rem;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  font-size: 0.85rem;
}
.memory-hover-card.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.memory-hover-card .mhc-mem-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}
.memory-hover-card .mhc-mem-type {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}
.memory-hover-card .mhc-mem-pin {
  font-size: 0.7rem;
  color: var(--orange);
}
.memory-hover-card .mhc-mem-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
  line-height: 1.4;
}
.memory-hover-card .mhc-mem-content {
  font-size: 0.78rem;
  color: var(--ink);
  line-height: 1.5;
  max-height: 6rem;
  overflow-y: auto;
  margin-bottom: 0.4rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.memory-hover-card .mhc-mem-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}
.memory-hover-card .mhc-mem-tag {
  padding: 0.1rem 0.45rem;
  background: var(--purple-light);
  color: var(--purple);
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
}

/* ============ 记忆库响应式 ============ */
@media (max-width: 768px) {
  .memory-toolbar { flex-direction: column; align-items: stretch; }
  .memory-toolbar-actions { margin-left: 0; justify-content: flex-end; }
  .memory-polish-compare { grid-template-columns: 1fr; }
  .memory-form-grid2 { grid-template-columns: 1fr; }
  .memory-list { grid-template-columns: 1fr; }
}

/* ============ 上传区横向布局（拖拽框 + 扫码上传按钮） ============ */
.upload-row {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
.upload-row .upload-zone {
  flex: 1;
  min-width: 0;
}

/* ============ 移动端扫码上传 - 按钮 ============ */
.mobile-upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 150px;
  padding: 1.2rem 1rem;
  border: 2px dashed var(--purple);
  border-radius: var(--radius);
  background: var(--purple-light);
  color: var(--purple);
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
}
.mobile-upload-btn:hover {
  transform: translateY(-2px);
  border-color: var(--purple);
  background: #E9D9FF;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.22);
}
.mobile-upload-btn:active { transform: translateY(0); }
.mobile-upload-btn .mobile-upload-icon {
  font-size: 1.8rem;
  line-height: 1;
}
.mobile-upload-btn .mobile-upload-label {
  font-size: 0.95rem;
  font-weight: 600;
}
.mobile-upload-btn .mobile-upload-sub {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 400;
}
@media (max-width: 640px) {
  .upload-row { flex-direction: column; }
  .mobile-upload-btn {
    flex-direction: row;
    min-width: 0;
    padding: 0.75rem 1.2rem;
    justify-content: center;
  }
  .mobile-upload-btn .mobile-upload-icon { font-size: 1.2rem; }
  .mobile-upload-btn .mobile-upload-sub { display: none; }
}

/* ============ 移动端扫码上传 - 二维码弹窗 ============ */
.mu-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: mu-fade-in 0.2s ease;
}
@keyframes mu-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mu-modal {
  background: var(--bg);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 420px;
  padding: 1.75rem 1.5rem 1.5rem;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: mu-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mu-slide-up {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.mu-modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg4);
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: all 0.2s;
  z-index: 10;
}
.mu-modal-close:hover { background: var(--red-light); color: var(--red); }
.mu-modal-header { text-align: center; margin-bottom: 1.25rem; }
.mu-modal-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.mu-modal-desc {
  font-size: 0.82rem;
  color: var(--muted);
}
/* 扫码上传目标文件夹提示 */
.mu-folder-hint {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0.35rem 0.7rem;
  background: var(--accent-light);
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,0.18);
  display: inline-block;
  animation: ufhIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mu-folder-hint strong { color: var(--accent); font-weight: 700; }

/* ============ 二维码容器 ============ */
.mu-qr-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  min-height: 220px;
}
.mu-qr-container img,
.mu-qr-container canvas {
  display: block;
  border-radius: 4px;
}
.mu-qr-loading {
  color: var(--muted);
  font-size: 0.88rem;
  animation: mu-pulse 1.4s ease-in-out infinite;
}
.mu-qr-error {
  color: var(--red);
  font-size: 0.85rem;
  text-align: center;
  padding: 0.5rem;
}
@keyframes mu-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ============ 二维码 URL 兜底 ============ */
.mu-qr-fallback {
  margin-bottom: 1rem;
  padding: 0.85rem;
  background: var(--bg3);
  border-radius: var(--radius);
}
.mu-qr-url-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.mu-qr-url-row {
  display: flex;
  gap: 0.4rem;
}
.mu-qr-url-row input {
  flex: 1;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-family: 'Consolas', monospace;
  background: var(--bg);
  color: var(--ink);
  min-width: 0;
}
.btn-sm {
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
}
.btn-secondary {
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ============ 弹窗状态区 ============ */
.mu-status {
  text-align: center;
  margin-bottom: 0.75rem;
}
.mu-status > div {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  animation: mu-fade-in 0.25s ease;
}
.mu-status-pending {
  background: var(--bg3);
  color: var(--muted);
}
.mu-status-uploading {
  background: var(--purple-light);
  color: var(--purple);
}
.mu-status-done {
  background: var(--green-light);
  color: var(--green);
}
.mu-status-warning {
  background: var(--orange-light);
  color: var(--orange);
}
.mu-status-icon { font-size: 1rem; }
.mu-countdown {
  font-size: 0.75rem;
  color: var(--muted2);
  margin-left: 0.2rem;
}

/* ============ 弹窗进度条 ============ */
.mu-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg4);
  border-radius: 999px;
  overflow: hidden;
}
.mu-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), #9F67F4);
  border-radius: 999px;
  transition: width 0.3s ease;
  width: 0%;
}

/* ============ 全局浮动徽章 ============ */
.mobile-upload-badge {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 250;
  display: flex;
  align-items: center;
  padding: 0.6rem 1.1rem;
  background: linear-gradient(135deg, var(--purple), #9F67F4);
  color: #fff;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
  animation: mu-badge-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-upload-badge.warning {
  background: linear-gradient(135deg, var(--orange), #F59E0B);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.35);
}
@keyframes mu-badge-in {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============ 素材卡片 - 移动端上传中徽章 ============ */
.card-thumb .mobile-source-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--purple);
  color: #fff;
  z-index: 2;
  animation: mu-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes mu-badge-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
  50% { opacity: 0.92; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0); }
}

/* ============ 素材编辑按钮 + 弹窗 ============ */
.btn-edit {
  padding: 0.4rem 0.8rem;
  background: var(--purple-light);
  color: var(--purple);
  border: 1px solid var(--purple);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: inherit;
}
.btn-edit:hover { background: var(--purple); color: #fff; }

.edit-material-modal {
  max-width: 540px;
  width: 100%;
  padding: 1.75rem 1.5rem 1.5rem;
}
.edit-material-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--ink);
}
.edit-material-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.edit-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.edit-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.edit-field .edit-hint {
  font-size: 0.74rem;
  color: var(--muted2);
  font-weight: 400;
}
.edit-field input,
.edit-field textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg);
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}
.edit-field input:focus,
.edit-field textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-light);
}
.edit-hint-line {
  font-size: 0.72rem;
  color: var(--muted2);
  margin-top: 0.2rem;
}
.edit-hint-line.is-modified {
  color: var(--orange);
  font-weight: 500;
}
.edit-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.btn-cancel-edit {
  padding: 0.55rem 1.2rem;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.btn-cancel-edit:hover { background: var(--bg4); }
.btn-save-edit {
  padding: 0.55rem 1.4rem;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
.btn-save-edit:hover {
  background: var(--purple);
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}
.btn-save-edit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 自定义缩略图上传（编辑弹窗内，仅视频） */
.edit-thumb-row {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.edit-thumb-preview {
  flex: 0 0 140px;
  width: 140px;
  height: 84px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  background: var(--bg4);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.edit-thumb-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.edit-thumb-preview.is-empty img { display: none; }
.edit-thumb-preview.is-empty::after {
  content: '暂无';
  color: var(--muted2);
  font-size: 0.75rem;
}
.edit-thumb-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
}
.btn-thumb-upload {
  padding: 0.45rem 0.9rem;
  background: var(--bg);
  color: var(--purple);
  border: 1px dashed var(--purple);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  align-self: flex-start;
}
.btn-thumb-upload:hover {
  background: var(--purple-light);
}
.btn-thumb-upload:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.edit-thumb-hint {
  font-size: 0.72rem;
  color: var(--muted2);
  word-break: break-all;
}
.edit-thumb-hint.is-uploading { color: var(--purple); }
.edit-thumb-hint.is-success { color: var(--green); }
.edit-thumb-hint.is-error { color: var(--red); }

/* 描述被手动修改标记 */
.description-modified-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--orange-light);
  color: var(--orange);
  vertical-align: middle;
}

/* ============ 上传后命名弹窗 ============ */
.naming-modal {
  max-width: 560px;
  width: 100%;
  padding: 1.75rem 1.5rem 1.5rem;
}
.naming-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.naming-desc {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
  line-height: 1.5;
}
.naming-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 1.1rem;
  padding-right: 0.2rem;
}
.naming-item {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.6rem;
  background: var(--bg3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  transition: border-color 0.2s;
}
.naming-item:focus-within {
  border-color: var(--purple);
  background: var(--purple-light);
}
.naming-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg4);
  flex-shrink: 0;
}
.naming-thumb.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.naming-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.naming-input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.naming-input:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-light);
}
.naming-item-hint {
  font-size: 0.7rem;
  color: var(--muted2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.naming-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}
.btn-skip-naming {
  padding: 0.55rem 1.2rem;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.btn-skip-naming:hover { background: var(--bg4); }
.btn-save-naming {
  padding: 0.55rem 1.4rem;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
.btn-save-naming:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}
.btn-save-naming:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ============ 演示后台入口按钮（仅 traedemo 可见） ============ */
.nav-demo-btn {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  border: 1px solid #FCD34D;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.nav-demo-btn:hover {
  background: linear-gradient(135deg, #FDE68A, #FCD34D);
  color: #78350F;
}

/* ============================================================
   素材库网盘化改造：文件夹视图 / 面包屑 / 右键菜单 / 弹窗 / picker 树
   ============================================================ */

/* ---- 文件夹工具条 + 面包屑 ---- */
.folder-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 0.25rem;
  margin-bottom: 0.25rem;
  min-height: 42px;
}
.folder-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  min-height: 28px;
}
.folder-breadcrumb .crumb-item {
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: all 0.18s;
  font-weight: 500;
  white-space: nowrap;
}
.folder-breadcrumb .crumb-item:hover {
  background: var(--bg4);
  color: var(--accent);
}
.folder-breadcrumb .crumb-item.active {
  color: var(--ink);
  font-weight: 700;
  cursor: default;
  background: var(--accent-light);
}
.folder-breadcrumb .crumb-sep {
  color: var(--muted2);
  font-size: 0.85rem;
  user-select: none;
}
.folder-toolbar-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.new-folder-btn,
.up-folder-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}
.new-folder-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.up-folder-btn:hover {
  background: var(--bg4);
  border-color: var(--muted2);
  transform: translateY(-1px);
}
.new-folder-btn span:first-child,
.up-folder-btn span:first-child {
  font-size: 1rem;
  line-height: 1;
}

/* ---- 文件夹卡片（网盘视图） ---- */
.folder-card {
  background: var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  position: relative;
  border: 2px solid transparent;
  user-select: none;
}
.folder-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-light);
}
.folder-card.drag-over {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15), var(--shadow);
}
.folder-card-thumb {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--accent-light), var(--purple-light));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.folder-card-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.5), transparent 55%);
  pointer-events: none;
}
.folder-card-thumb .folder-icon {
  font-size: 3.2rem;
  filter: drop-shadow(0 4px 8px rgba(37,99,235,0.25));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.folder-card:hover .folder-card-thumb .folder-icon {
  transform: scale(1.12) rotate(-3deg);
}
.folder-card-info {
  padding: 0.6rem 0.75rem;
}
.folder-card-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.15rem;
}
.folder-card-meta {
  font-size: 0.76rem;
  color: var(--muted);
}

/* 文件夹切换淡入动画 */
.material-grid.folder-navigate-fade {
  animation: folderFadeIn 0.28s ease;
}
@keyframes folderFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- 文件夹新建/重命名弹窗 ---- */
.folder-input-modal {
  max-width: 420px;
  width: 90%;
  padding: 1.75rem;
  animation: folderModalIn 0.22s ease;
}
@keyframes folderModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.folder-input-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--ink);
}
#folderInputName {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg3);
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 1.25rem;
}
#folderInputName:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.folder-input-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

/* 通用取消按钮（弹窗用） */
.btn-cancel {
  padding: 0.55rem 1.25rem;
  background: var(--bg4);
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.btn-cancel:hover {
  background: var(--bg3);
  color: var(--ink);
}

/* ---- 删除文件夹弹窗（两选一） ---- */
.folder-delete-modal {
  max-width: 460px;
  width: 90%;
  padding: 1.75rem;
  animation: folderModalIn 0.22s ease;
}
.folder-delete-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
  color: var(--ink);
}
.folder-delete-desc {
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
  line-height: 1.6;
}
.folder-delete-count {
  font-size: 0.84rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--orange-bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--orange);
}
.folder-delete-actions {
  display: flex;
  gap: 0.6rem;
  flex-direction: column;
}
.btn-folder-move-up,
.btn-folder-delete-all {
  padding: 0.65rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.btn-folder-move-up {
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--accent-light);
}
.btn-folder-move-up:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}
.btn-folder-delete-all {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-light);
}
.btn-folder-delete-all:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-1px);
}
.btn-folder-move-up:disabled,
.btn-folder-delete-all:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ---- 移动到文件夹树弹窗 ---- */
.move-tree-modal {
  max-width: 480px;
  width: 90%;
  padding: 1.75rem;
  animation: folderModalIn 0.22s ease;
}
.move-tree-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.move-tree-desc {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.move-tree-body {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--bg3);
  padding: 0.4rem;
  margin-bottom: 1.1rem;
  scrollbar-width: thin;
}
.move-tree-body::-webkit-scrollbar { width: 6px; }
.move-tree-body::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.move-tree-loading {
  padding: 1.5rem;
  text-align: center;
  color: var(--muted2);
  font-size: 0.85rem;
}
.move-tree-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--ink);
  transition: background 0.16s, color 0.16s;
  font-weight: 500;
}
.move-tree-item:hover {
  background: var(--bg4);
}
.move-tree-item.selected {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 700;
}
.move-tree-item.selected::before {
  content: '✓';
  font-size: 0.8rem;
  margin-right: -0.2rem;
}
.move-tree-icon {
  font-size: 1rem;
  line-height: 1;
}
.move-tree-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.move-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  font-size: 0.7rem;
  color: var(--muted);
  cursor: pointer;
  transition: transform 0.18s ease, color 0.18s ease;
  flex-shrink: 0;
}
.move-tree-toggle:hover { color: var(--accent); }
.move-tree-toggle.open { transform: rotate(0deg); color: var(--accent); }
.move-tree-toggle-placeholder {
  display: inline-block;
  width: 1rem;
  flex-shrink: 0;
}
.move-tree-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

/* ---- 右键菜单 ---- */
.context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 168px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 0.35rem;
  animation: ctxMenuIn 0.14s ease;
  user-select: none;
}
@keyframes ctxMenuIn {
  from { opacity: 0; transform: scale(0.94) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.context-menu .ctx-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--ink);
  transition: background 0.14s, color 0.14s;
  font-weight: 500;
}
.context-menu .ctx-item:hover {
  background: var(--bg4);
}
.context-menu .ctx-item.danger {
  color: var(--red);
}
.context-menu .ctx-item.danger:hover {
  background: var(--red-bg);
}
.context-menu .ctx-icon {
  font-size: 0.95rem;
  line-height: 1;
  width: 1.1rem;
  text-align: center;
}
.context-menu .ctx-label {
  flex: 1;
}
.context-menu .ctx-separator {
  height: 1px;
  margin: 0.3rem 0.4rem;
  background: var(--rule);
}

/* ---- 素材选择器：树形文件夹展开 ---- */
.material-picker-grid {
  /* 树形模式下改为纵向流，子网格各自成栅格 */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.picker-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 0.6rem;
  padding: 0.2rem 0;
}
.picker-folder-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  font-size: 0.86rem;
  user-select: none;
}
.picker-folder-row:hover {
  background: var(--bg4);
  border-color: var(--accent-light);
  transform: translateX(2px);
}
.picker-folder-row.has-selected {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-light), var(--bg3));
}
.picker-folder-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.picker-folder-toggle.open {
  color: var(--accent);
  transform: rotate(0deg);
}
.picker-folder-toggle.empty {
  color: var(--muted2);
  opacity: 0.5;
}
.picker-folder-icon {
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
}
.picker-folder-name {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.picker-folder-count {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  background: var(--bg4);
  border-radius: 999px;
}
.picker-folder-row.has-selected .picker-folder-count {
  background: var(--bg);
}
.picker-folder-selected-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0.1rem 0.4rem;
  background: var(--bg);
  border-radius: 999px;
}
.picker-folder-select-all {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--accent-light);
  background: var(--bg);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.picker-folder-select-all:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.picker-folder-select-all.all-selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.picker-folder-select-all:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- 响应式：文件夹视图在小屏的适配 ---- */
@media (max-width: 640px) {
  .folder-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .folder-toolbar-actions {
    justify-content: space-between;
  }
  .new-folder-btn,
  .up-folder-btn {
    flex: 1;
    justify-content: center;
  }
  .picker-sub-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.45rem;
  }
  .picker-folder-row {
    flex-wrap: wrap;
  }
  .picker-folder-select-all {
    margin-left: auto;
  }
}

/* ============ 用户下拉菜单（导航栏右上角，简约风格） ============ */
/* nav-actions 设为定位锚点 */
.nav-actions {
  position: relative;
}

.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.user-dropdown-menu.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* 头部：简约纯色 + 头像 + 昵称(+徽章) + 手机号 */
.user-dropdown-header {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.user-dropdown-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.user-dropdown-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-dropdown-meta {
  flex: 1;
  min-width: 0;
}
.user-dropdown-name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.user-dropdown-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-dropdown-name-row .plan-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg4);
  color: var(--muted);
  flex-shrink: 0;
}
/* Pro 会员徽章：蓝色调 */
.user-dropdown-name-row .plan-badge.plan-badge-pro {
  background: var(--accent-light);
  color: var(--accent);
}
/* Max 会员徽章：蓝紫渐变 */
.user-dropdown-name-row .plan-badge.plan-badge-max {
  background: linear-gradient(135deg, var(--accent-light), var(--purple-light));
  color: var(--purple);
}
.user-dropdown-phone {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* 会员权益区域：积分 + 存储 */
.user-dropdown-benefits {
  padding: 0.85rem 1.25rem 1rem;
  background: var(--bg3);
  border-bottom: 1px solid var(--rule);
}
.user-dropdown-benefits-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.user-dropdown-benefits-row:last-child { margin-bottom: 0; }
.user-dropdown-benefits-label { display: inline-flex; align-items: center; gap: 0.35rem; }
.user-dropdown-benefits-value {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.user-dropdown-storage-bar {
  height: 5px;
  background: var(--bg4);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.user-dropdown-storage-bar:last-child { margin-bottom: 0; }
.user-dropdown-storage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* 菜单项列表 */
.user-dropdown-list {
  padding: 0.35rem 0;
}
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 1.25rem;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
  font-family: inherit;
  text-align: left;
}
.user-dropdown-item:hover,
.user-dropdown-item:focus {
  background: var(--bg4);
  color: var(--accent);
  text-decoration: none;
}
.user-dropdown-item-icon {
  font-size: 1.05rem;
  width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
}
.user-dropdown-item-icon img {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
  vertical-align: middle;
}
.user-dropdown-item-text {
  flex: 1;
}
.user-dropdown-item-arrow {
  font-size: 0.85rem;
  color: var(--muted2);
  transition: transform 0.18s;
}
.user-dropdown-item:hover .user-dropdown-item-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* 分隔线 */
.user-dropdown-divider {
  height: 1px;
  background: var(--rule);
  margin: 0.35rem 0;
}

/* 退出登录按钮 */
.user-dropdown-item-btn {
  color: var(--red);
}
.user-dropdown-item-btn:hover {
  background: var(--red-bg);
  color: var(--red);
}

/* 窄屏适配 */
@media (max-width: 480px) {
  .user-dropdown-menu {
    width: 260px;
  }
}

/* =====================================================
   左侧侧边栏导航 + 深浅主题系统（重构新增）
   ===================================================== */

/* ---------- 主题变量 ---------- */
:root {
  --sidebar-w-collapsed: 72px;
  --sidebar-w-expanded: 232px;
  --sidebar-anim: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(15, 23, 42, 0.06);
  --sidebar-item-hover: rgba(37, 99, 235, 0.08);
  --sidebar-item-active-bg: rgba(37, 99, 235, 0.12);
  --sidebar-item-active-ink: #2563eb;
  --sidebar-item-ink: #64748b;
  --sidebar-item-ink-hover: #0f172a;
  --sidebar-shadow: 6px 0 24px rgba(15, 23, 42, 0.04);
  --sidebar-divider: rgba(15, 23, 42, 0.08);
}

/* 深色主题：仅当 data-theme="dark" 时启用（默认浅色） */
:root[data-theme="dark"] {
  --bg: #1a1d24;
  --bg2: #22262f;
  --bg3: #15181f;
  --bg4: #262a33;
  --ink: #e8eaf0;
  --muted: #9aa0aa;
  --muted2: #6b7280;
  --rule: #2c303a;
  --accent: #5b8def;
  --accent-light: rgba(91, 141, 239, 0.18);
  --accent-dark: #3b6fd9;
  --accent-hover: #7ba5f5;
  --green: #34d399;
  --green-light: rgba(52, 211, 153, 0.15);
  --green-bg: rgba(52, 211, 153, 0.08);
  --orange: #fbbf24;
  --orange-light: rgba(251, 191, 36, 0.18);
  --orange-bg: rgba(251, 191, 36, 0.08);
  --red: #f87171;
  --red-light: rgba(248, 113, 113, 0.18);
  --red-bg: rgba(248, 113, 113, 0.08);
  --purple: #a78bfa;
  --purple-light: rgba(167, 139, 250, 0.18);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
  --sidebar-bg: #1e2129;
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-item-hover: rgba(91, 141, 239, 0.12);
  --sidebar-item-active-bg: rgba(91, 141, 239, 0.2);
  --sidebar-item-active-ink: #7ba5f5;
  --sidebar-item-ink: #8b92a0;
  --sidebar-item-ink-hover: #e8eaf0;
  --sidebar-shadow: 6px 0 24px rgba(0, 0, 0, 0.35);
  --sidebar-divider: rgba(255, 255, 255, 0.08);
}

/* 深色下全局背景与基础元素覆盖 */
:root[data-theme="dark"] body {
  color-scheme: dark;
  background: var(--bg3);
  color: var(--ink);
}
:root[data-theme="dark"] .site-footer,
:root[data-theme="dark"] .queue-panel,
:root[data-theme="dark"] .user-dropdown-menu {
  background: var(--bg);
  border-color: var(--rule);
}
:root[data-theme="dark"] .upload-zone,
:root[data-theme="dark"] .material-card,
:root[data-theme="dark"] .recent-card,
:root[data-theme="dark"] .setting-card,
:root[data-theme="dark"] .plan-card,
:root[data-theme="dark"] .storage-overview,
:root[data-theme="dark"] .memory-item,
:root[data-theme="dark"] .creative-coming-soon,
:root[data-theme="dark"] .hero-card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .auth-modal,
:root[data-theme="dark"] .modal-content {
  background: var(--bg);
  border-color: var(--rule);
  color: var(--ink);
}
:root[data-theme="dark"] .search-bar,
:root[data-theme="dark"] .memory-search-bar,
:root[data-theme="dark"] .dash-input,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="file"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: var(--bg2);
  border-color: var(--rule);
  color: var(--ink);
}
:root[data-theme="dark"] .search-bar input,
:root[data-theme="dark"] .memory-search-bar input {
  color: var(--ink);
}
:root[data-theme="dark"] .filter-chip,
:root[data-theme="dark"] .memory-tab,
:root[data-theme="dark"] .sort-select {
  background: var(--bg2);
  color: var(--muted);
  border-color: var(--rule);
}
:root[data-theme="dark"] .filter-chip.active,
:root[data-theme="dark"] .memory-tab.active {
  background: var(--accent-light);
  color: var(--accent);
}
:root[data-theme="dark"] .offline-banner {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border-bottom-color: rgba(251, 191, 36, 0.2);
}
:root[data-theme="dark"] .site-footer {
  background: var(--bg);
}
:root[data-theme="dark"] code {
  background: var(--bg2);
  border-color: var(--rule);
  color: var(--ink);
}
:root[data-theme="dark"] .qp-item {
  background: var(--bg2);
  border-color: var(--rule);
}
:root[data-theme="dark"] .queue-panel-header,
:root[data-theme="dark"] .queue-panel-footer {
  background: var(--bg2);
  border-color: var(--rule);
}
:root[data-theme="dark"] .user-dropdown-benefits {
  background: var(--bg2);
  border-color: var(--rule);
}
:root[data-theme="dark"] .user-dropdown-item:hover {
  background: var(--bg4);
}
:root[data-theme="dark"] .material-hover-card,
:root[data-theme="dark"] .memory-hover-card,
:root[data-theme="dark"] .mode-switch-popup {
  background: var(--bg);
  border-color: var(--rule);
  box-shadow: var(--shadow-lg);
}
:root[data-theme="dark"] .nav-auth-avatar {
  background: var(--accent);
  color: #fff;
}

/* ---------- 侧边栏主体 ---------- */
.app-sidebar {
  position: fixed;
  top: 12px;
  bottom: 12px;
  left: 12px;
  width: var(--sidebar-w-collapsed);
  background: var(--sidebar-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: 20px;
  box-shadow: var(--sidebar-shadow);
  z-index: 120;
  display: flex;
  flex-direction: column;
  padding: 14px 10px;
  transition: width var(--sidebar-anim), background var(--sidebar-anim), border-color var(--sidebar-anim);
  overflow: visible;
}
.app-sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* 悬浮/展开态 */
.app-sidebar:hover,
.app-sidebar.is-expanded,
.app-sidebar.keep-open {
  width: var(--sidebar-w-expanded);
}

/* 顶部品牌 */
.sidebar-top {
  display: flex;
  align-items: center;
  height: 48px;
  margin-bottom: 14px;
  padding: 0 6px;
  flex-shrink: 0;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  /* 窄侧边栏时整体右移 6px，使 logo 图标与下方导航图标一样水平居中；
     展开为宽侧边栏时回到原位（图标 + 标题左对齐的组合位置），过渡与侧边栏展开同步 */
  transform: translateX(6px);
  transition: transform var(--sidebar-anim);
}
.sidebar-logo-icon {
  font-size: 1.55rem;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.25));
}
.sidebar-brand-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--sidebar-anim), transform var(--sidebar-anim);
}
.sidebar-brand-en {
  font-size: 0.72rem;
  color: var(--muted2);
  font-style: italic;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--sidebar-anim) 0.04s, transform var(--sidebar-anim);
  margin-left: 2px;
}
.app-sidebar:hover .sidebar-brand-text,
.app-sidebar.is-expanded .sidebar-brand-text,
.app-sidebar.keep-open .sidebar-brand-text {
  opacity: 1;
  transform: translateX(0);
}
.app-sidebar:hover .sidebar-brand-en,
.app-sidebar.is-expanded .sidebar-brand-en,
.app-sidebar.keep-open .sidebar-brand-en {
  opacity: 1;
  transform: translateX(0);
}
/* 展开为宽侧边栏时 logo 整体回到原位（取消窄态的 +6px 居中偏移） */
.app-sidebar:hover .sidebar-brand,
.app-sidebar.is-expanded .sidebar-brand,
.app-sidebar.keep-open .sidebar-brand {
  transform: translateX(0);
}

/* 中部菜单 */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  flex-shrink: 0;
}
.sidebar-nav-item,
.sidebar-queue-btn,
.sidebar-demo-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--sidebar-item-ink);
  font-size: 0.92rem;
  font-weight: 500;
  font-family: inherit;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.sidebar-demo-btn {
  margin-top: 4px;
}
.sidebar-nav-icon {
  font-size: 1.25rem;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.sidebar-nav-label {
  flex: 1;
  min-width: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--sidebar-anim), transform var(--sidebar-anim);
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-sidebar:hover .sidebar-nav-label,
.app-sidebar.is-expanded .sidebar-nav-label,
.app-sidebar.keep-open .sidebar-nav-label {
  opacity: 1;
  transform: translateX(0);
}
.sidebar-nav-item:hover,
.sidebar-queue-btn:hover,
.sidebar-demo-btn:hover {
  background: var(--sidebar-item-hover);
  color: var(--sidebar-item-ink-hover);
}
.sidebar-nav-item.active {
  background: var(--sidebar-item-active-bg);
  color: var(--sidebar-item-active-ink);
  font-weight: 600;
}
.sidebar-nav-item.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
}
/* 队列徽章 */
.sidebar-queue-btn .qi-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg4);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--sidebar-anim), transform var(--sidebar-anim), background 0.2s, color 0.2s;
}
.app-sidebar:hover .sidebar-queue-btn .qi-badge,
.app-sidebar.is-expanded .sidebar-queue-btn .qi-badge,
.app-sidebar.keep-open .sidebar-queue-btn .qi-badge {
  opacity: 1;
  transform: scale(1);
}
.sidebar-queue-btn.has-active {
  background: var(--sidebar-item-active-bg);
  color: var(--sidebar-item-active-ink);
}
.sidebar-queue-btn.has-active .qi-badge {
  background: var(--accent);
  color: #fff;
  opacity: 1 !important;
  transform: scale(1) !important;
}
.sidebar-queue-btn.has-failed {
  background: var(--red-light);
  color: var(--red);
}
.sidebar-queue-btn.has-failed .qi-badge {
  background: var(--red);
  color: #fff;
  opacity: 1 !important;
}
/* 收起时徽章显示为小红点 */
.app-sidebar:not(:hover):not(.is-expanded):not(.keep-open) .sidebar-queue-btn.has-active .qi-badge,
.app-sidebar:not(:hover):not(.is-expanded):not(.keep-open) .sidebar-queue-btn.has-failed .qi-badge {
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
  position: absolute;
  top: 8px;
  right: 8px;
}

.sidebar-spacer {
  flex: 1;
  min-height: 12px;
}

/* 主题切换：收起态隐藏整个区块（含开关），仅展开时显示 */
.sidebar-theme-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--sidebar-divider);
  margin-top: 8px;
  padding-top: 14px;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity var(--sidebar-anim), transform var(--sidebar-anim);
}
.app-sidebar:hover .sidebar-theme-toggle,
.app-sidebar.is-expanded .sidebar-theme-toggle,
.app-sidebar.keep-open .sidebar-theme-toggle {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.sidebar-theme-toggle .theme-icon {
  font-size: 1.2rem;
}
.sidebar-theme-toggle .theme-label {
  flex: 1;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}
.theme-switch {
  position: relative;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}
.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.theme-switch-track {
  position: absolute;
  inset: 0;
  background: var(--bg4);
  border-radius: 999px;
  transition: background 0.25s ease;
  border: 1px solid var(--rule);
}
.theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s;
}
.theme-switch input:checked + .theme-switch-track {
  background: #22c55e;
  border-color: #22c55e;
}
.theme-switch input:checked + .theme-switch-track .theme-switch-thumb {
  transform: translateX(16px);
}
:root[data-theme="dark"] .theme-switch-track {
  background: var(--bg4);
}
:root[data-theme="dark"] .theme-switch input:checked + .theme-switch-track {
  background: #22c55e;
  border-color: #22c55e;
}
/* 跟随系统模式：隐藏主题开关，仅显示「跟随系统」文字 + emoji */
.sidebar-theme-toggle.is-system .theme-switch {
  display: none;
}
.sidebar-theme-toggle.is-system .theme-label {
  flex: 1;
}
.sidebar-theme-toggle.is-system {
  cursor: default;
}

/* 底部用户区 */
.sidebar-bottom {
  position: relative;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--sidebar-divider);
  flex-shrink: 0;
}
.sidebar-user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: none;
  background: transparent;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: background 0.2s ease;
  text-align: left;
  overflow: hidden;
}
.sidebar-user-btn:hover {
  background: var(--sidebar-item-hover);
}
.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.sidebar-user-btn:hover .sidebar-user-avatar {
  border-color: var(--accent-light);
}
.sidebar-user-avatar .nav-auth-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.sidebar-user-avatar img.nav-auth-avatar {
  object-fit: cover;
}
.sidebar-user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--sidebar-anim), transform var(--sidebar-anim);
}
.app-sidebar:hover .sidebar-user-meta,
.app-sidebar.is-expanded .sidebar-user-meta,
.app-sidebar.keep-open .sidebar-user-meta {
  opacity: 1;
  transform: translateX(0);
}
.sidebar-user-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-sub {
  font-size: 0.72rem;
  color: var(--muted2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 用户下拉浮窗（从侧边栏右侧弹出） */
.sidebar-user-menu {
  position: absolute;
  left: calc(100% + 10px);
  bottom: 0;
  top: auto;
  right: auto;
  width: 280px;
  transform-origin: left bottom;
  transform: translateX(-8px) scale(0.96);
  pointer-events: none;
}
.sidebar-user-menu.visible {
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

/* ---------- 全局布局避让侧边栏 ---------- */
body {
  padding-left: calc(var(--sidebar-w-collapsed) + 24px);
  transition: padding-left var(--sidebar-anim);
}
/* 顶部离线提示条与页脚保持全宽（受 body padding 约束即可） */
.queue-panel {
  top: 1rem;
  right: 1rem;
  left: auto;
}
/* 创意空间跨页动画选择器兼容（原来依赖 .navbar） */
body.space-leaving .app-sidebar,
body.space-leaving .main-content {
  transform: translateX(-48px);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.42s ease;
}
body.space-leaving .sidebar-nav-item,
body.space-leaving .sidebar-brand {
  opacity: 0.15;
  transition: opacity 0.4s ease;
}

/* 收起状态下 tooltip（使用 title 已由浏览器原生提供；此处不额外做） */

/* ---------- 响应式：窄屏回退为底部 Tab 栏 ---------- */
@media (max-width: 900px) {
  body {
    padding-left: 0;
    padding-bottom: 80px;
  }
  .app-sidebar {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    height: 64px;
    border-radius: 16px 16px 0 0;
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    overflow: visible;
  }
  .sidebar-top,
  .sidebar-spacer,
  .sidebar-theme-toggle,
  .sidebar-demo-btn,
  .sidebar-queue-btn .qi-text,
  .sidebar-user-meta,
  .sidebar-brand-en,
  .sidebar-brand-text {
    display: none !important;
  }
  .sidebar-nav {
    flex-direction: row;
    flex: 1;
    justify-content: space-around;
    margin: 0;
    gap: 0;
  }
  .sidebar-nav-item,
  .sidebar-queue-btn {
    flex-direction: column;
    justify-content: center;
    padding: 6px 4px;
    gap: 2px;
    border-radius: 10px;
    width: auto;
    flex: 1;
  }
  .sidebar-nav-icon {
    font-size: 1.2rem;
    width: auto;
    height: auto;
  }
  .sidebar-nav-label {
    opacity: 1 !important;
    transform: none !important;
    font-size: 0.68rem;
    flex: none;
  }
  .sidebar-nav-item.active::before {
    display: none;
  }
  .sidebar-bottom {
    margin: 0;
    padding: 0;
    border: none;
  }
  .sidebar-user-btn {
    padding: 4px;
  }
  .sidebar-user-avatar {
    width: 32px;
    height: 32px;
  }
  .sidebar-user-menu {
    left: auto;
    right: 0;
    bottom: calc(100% + 8px);
    transform-origin: right bottom;
  }
  .sidebar-queue-btn .qi-badge {
    opacity: 1 !important;
    transform: none !important;
    position: static;
    min-width: 16px;
    height: 16px;
    font-size: 0.65rem;
  }
  .main-content {
    padding: 1rem;
  }
  .queue-panel {
    top: 0.5rem;
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
  }
}

/* ============================================================
   新手主题引导弹窗（theme onboarding）
   仅新注册用户首次登录时展示；样式随 --* CSS 变量自适应深浅色
   ============================================================ */
.onboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.32s ease;
}
.onboard-overlay.visible { opacity: 1; }

.onboard-modal {
  position: relative;
  width: min(760px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 32px 32px 26px;
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.35);
  transform: translateY(28px) scale(0.92);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
.onboard-overlay.visible .onboard-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.onboard-header { text-align: center; margin-bottom: 22px; }
.onboard-badge {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
  animation: onboardBadgePop 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.onboard-title { font-size: 1.45rem; font-weight: 700; letter-spacing: 0.5px; }
.onboard-subtitle { margin-top: 6px; font-size: 0.9rem; color: var(--muted); }

.onboard-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.onboard-option {
  position: relative;
  cursor: pointer;
  border: 2px solid var(--rule);
  border-radius: 16px;
  padding: 10px;
  background: var(--bg2);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  outline: none;
  animation: onboardCardIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.onboard-option:nth-child(2) { animation-delay: 0.08s; }
.onboard-option:nth-child(3) { animation-delay: 0.16s; }
.onboard-option:hover {
  transform: translateY(-4px);
  border-color: var(--accent-light);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.1);
}
.onboard-option:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.onboard-option.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.22);
}

.onboard-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg3);
  box-shadow: inset 0 0 0 1px rgba(2, 6, 23, 0.06);
}
.onboard-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.onboard-preview-split { display: flex; }
.onboard-split-half { width: 50%; height: 100%; overflow: hidden; }
.onboard-split-light { border-right: 1px solid rgba(255, 255, 255, 0.95); }
.onboard-split-half img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.onboard-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.onboard-option.selected .onboard-check {
  opacity: 1;
  transform: scale(1);
}
.onboard-option-name {
  margin-top: 10px;
  text-align: center;
  font-size: 1.02rem;
  font-weight: 600;
}
.onboard-option-desc {
  margin-top: 2px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}
.onboard-option.selected .onboard-option-name { color: var(--accent); }

.onboard-footer { margin-top: 22px; text-align: center; }
.onboard-confirm-btn {
  width: 100%;
  max-width: 340px;
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #4f46e5);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.onboard-confirm-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.45);
}
.onboard-confirm-btn:active:not(:disabled) { transform: translateY(0); }
.onboard-confirm-btn:disabled { opacity: 0.6; cursor: not-allowed; }

@keyframes onboardBadgePop {
  from { transform: scale(0) rotate(-20deg); }
  to   { transform: scale(1) rotate(0); }
}
@keyframes onboardCardIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 深色模式微调：阴影更深以贴合暗底 */
:root[data-theme="dark"] .onboard-option:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
:root[data-theme="dark"] .onboard-option.selected {
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.28);
}

@media (max-width: 640px) {
  .onboard-modal { padding: 24px 18px 20px; }
  .onboard-title { font-size: 1.2rem; }
  .onboard-options { grid-template-columns: 1fr; gap: 12px; }
  .onboard-confirm-btn { max-width: none; }
}