/* ═══════════════════════════════════════════
 *  通用组件：应用广场、关于面板、快捷模式、模型选择器、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; }
.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; scrollbar-width:thin;
                       scrollbar-color:var(--border) transparent; }
.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（获取编程接口）── */
/* ── About Panel（获取编程接口）── */
#about-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%;
                 scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.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; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; 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;
                 scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.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; scrollbar-width:thin }
.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 }
  #app { grid-template-columns:1fr; grid-template-areas:"header" "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 }

  /* 顶部公告栏在窄屏隐藏，避免挤压 logo 和按钮 */
  .header-notice { display:none }

  /* 模型选择器弹层适配窄屏 */
  .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; }
}

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

/* 用户菜单（已登录态显示） */
.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;
}

@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; }

/* 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; }