/* === base.css：全局重置 + :root 变量 + 共用组件（topbar / modal-btn / toast / md / form 元素等） === */
* { box-sizing: border-box; }


/* 全局兜底：所有 display:flex/inline-flex/grid/inline-grid/block 等显式声明
   会覆盖原生 [hidden] 的 display:none，导致 hidden 属性失效。
   这里用 !important 强制兜底，避免再踩「display 覆盖 hidden」的坑（EXP-016 同类）。
   除极少数需要保留布局占位的元素外，hidden 一律意味着不渲染。 */
[hidden] { display: none !important; }

:root {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --border: #e5e7eb;
  --primary: #10a37f;
  --primary-hover: #0e8e6e;
  --primary-bg: #f0fdf4;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-bg: #dbeafe;
  --accent-text: #1e40af;
  --danger: #b91c1c;
  --danger-border: #fecaca;
  --danger-bg: #fef2f2;
  --hover-bg: #f3f4f6;
  --transition-fast: 200ms ease;
  --text: #1f2937;
  --muted: #6b7280;
}

html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  padding: 20px 32px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar-left { flex: 1; min-width: 0; }

.topbar h1 { margin: 0 0 4px; font-size: 20px; }

.subtitle { color: var(--muted); font-size: 13px; }


/* topbar 按钮统一基底：白底 + 1px 灰边 + 8px 圆角 + padding 8px 12px
   hover 时变主色边框 + 主色文字（绿色提示可点击）。
   5 个按钮（help / history / compare / auth-login / auth-logout）共享同一套视觉。 */
.help-btn,
.history-btn,
.compare-btn,
.auth-login-btn,
.auth-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;       /* 强制内容居中，配合 min-width 实现 3 按钮等宽 */
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.help-btn:hover,
.history-btn:hover,
.compare-btn:hover,
.auth-login-btn:hover,
.auth-logout-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #f6fffb;
}

.help-btn:active,
.history-btn:active,
.compare-btn:active,
.auth-login-btn:active,
.auth-logout-btn:active {
  transform: translateY(1px);
}

.help-btn:focus-visible,
.history-btn:focus-visible,
.compare-btn:focus-visible,
.auth-login-btn:focus-visible,
.auth-logout-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.help-btn[disabled],
.history-btn[disabled],
.compare-btn[disabled],
.auth-login-btn[disabled],
.auth-logout-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}


/* emoji 辅助样式：图标与文字之间的间距、字号 */
.help-icon,
.history-icon,
.compare-icon,
.auth-login-icon,
.auth-logout-icon,
.auth-user-icon {
  font-size: 14px;
  line-height: 1;
}


/* 2026-06-28：强制 help/compare/history 三个 topbar 图标按钮等宽。
   根因：emoji 字符渲染宽度不一致（📜 比 ❓📊 显著宽），即使 label 都是 2 字汉字，
   内容总宽仍有 6-10px 差，视觉上 history 明显比另两个大。
   修复：用固定 width（不是 min-width，min-width 对 inline-flex 内容更宽时无法压缩）
   + box-sizing: border-box + 内容居中。值取三者自然宽度最大值上取整 = 84px。
   不影响 auth-login-btn / auth-logout-btn（独立区块）。 */
.help-btn,
.compare-btn,
.history-btn {
  width: 84px;
  box-sizing: border-box;
  justify-content: center;
}

.help-label,
.history-label,
.compare-label,
.auth-login-label,
.auth-logout-label {
  white-space: nowrap;
}


/* 徽章：内联在按钮文字之后，主色填充 + 白字 + 9px 圆角
   .history-badge 用于历史按钮未读数；.compare-badge 用于对比按钮已选数 */
.history-badge,
.compare-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0 5px;
  background: var(--primary);
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}

/* 已选满 3 条（仅对比按钮）：红色填充，提示用户已达上限 */
.compare-badge.full,
.history-badge.full {
  background: #ef4444;
  color: #fff;
}

/* 占位徽章（仅 help 按钮用）：永远 hidden，但占位让 help 按钮与 compare/history 等宽 */
/* 2026-06-28 废弃：EXP-021 全局 [hidden]{display:none!important} 兜底后，
   compare/history 的徽章不再占位 → help 占位反而比另两个宽 ~22px（用户反馈"按钮大小变了"）。
   三个按钮现在统一为「emoji + 2 字 label + 6px gap」自然撑宽，宽度完全一致。
   原规则 .help-badge[hidden] { visibility: hidden } 已删除。 */

/* 抽屉遮罩 */
.drawer-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 900;
  opacity: 0;
  transition: opacity .25s ease;
}

