/*
 * tools.chenci.de / app.css
 * 工具站页面级（布局）样式。基础排版、按钮与表单控件均来自共享
 * tokens.css / components.css，本文件只写工具站特有的页面布局。
 *
 * Converged best-version design (v7)：
 *   - shell：site-header-row = brand / search-combobox / theme-menu
 *   - 首页：home-intro + calm 2-col .tool-grid 的 .tool-tile
 *   - 工具页：.tool-page = .tool-heading + .tool-workspace 的 .task-card
 *   - 44px 控件仅作用于 .tool-page 下（不改共享 components.css 尺寸）
 */

html { scroll-behavior: smooth; }
.cc-body { background: var(--cc-bg-subtle); }

/* 屏幕阅读器专用（不占位）。 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 跳到内容（键盘可访问）────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  left: var(--cc-space-3);
  top: var(--cc-space-3);
  z-index: 100;
  width: auto;
  height: auto;
  overflow: visible;
  white-space: normal;
  padding: var(--cc-space-2) var(--cc-space-3);
  background: var(--cc-bg);
  color: var(--cc-accent);
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-md);
  font-size: var(--cc-fs-sm);
  font-weight: var(--cc-fw-medium);
  box-shadow: var(--cc-shadow-md);
}

/* ── 工具站外壳：持久页头 + 内容区 ─────────────────────── */
.tools-app {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--cc-space-5);
  box-sizing: border-box;
}
.app-content { min-height: 60vh; }

/* 页头单行：brand / 搜索组合框 / 主题菜单 同线。 */
.site-header { padding-top: var(--cc-space-5); }
.site-header-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--cc-space-4);              /* 16px */
  min-height: 44px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-1);
  color: var(--cc-text);
  font-weight: var(--cc-fw-medium);
  font-size: var(--cc-fs-sm);
  text-decoration: none;
  white-space: nowrap;
}
.site-brand:hover { color: var(--cc-accent); }
.site-brand-domain { font-weight: var(--cc-fw-semibold); }
.site-brand-sep { color: var(--cc-text-tertiary); }
.site-brand-product { color: var(--cc-text-secondary); }

/* 主题触发按钮（40×40 图标）。 */
.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cc-border-strong);
  background: var(--cc-bg);
  color: var(--cc-text-secondary);
  border-radius: var(--cc-radius-md);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.header-icon-btn:hover { background: var(--cc-bg-muted); color: var(--cc-text); }
.header-icon-btn:focus-visible { outline: var(--cc-ring) solid var(--cc-accent); outline-offset: var(--cc-ring-offset); }
.header-icon-btn-icon { display: inline-flex; }
.header-icon-btn-icon svg { display: block; }

/* 主题弹出菜单。 */
.theme-menu { position: relative; }
.theme-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 148px;
  padding: var(--cc-space-2);
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  box-shadow: var(--cc-shadow-lg);
}
.theme-popover[hidden] { display: none; }
.theme-popover button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--cc-space-2) var(--cc-space-3);
  border: none;
  background: transparent;
  color: var(--cc-text);
  font-size: var(--cc-fs-sm);
  font-family: inherit;
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
}
.theme-popover button:hover { background: var(--cc-bg-muted); }
.theme-popover button[aria-checked="true"] { background: var(--cc-accent-soft); color: var(--cc-accent); font-weight: var(--cc-fw-medium); }
.theme-popover button:focus-visible { outline: var(--cc-ring) solid var(--cc-accent); outline-offset: var(--cc-ring-offset); }

/* ── 搜索组合框（锚定在页头）────────────────────────────── */
.search-combobox { position: relative; min-width: 0; }
.search-input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 68px 0 42px;
  font-size: var(--cc-fs-base);
  font-family: var(--cc-font-sans);
  color: var(--cc-text);
  background: var(--cc-bg);
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-md);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.search-input::placeholder { color: var(--cc-text-tertiary); }
.search-input:focus { outline: none; border-color: var(--cc-accent); box-shadow: 0 0 0 var(--cc-ring) var(--cc-accent-soft); }
.search-leading {
  position: absolute;
  left: var(--cc-space-3);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--cc-text-tertiary);
  pointer-events: none;
}
.search-leading svg { display: block; }
.search-shortcut {
  position: absolute;
  right: var(--cc-space-3);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-fs-xs);
  color: var(--cc-text-tertiary);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  padding: 0 var(--cc-space-1);
  pointer-events: none;
}

