/* =====================================================================
 * extra.css —— 本站新增组件的样式
 * ---------------------------------------------------------------------
 * styles.css 是原版样式（外观复刻的基础），本文件只做「新增」与「少量覆盖」，
 * 加载顺序在 styles.css 之后。
 * ===================================================================== */

/* ---------- 密钥安全提醒 ---------- */
.key-hint {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 176, 32, 0.10);
  border: 1px solid rgba(255, 176, 32, 0.35);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--txt, #cfd6e4);
}
.key-hint b { color: #ffb020; font-weight: 600; }

/* ---------- 模型下拉 ---------- */
.model-pick {
  margin-top: 8px;
  width: 100%;
  max-height: 220px;
}

/* ---------- 保存提示 ---------- */
.save-hint {
  font-size: 12.5px;
  color: var(--muted, #8b93a7);
  align-self: center;
}
.save-hint.warn { color: #ffb020; }

/* ---------- 账号卡片 ---------- */
.account-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.account-name {
  font-weight: 600;
  color: var(--txt, #e6ebf5);
  word-break: break-all;
}
.account-tip {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted, #8b93a7);
}

/* ---------- 历史：多选工具条 ---------- */
.badge-muted {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted, #8b93a7);
  margin-left: 4px;
}
.hist-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 2px 8px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.10);
  margin-bottom: 6px;
}
.hist-selall {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted, #8b93a7);
  cursor: pointer;
  user-select: none;
}
.btn.danger {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.40);
}
.btn.danger:hover {
  background: rgba(255, 107, 107, 0.12);
}

/* 历史条目里的复选框 */
.hi-check {
  margin-right: 6px;
  accent-color: #4f8cff;
  cursor: pointer;
}

/* ---------- 登录弹层 ---------- */
.login-mask {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 16, 0.72);
  backdrop-filter: blur(3px);
}

/* ★★ 全局兜底：让 hidden 属性真正生效
 * ---------------------------------------------------------------------
 * 浏览器默认的 `[hidden] { display: none }` 属于 UA 样式表，
 * 会被任何作者样式里的 display（.btn 的 inline-flex、.login-mask 的 flex、
 * .hist-tools 的 flex）盖掉 —— 表现就是「明明加了 hidden 却还显示」。
 * 实机截图验证时发现：登录弹层一进页面就自己弹出来，保存按钮也一直露着。
 * 这一条同时修好 saveBtn / histTools / loginMask / modelPick。
 * 别删。
 * ------------------------------------------------------------------- */
