/* ═══════════════════════════════════════════
 *  通用组件：应用广场、关于面板、快捷模式、模型选择器、Toast、Lightbox、主题按钮
 * ═══════════════════════════════════════════ */

/* ── App Square Panel ── */
/* ── App Square Panel ── */
#appsquare-panel { display:none; flex-direction:column; height:100%; overflow:hidden; }
.appsquare-tabs { display:flex; gap:4px; padding:0 20px; border-bottom:1px solid var(--border);
                  flex-shrink:0; overflow-x:auto; scrollbar-width:none;
                  /* 右侧 24px 渐变淡出：暗示后面还有内容（PC 上鼠标用户最需要这个线索） */
                  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
                          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%); }
.appsquare-tabs::-webkit-scrollbar { display:none; }
.appsquare-tab { padding:10px 16px; cursor:pointer; font-size:13px; color:var(--text-muted);
                 border-bottom:2px solid transparent; transition:all var(--trans);
                 white-space:nowrap; user-select:none; margin-bottom:-1px; }
.appsquare-tab:hover { color:var(--text); }
.appsquare-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.appsquare-grid-wrap { flex:1; overflow-y:auto; padding:20px; }
.appsquare-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.skill-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius);
              padding:14px 16px; cursor:pointer; transition:all var(--trans);
              display:flex; align-items:flex-start; gap:12px; min-width:0; }
.skill-card:hover { border-color:rgba(110,231,183,0.3); transform:translateY(-1px);
                    box-shadow:0 4px 16px rgba(0,0,0,0.2); }
.skill-card-icon { width:36px; height:36px; border-radius:8px; flex-shrink:0;
                   background:linear-gradient(135deg, var(--accent), var(--accent2));
                   display:flex; align-items:center; justify-content:center;
                   color:#111; font-weight:600; font-size:14px; overflow:hidden; }
.skill-card-icon img { width:100%; height:100%; object-fit:cover; }
.skill-card-body { min-width:0; flex:1; }
.skill-card-name { font-size:14px; font-weight:500; color:var(--text); margin-bottom:2px;
                   display:flex; align-items:center; gap:6px; }
.skill-card-tag { font-size:10px; padding:1px 6px; background:rgba(129,140,248,0.18);
                  color:var(--accent2); border-radius:4px; font-weight:400; }
.skill-card-desc { font-size:12px; color:var(--text-muted); line-height:1.5;
                   overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
                   -webkit-line-clamp:2; -webkit-box-orient:vertical; }


/* ── About Panel（服务 & 合作，原「获取编程接口」，2026-05-26 改名）── */
/* ── About Panel（服务 & 合作）── */
#about-panel { display:none; flex-direction:column; height:100%; overflow:hidden; }
/* ★ 关于我们面板（2026-05-26 新增）── 复用 .about-content / .about-card 全套样式，
      只需要这一行容器规则即可，零新增 .team-* class */
#team-panel  { display:none; flex-direction:column; height:100%; overflow:hidden; }
.about-content { flex:1; overflow-y:auto; padding:24px 28px; max-width:820px;
                 margin:0 auto; width:100%; }
.about-content section + section { margin-top:14px; }
.about-warn {
  padding:14px 18px; margin-bottom:16px; border-radius:var(--radius);
  background:rgba(248,113,113,0.08); border:1px solid rgba(248,113,113,0.25);
}
.about-warn-title { color:var(--danger); font-size:14px; font-weight:600; margin-bottom:8px; }
.about-warn p { font-size:13px; line-height:1.7; color:var(--text); margin-top:6px; }
.about-warn strong { color:var(--danger); }

.about-card {
  padding:16px 20px; background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius);
}
.about-card h3 {
  font-size:14px; font-weight:600; margin-bottom:10px; color:var(--text);
  display:flex; align-items:center; gap:6px;
}
.about-card ul { padding-left:18px; }
.about-card li { font-size:13px; line-height:1.9; color:var(--text); }
.about-card li .hl { color:var(--accent); font-weight:500; }
.about-card p { font-size:13px; line-height:1.7; color:var(--text); }
.about-card details { margin-top:8px; }
.about-card summary {
  cursor:pointer; color:var(--accent2); font-size:12px; padding:4px 0;
  user-select:none;
}
.about-card summary:hover { color:var(--accent); }
.about-skills h4 {
  font-size:12px; color:var(--text-muted); margin-top:10px; margin-bottom:4px;
  font-weight:500; letter-spacing:0.5px;
}

.about-wechat {
  background:var(--bg3); padding:2px 8px; border-radius:4px;
  font-family:var(--mono); cursor:pointer; transition:background var(--trans);
  border:1px solid var(--border);
}
.about-wechat:hover { background:rgba(110,231,183,0.1); border-color:var(--accent); }
.about-tip { font-size:11px; color:var(--text-muted); margin-left:6px; }
.about-card a { color:var(--accent2); text-decoration:none; }
.about-card a:hover { text-decoration:underline; }