.search-popover {
  position: absolute;
  inset: calc(100% + 8px) 0 auto;
  z-index: 50;
  max-height: 360px;
  overflow: auto;
  padding: var(--cc-space-2);
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  box-shadow: var(--cc-shadow-lg);
}
.search-popover[hidden] { display: none; }
.search-section {
  padding: var(--cc-space-1) var(--cc-space-3);
  font-size: var(--cc-fs-xs);
  font-weight: var(--cc-fw-medium);
  letter-spacing: var(--cc-ls-wide);
  color: var(--cc-text-tertiary);
}
.search-result {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  width: 100%;
  text-align: left;
  padding: var(--cc-space-2) var(--cc-space-3);
  border: none;
  background: transparent;
  border-radius: var(--cc-radius-md);
  font-family: inherit;
  cursor: pointer;
  color: var(--cc-text);
}
.search-result:hover { background: var(--cc-bg-muted); }
.search-result.active { background: var(--cc-accent-soft); }
.search-result:focus-visible { outline: var(--cc-ring) solid var(--cc-accent); outline-offset: var(--cc-ring-offset); }
.search-result-icon {
  display: inline-flex; flex: 0 0 24px; width: 24px; height: 24px;
  align-items: center; justify-content: center; color: var(--cc-text-secondary);
}
.search-result-icon svg { display: block; }
.search-result-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.search-result-main strong { font-size: var(--cc-fs-sm); font-weight: var(--cc-fw-medium); }
.search-result-main small {
  font-size: var(--cc-fs-xs); color: var(--cc-text-secondary); line-height: var(--cc-lh-base);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-result-cat { flex: 0 0 auto; font-size: var(--cc-fs-xs); color: var(--cc-text-tertiary); }
.search-empty { padding: var(--cc-space-3) var(--cc-space-4); font-size: var(--cc-fs-sm); color: var(--cc-text-tertiary); }

/* ── 首页（intro + 平静两列 grid）────────────────────────── */
.home-main { padding-bottom: var(--cc-space-7); }
.home-intro { max-width: 680px; padding: var(--cc-space-7) 0 48px; }
.home-intro h1 { margin: 0; font-size: clamp(34px, 5vw, 44px); font-weight: 650; letter-spacing: var(--cc-ls-tight); line-height: 1.15; }
.home-intro p { margin: var(--cc-space-4) 0 0; color: var(--cc-text-secondary); font-size: var(--cc-fs-md); line-height: var(--cc-lh-lead); }
.tool-index h2 { margin: 0 0 var(--cc-space-4); font-size: var(--cc-fs-xl); font-weight: 650; letter-spacing: var(--cc-ls-tight); }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cc-space-3);              /* 12px */
}
.tool-tile {
  display: flex; align-items: flex-start; gap: var(--cc-space-3);
  min-height: 76px; padding: 16px 18px;
  background: var(--cc-bg); border: 1px solid var(--cc-border);
  border-radius: 12px; text-decoration: none; color: inherit;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.tool-tile:focus-visible { outline: var(--cc-ring) solid var(--cc-accent); outline-offset: var(--cc-ring-offset); }
.tool-tile:hover { background: var(--cc-bg-subtle); border-color: var(--cc-border-strong); }
.tool-tile-icon {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  width: 32px; height: 32px; color: var(--cc-text-secondary);
  transition: color 150ms ease;
}
.tool-tile-icon svg { display: block; }
.tool-tile:hover .tool-tile-icon { color: var(--cc-accent); }
.tool-tile-copy { display: flex; flex-direction: column; min-width: 0; gap: var(--cc-space-1); }
.tool-tile-copy strong { font-size: var(--cc-fs-base); font-weight: var(--cc-fw-semibold); letter-spacing: var(--cc-ls-tight); }
.tool-tile-copy small {
  font-size: var(--cc-fs-sm); color: var(--cc-text-secondary); line-height: var(--cc-lh-base);
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

.site-footer {
  padding: var(--cc-space-4) 0 var(--cc-space-6);
  color: var(--cc-text-tertiary);
  font-size: var(--cc-fs-sm);
  border-top: 1px solid var(--cc-border);
}

/* ── 工具页骨架 ─────────────────────────────────────────── */
.tool-page { max-width: 760px; margin: 0 auto; padding: var(--cc-space-7) 0 72px; }
.tool-heading { margin-bottom: var(--cc-space-6); }
.tool-heading h1 { margin: var(--cc-space-4) 0 0; font-size: var(--cc-fs-xl); font-weight: 650; letter-spacing: var(--cc-ls-tight); line-height: 1.15; }
.tool-heading p { margin: var(--cc-space-2) 0 0; color: var(--cc-text-secondary); font-size: var(--cc-fs-sm); line-height: var(--cc-lh-base); max-width: 62ch; }
.tool-back {
  display: inline-flex; align-items: center; gap: var(--cc-space-1);
  color: var(--cc-text-tertiary); font-size: var(--cc-fs-sm); font-weight: var(--cc-fw-medium);
  text-decoration: none;
}
.tool-back:hover { color: var(--cc-accent); }
.tool-back-icon { display: inline-flex; }
.tool-back-icon svg { display: block; }

.tool-workspace {
  display: grid;
  gap: var(--cc-space-4);              /* 16px */
}

/* ── 任务卡片（input / output）──────────────────────────── */
.task-card {
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-radius: 12px;
}
.task-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cc-space-2);
  padding: var(--cc-space-4) var(--cc-space-4) 0;   /* 16/20 区隔 */
}
.task-card-header h2 { margin: 0; font-size: var(--cc-fs-sm); font-weight: var(--cc-fw-semibold); color: var(--cc-text-secondary); letter-spacing: var(--cc-ls-wide); }
.task-card-body { padding: var(--cc-space-4); }
.task-card-body .field:last-child,
.task-card-body .row:last-child,
.task-card-body .conversion-axis:last-child,
.task-card-body .handoff:last-child { margin-bottom: 0; }
.task-card-body .advanced-disclosure:last-child { margin-top: var(--cc-space-4); }