.drawer-mask.show { opacity: 1; }

/* === modal-btn 体系（抽屉 / 选择 modal / 结果 modal 共用）===
   设计稿：doc/design/modal-buttons-redesign/20260624-buttons.md
   说明：topbar 已回滚所以这里独立声明 --primary-hover / --hover-bg / --transition-fast 等，
        与 topbar-redesign 旧版语义保持一致。 */
.modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  min-width: 64px;
  padding: 0 12px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font: 500 13px/1 inherit;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform 100ms ease,
              opacity var(--transition-fast);
}

.modal-btn:active { transform: translateY(1px); }

.modal-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-btn-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}


/* 关闭 / 收藏 / 删除等纯图标按钮 */
.modal-btn--icon {
  min-width: 32px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
}

/* 次要操作（取消 / 打印） */
.modal-btn--ghost {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
}

/* 主操作（开始对比） */
.modal-btn--primary {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
}

/* 危险操作（清空非收藏 / 卡片删除） */
.modal-btn--danger {
  background: var(--panel);
  border: 1px solid var(--danger-border);
  color: var(--danger);
}


@media (hover: hover) {
  .modal-btn--icon:hover {
    background: var(--hover-bg);
    color: var(--text);
  }
  .modal-btn--ghost:hover {
    background: var(--primary-bg);
    border-color: var(--primary);
    color: var(--primary);
  }
  .modal-btn--primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
  }
  .modal-btn--danger:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
  }
}


/* 删除按钮 hover 单独提示红色（卡片内更明显） */
.modal-btn--icon.history-del { color: var(--muted); }