/* ── 高亮主推卡片（API 接口聚合站等核心广告位）── */
.about-card.about-highlight {
  background:linear-gradient(135deg, rgba(110,231,183,0.06), rgba(129,140,248,0.06));
  border-color:rgba(110,231,183,0.35);
  position:relative; overflow:hidden;
}
.about-card.about-highlight::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  opacity:0.6;
}
/* 资质背书条（阿里、讯飞等大客户背书）—— 左侧绿色色条 + 浅色底，专业且不抢戏 */
.about-credentials {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; margin:10px 0 12px;
  background:rgba(110,231,183,0.08);
  border:1px solid rgba(110,231,183,0.25);
  border-left:3px solid var(--accent);
  border-radius:6px;
  font-size:13px; line-height:1.6; color:var(--text);
}
.about-credentials-icon { font-size:16px; flex-shrink:0; line-height:1; }
.about-credentials strong { color:var(--accent); font-weight:600; }
/* 卡片标题里的"站点名"链接：强调风格 */
.about-card .about-link-strong {
  color:var(--accent); font-weight:700; font-family:var(--mono);
  font-size:13.5px; text-decoration:none;
}
.about-card .about-link-strong:hover { color:var(--accent2); text-decoration:underline; }
/* 内联 code（base_url 之类）—— 现成的卡片里之前没用过 code，给一个轻量样式 */
.about-card code {
  background:var(--bg3); padding:1px 6px; border-radius:4px;
  font-family:var(--mono); font-size:12px; color:var(--accent);
  border:1px solid var(--border);
}
/* CTA 主按钮：渐变、悬浮微抬升 */
.about-cta {
  display:inline-block; padding:8px 16px; border-radius:8px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#0d0f14 !important; font-size:13px; font-weight:600;
  text-decoration:none !important; user-select:none;
  transition:transform var(--trans), box-shadow var(--trans);
}
.about-cta:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(110,231,183,0.35);
  text-decoration:none !important;
}
/* 价格徽章行（ChatGPT Plus 等付费项） */
.about-price-row {
  display:flex; align-items:baseline; gap:8px; margin-bottom:10px;
  padding:10px 14px; background:var(--bg3); border-radius:8px;
  border:1px solid var(--border); flex-wrap:wrap;
}
.about-price {
  font-size:26px; font-weight:700; font-family:var(--mono); line-height:1;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.about-price-unit { font-size:13px; color:var(--text-soft); }
.about-price-original {
  font-size:12px; color:var(--text-muted);
  text-decoration:line-through; margin-left:auto;
}

@media (max-width:600px) {
  .about-content { padding:16px; }
}

#chat-panel { display:flex; flex-direction:column; height:100% }
.chat-header { padding:12px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-shrink:0 }
.chat-title { font-weight:500; font-size:14px }
.chat-badge { padding:2px 8px; background:rgba(110,231,183,0.12); color:var(--accent); border-radius:10px; font-size:11px; font-family:var(--mono) }
.chat-badge.error { background:rgba(248,113,113,0.15); color:var(--danger); }
.chat-badge.warning { background:rgba(251,191,36,0.15); color:#fbbf24; }
.chat-clear-btn { margin-left:auto; background:none; border:1px solid var(--border); border-radius:6px; padding:4px 10px; color:var(--text-muted); font-size:12px; cursor:pointer; font-family:var(--sans); transition:all var(--trans) }
.chat-clear-btn:hover { border-color:var(--danger); color:var(--danger) }

.messages-area { flex:1; min-height:0; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; position:relative; }
.message-row { display:flex; gap:12px; animation:fadeUp .2s ease; position:relative; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.message-row.user { flex-direction:row-reverse }
.msg-avatar { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0 }
.msg-avatar.ai  { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#111 }

/* ── 快捷模式芯片栏 + 浮层 + 横幅 ── */
/* ── 快捷模式芯片栏 ── */
.quick-modes { display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; margin-bottom:8px;
               scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.quick-modes::-webkit-scrollbar { display:none; }
.quick-mode-chip {
  flex-shrink:0; padding:5px 12px; border-radius:14px; cursor:pointer;
  background:var(--bg3); border:1px solid var(--border); color:var(--text-soft);
  font-size:12.5px; font-weight:500; user-select:none; white-space:nowrap;
  transition:all var(--trans); display:flex; align-items:center; gap:5px;
}
.quick-mode-chip:hover { color:var(--text); border-color:var(--accent2); background:rgba(129,140,248,0.06); }
.quick-mode-chip.active {
  background:linear-gradient(135deg, rgba(110,231,183,0.18), rgba(129,140,248,0.18));
  border-color:var(--accent); color:var(--accent); font-weight:600;
}
/* "更多 ▾" 芯片：sticky 钉在右侧 —— 笔记本等窄屏下芯片横向溢出时也始终可见 */
.quick-mode-more {
  flex-shrink:0; padding:5px 10px; border-radius:14px; cursor:pointer;
  background:var(--bg); border:1px dashed var(--border); color:var(--text-soft);
  font-size:12.5px; font-weight:500; user-select:none; white-space:nowrap;
  transition:color var(--trans), border-color var(--trans), border-style var(--trans);
  display:flex; align-items:center; gap:4px;
  position:sticky; right:0; z-index:2;
}
/* 左侧渐变遮罩：暗示按钮后方还有可滚动的芯片，避免视觉上"硬切" */
.quick-mode-more::before {
  content:''; position:absolute; right:100%; top:-1px; bottom:-1px; width:18px;
  background:linear-gradient(to right, transparent, var(--bg) 90%);
  pointer-events:none;
}
.quick-mode-more:hover { color:var(--accent2); border-color:var(--accent2); border-style:solid; }

/* "更多" 浮层（从输入区上方升起） */
.qm-modal-mask {
  position:absolute; inset:0; background:rgba(0,0,0,0.55);
  z-index:400; display:none; backdrop-filter:blur(2px);
}
.qm-modal-mask.show { display:block; animation:fadeUp 0.18s ease; }
.qm-modal {
  position:absolute; left:50%; bottom:100%; transform:translateX(-50%) translateY(0);
  width:min(560px, calc(100vw - 32px)); max-height:60vh;
  background:var(--bg2); border:1px solid var(--border); border-radius:14px 14px 0 0;
  box-shadow:0 -8px 32px rgba(0,0,0,0.5);
  z-index:401; display:flex; flex-direction:column; overflow:hidden;
}
.qm-modal-header { padding:14px 18px 8px; display:flex; align-items:center; gap:10px;
                   border-bottom:1px solid var(--border); flex-shrink:0; }
.qm-modal-title { font-size:14px; font-weight:600; flex:1; }
.qm-modal-close {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:18px; padding:0 6px; transition:color 0.15s;
}
.qm-modal-close:hover { color:var(--text); }
.qm-modal-search {
  width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  padding:8px 12px; color:var(--text); font-size:13px; font-family:var(--sans);
  outline:none; transition:border-color 0.15s;
  margin:8px 18px; width:calc(100% - 36px);
}
.qm-modal-search:focus { border-color:rgba(110,231,183,0.4); }
.qm-modal-body { flex:1; overflow-y:auto; padding:8px 18px 16px; }
.qm-cat { margin-top:14px; }
.qm-cat:first-child { margin-top:0; }
.qm-cat-title { font-size:11px; text-transform:uppercase; letter-spacing:1.2px;
                color:var(--text-muted); font-weight:600; margin-bottom:8px;
                display:flex; align-items:center; gap:6px; }
.qm-cat-title::before { content:''; width:3px; height:10px; border-radius:2px;
                        background:linear-gradient(180deg, var(--accent), var(--accent2)); }
.qm-cat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:6px; }
.qm-item {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-radius:8px; cursor:pointer; transition:background var(--trans);
  background:var(--bg3); border:1px solid transparent; min-width:0;
}
.qm-item:hover { background:rgba(110,231,183,0.08); border-color:var(--accent); }
.qm-item.active { background:rgba(110,231,183,0.12); border-color:var(--accent); }
.qm-item-icon { font-size:16px; flex-shrink:0; line-height:1; }
.qm-item-name { font-size:13px; color:var(--text); white-space:nowrap;
                overflow:hidden; text-overflow:ellipsis; }
.qm-empty { padding:30px; text-align:center; color:var(--text-muted); font-size:13px; }

/* ── 选中芯片后的"单次任务"提示横幅 ── */
.quick-banner {
  display:none; align-items:center; gap:8px; margin-bottom:8px;
  padding:6px 12px; border-radius:8px; font-size:12px;
  background:rgba(129,140,248,0.1); border:1px solid rgba(129,140,248,0.25);
  color:var(--accent2);
}
.quick-banner.show { display:flex; animation:fadeUp 0.18s ease; }
.quick-banner-icon { font-weight:600; }
.quick-banner-text { flex:1; }
.quick-banner-x {
  background:none; border:none; color:var(--accent2); cursor:pointer;
  font-size:14px; padding:0 4px; opacity:0.6; transition:opacity 0.15s;
}
.quick-banner-x:hover { opacity:1; }

/* 单次任务消息气泡上的标签 */
.msg-quick-tag {
  display:inline-block; padding:1px 8px; margin-bottom:6px;
  font-size:10.5px; border-radius:10px; font-weight:500;
  background:rgba(0,0,0,0.2); color:rgba(255,255,255,0.85);
  letter-spacing:0.3px;
}
.message-row.ai .msg-quick-tag {
  background:rgba(129,140,248,0.18); color:var(--accent2);
}

.input-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:8px }
.toolbar-btn { padding:4px 10px; background:transparent; border:1px solid var(--border); border-radius:6px; color:var(--text-muted); font-size:12px; cursor:pointer; font-family:var(--sans); transition:all var(--trans); display:flex; align-items:center; gap:4px; user-select:none }
.toolbar-btn:hover { border-color:var(--accent2); color:var(--accent2) }
.toolbar-btn.active { border-color:var(--accent); color:var(--accent); background:rgba(110,231,183,0.08) }


/* ── 模型选择器 ── */
/* 自定义模型选择器 */
.model-picker { position:relative; display:inline-block }
.model-picker-btn { background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:4px 10px; color:var(--text); font-size:12px; font-family:var(--mono); cursor:pointer; outline:none; display:inline-flex; align-items:center; gap:6px; transition:all var(--trans); user-select:none }
.model-picker-btn:hover { border-color:var(--accent) }
.arrow { font-size:9px; color:var(--text-muted); transition:transform .18s }
.model-picker.open .arrow { transform:rotate(180deg) }
.model-picker-popover { position:absolute; bottom:calc(100% + 6px); left:0; min-width:300px; max-width:380px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.5); z-index:300; opacity:0; pointer-events:none; transform:translateY(4px); transition:opacity .15s,transform .15s; max-height:360px; overflow-y:auto }
.model-picker.open .model-picker-popover { opacity:1; pointer-events:auto; transform:translateY(0) }
.model-option { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:7px; cursor:pointer; transition:background var(--trans) }
.model-option:hover { background:rgba(255,255,255,0.04) }
.model-option.selected { background:rgba(110,231,183,0.08) }
.model-option-check { width:16px; flex-shrink:0; margin-top:1px; color:var(--accent); font-size:13px; visibility:hidden }
.model-option.selected .model-option-check { visibility:visible }
.model-option-body { min-width:0; flex:1 }
.model-option-name { font-size:13px; font-weight:500; color:var(--text); font-family:var(--mono); margin-bottom:2px }
.model-option-desc { font-size:11.5px; color:var(--text-muted); line-height:1.5 }
.model-option-desc:empty { display:none }

.input-row { display:flex; gap:10px; align-items:flex-end }
#chat-input { flex:1; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; color:var(--text); font-family:var(--sans); font-size:14px; resize:none; min-height:44px; max-height:200px; line-height:1.6; transition:border-color var(--trans); outline:none; overflow-y:auto }
#chat-input:focus { border-color:var(--accent); }
#chat-input::placeholder { color:var(--text-muted) }
.send-btn { width:44px; height:44px; background:linear-gradient(135deg,var(--accent),var(--accent2)); border:none; border-radius:var(--radius); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; color:#111; transition:all var(--trans); flex-shrink:0 }
.send-btn:hover:not(:disabled) { transform:scale(1.06); box-shadow:0 4px 16px rgba(110,231,183,.3) }
.send-btn:disabled { opacity:.4; cursor:not-allowed; transform:none }

/* ── Toast ── */
/* ── Toast ── */
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:10px 20px; border-radius:8px; font-size:13px; z-index:9999; transition:transform .3s ease; pointer-events:none; white-space:nowrap }
#toast.show { transform:translateX(-50%) translateY(0) }


/* ── 图片预览模态框 ── */
/* ── 图片预览模态框 ── */
#image-lightbox {
  position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:9998;
  display:none; align-items:center; justify-content:center; padding:20px;
  cursor:zoom-out; backdrop-filter:blur(4px);
}
#image-lightbox.show { display:flex; animation:fadeUp 0.18s ease; }
#image-lightbox img { max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 8px 40px rgba(0,0,0,0.6); }


/* ── 主题切换按钮 ── */
/* ── 主题切换按钮（顶部）── */
.theme-toggle {
  background:transparent; border:1px solid var(--border); color:var(--text-muted);
  width:34px; height:34px; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; transition:all var(--trans);
}
.theme-toggle:hover { color:var(--accent); border-color:var(--accent); }


/* ── Responsive ── */
/* ── Responsive ── */
@media (max-width:768px) {
  :root { --sidebar-w:260px }
  /* 窄屏：单列布局,公告条独占一行（auto 高,空数据时收为 0）
     2026-05-24 起公告条从 header 内移到独立 grid 行,移动端不再隐藏 */
  #app { grid-template-columns:1fr; grid-template-areas:"header" "announcement" "main" }
  #sidebar { position:fixed; left:-260px; top:0; bottom:0; z-index:200; transition:left .3s ease; width:260px }
  #sidebar.open { left:0 }
  #sidebar-overlay { display:block; opacity:0; pointer-events:none; transition:opacity .3s }
  #sidebar-overlay.show { opacity:1; pointer-events:auto }
  #menu-toggle { display:flex }

  /* 移动端公告条:窄屏堆叠固定 pill + 滚动 viewport(两行)
     2026-05-24: announcement bar 从单行 [pill | viewport] 改为 column,
     360px 屏幕下两块都能完整展示,不挤压不溢出
     2026-05-24 fix1: viewport 26px 太挤导致滚动文字纵向被裁,改 32px + 显式 line-height
     2026-05-24 fix2: 删 min-height:0, viewport 34px + flex 居中替代 transform 百分比
     2026-05-24 fix3: 用户反馈带 pinned 还是裁切, 只发生在"mobile + pinned + scroll" 三者并存.
                     根因:viewport 是 bar 的第二个 flex-column 子项,默认 min-height:auto
                     可能让 viewport 被 flex 算法挤压;另外 .ann-track 用 top:0/bottom:0 
                     双锚定在嵌套 flex 容器内 iOS Safari 偶发算不准。
                     加固:flex-shrink:0 + min-height 双保险;配合 layout.css 把 track/item 
                     都加上 height:100% 兜底(三重锚定:top + bottom + height) */
  .announcement-bar { flex-direction:column; }
  .ann-pinned-slot { max-width:100%; width:100%; padding:7px 14px; border-right:none; border-bottom:1px solid var(--border); font-size:12px; line-height:1.4; flex-shrink:0; }
  .announcement-bar:not(.has-scroll) .ann-pinned-slot { border-bottom:none; }
  .ann-viewport { width:100%; height:34px; min-height:34px; flex-shrink:0; padding:0 14px; }
  .ann-track { left:28px; }
  .ann-item { font-size:12px; line-height:1.4; }

  /* 模型选择器弹层适配窄屏 */
  .model-picker-popover { min-width:240px; max-width:calc(100vw - 32px); }

  /* 工具栏过窄时允许换行 */
  .input-toolbar { flex-wrap:wrap; }

  /* 消息气泡放宽到 92% 防止过窄 */
  .msg-wrap { max-width:92%; }

  /* 输入区域内边距收紧 */
  .input-area { padding:10px 14px; }
  .messages-area { padding:14px; }
  .chat-header { padding:10px 14px; }

  /* 移动端工具栏字号小一些 */
  .msg-tool-btn { font-size:11px; padding:2px 6px; }
  .scroll-to-bottom { right:14px; bottom:14px; }

  /* 调色板弹层的移动端覆写见文件后面的独立 @media 块
     (放那儿是为了"源代码顺序"—— mobile 规则必须在 desktop 规则之后,
     否则同特异性 0,1,0 的 desktop 规则会因晚于 mobile 规则而胜出,
     mobile 规则等于没写。这是 CSS 级联的经典坑) */

  /* header-right 收紧 - 2026-05-24 加了 🎨 按钮后变成 4 个元素 (🌙/🎨/⚙️/登录),
     默认 flex 算法会按比例挤压所有子项, 导致登录按钮被压到放不下"登录"两个汉字,
     字符 word-break 后变成竖排。修法:
       (1) 减小 header-right 的 gap 6 -> 4px 腾出空间
       (2) .theme-toggle 圆按钮 34 -> 30 px
       (3) .btn-ghost 登录按钮加 white-space:nowrap + flex-shrink:0 不允许被挤
       (4) .btn-ghost padding 收紧
     这套组合保证 4 个元素在 360px 窄屏也能正常一行 */
  .header-right { gap: 4px; }
  .header-right .theme-toggle { width:30px; height:30px; font-size:14px; border-radius:7px; }
  .header-right .btn-ghost { padding:5px 11px; font-size:12.5px; white-space:nowrap; flex-shrink:0; }
}

/* ═══════════════════════════════════════════
 *  登录 / 注册 模态框 + 用户菜单
 * ═══════════════════════════════════════════ */

/* 用户菜单（已登录态显示） */
.user-menu { position:relative; }
.user-menu-btn {
  display:flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--border); border-radius:8px;
  padding:5px 10px; color:var(--text); cursor:pointer;
  font-size:13px; font-weight:500; transition:all var(--trans);
}
.user-menu-btn:hover { border-color:var(--accent); }
.user-avatar {
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#0d0f14; font-weight:700; font-size:11px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.user-menu-popover {
  position:absolute; top:calc(100% + 6px); right:0; min-width:200px;
  background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow); display:none; z-index:300;
  overflow:hidden;
}
.user-menu-popover.show { display:block; animation:fadeUp 0.18s ease; }
.user-menu-header {
  padding:12px 14px; border-bottom:1px solid var(--border);
  background:linear-gradient(135deg, rgba(110,231,183,0.06), rgba(129,140,248,0.06));
}
.user-menu-name { font-size:13px; font-weight:600; color:var(--text); }
.user-menu-id   { font-size:11px; color:var(--text-muted); margin-top:2px; }
.user-menu-item {
  padding:10px 14px; cursor:pointer; font-size:13px; color:var(--text-soft);
  transition:background var(--trans);
}
.user-menu-item:hover { background:var(--bg3); color:var(--text); }