/* 输出卡 body 用次级表面，弱于输入。 */
.output-card-body { padding-top: var(--cc-space-4); }

/* 复制按钮（图标，空则 disabled）。 */
.card-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid var(--cc-border-strong);
  background: var(--cc-bg); color: var(--cc-text-secondary);
  border-radius: var(--cc-radius-sm); cursor: pointer;
}
.card-icon-btn:hover:not(:disabled) { background: var(--cc-bg-muted); color: var(--cc-text); }
.card-icon-btn:disabled { opacity: .45; cursor: default; }
.card-icon-btn:focus-visible { outline: var(--cc-ring) solid var(--cc-accent); outline-offset: var(--cc-ring-offset); }
.card-icon-btn svg { display: block; }

/* ── 底部 action bar（input/output）─────────────────────── */
.action-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cc-space-3);
  padding: var(--cc-space-2) var(--cc-space-4) var(--cc-space-4);
  border-top: 1px solid var(--cc-border);
}
.action-group { display: flex; align-items: center; gap: var(--cc-space-2); }
.action-group-end { justify-content: flex-end; flex: 1 1 auto; }

.text-action {
  height: 44px; padding: 0 var(--cc-space-4);
  border: none; background: transparent; color: var(--cc-text-secondary);
  font-size: var(--cc-fs-sm); font-weight: var(--cc-fw-medium); font-family: inherit;
  border-radius: var(--cc-radius-md); cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.text-action:hover { background: var(--cc-bg-muted); color: var(--cc-text); }
.text-action:focus-visible { outline: var(--cc-ring) solid var(--cc-accent); outline-offset: var(--cc-ring-offset); }

/* ── 更多选项折叠 ───────────────────────────────────────── */
.advanced-disclosure { border-top: 1px solid var(--cc-border); }
.advanced-disclosure summary {
  cursor: pointer; list-style: none; padding: var(--cc-space-3) 0;
  color: var(--cc-text-secondary); font-size: var(--cc-fs-sm); font-weight: var(--cc-fw-medium);
}
.advanced-disclosure summary::-webkit-details-marker { display: none; }
.advanced-disclosure summary::before { content: '›'; display: inline-block; margin-right: var(--cc-space-2); transition: transform 150ms ease; }
.advanced-disclosure[open] summary::before { transform: rotate(90deg); }
.advanced-disclosure summary:hover { color: var(--cc-text); }
.advanced-body { padding-bottom: var(--cc-space-3); }
.advanced-body .field:last-child { margin-bottom: 0; }
.advanced-hint { display: block; margin-top: var(--cc-space-1); font-size: var(--cc-fs-sm); color: var(--cc-text-tertiary); }

/* ── 身份证：效验结论 + 摘要 + 详细折叠 ───────────────────── */
.validity-bar { display: flex; align-items: center; gap: var(--cc-space-2); margin-bottom: var(--cc-space-3); font-weight: var(--cc-fw-medium); }
.validity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc-success); flex: 0 0 auto; }
.validity-bar .is-warn { color: var(--cc-danger); }
.validity-dot.is-warn { background: var(--cc-danger); }

/* ── 年龄：优先呈现周岁 ─────────────────────────────────── */
.age-hero { display: flex; align-items: baseline; gap: var(--cc-space-2); margin-bottom: var(--cc-space-4); }
.age-hero-value { font-size: var(--cc-fs-2xl); font-weight: 650; letter-spacing: var(--cc-ls-tight); line-height: 1; color: var(--cc-text); }
.age-hero-note { color: var(--cc-text-secondary); font-size: var(--cc-fs-sm); }
.secondary-row { display: flex; gap: var(--cc-space-4); margin-top: var(--cc-space-4); color: var(--cc-text-secondary); font-size: var(--cc-fs-sm); }

/* ── 文本统计：层次化指标（主指标 -> 分组 -> 时长）──────────── */
.stat-hero { display: flex; align-items: baseline; gap: var(--cc-space-2); margin-bottom: var(--cc-space-4); }
.stat-hero-value { font-size: var(--cc-fs-2xl); font-weight: 650; letter-spacing: var(--cc-ls-tight); line-height: 1; color: var(--cc-text); font-variant-numeric: tabular-nums; }
.stat-hero-note { color: var(--cc-text-secondary); font-size: var(--cc-fs-sm); }
.stat-group { margin-top: var(--cc-space-4); }
.stat-group + .stat-group { padding-top: var(--cc-space-4); border-top: 1px solid var(--cc-border); }
.stat-group-label { font-size: var(--cc-fs-xs); font-weight: var(--cc-fw-medium); letter-spacing: var(--cc-ls-wide); color: var(--cc-text-tertiary); margin-bottom: var(--cc-space-2); }

/* 模式视图挂载点：内部可清空重建，不影响外层卡片。 */
.check-inline { display: inline-flex; align-items: center; gap: var(--cc-space-1); font-size: var(--cc-fs-sm); color: var(--cc-text-secondary); cursor: pointer; }