@media (hover: hover) {
  .modal-btn--icon.history-del:hover { color: #ef4444; }
}


/* 收藏按钮：黄色保留 —— 用户偏好，与设计师主色方案不同 */
.modal-btn--icon.history-fav { color: #9ca3af; }

.modal-btn--icon.history-fav.on { color: #f59e0b; }

.modal-btn--icon.history-fav.on svg { fill: #f59e0b; }


/* 结果 modal header 打印 / 关闭 之间的竖分隔线 */
.modal-btn-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex: 0 0 1px;
}


@media (prefers-reduced-motion: reduce) {
  .modal-btn { transition: none; }
}


.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}


.form-group { margin-bottom: 16px; }

.form-row { display: flex; gap: 12px; }

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

.required { color: #ef4444; }


textarea, input[type="text"], select, input[type="file"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}

textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

textarea:focus, input:focus, select:focus {
  outline: none;
  border-color: var(--primary);
}


.hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }


.md h1 { font-size: 20px; margin: 8px 0 12px; }

.md h2 {
  font-size: 16px;
  margin: 18px 0 8px;
  padding-left: 10px;
  border-left: 4px solid var(--primary);
}

.md h3 { font-size: 14px; margin: 14px 0 6px; color: var(--primary); }

.md p { margin: 6px 0; line-height: 1.7; }

.md ul, .md ol { margin: 6px 0; padding-left: 22px; }

.md li { line-height: 1.7; margin: 3px 0; }

.md code {
  background: #f3f4f6;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  font-family: ui-monospace, Menlo, monospace;
}

.md strong { color: #111827; }


/* Task 4：toast 提示 */
.toast-container {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  padding: 8px 16px;
  background: rgba(31, 41, 55, 0.92);
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}


/* 打印 / PDF：默认模式仅保留 .score-board 与 #result > .md；
   Task 5：modal 打开时仅打印 .compare-modal 内容，主页与遮罩隐藏 */
@media print {
  .topbar,
  .input-panel,
  .export-toolbar,
  .hint,
  .placeholder,
  #error,
  .history-drawer,
  .drawer-mask,
  .history-btn,
  .help-btn,
  .compare-btn,
  .toast-container,
  .modal-btn,
  .modal-btn-divider {
    display: none !important;
  }
  body { background: #fff; }
  .layout {
    display: block;
    padding: 0;
    margin: 0;
    max-width: none;
  }
  .result-panel {
    border: none;
    padding: 0;
  }
  .score-board {
    page-break-inside: avoid;
    border-bottom: 1px solid #ccc;
    margin-bottom: 12px;
  }
  #result { min-height: auto; }
  #result > .md { page-break-inside: auto; }

  /* Task 5：modal 打印模式（新规则，实际生效） */
  body.compare-modal-open .layout,
  body.compare-modal-open .topbar,
  body.compare-modal-open .history-drawer,
  body.compare-modal-open .drawer-mask {
    display: none !important;
  }
  body.compare-modal-open .compare-modal-mask {
    display: none !important;
  }
  body.compare-modal-open .compare-modal {
    position: static !important;
    max-width: none !important;
    max-height: none !important;
    width: 100% !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
    padding: 0 !important;
  }
  body.compare-modal-open .compare-modal-header {
    position: static !important;
  }

  /* 向后兼容：Task 4 的 body.compare-mode 样式保留，但实际已不使用 */
  body.compare-mode .layout { display: none !important; }
  body.compare-mode .compare-view {
    display: block !important;
    padding: 0;
    margin: 0;
    max-width: none;
  }
  body.compare-mode .compare-back { display: none !important; }
  .compare-section { page-break-inside: avoid; }

  /* Task 8：打印模式中 evidence 卡片与声明兼容 */
  .report-disclaimer { display: block !important; font-size: 11px; }
  .evidence-board { grid-template-columns: 1fr !important; }
  .evidence-card { page-break-inside: avoid; }
  .score-anchor-tooltip { display: none !important; }
}


/* 打印模式：学习计划也清晰打印 */
@media print {
  .study-plan-toolbar { display: none !important; }
  /* Task 34：导出工具栏与主报告导出工具栏一致，打印时隐藏 */
  .study-plan-export-toolbar { display: none !important; }
  #study-plan-error { display: none !important; }
  .study-plan-section {
    background: #fff !important;
    border: none !important;
    padding: 0 !important;
    margin: 16px 0 0;
  }
  .study-plan-weeks {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .study-week-card {
    page-break-inside: avoid;
    box-shadow: none;
  }
  .study-plan-warning {
    page-break-inside: avoid;
  }
}


/* 打印模式：浮动按钮隐藏 */
@media print {
  .floating-example-btn { display: none !important; }
}


/* ============================================================
   Task 12：P1-10 首次使用引导气泡 + topbar 帮助按钮
   - .topbar-right：历史按钮容器，新增帮助按钮与之并列
   - .help-btn：样式与 .history-btn 完全一致
   - .onboard-bubble：非模态浮层，z-index 1600
     （高于 #btn-example 1500，低于 .compare-modal 2000）
   - 固定居右下角，带小三角指向 #btn-example
   - 移动端 ≤768px 居中全宽（减边距），关闭按钮 ≥44px
   ============================================================ */

.topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}


.onboard-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}


@media (max-width: 480px) {
  .subtitle { display: none; }
  .topbar-right { gap: 4px; }
  .auth-area { margin-left: 4px; }
  .auth-user-name { display: none; }
}


@media (max-width: 400px) {
  /* ≤400px：极窄屏隐藏按钮文字，仅保留 emoji 图标 */
  .help-label,
  .history-label,
  .compare-label,
  .auth-login-label,
  .auth-logout-label {
    display: none;
  }
}


/* 打印模式：引导气泡与 topbar 按钮隐藏 */
@media print {
  .onboard-bubble,
  .history-btn,
  .help-btn,
  .compare-btn { display: none !important; }
}


/* 已登录态：绿色胶囊背景，弱化但可辨识 */
.auth-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
  max-width: 180px;
  transition: background .15s ease, border-color .15s ease;
}

@media (hover: hover) {
  .auth-user:hover {
    background: #dcfce7;
    border-color: #86efac;
  }
}


.auth-user[hidden],
.auth-logout-btn[hidden],
.auth-login-btn[hidden] {
  display: none !important;
}


.auth-back-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  text-decoration: none;
  line-height: 1;
}


.auth-back-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}


/* 打印模式：登录区域与 401 banner 隐藏 */
@media print {
  .auth-area,
  .auth-expired-banner { display: none !important; }
}


/* 打印：管理面板不打印 toast / 加载占位 */
@media print {
  .admin-toast,
  .admin-loading,
  .admin-empty,
  .admin-refresh-btn,
  .admin-logout-btn,
  .admin-back,
  .col-ops {
    display: none !important;
  }
}


/* ============================================================
 * Task 22：主页 + 登录页配合改造
 *
 * 涉及组件：
 *  - .auth-trial-badge         顶栏试用徽章（红色，剩余<3 次时显示）
 *  - .auth-admin-link          顶栏管理员入口
 *  - .account-disabled-banner  账号已停用常驻 banner（红色）
 *  - .trial-exhausted-mask     试用耗尽遮罩（覆盖主页）
 *  - .auth-login-modal-*       未登录拦截 modal
 *  - .login-warning            登录页黄色 warning（试用耗尽等）
 * ============================================================ */

/* 顶栏试用徽章 —— 与 auth-* 同行 */
.auth-trial-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  color: #fff;
  background: #ef4444;
  border-radius: 10px;
  white-space: nowrap;
  cursor: default;
}