/* 模态框遮罩 */
.auth-modal-mask {
  position:fixed; inset:0; background:rgba(0,0,0,0.7);
  z-index:9990; display:none; align-items:center; justify-content:center;
  padding:20px;
  /* 注意：不要加 backdrop-filter:blur()！每次输入都会触发整页重绘，
     输入框打字会有明显延迟。颜色加深到 0.7 以补偿视觉。 */
}
.auth-modal-mask.show { display:flex; animation:fadeUp 0.2s ease; }
.auth-modal {
  position:relative; width:100%; max-width:380px;
  background:var(--bg2); border:1px solid var(--border); border-radius:14px;
  padding:28px 24px 24px; box-shadow:var(--shadow);
}
.auth-modal-close {
  position:absolute; top:10px; right:10px;
  background:transparent; border:none; color:var(--text-muted);
  font-size:18px; padding:4px 8px; cursor:pointer; transition:color var(--trans);
}
.auth-modal-close:hover { color:var(--text); }

.auth-tabs {
  display:flex; gap:6px; margin-bottom:20px;
  border-bottom:1px solid var(--border);
}
.auth-tab {
  flex:1; padding:8px 0; text-align:center; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--text-muted);
  border-bottom:2px solid transparent; transition:all var(--trans); user-select:none;
  margin-bottom:-1px;
}
.auth-tab:hover { color:var(--text); }
.auth-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