/* ── 换算轴（From / To + 居中 swap）────────────────────── */
.conversion-axis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  grid-template-areas: "from-label . to-label" "from swap to";
  align-items: center;
  column-gap: var(--cc-space-3);
  row-gap: var(--cc-space-2);
  margin-bottom: var(--cc-space-3);
}
.conversion-axis .axis-label {
  display: block;
  margin: 0;
  color: var(--cc-text-secondary);
  font-size: var(--cc-fs-sm);
  font-weight: var(--cc-fw-semibold);
}
.conversion-axis .axis-label-from { grid-area: from-label; }
.conversion-axis .axis-label-to { grid-area: to-label; }
.conversion-axis > .select { min-width: 0; height: 44px; }
.conversion-axis > .select:first-of-type { grid-area: from; }
.conversion-axis > .swap-control { grid-area: swap; align-self: center; }
.conversion-axis > .select:last-of-type { grid-area: to; }
.swap-control {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--cc-border-strong); background: var(--cc-bg);
  color: var(--cc-text-secondary); border-radius: var(--cc-radius-md); cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.swap-control:hover { background: var(--cc-bg-muted); color: var(--cc-accent); }
.swap-control:focus-visible { outline: var(--cc-ring) solid var(--cc-accent); outline-offset: var(--cc-ring-offset); }
.swap-control svg { display: block; }

/* ── 44px 控件（仅限工具页；不动共享 components.css 尺寸）── */
.tool-page :is(.input, .select, .dp-trigger) { height: 44px; }
.tool-page .cc-btn { height: 44px; }
.tool-page .cc-btn-ghost,
.tool-page .cc-btn-primary { padding: 0 var(--cc-space-4); }

/* ── 二维码预览 / 表面（保持可扫码）────────────────────── */
.qr-preview { display: flex; justify-content: center; align-items: center; min-height: 180px; }
.qr-surface {
  display: inline-flex;
  padding: var(--cc-space-3);
  background: #FFFFFF;
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md);
  box-shadow: var(--cc-shadow-sm);
  line-height: 0;
}
.qr-surface svg { display: block; width: 160px; height: 160px; }

/* ── 转换轴在窄屏保持单行，仅收紧间距 ───────────────────── */
@media (max-width: 420px) {
  .conversion-axis { column-gap: var(--cc-space-2); }
}

/* ── 响应式：3 个有意的断点 ─────────────────────────────── */
@media (max-width: 720px) {
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .search-shortcut { display: none; }
  .home-intro { padding-top: var(--cc-space-6); }
}
@media (max-width: 420px) {
  .tools-app { padding-inline: var(--cc-space-4); }
  .site-header-row { gap: var(--cc-space-2); }
  .site-brand-domain, .site-brand-sep { display: none; }
  .home-intro { padding: var(--cc-space-5) 0; }
  .tool-page { padding-top: var(--cc-space-5); }
}

/* ── 减少动态效果 ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tool-tile, .text-action, .card-icon-btn, .header-icon-btn, .swap-control { transition: none !important; }
}

/* ── 大文本输入（textstat）────────────────────────────────── */
.ta-lg { min-height: 200px; }

/* ── 收敛：task-card 是唯一表面，去掉结果/输出/panel 再套框 ── */
.tool-page .task-card .result,
.tool-page .task-card .output,
.tool-page .task-card .panel {
  margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
/* 需要等宽/换行特性的输出区域仍靠其自身类提供 */
.tool-page .task-card .output { font-family: var(--cc-font-mono); white-space: pre-wrap; word-break: break-all; overflow: auto; }

/* 禁用按钮状态（如 QR 下载前） */
.tool-page .cc-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; color: var(--cc-text-tertiary); }
.tool-page .cc-btn:disabled:hover { background: transparent; }

/* 遗漏的聚焦态：brand / 返回 / 更多选项 */
.site-brand:focus-visible, .tool-back:focus-visible,
.advanced-disclosure summary:focus-visible {
  outline: var(--cc-ring) solid var(--cc-accent);
  outline-offset: var(--cc-ring-offset);
}

/* ── 身份证：工具说明（安静内联）与区划提示 ───────────────── */ 
.tool-note {
  display: flex;
  align-items: flex-start;
  gap: var(--cc-space-2);
  margin-top: var(--cc-space-3);
  padding: 0;
  border: 0;
  color: var(--cc-text-tertiary);
  font-size: var(--cc-fs-xs);
  line-height: 1.55;
}
.tool-note-icon {
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid var(--cc-border-strong);
  border-radius: 50%;
  color: var(--cc-text-tertiary);
  font: 600 10px/1 var(--cc-font-sans);
}
.tool-note-copy { min-width: 0; }
.tool-note-copy p { margin: 0; }
.tool-note-copy p + p { margin-top: var(--cc-space-1); }
.tool-note .cc-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tool-note .cc-link:hover { color: var(--cc-accent); }
.region-warning {
  margin-top: var(--cc-space-3);
  color: var(--cc-text-secondary);
  font-size: var(--cc-fs-sm);
}