[hidden] {
  display: none !important;
}
.login-box {
  width: min(360px, 92vw);
  background: var(--card, #121725);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 20px 20px 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--txt, #e6ebf5);
}
.login-sub {
  font-size: 12px;
  color: var(--muted, #8b93a7);
  margin-bottom: 2px;
}
.login-box input {
  height: 38px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--txt, #e6ebf5);
  font-size: 13.5px;
  outline: none;
}
.login-box input:focus {
  border-color: rgba(79, 140, 255, 0.65);
}
.login-err {
  min-height: 16px;
  font-size: 12px;
  color: #ff6b6b;
}
.login-acts {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 2px;
}

/* ---------- 记录详情里的备注编辑 ---------- */
.note-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  flex-wrap: wrap;
}
.note-row input {
  flex: 1 1 220px;
  min-width: 160px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--txt, #e6ebf5);
  font-size: 13px;
  outline: none;
}
.note-row input:focus { border-color: rgba(79, 140, 255, 0.65); }
.note-tip {
  font-size: 11.5px;
  color: var(--muted, #8b93a7);
}

/* ---------- 只读记录头部 ---------- */
.rec-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--muted, #8b93a7);
  margin-bottom: 8px;
}
.rec-head b { color: var(--txt, #e6ebf5); font-weight: 600; }

/* ---------- 小屏适配 ---------- */
@media (max-width: 720px) {
  .hist-tools { flex-wrap: wrap; }
  .save-hint { flex-basis: 100%; }
}

/* =====================================================================
 * 主题：淡蓝白（与主站 main-site 保持一致）
 * ---------------------------------------------------------------------
 * 原版 styles.css 是暖米色（--paper #faf9f5）+ 橙色强调（--claude #d97757）。
 * 这里把整套色板换成主站用的「白 / 淡蓝灰 / 靛蓝」：
 *   主站变量  --bg #ffffff  --bg-alt #f6f7f9  --text #2c3e50
 *            --text-2 #476582  --muted #90a4b7  --accent #3451b2
 * 注意：
 *   1. 本文件在 styles.css 之后加载，同选择器自然覆盖，不需要 !important。
 *   2. --claude 是原版的全站强调色变量（按钮/编号/标题渐变/焦点框都用它），
 *      这里把它接到主站的靛蓝，而不是逐个改选择器。
 *   3. 语义色不动：--ok 绿、--danger 红；.key-hint 的琥珀色警告也保留。
 *   4. 硬编码的橙色 rgba 阴影必须单独覆盖 —— 它们不跟随变量。
 * ===================================================================== */

:root {
  /* 底色与文字：对齐主站 */
  --paper: #fbfcfe;        /* 页面底：极淡蓝白（原来是 #faf9f5 暖米） */
  --paper-2: #f2f6fb;      /* 次级底色 */
  --card: #ffffff;
  --ink: #2c3e50;          /* 主站 --text */
  --ink-soft: #476582;     /* 主站 --text-2 */
  --ink-faint: #90a4b7;    /* 主站 --muted */
  --line: #e6e8eb;         /* 主站 --border */
  --line-soft: #f0f2f5;    /* 主站 --border-soft */

  /* 强调色：橙 → 靛蓝 */
  --claude: #3451b2;       /* 主站 --accent */
  --accent-2: #5672cd;     /* 主站 --accent-2（标题渐变第二档） */

  /* 语义色：保持原样，只微调底色 */
  --ok: #2f9e44;
  --ok-soft: #e6f4ea;
  --danger: #e03131;
  --danger-soft: #fdecec;
}

/* 顶部两团光晕：暖橙 → 靛蓝 / 天蓝 */
body::before {
  background:
    radial-gradient(60% 50% at 82% 6%, rgba(52, 81, 178, 0.05), transparent 70%),
    radial-gradient(50% 40% at 10% 94%, rgba(77, 171, 247, 0.06), transparent 70%);
}

/* ---------- 硬编码橙色的地方逐个改成靛蓝 ---------- */

/* 首页标题渐变的两个色标（原 var(--claude) → #e0935f 橙色） */
.hero h1 .accent,
.accent {
  background: linear-gradient(105deg, #3451b2, #5672cd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* eyebrow 小圆点的橙色光晕 */
.eyebrow .pip {
  box-shadow: 0 0 0 3px rgba(52, 81, 178, 0.18);
}

/* 主按钮投影 */
.btn-accent {
  box-shadow: 0 8px 22px -8px rgba(52, 81, 178, 0.45);
}

/* 题卡选中/激活的投影 */
.q-card.on {
  box-shadow: 0 8px 22px -12px rgba(52, 81, 178, 0.45);
}
.q-card.active {
  box-shadow: 0 8px 22px -10px rgba(52, 81, 178, 0.50);
}

/* 生成中徽章 */
.qc-badge.run {
  background: rgba(52, 81, 178, 0.10);
}

/* 右侧舞台条：橙色渐隐 → 靛蓝渐隐 */
.stage-bar.right {
  background: linear-gradient(90deg, rgba(52, 81, 178, 0.10), transparent);
}

/* 打字阶段：顶部遮罩与底部光带 */
.type-stage::before {
  background: linear-gradient(to bottom, var(--paper-2) 0%, rgba(238, 243, 250, 0.72) 38%, transparent 100%);
}
.type-stage::after {
  background: linear-gradient(to top, rgba(52, 81, 178, 0.10), transparent);
}

/* 打字徽章 */
.type-badge {
  background: rgba(52, 81, 178, 0.10);
  border-color: rgba(52, 81, 178, 0.28);
}

/* 评审卡片：暖白渐变 → 冷白渐变 */
.verdict-card {
  background: linear-gradient(180deg, #f7f9fc, #ffffff);
  box-shadow: 0 10px 30px -18px rgba(44, 62, 80, 0.22);
}

/* 侧栏卡片投影：偏蓝灰，不用暖黑 */
.side-card {
  box-shadow: 0 8px 24px -16px rgba(44, 62, 80, 0.18);
}

/* 密钥提醒条：保留琥珀色（语义是"注意"），只是在冷色底上稍微收一点 */
.key-hint {
  background: rgba(250, 176, 5, 0.10);
  border-color: rgba(250, 176, 5, 0.38);
}
/* ---------- 历史：云端 / 本机 标签页 ---------- */
.hist-tabs {
  display: flex;
  gap: 6px;
  margin: 2px 0 8px;
  padding: 3px;
  border-radius: 9px;
  background: var(--line-soft, #f0f2f5);
}
.hist-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 8px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-faint, #90a4b7);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s, color .15s;
}
.hist-tab:hover { color: var(--ink-soft, #476582); }
.hist-tab.on {
  background: #fff;
  color: var(--claude, #3451b2);
  box-shadow: 0 1px 3px rgba(44, 62, 80, 0.12);
}