.auth-form { display:flex; flex-direction:column; gap:6px; }
.auth-label {
  font-size:12px; color:var(--text-soft); font-weight:500;
  margin-top:8px;
}
.auth-input {
  width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  padding:10px 12px; color:var(--text); font-family:var(--sans); font-size:14px;
  outline:none; transition:border-color var(--trans);
}
.auth-input:focus { border-color:var(--accent); }
.auth-input::placeholder { color:var(--text-muted); }
.auth-submit {
  margin-top:14px; padding:11px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  border:none; border-radius:8px; color:#111; font-size:14px; font-weight:600;
  cursor:pointer; transition:transform var(--trans);
}
.auth-submit:hover:not(:disabled) { transform:scale(1.01); }
.auth-submit:disabled { opacity:0.5; cursor:not-allowed; }
.auth-error {
  margin-top:8px; padding:0;
  font-size:12.5px; color:var(--danger);
  min-height:18px;
}

/* 登录表单底部"忘记密码？"链接 —— 朴素小字、靠右、整体不抢戏 */
.auth-form-foot {
  margin-top:10px;
  text-align:right;
  font-size:12.5px;
}
.auth-form-foot a {
  color:var(--text-muted);
  text-decoration:none;
  transition:color var(--trans);
}
.auth-form-foot a:hover {
  color:var(--accent);
  text-decoration:underline;
}

@media (max-width:480px) {
  .auth-modal { padding:24px 20px 20px; }
}