/* 顶栏管理员入口 */
.auth-admin-link {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 4px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--primary, #10a37f);
  background: rgba(16, 163, 127, 0.1);
  border: 1px solid rgba(16, 163, 127, 0.3);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.auth-admin-link:hover {
  background: rgba(16, 163, 127, 0.18);
}


/* 账号已停用常驻 banner（红色，与 auth-expired-banner 同位置但不自动消失） */
.account-disabled-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: #b91c1c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.account-disabled-banner[hidden] {
  display: none !important;
}

.account-disabled-icon {
  font-size: 16px;
}


/* 试用次数已用尽遮罩 —— 覆盖主页 */
.trial-exhausted-mask {
  position: fixed;
  inset: 0;
  z-index: 1900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
}

.trial-exhausted-mask[hidden] {
  display: none !important;
}

.trial-exhausted-card {
  max-width: 440px;
  width: 100%;
  padding: 32px 28px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.trial-exhausted-icon {
  font-size: 40px;
  color: #ef4444;
  margin-bottom: 12px;
}

.trial-exhausted-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.trial-exhausted-text {
  margin: 0 0 20px;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}

.trial-exhausted-close {
  padding: 8px 20px;
  font-size: 14px;
  font-family: inherit;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.trial-exhausted-close:hover {
  background: #e5e7eb;
}


/* 未登录拦截 modal */
.auth-login-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 1950;
  background: rgba(0, 0, 0, 0.5);
}

.auth-login-modal-mask[hidden] {
  display: none !important;
}

.auth-login-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1960;
  width: calc(100vw - 48px);
  max-width: 420px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.auth-login-modal[hidden] {
  display: none !important;
}

.auth-login-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f3f4f6;
}

.auth-login-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.auth-login-modal-close {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: #6b7280;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.auth-login-modal-close:hover {
  background: #f3f4f6;
  color: #111827;
}

.auth-login-modal-body {
  padding: 18px 20px 24px;
}

.auth-login-modal-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
}

.auth-login-modal-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-login-modal-label {
  font-size: 13px;
  color: #374151;
}

.auth-login-modal-form input {
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

.auth-login-modal-form input:focus {
  outline: none;
  border-color: var(--primary, #10a37f);
}

.auth-login-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.auth-login-modal-btn.primary {
  color: #fff;
  background: var(--primary, #10a37f);
  border: 1px solid var(--primary, #10a37f);
}

.auth-login-modal-btn.primary:hover {
  background: #0e8e6e;
}

.auth-login-modal-btn.github {
  margin-top: 12px;
  color: #fff;
  background: #24292e;
  border: 1px solid #24292e;
}

.auth-login-modal-btn.github:hover {
  background: #2f363d;
}

/* hidden 兜底：display:inline-flex 会覆盖原生 [hidden]，导致 GitHub 按钮隐藏不掉（EXP-016 同类 bug） */
.auth-login-modal-btn[hidden],
.auth-login-modal-divider[hidden] {
  display: none !important;
}

.auth-login-modal-divider {
  margin: 16px 0 4px;
  font-size: 12px;
  color: #9ca3af;
  text-align: center;
}

.auth-login-modal-divider span {
  display: inline-block;
  padding: 0 8px;
  background: #fff;
  position: relative;
}

.auth-login-modal-divider::before {
  content: '';
  display: block;
  height: 1px;
  background: #e5e7eb;
  margin-top: 7px;
}


/* 打印：Task 22 浮层全部隐藏 */
@media print {
  .auth-trial-badge,
  .auth-admin-link,
  .account-disabled-banner,
  .trial-exhausted-mask,
  .auth-login-modal-mask,
  .auth-login-modal {
    display: none !important;
  }
}


/* 通用 modal（创建 / 新码 / 调整配额共用） */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.modal-mask[hidden] {
  display: none;
}

.modal-card {
  background: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}

.modal-close:hover {
  color: var(--text);
}

.modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-field-label {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.modal-field input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
}

.modal-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.15);
}

.modal-field-hint {
  font-size: 12px;
  color: var(--muted);
}

.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}


/* 4. 打印兼容：隐藏 toast + 移除 flash 边框（避免被闪烁干扰） */
@media print {
  .study-plan-toast {
    display: none !important;
  }
  .study-plan-section.flash {
    border: 1px solid var(--border) !important;
    animation: none !important;
    box-shadow: none !important;
  }
}


/* 打印：topbar 对比按钮 + 选择 modal 全部隐藏 */
@media print {
  .compare-btn,
  .compare-select-modal-mask,
  .compare-select-modal {
    display: none !important;
  }
}


/* === Task: 首页增强 - 统一信息条/卡基类（B/C/D 共用）===
   设计稿：doc/design/home-enhancement/2026-06-27-design.md
   目的：避免功能 B（缩略卡）/ C（能力卡）/ D（学习计划恢复提示条）出现 3 种「白底圆角条」并存的视觉碎片化。
   复用现有 CSS 变量（无新色相），字号 13/12/11px 与 .history-item / .rt-label 对齐，
   圆角 8px 与 .history-item 一致。
   显式 [hidden] 兜底与全局兜底（line 7）双保险。 */

/* --- .info-bar：横条形信息条（功能 D 用） --- */
.info-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--primary-bg);
  border: 1px solid var(--primary);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.info-bar[hidden] { display: none !important; }