/* ── 出生属性 chips（属相 / 太阳星座）──────────────────────── */
.birth-profile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-2);
  margin-top: var(--cc-space-4);
  padding-top: var(--cc-space-4);
  padding-bottom: var(--cc-space-4); /* 给 chips 下方对称留白，避免紧贴紧随的分界线/折叠 */
  border-top: 1px solid var(--cc-border);
}
.profile-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--cc-space-2);
  min-height: 32px;
  box-sizing: border-box;
  padding: 6px var(--cc-space-3);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-full);
  background: var(--cc-bg-subtle);
  color: var(--cc-text);
  font-size: var(--cc-fs-sm);
}
.profile-chip-label { color: var(--cc-text-tertiary); font-size: var(--cc-fs-xs); }
.profile-chip strong { font-weight: var(--cc-fw-semibold); }

/* ── 跨工具联动链接（统一 pill 样式）───────────────────────── */
.handoff { margin-top: var(--cc-space-4); margin-bottom: var(--cc-space-4); }
.cross-link {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-1);
  min-height: 32px;
  padding: 0 var(--cc-space-3);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-full);
  background: var(--cc-bg);
  color: var(--cc-text-secondary);
  font-size: var(--cc-fs-sm);
  font-weight: var(--cc-fw-medium);
  line-height: 1;
  text-decoration: none;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.cross-link:hover { border-color: var(--cc-border-strong); background: var(--cc-bg-muted); color: var(--cc-text); }
.cross-link:focus-visible { outline: var(--cc-ring) solid var(--cc-accent); outline-offset: var(--cc-ring-offset); }
.cross-link-icon { display: inline-flex; color: var(--cc-text-tertiary); }
.cross-link-icon svg { display: block; }