/* ─── 注册：图形码 + 邮件验证码 行布局 ─── */
.captcha-row { display:flex; gap:8px; align-items:center; }
.captcha-row .captcha-input { flex:1; min-width:0; }
.captcha-image {
  width:120px; height:42px; border-radius:6px; cursor:pointer;
  background:var(--bg3); border:1px solid var(--border); flex-shrink:0;
  object-fit: contain;
}
.captcha-image:hover { border-color:var(--accent); }
.auth-mini-btn {
  flex-shrink:0; padding:0 14px; height:42px;
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  color:var(--text-soft); font-size:12.5px; cursor:pointer;
  transition:all var(--trans); white-space:nowrap;
  font-family:var(--sans);
}
.auth-mini-btn:hover:not(:disabled) { color:var(--accent); border-color:var(--accent); }
.auth-mini-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ─── 漫游合并选择弹窗 ─── */
.merge-choice-mask {
  position:fixed; inset:0; background:rgba(0,0,0,0.7);
  z-index:9991; display:none; align-items:center; justify-content:center;
  padding:20px;
}
.merge-choice-mask.show { display:flex; animation:fadeUp 0.2s ease; }
.merge-choice-modal {
  width:100%; max-width:380px;
  background:var(--bg2); border:1px solid var(--border); border-radius:14px;
  padding:24px; box-shadow:var(--shadow);
  text-align:center;
}
.merge-choice-title {
  margin:0 0 16px; font-size:16px; font-weight:600; color:var(--text);
}
.merge-choice-stats {
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  padding:14px; font-size:13px; color:var(--text-soft); line-height:2;
  margin-bottom:14px;
}
.merge-choice-stats span {
  color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums;
}
.merge-choice-tip { font-size:13px; color:var(--text-soft); margin:0 0 14px; }
.merge-choice-actions { display:flex; gap:8px; }
.merge-choice-btn {
  flex:1; padding:11px;
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:13.5px; font-weight:500; cursor:pointer;
  font-family:var(--sans); transition:all var(--trans);
}
.merge-choice-btn:hover { border-color:var(--text-soft); color:var(--text); }
.merge-choice-btn.primary {
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  border:none; color:#111; font-weight:600;
}
.merge-choice-btn.primary:hover { transform:scale(1.01); }
.merge-choice-warn { font-size:11px; color:var(--text-muted); margin:10px 0 0; }

/* ─────────────────────────────────────────────
 *  个人中心模态框
 * ───────────────────────────────────────────── */
.profile-modal { max-width: 460px; max-height: 90vh; overflow-y: auto; padding-right: 28px; }
.profile-title { font-size:18px; font-weight:600; margin:0 0 16px; color:var(--text); }

.profile-avatar-row {
  display:flex; align-items:center; gap:14px; padding:14px;
  background:var(--bg3); border-radius:10px; margin-bottom:16px;
}
.profile-avatar-box {
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#0d0f14; font-weight:700; font-size:26px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  overflow:hidden; position:relative;
}
.profile-avatar-box img { width:100%; height:100%; object-fit:cover; display:block; }
.profile-avatar-actions { flex:1; display:flex; flex-direction:column; gap:6px; }
.profile-avatar-hint { font-size:11.5px; color:var(--text-muted); }

.profile-section {
  padding:14px 0; border-top:1px solid var(--border);
  display:flex; flex-direction:column;
}
.profile-section:first-of-type { border-top:none; padding-top:0; }
.profile-subtitle { font-size:13px; font-weight:600; color:var(--text-soft); margin-bottom:8px; }

.profile-readonly-tip { font-size:11px; color:var(--text-muted); font-weight:400; }
.profile-inline-row { display:flex; gap:8px; align-items:stretch; }
.profile-inline-row .auth-input { flex:1; min-width:0; }

.profile-pwd-btn { margin-top:10px; align-self:flex-start; }
.profile-danger-btn {
  margin-top:10px; align-self:flex-start;
  border-color:rgba(248,113,113,0.3); color:var(--danger);
}
.profile-danger-btn:hover:not(:disabled) {
  border-color:var(--danger); background:rgba(248,113,113,0.08);
}

.profile-info-grid { display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.profile-info-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 12px; background:var(--bg3); border-radius:6px;
  font-size:12.5px;
}
.profile-info-label { color:var(--text-muted); }
.profile-info-value { color:var(--text); font-weight:500; font-variant-numeric:tabular-nums; }

.profile-error { color:var(--danger); font-size:12.5px; margin-top:10px; min-height:18px; }
.profile-success { color:var(--accent); font-size:12.5px; margin-top:6px; min-height:18px; }

/* ─────────────────────────────────────────────
 *  本地设置模态框（右上角 ⚙️）
 *  复用 .auth-modal / .profile-section / .auth-label / .auth-input 等基础类，
 *  只补几个 settings 专属（range slider / select / 提示文字 / 操作按钮组）
 * ───────────────────────────────────────────── */
.settings-modal { max-width: 460px; max-height: 90vh; overflow-y: auto; padding-right: 28px; }

.settings-subhint {
  font-size: 12px; color: var(--text-muted);
  text-align: center; margin: -6px 0 16px;
}
.settings-label-hint {
  font-size: 11px; color: var(--text-muted); font-weight: 400;
}
.settings-label-val {
  font-size: 12px; color: var(--accent); font-family: var(--mono);
  margin-left: 6px; font-weight: 500;
}

.settings-select { cursor: pointer; }
.settings-select:disabled { opacity: 0.6; cursor: not-allowed; }

/* 滑块：跨浏览器（webkit / firefox）都覆盖一份样式 */
.settings-range {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 4px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 2px; outline: none; margin: 8px 0; cursor: pointer;
}
.settings-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  cursor: pointer; border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.settings-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  cursor: pointer; border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.settings-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(110,231,183,0.25); }
.settings-range:focus::-moz-range-thumb    { box-shadow: 0 0 0 3px rgba(110,231,183,0.25); }

.settings-action-row {
  display: flex; gap: 8px; margin-top: 14px;
}
.settings-action-row .auth-mini-btn {
  flex: 1; height: 36px; padding: 0;
}

.settings-footer-hint {
  font-size: 11.5px; color: var(--text-muted);
  text-align: center; padding-top: 14px; margin-top: 4px;
  border-top: 1px dashed var(--border);
}

/* ── 主题色调色板(2026-05-24 从 ⚙️ 设置移出来,独立成 header 🎨 按钮的弹层)──
   .palette-wrap = 🎨 按钮的包装,position:relative 给弹层做定位基准
   .palette-popover = 弹层容器(右上对齐, 一字排开 5 个色卡)
   .palette-grid + .palette-swatch + .swatch-dot + .swatch-name = 色卡样式
   弹层逻辑见 settings.js: togglePalettePopover() / closePalettePopover() */
.palette-wrap { position: relative; display: inline-block; }
.palette-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 14px 14px 12px;
  min-width: 360px;
  animation: palette-pop-in 0.16s ease-out;
}
[data-theme="light"] .palette-popover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.palette-popover[hidden] { display: none; }
@keyframes palette-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.palette-popover-title {
  font-size: 12.5px;
  color: var(--text-soft);
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.palette-popover-hint {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.5;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);   /* 横向 5 列,一字排开 */
  gap: 8px;
}
.palette-swatch {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 10px 4px 8px;
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--sans);
  transition: all var(--trans);
  outline: none;
}
.palette-swatch:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.palette-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(110,231,183,0.18);
}
[data-theme="light"] .palette-swatch.active {
  box-shadow: 0 0 0 2px rgba(5,150,105,0.18);
}
.swatch-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.swatch-name {
  font-size: 11.5px;
  color: var(--text-soft);
  letter-spacing: 0.3px;
}
.palette-swatch.active .swatch-name {
  color: var(--accent);
  font-weight: 600;
}