/* 中性变体：浅灰底 + 灰边（功能 B「无历史」空态用） */
.info-bar--neutral {
  background: #f9fafb;
  border-color: var(--border);
}


/* 主色实心底变体（保留供未来「强调公告」类场景使用；功能 A 引导条用独立 .onboarding-bar 类，
   不走本变体——见 design doc 备注「颜色语义不同」） */
.info-bar--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}


/* 成功变体：浅绿底 + 主色边（功能 D 学习计划恢复可用，强调正向进度） */
.info-bar--success {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--text);
}


/* 文字主体：flex:1 占据中间区域，标题 + 描述垂直堆叠 */
.info-bar-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}


/* CTA 按钮：继承 .modal-btn--solid 风格（白底主色字 / 主色实心底白字 由修饰类决定）
   为对齐 .modal-btn 视觉，min-height 32px，padding 4px 10px，字号 12px。 */
.info-bar-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px 12px;
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  border-radius: 6px;
  font: 500 12px/1 inherit;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.info-bar-cta:active { transform: translateY(1px); }

.info-bar-cta:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (hover: hover) {
  .info-bar-cta:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
  }
}


/* 关闭按钮：透明底 + SVG cross（参考 .modal-btn--icon 风格，避免 emoji 跨平台不一致） */
.info-bar-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.info-bar-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (hover: hover) {
  .info-bar-close:hover {
    background: rgba(0, 0, 0, .05);
    color: var(--text);
  }
}

.info-bar-close svg { width: 14px; height: 14px; }


/* --- .info-card：卡片形信息块（功能 B 缩略卡 / C 能力卡 共用） --- */
.info-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: default;
}

.info-card[hidden] { display: none !important; }


/* 可点击变体：cursor pointer + hover 主色边 + 浅阴影（与 .history-item:hover 阴影一致） */
.info-card--clickable { cursor: pointer; }

@media (hover: hover) {
  .info-card--clickable:hover {
    border-color: var(--primary);
    box-shadow: 0 1px 4px rgba(16, 163, 127, .12);
  }
}

.info-card--clickable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* 子元素：标题（13px 加粗，可单行截断） */
.info-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* 元数据（11px 灰色，时间 / 分数等） */
.info-card-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}


/* 描述（12px 灰色，限 2 行截断，与 .history-item-summary 一致） */
.info-card-desc {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


@media (prefers-reduced-motion: reduce) {
  .info-bar-cta,
  .info-bar-close,
  .info-card,
  .info-card--clickable {
    transition: none;
  }
}


.capability-card-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
}


.capability-card-body {
  flex: 1;
  min-width: 0;
}


.capability-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}


.capability-card-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}


/* ============================================================
 * Task 12：打印模式补丁 — 4 个新组件全部不出现在 PDF
 * 追加规则到全局打印策略（不破坏现有 @media print 块）。
 * ============================================================ */
@media print {
  .home-banner-stack,
  .onboarding-bar,
  .tour-spotlight,
  .tour-tooltip,
  .recent-strip,
  .capability-rail,
  .resume-plan-banner {
    display: none !important;
  }
}


/* === topbar-link：文字链接形态（用于「了解更多」「开始使用」等低权重导航入口）===
   不复用 .modal-btn / .topbar-btn 按钮基类，因为是「链接」语义不是按钮。
   视觉权重低于按钮，避免与现有 5 个 topbar 按钮挤压。 */
.topbar-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  border-radius: 6px;
  transition: color var(--transition-fast), background var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
}

@media (hover: hover) {
  .topbar-link:hover {
    color: var(--primary);
    background: var(--hover-bg, #f3f4f6);
  }
}

.topbar-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 响应式：≤768px 隐藏（移动端 topbar 已有 5 个按钮，避免拥挤）*/
@media (max-width: 768px) {
  .topbar-link { display: none; }
}