/* ── 日期推算：一行四字段 ─────────────────────────────────── */
.shift-form-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(148px, auto) minmax(96px, .65fr) minmax(108px, .7fr);
  align-items: end;
  gap: var(--cc-space-3);
}
.shift-form-row > .field { min-width: 0; margin-bottom: 0; }
.shift-direction { width: max-content; margin-bottom: 0; }
.shift-direction button { padding-inline: var(--cc-space-3); }
/* 复用挂载容器（date / span 等工具模块使用） */
.tool-view-host { display: flex; flex-direction: column; }
.tool-view-host .field:last-child { margin-bottom: 0; }
.tool-view-host .hint { margin-top: var(--cc-space-1); }
@media (max-width: 720px) {
  .shift-form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .shift-start { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .shift-form-row { grid-template-columns: minmax(0, 1fr); }
  .shift-start { grid-column: auto; }
}

/* ── 万年历：农历转公历三字段（年/月/日）等宽对齐 ───────────── */
.lunar-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--cc-space-3);
}
.lunar-form-grid > .field { min-width: 0; margin-bottom: 0; }
.task-card-body .lunar-form-grid:last-child { margin-bottom: 0; }
@media (max-width: 520px) {
  .lunar-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 单位换算：数值与换算轴拉开层次 */
.unit-value-field { margin-bottom: var(--cc-space-4); }

/* ── 世界时间 ─────────────────────────────────────────────── */
.world-time-toolbar { position: relative; }
.world-time-search-wrap { position: relative; }
.world-time-search { padding-left: 42px; height: 44px; }
.world-time-search-icon { position: absolute; left: var(--cc-space-4); top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--cc-text-tertiary); pointer-events: none; }
.world-time-search-icon svg { display: block; }
.world-time-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 100%; min-width: 0; box-sizing: border-box; max-height: 360px; overflow: auto; padding: var(--cc-space-2); background: var(--cc-bg); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-md); box-shadow: var(--cc-shadow-lg); }
.world-time-result-section { padding: var(--cc-space-1) var(--cc-space-2); }
.world-time-result-label { color: var(--cc-text-tertiary); font-size: var(--cc-fs-xs); font-weight: var(--cc-fw-semibold); }
.world-time-option { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: var(--cc-space-2) var(--cc-space-2); background: transparent; border: none; border-radius: var(--cc-radius-sm); color: var(--cc-text); font-size: var(--cc-fs-sm); cursor: pointer; }
.world-time-option:hover { background: var(--cc-bg-muted); }
.world-time-option.active { background: var(--cc-accent-soft); box-shadow: inset 3px 0 0 var(--cc-accent); }
.world-time-option-state { color: var(--cc-text-tertiary); font-size: var(--cc-fs-xs); }
.world-time-capability { margin-top: var(--cc-space-2); color: var(--cc-text-tertiary); font-size: var(--cc-fs-sm); }
.world-city-region-title { margin: var(--cc-space-3) 0 var(--cc-space-1); color: var(--cc-text-tertiary); font-size: var(--cc-fs-xs); font-weight: var(--cc-fw-semibold); }
.world-city-list { }
.world-city-add { display: inline-flex; align-items: center; gap: var(--cc-space-2); padding: var(--cc-space-2) var(--cc-space-3); margin: 0 var(--cc-space-1) var(--cc-space-2) 0; background: var(--cc-bg); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-md); color: var(--cc-text); font-size: var(--cc-fs-sm); cursor: pointer; }
.world-city-add:hover { border-color: var(--cc-border-strong); background: var(--cc-bg-muted); }
.world-city-add-icon { display: inline-flex; color: var(--cc-accent); }
.world-city-add-icon svg { display: block; }
.world-country-chips { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); margin-bottom: var(--cc-space-2); }
.world-country-chip { display: inline-flex; flex-direction: column; gap: 2px; padding: var(--cc-space-2) var(--cc-space-3); background: var(--cc-bg); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-md); color: var(--cc-text); font-size: var(--cc-fs-sm); cursor: pointer; text-align: left; }
.world-country-chip:hover { border-color: var(--cc-border-strong); background: var(--cc-bg-muted); }
.world-country-chip.is-open { border-color: var(--cc-accent); background: var(--cc-accent-soft); }
.world-country-chip-name { font-weight: var(--cc-fw-semibold); }
.world-country-chip-meta { color: var(--cc-text-tertiary); font-size: var(--cc-fs-xs); }
.world-country-cities { margin: 0 0 var(--cc-space-2); }
.world-clock-meta { margin: 0 0 var(--cc-space-3); color: var(--cc-text-tertiary); font-size: var(--cc-fs-xs); }
.world-clock-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-space-3); }
.world-clock-item { min-width: 0; padding: var(--cc-space-4); background: var(--cc-bg-subtle); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-md); }
.world-clock-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cc-space-2); }
.world-clock-title { min-width: 0; }
.world-clock-city { font-size: var(--cc-fs-base); font-weight: var(--cc-fw-semibold); }
.world-clock-country { color: var(--cc-text-tertiary); font-size: var(--cc-fs-xs); }
.world-clock-remove { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; color: var(--cc-text-tertiary); border-radius: var(--cc-radius-sm); cursor: pointer; }
.world-clock-remove:hover { background: var(--cc-bg-muted); color: var(--cc-accent); }
.world-clock-remove:focus-visible { outline: var(--cc-ring) solid var(--cc-accent); outline-offset: var(--cc-ring-offset); }
.world-clock-remove svg { display: block; }
.world-clock-time { margin-top: var(--cc-space-3); display: block; font-size: clamp(28px, 5vw, 36px); line-height: 1; font-weight: 650; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.world-clock-date { margin-top: var(--cc-space-2); color: var(--cc-text-secondary); font-size: var(--cc-fs-sm); }
.world-clock-relative { margin-top: var(--cc-space-2); color: var(--cc-text-tertiary); font-size: var(--cc-fs-sm); }
@media (max-width: 600px) { .world-clock-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .world-clock-grid { grid-template-columns: minmax(0, 1fr); } }
.world-time-option:focus-visible, .world-city-add:focus-visible {
  outline: var(--cc-ring) solid var(--cc-accent);
  outline-offset: var(--cc-ring-offset);
}

/* ── 万年历：结果层级 / 建除值日说明 ──────────────────────── */
.cal-scope-note { margin-top: var(--cc-space-4); color: var(--cc-text-tertiary); font-size: var(--cc-fs-sm); line-height: 1.6; }
.calendar-hero { margin-bottom: var(--cc-space-3); }
.calendar-hero-date { font-size: var(--cc-fs-2xl); font-weight: 650; letter-spacing: var(--cc-ls-tight); line-height: 1.1; color: var(--cc-text); }
.calendar-hero-week { margin-top: var(--cc-space-1); color: var(--cc-text-secondary); font-size: var(--cc-fs-sm); }
.calendar-lunar-lead { margin: var(--cc-space-2) 0 var(--cc-space-4); padding: var(--cc-space-2) var(--cc-space-3); border-left: 3px solid var(--cc-accent); background: var(--cc-bg-subtle); color: var(--cc-text); font-size: var(--cc-fs-md); font-weight: var(--cc-fw-medium); }
.cal-jie-note { margin-top: var(--cc-space-4); padding-top: var(--cc-space-3); border-top: 1px solid var(--cc-border); color: var(--cc-text-tertiary); font-size: var(--cc-fs-sm); line-height: 1.6; }

/* ── 身份证：出生属性与日期解释 ──────────────────────────── */
/* 让属相/星座 chips 在“摘要”与下一节之间垂直居中，而不是被顶在上方、紧贴下划线 */
.idcard-result .birth-profile {
  margin-top: var(--cc-space-4);
  padding-top: var(--cc-space-4);
  padding-bottom: var(--cc-space-4); /* 关键：给 chips 下方对称留白，避免紧贴下划线 */
}
/* “详细信息”折叠在 handoff 链接之后，仍保留其正常顶线作为独立分节 */
.profile-chip-note { color: var(--cc-text-tertiary); font-size: var(--cc-fs-xs); margin-left: calc(var(--cc-space-1) * -1); }
.check-row { display: inline-flex; align-items: center; gap: var(--cc-space-2); margin-top: var(--cc-space-3); color: var(--cc-text-secondary); font-size: var(--cc-fs-sm); cursor: pointer; }
.check-row input { width: 15px; height: 15px; accent-color: var(--cc-accent); cursor: pointer; }
.region-warning.is-legacy { color: var(--cc-text-secondary); }

/* ── 工具不可用时的降级状态（如浏览器不支持中文农历历法）──────── */
.tool-unavailable { display: flex; }

/* ── 命理 / 占星 / 灵数 / MBTI 工具通用 ───────────────────── */
.section-label { margin: var(--cc-space-4) 0 var(--cc-space-3); font-size: var(--cc-fs-xs); font-weight: var(--cc-fw-medium); letter-spacing: var(--cc-ls-wide); color: var(--cc-text-tertiary); }

/* 结果主 hero（生命灵数 / 九星 / 玛雅） */
.nl-hero, .star-hero, .maya-hero { display: flex; align-items: center; gap: var(--cc-space-4); margin-bottom: var(--cc-space-4); }
.nl-hero-num, .star-hero-num { font-size: clamp(44px, 10vw, 64px); line-height: 1; font-weight: 650; color: var(--cc-accent); letter-spacing: -.02em; }
.nl-hero-label, .star-hero-label { font-size: var(--cc-fs-md); font-weight: var(--cc-fw-semibold); color: var(--cc-text); }
.nl-hero-note, .star-hero-note { margin-top: var(--cc-space-1); color: var(--cc-text-secondary); font-size: var(--cc-fs-sm); }
.nl-desc { margin-top: var(--cc-space-1); margin-bottom: var(--cc-space-4); color: var(--cc-text-secondary); font-size: var(--cc-fs-sm); }

/* 九星九宫 */
.nine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cc-space-2); margin: var(--cc-space-4) 0; max-width: 320px; }
.nine-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--cc-space-1); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-md); background: var(--cc-bg-subtle); }
.nine-cell.is-center { border-color: var(--cc-accent); background: color-mix(in srgb, var(--cc-accent) 10%, var(--cc-bg)); }
.nine-cell strong { font-size: var(--cc-fs-xl); color: var(--cc-text); }
.nine-palace { font-size: var(--cc-fs-xs); color: var(--cc-text-tertiary); }