/* ═══════════════════════════════════════════
 *  调色板弹层 / 色卡 — 移动端覆写
 *  ★ 必须放在 desktop 规则之后(源代码顺序),否则同特异性 (0,1,0) 的 desktop
 *    规则会因晚于 mobile 规则而胜出,移动端覆写等于没写 ★
 *  这是 2026-05-24 第二次迭代踩的坑,见 PROJECT_CONTEXT.md §8.20 末尾踩坑警告
 * ═══════════════════════════════════════════ */
@media (max-width:768px) {
  /* 弹层:从 position:absolute(锚定到 .palette-wrap 按钮) 改成 position:fixed
     (直接锚定到 viewport),left/right 各留 12px 安全边距,完全不依赖 🎨 按钮在 header
     的位置,无论按钮在哪都不会出框 */
  .palette-popover {
    position: fixed;
    top: calc(var(--header-h, 56px) + 4px);
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 10px;
  }
  .palette-grid { gap: 6px; }
  .palette-swatch { padding: 8px 2px 6px; }
  .swatch-dot { width: 24px; height: 24px; }
  .swatch-name { font-size: 10.5px; }
}

/* AI 对话气泡里的用户头像（覆盖渐变背景） */
.msg-avatar.usr.has-photo {
  background: var(--bg3);
  padding: 0; overflow: hidden;
}
.msg-avatar.usr img { width:100%; height:100%; object-fit:cover; display:block; }
/* ═══════════════════════════════════════════
 *  社群引导（公众号 / 微信群 / QQ 群 / 站长微信 …通用 N 项）
 *  渲染入口由 assets/js/social.js 控制
 *  配置数据来自后端 /api/pages/social-config （来自 system_settings 表）
 *  栅格用 auto-fit minmax：N 项自适应，不需要 CSS 跟着改
 * ═══════════════════════════════════════════ */

/* ── 侧栏底部入口卡片 ──────────────────────── */
#social-sidebar-entry {
  margin-top:auto;            /* 推到 sidebar 最底 */
  padding:12px 12px 14px;
  border-top:1px solid var(--border);
}
.social-sb-card {
  padding:10px 12px; border-radius:10px;
  background:linear-gradient(135deg, rgba(110,231,183,0.06), rgba(129,140,248,0.06));
  border:1px solid rgba(110,231,183,0.2);
  cursor:pointer; transition:all var(--trans);
  position:relative; overflow:hidden;
}
.social-sb-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  opacity:0.5;
}
.social-sb-card:hover {
  border-color:rgba(110,231,183,0.4);
  background:linear-gradient(135deg, rgba(110,231,183,0.1), rgba(129,140,248,0.1));
}
.social-sb-head { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.social-sb-title {
  font-size:12px; font-weight:600;
  /* 渐变下放到 .title-text 上，让 emoji 不被 -webkit-text-fill-color:transparent 透明化 */
}
.social-sb-title .title-emoji {
  /* emoji 不参与渐变：恢复 fill-color + 不要 background */
  -webkit-text-fill-color:initial; color:initial; background:none;
  margin-right:4px; display:inline-block;
}
.social-sb-title .title-text {
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* 图标横排 flex 平铺，N 个按等分铺满；超窄时自动换行（如 5 个图标在 240px 侧栏内） */
.social-sb-icons { display:flex; flex-wrap:wrap; gap:6px; }
.social-sb-icon {
  flex:1 1 40px; min-width:40px; padding:6px 0;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:6px; cursor:pointer;
  font-size:15px; line-height:1; text-align:center;
  transition:all var(--trans);
}
.social-sb-icon:hover {
  background:rgba(110,231,183,0.12);
  border-color:var(--accent);
  transform:translateY(-1px);
}
.social-sb-hint {
  margin-top:6px; font-size:10.5px; color:var(--text-muted);
  text-align:center; letter-spacing:0.3px;
}

/* ── 欢迎屏卡片 ──────────────────────────── */
#welcome-social { padding:8px 0 12px; }   /* 初始 display:none 由 HTML inline 控制 */
.welcome-social-card {
  max-width:760px; margin:0 auto;
  padding:22px 24px;
  background:linear-gradient(135deg, rgba(110,231,183,0.05), rgba(129,140,248,0.05));
  border:1px solid rgba(110,231,183,0.2);
  border-radius:16px;
  position:relative; overflow:hidden;
}
.welcome-social-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
}
.welcome-social-head { text-align:center; margin-bottom:18px; }
.welcome-social-title {
  font-size:18px; font-weight:700; margin-bottom:6px;
  /* 渐变下放到 .title-text；emoji 在 .title-emoji 保色（解决"emoji 只显示轮廓"问题） */
}
.welcome-social-title .title-emoji {
  -webkit-text-fill-color:initial; color:initial; background:none;
  margin-right:6px; display:inline-block;
}
.welcome-social-title .title-text {
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.welcome-social-desc {
  font-size:12.5px; color:var(--text-soft); line-height:1.6;
}
/* auto-fit：每项最小 140px，4 项约 (760-48-12*3)/4=169px 放得下一行；
   3 项也好看；5 项时窗口宽度不够会自动换行 */
.welcome-social-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px;
}
.welcome-social-item {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:14px 10px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; cursor:pointer;
  transition:all var(--trans);
  font-family:inherit;
}
.welcome-social-item:hover {
  border-color:var(--accent);
  background:var(--bg3);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(110,231,183,0.12);
}
.welcome-social-qr {
  width:110px; height:110px; flex-shrink:0;
  background:#ffffff; border-radius:8px; padding:6px;
  position:relative; overflow:hidden;
  border:1px solid rgba(0,0,0,0.06);
}
.welcome-social-qr img {
  width:100%; height:100%; object-fit:contain; display:block;
}
.welcome-social-qr-fallback {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg3); color:var(--text-muted);
  font-size:32px;
}
.welcome-social-text { text-align:center; }
.welcome-social-item-title {
  font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px;
}
.welcome-social-item-sub {
  font-size:11.5px; color:var(--text-muted);
}

/* ── 社群弹窗 ──────────────────────────── */
.social-modal-mask {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; transition:opacity 0.18s ease;
}
.social-modal-mask.show { opacity:1; }
html[data-theme="light"] .social-modal-mask { background:rgba(20,30,50,0.45); }