/* 玛雅 */
.maya-tone { font-size: var(--cc-fs-sm); color: var(--cc-text-secondary); }
.maya-main { display: flex; align-items: center; gap: var(--cc-space-3); }
.maya-seal { font-size: var(--cc-fs-2xl); font-weight: 650; color: var(--cc-accent); }
.maya-kin { font-size: var(--cc-fs-sm); color: var(--cc-text-secondary); }
.maya-char { color: var(--cc-text-secondary); font-size: var(--cc-fs-sm); margin: 0 0 var(--cc-space-4); }

/* 星座三卡 */
.sign-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cc-space-3); margin: var(--cc-space-4) 0; }
.sign-card { padding: var(--cc-space-3); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-md); background: var(--cc-bg-subtle); }
.sign-card-label { font-size: var(--cc-fs-xs); color: var(--cc-text-tertiary); }
.sign-card-value { margin-top: var(--cc-space-2); font-size: var(--cc-fs-lg); font-weight: 650; color: var(--cc-text); }
.sign-card-note { margin-top: var(--cc-space-1); font-size: var(--cc-fs-xs); color: var(--cc-text-secondary); }
.sign-card-tag { display: inline-block; margin-top: var(--cc-space-2); font-size: var(--cc-fs-xs); color: var(--cc-text-tertiary); }
@media (max-width: 520px) { .sign-cards { grid-template-columns: minmax(0, 1fr); } }

/* 八字四柱 / 大运 */
.bazi-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cc-space-3); margin: var(--cc-space-4) 0; }
.bazi-pillar { padding: var(--cc-space-3); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-md); background: var(--cc-bg-subtle); text-align: center; }
.bazi-pillar-label { font-size: var(--cc-fs-xs); color: var(--cc-text-tertiary); }
.bazi-pillar-ganzhi { margin-top: var(--cc-space-2); font-size: var(--cc-fs-lg); font-weight: 650; color: var(--cc-text); }
.bazi-pillar-sub { margin-top: var(--cc-space-1); font-size: var(--cc-fs-xs); color: var(--cc-text-secondary); }
.dayun-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--cc-space-2); }
.dayun-col { padding: var(--cc-space-2); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-md); background: var(--cc-bg-subtle); text-align: center; }
.dayun-pillar { font-size: var(--cc-fs-md); font-weight: 650; color: var(--cc-text); }
.dayun-age { margin-top: var(--cc-space-1); font-size: var(--cc-fs-xs); color: var(--cc-text-secondary); }
@media (max-width: 520px) { .bazi-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dayun-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 紫微十二宫 */
.zw-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--cc-space-2); margin: var(--cc-space-4) 0; }
.zw-cell { aspect-ratio: .8; padding: var(--cc-space-2); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-sm); background: var(--cc-bg-subtle); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.zw-cell.is-ming { border-color: var(--cc-accent); }
.zw-cell.is-shen { border-color: var(--cc-success); }
.zw-branch { font-size: var(--cc-fs-xs); color: var(--cc-text-tertiary); }
.zw-tag { font-size: var(--cc-fs-sm); font-weight: var(--cc-fw-semibold); color: var(--cc-text); }
@media (max-width: 520px) { .zw-grid { grid-template-columns: repeat(4, 1fr); } }