.social-modal {
  position:relative;
  width:min(900px, 100%); max-height:calc(100vh - 40px);
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  overflow:hidden;
  display:flex; flex-direction:column;
  transform:translateY(10px) scale(0.98);
  transition:transform 0.2s ease;
}
.social-modal-mask.show .social-modal {
  transform:translateY(0) scale(1);
}
.social-modal::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  z-index:1;
}
.social-modal-close {
  position:absolute; top:10px; right:12px;
  width:32px; height:32px; border-radius:50%;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text-muted); cursor:pointer;
  font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--trans);
  z-index:2;
}
.social-modal-close:hover { color:var(--text); border-color:var(--accent); }

.social-modal-head {
  padding:22px 24px 14px; text-align:center; flex-shrink:0;
}
.social-modal-title {
  font-size:20px; font-weight:700; margin-bottom:6px;
  /* 渐变下放到 .title-text；emoji 在 .title-emoji 保色 */
}
.social-modal-title .title-emoji {
  -webkit-text-fill-color:initial; color:initial; background:none;
  margin-right:6px; display:inline-block;
}
.social-modal-title .title-text {
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.social-modal-desc {
  font-size:13px; color:var(--text-soft); line-height:1.6;
}

/* auto-fit：4 项约 (900-48-14*3) / 4 = 202px 放得下一行；
   3 项也排一行；5/6 项空间不够时自动换 2 排 */
.social-modal-grid {
  flex:1; overflow-y:auto;
  padding:6px 24px 18px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(195px, 1fr)); gap:14px;
}

.social-card {
  padding:14px;
  background:var(--bg); border:1px solid var(--border);
  border-radius:12px;
  display:flex; flex-direction:column; gap:10px;
  transition:border-color var(--trans), transform var(--trans);
}
.social-card:hover { border-color:rgba(110,231,183,0.3); transform:translateY(-2px); }
.social-card.focus {
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(110,231,183,0.18);
}
.social-card-head { display:flex; align-items:center; gap:10px; }
.social-card-icon {
  width:32px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(110,231,183,0.15), rgba(129,140,248,0.15));
  border-radius:8px; font-size:16px;
}
.social-card-titles { flex:1; min-width:0; }
.social-card-title { font-size:14px; font-weight:600; color:var(--text); }
.social-card-sub { font-size:11.5px; color:var(--text-muted); margin-top:1px; }

.social-card-qrbox {
  width:100%; aspect-ratio:1/1;
  background:#ffffff; border-radius:10px; padding:8px;
  border:1px solid rgba(0,0,0,0.06);
  position:relative; overflow:hidden;
}
.social-card-qrbox img {
  width:100%; height:100%; object-fit:contain; display:block;
}
.social-card-qr-fallback {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:var(--bg3); color:var(--text-muted);
}
.social-card-qr-fallback-icon { font-size:38px; line-height:1; }
.social-card-qr-fallback-text { font-size:11.5px; }

/* 可复制 ID 行（微信号 / QQ 群号 / 其它）—— 字段名已从 wechat 通用化为 copy */
.social-card-copy {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:8px 10px;
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
}
.social-card-copy-label { font-size:11px; color:var(--text-muted); }
.social-card-copy-id {
  font-family:var(--mono); font-size:12.5px; color:var(--accent);
  padding:2px 8px; border-radius:4px;
  background:rgba(110,231,183,0.1); border:1px solid rgba(110,231,183,0.25);
  cursor:pointer; transition:all var(--trans);
  word-break:break-all;
}
.social-card-copy-id:hover {
  background:rgba(110,231,183,0.18); border-color:var(--accent);
}
.social-card-copy-tip { font-size:10.5px; color:var(--text-muted); width:100%; }
.social-card-tip {
  font-size:11.5px; color:var(--text-muted); text-align:center;
  padding:4px 0;
}

.social-modal-foot {
  padding:12px 24px 16px; flex-shrink:0;
  font-size:11.5px; color:var(--text-muted); text-align:center;
  border-top:1px solid var(--border);
}

/* ── 响应式：≤768 平板 / 手机 ──────────────── */
@media (max-width:768px) {
  /* 弹窗 4 项 → 2x2（minmax 140px 让大屏 3 列 / 小屏 2 列 / 极窄 1 列） */
  .social-modal { width:100%; max-height:calc(100vh - 24px); border-radius:14px; }
  .social-modal-head { padding:18px 18px 10px; }
  .social-modal-title { font-size:17px; }
  .social-modal-desc { font-size:12px; }
  .social-modal-grid {
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    padding:6px 14px 14px; gap:10px;
  }
  .social-card { padding:10px; gap:8px; }
  .social-card-icon { width:28px; height:28px; font-size:14px; }
  .social-card-title { font-size:13px; }
  .social-card-sub { font-size:11px; }
  .social-modal-foot { padding:10px 14px 14px; font-size:11px; }

  /* 欢迎卡 4 项 → 2x2 */
  .welcome-social-card { padding:16px; border-radius:12px; }
  .welcome-social-title { font-size:16px; }
  .welcome-social-desc { font-size:12px; }
  .welcome-social-grid {
    grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
    gap:8px;
  }
  .welcome-social-item { padding:10px 6px; gap:8px; }
  .welcome-social-qr { width:80px; height:80px; padding:4px; }
  .welcome-social-item-title { font-size:11.5px; }
  .welcome-social-item-sub { font-size:10.5px; }
}

/* 超窄屏（≤480）：弹窗 2 列保持，欢迎卡变横向排列 */
@media (max-width:480px) {
  .social-modal-grid {
    grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
    gap:8px;
  }
  /* 欢迎卡在超窄屏堆叠成单列横向布局：QR 左 / 文字右 */
  .welcome-social-grid {
    grid-template-columns:1fr; gap:8px;
  }
  .welcome-social-item {
    flex-direction:row; gap:14px; padding:10px; text-align:left;
  }
  .welcome-social-qr { width:70px; height:70px; flex-shrink:0; }
  .welcome-social-text { text-align:left; flex:1; }

  /* 侧栏卡：padding 收紧 */
  .social-sb-card { padding:8px 10px; }
  .social-sb-title { font-size:11.5px; }
  .social-sb-hint { font-size:10px; }
}
/* ════════════════════════════════════════════════════════════════
 *  反馈许愿面板（💡 用户许愿池）
 *  ──────────────────────────────────────────────────────────────
 *  - 视觉上对齐 .about-panel / .about-warn / .about-card
 *  - 表单复用 .auth-form / .auth-input / .auth-label / .auth-submit
 *  - 全用 var(--accent/--bg2/--bg3/--border)，自动跟随主题 + 5 套调色板
 *  - 移动端单列堆叠，不挤压
 * ════════════════════════════════════════════════════════════════ */

/* 面板容器（对齐 #about-panel） */
#wishpool-panel { display:none; flex-direction:column; height:100%; overflow:hidden; }

.wishpool-content {
  flex:1; overflow-y:auto;
  padding:24px 28px;
  max-width:820px; margin:0 auto; width:100%;
}