/* MBTI */
.mbti-progress { font-size: var(--cc-fs-sm); color: var(--cc-text-secondary); margin-bottom: var(--cc-space-2); }
.mbti-q-title { font-size: var(--cc-fs-sm); color: var(--cc-text-tertiary); margin-bottom: var(--cc-space-1); }
.mbti-question { margin-bottom: var(--cc-space-2); font-size: var(--cc-fs-base); color: var(--cc-text); }
.mbti-scale { display: flex; flex-direction: column; gap: var(--cc-space-2); }
.mbti-poles { display: flex; justify-content: space-between; gap: var(--cc-space-3); font-size: var(--cc-fs-sm); color: var(--cc-text-secondary); }
.mbti-pole { flex: 1 1 0; }
.mbti-pole-a { text-align: left; }
.mbti-pole-b { text-align: right; }
.mbti-scale-row { display: flex; gap: var(--cc-space-1); }
.mbti-scale-btn { flex: 1 1 0; min-height: 44px; padding: 0 var(--cc-space-1); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cc-border-strong); border-radius: var(--cc-radius-md); background: var(--cc-bg); color: var(--cc-text); font-size: var(--cc-fs-xs); cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.mbti-scale-btn:hover { border-color: var(--cc-accent); }
.mbti-scale-btn.is-selected { border-color: var(--cc-accent); background: color-mix(in srgb, var(--cc-accent) 8%, var(--cc-bg)); font-weight: var(--cc-fw-medium); }
.mbti-scale-btn:focus-visible { outline: var(--cc-ring) solid var(--cc-accent); outline-offset: var(--cc-ring-offset); }
.mbti-nav { display: flex; gap: var(--cc-space-2); margin-top: var(--cc-space-3); }
.mbti-nav .text-action { flex: 1 1 auto; }
.mbti-honesty { margin-top: var(--cc-space-3); font-size: var(--cc-fs-xs); color: var(--cc-text-tertiary); line-height: 1.55; }
.mbti-result { display: flex; flex-direction: column; align-items: center; padding: var(--cc-space-4) 0; text-align: center; }
.mbti-type { font-size: clamp(40px, 9vw, 56px); font-weight: 650; letter-spacing: .02em; color: var(--cc-accent); }
.mbti-name { margin-top: var(--cc-space-2); font-size: var(--cc-fs-md); font-weight: var(--cc-fw-semibold); color: var(--cc-text); }
.mbti-desc { margin-top: var(--cc-space-2); color: var(--cc-text-secondary); font-size: var(--cc-fs-sm); max-width: 42ch; }
.mbti-bars { display: flex; flex-direction: column; gap: var(--cc-space-2); margin-top: var(--cc-space-4); }
.mbti-bar { display: grid; grid-template-columns: 3.5rem 1fr 3.5rem; align-items: center; gap: var(--cc-space-2); font-size: var(--cc-fs-xs); color: var(--cc-text-secondary); }
.mbti-bar-label { font-variant-numeric: tabular-nums; }
.mbti-bar-track { height: 6px; border-radius: var(--cc-radius-full); background: var(--cc-border); overflow: hidden; }
.mbti-bar-fill { display: block; height: 100%; background: var(--cc-accent); border-radius: var(--cc-radius-full); }

/* 命理/占星工具链接区（若融合工具内部使用一排链接时复用） */
.handoff-group { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); margin-top: var(--cc-space-3); }
.handoff-group .handoff { margin: 0; }

/* ── 命理·占星融合工具 ─────────────────────────────────────── */
.mingli-mode { width: 100%; }
.mingli-mode button { flex: 1 1 auto; }
/* 星座特点/影响 */
.sign-content { margin: var(--cc-space-3) 0 var(--cc-space-4); padding: var(--cc-space-3) var(--cc-space-4); border-left: 3px solid var(--cc-accent); background: var(--cc-bg-subtle); border-radius: 0 var(--cc-radius-md) var(--cc-radius-md) 0; }
.sign-content-head { font-weight: var(--cc-fw-semibold); color: var(--cc-text); }
.sign-content-meta { margin-left: var(--cc-space-2); font-weight: normal; font-size: var(--cc-fs-xs); color: var(--cc-text-tertiary); }
.sign-content p { margin: var(--cc-space-2) 0 0; color: var(--cc-text-secondary); font-size: var(--cc-fs-sm); line-height: 1.6; }
.sign-content-influence { }
/* 城市搜索组合框 */
.mingli-city-wrap { position: relative; }
.mingli-city-pop { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + var(--cc-space-1)); max-height: 220px; overflow: auto; background: var(--cc-bg); border: 1px solid var(--cc-border-strong); border-radius: var(--cc-radius-md); box-shadow: var(--cc-shadow-1); padding: var(--cc-space-1); }
.mingli-city-opt { display: flex; justify-content: space-between; align-items: center; gap: var(--cc-space-2); padding: var(--cc-space-2) var(--cc-space-2); border-radius: var(--cc-radius-sm); cursor: pointer; color: var(--cc-text); font-size: var(--cc-fs-sm); }
.mingli-city-opt.is-active, .mingli-city-opt:hover { background: var(--cc-bg-muted); }
.mingli-city-opt.is-disabled { opacity: .55; cursor: default; }
.mingli-city-opt.is-disabled:hover { background: transparent; }
.mingli-city-sub { color: var(--cc-text-tertiary); font-size: var(--cc-fs-xs); }