/* 顶部 AI 回复说明卡（accent 色调突出"重要信息"） */
.wishpool-tip {
  padding:14px 18px; margin-bottom:16px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(110,231,183,0.07), rgba(129,140,248,0.07));
  border:1px solid rgba(110,231,183,0.3);
}
.wishpool-tip-title {
  color:var(--accent);
  font-size:14px; font-weight:600; margin-bottom:8px;
}
.wishpool-tip p {
  font-size:13px; line-height:1.7; color:var(--text); margin:0;
}
.wishpool-tip p + p { margin-top:6px; }
.wishpool-tip strong { color:var(--accent); }

/* 通用 card（对齐 .about-card） */
.wishpool-card {
  padding:16px 20px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius);
}
.wishpool-card + .wishpool-card { margin-top:14px; }
.wishpool-card h3 {
  font-size:14px; font-weight:600; margin:0 0 12px;
  color:var(--text);
  display:flex; align-items:center; gap:6px;
}
.wishpool-card p {
  font-size:13px; line-height:1.7; color:var(--text); margin:0;
}

/* 类型 tab（💡 功能许愿 / 🐛 BUG 反馈） */
.wishpool-type-tabs {
  display:grid; grid-template-columns:1fr 1fr;
  gap:8px; margin-bottom:14px;
}
.wishpool-type-tab {
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 12px;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:13px; color:var(--text-soft);
  cursor:pointer;
  transition:all var(--trans);
  user-select:none;
}
.wishpool-type-tab:hover {
  border-color:var(--accent);
  color:var(--text);
}
.wishpool-type-tab.active {
  border-color:var(--accent);
  background:rgba(110,231,183,0.08);
  color:var(--accent);
  font-weight:500;
}
.wishpool-type-icon { font-size:16px; }

/* 表单微调（主要复用 .auth-form / .auth-input） */
.wishpool-form { margin-top:4px; }
.wishpool-form .auth-label {
  margin-top:10px;
  display:flex; align-items:center; gap:4px;
}
.wishpool-required {
  color:var(--danger);
  font-size:12px;
  margin-left:2px;
}

/* 内容 textarea：多行 + 可纵向拉伸 */
.wishpool-textarea {
  resize:vertical;
  min-height:120px;
  max-height:360px;
  font-family:inherit;
  line-height:1.6;
}

/* 字数计数器 */
.wishpool-counter {
  text-align:right;
  font-size:11px;
  color:var(--text-muted);
  margin-top:-4px; margin-bottom:6px;
}
.wishpool-counter.over { color:var(--danger); font-weight:500; }

/* 提示文字（邮箱下） */
.wishpool-hint {
  font-size:11px;
  color:var(--text-muted);
  margin-top:-6px; margin-bottom:8px;
}

/* 未登录提示卡（柔和告知） */
.wishpool-login-prompt {
  border-style:dashed;
  background:transparent;
}
.wishpool-login-prompt p { color:var(--text-soft); font-size:13px; }
.wishpool-login-prompt strong { color:var(--accent); }

/* 历史列表 */
.wishpool-history-hint {
  font-size:12px; color:var(--text-muted); margin-bottom:10px;
}
.wishpool-history-loading,
.wishpool-history-empty {
  padding:18px 12px;
  text-align:center;
  font-size:13px; color:var(--text-muted);
}

.wishpool-history-item {
  padding:14px 16px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius);
  border-left:3px solid var(--accent);
}
.wishpool-history-item + .wishpool-history-item { margin-top:10px; }
/* BUG 类型用 danger 描左边，一眼能区分 */
.wishpool-history-item.wishpool-history-type-bug { border-left-color:var(--danger); }

.wishpool-history-head {
  display:flex; align-items:center; gap:10px;
  font-size:11px; color:var(--text-muted);
  margin-bottom:6px;
  flex-wrap:wrap;
}
.wishpool-history-type {
  font-weight:500; color:var(--text-soft);
}
.wishpool-history-status {
  padding:1px 8px;
  border-radius:10px;
  background:var(--bg2);
  border:1px solid var(--border);
}
.wishpool-history-status.wishpool-status-pending   { color:var(--text-soft); }
.wishpool-history-status.wishpool-status-reviewing { color:var(--accent2); border-color:rgba(129,140,248,0.4); }
.wishpool-history-status.wishpool-status-accepted  { color:var(--accent);  border-color:rgba(110,231,183,0.4); background:rgba(110,231,183,0.08); }
.wishpool-history-status.wishpool-status-rejected  { color:var(--danger);  border-color:rgba(248,113,113,0.4); background:rgba(248,113,113,0.06); }
.wishpool-history-status.wishpool-status-done      { color:var(--accent);  border-color:rgba(110,231,183,0.6); background:rgba(110,231,183,0.15); font-weight:500; }
.wishpool-history-time { margin-left:auto; }

.wishpool-history-title {
  font-size:14px; font-weight:600;
  color:var(--text);
  margin-bottom:6px;
  word-break:break-word;
}
.wishpool-history-content {
  font-size:13px; line-height:1.6; color:var(--text-soft);
  white-space:pre-wrap;
  word-break:break-word;
  max-height:140px;
  overflow-y:auto;
}

/* AI 回复块（高亮） */
.wishpool-history-reply {
  margin-top:10px;
  padding:10px 12px;
  background:linear-gradient(135deg, rgba(110,231,183,0.06), rgba(129,140,248,0.06));
  border:1px solid rgba(110,231,183,0.3);
  border-radius:8px;
}
.wishpool-history-reply-head {
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:500;
  color:var(--accent);
  margin-bottom:6px;
  flex-wrap:wrap;
}
.wishpool-history-reply-body {
  font-size:13px; line-height:1.7; color:var(--text);
  white-space:pre-wrap;
  word-break:break-word;
}
.wishpool-history-reply-time {
  margin-top:6px; font-size:11px; color:var(--text-muted);
}

/* "邮件已发"小标签 */
.wishpool-mail-tag {
  font-size:10px;
  padding:1px 6px;
  border-radius:8px;
  background:rgba(110,231,183,0.12);
  color:var(--accent);
  border:1px solid rgba(110,231,183,0.3);
  font-weight:normal;
}
.wishpool-mail-tag.wishpool-mail-pending {
  background:rgba(255,255,255,0.04);
  color:var(--text-muted);
  border-color:var(--border);
}

/* 还未回复的提示 */
.wishpool-history-waiting {
  margin-top:8px;
  padding:8px 12px;
  background:var(--bg2);
  border:1px dashed var(--border);
  border-radius:8px;
  font-size:12px; color:var(--text-muted); line-height:1.6;
}

/* 移动端：padding 收紧 + tab 不挤压 */
@media (max-width: 768px) {
  .wishpool-content { padding:16px 14px; }
  .wishpool-card { padding:14px 14px; }
  .wishpool-type-tabs { gap:6px; }
  .wishpool-type-tab { padding:8px 6px; font-size:12px; }
  .wishpool-history-head { gap:6px; font-size:10px; }
  .wishpool-history-time { width:100%; margin-left:0; }
}