/* app screen styles. Palette D: warm graphite + ink blue (ADR-0006).
   System CJK stack, no external font, no CDN — 零外部域名请求 (ADR-0001).
   布局：顶栏 + 三栏常驻（目录栏 / 表单 / 预览栏），收起目录 = 专注模式，见 ADR-0011。 */

:root {
  --ground: #f6f5f2;
  --surface: #ffffff;
  --raised: #f1efe9;
  --active: #eae7e0;
  --border: #e3e0d8;
  --rule: #edeae3;
  --control: #cdc9bf;
  --text: #20242a;
  --muted: #6b6a64;
  --faint: #6a6861;
  --accent: #234a6b;
  --accent-soft: #e8eef4;
  --accent-ink: #16324a;
  --primary: #20242a;
  --primary-ink: #ffffff;
  --pill-pos-bg: #dcfae5; --pill-pos-ink: #04250e;
  --pill-neg-bg: #ffedea; --pill-neg-ink: #831c1e;
  --pill-warn-bg: #fffbeb; --pill-warn-ink: #92400e;
  --pill-neutral-bg: #eae7e0; --pill-neutral-ink: #3d3d3d;
  --font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --fs-title: 24px; --fs-section: 16px; --fs-body: 14px; --fs-data: 13px; --fs-small: 12px;
  --pad: 20px; --gap: 16px; --card-pad: 20px;
  --radius-card: 8px; --radius-control: 6px;
  --control-height: 34px; --nav-row: 32px;
  --t-hover: 150ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: var(--fs-body)/20px var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num, .compat-row .data { font-variant-numeric: tabular-nums; }

/* 关键修复：作者样式里的 display 会盖过浏览器默认 [hidden]，导致
   「每个分组都冒出编辑/新建」的 bug。全局 !important 兜底。 */
[hidden] { display: none !important; }

/* ---------- 顶栏 ---------- */
.app { display: flex; flex-direction: column; min-height: 100svh; }
.topbar { display: flex; align-items: center; gap: 22px; min-height: 56px; padding: 0 var(--pad); border-bottom: 1px solid var(--border); background: var(--surface); }
.topbar-brand { font-size: var(--fs-section); font-weight: 600; white-space: nowrap; }
.topbar-sub { margin-left: 8px; color: var(--faint); font-size: var(--fs-small); font-weight: 400; }
.topnav { display: flex; align-items: center; gap: 4px; }
.nav-item { display: inline-flex; align-items: center; height: var(--nav-row); padding: 0 12px; border-radius: var(--radius-control); color: var(--muted); font-size: var(--fs-body); cursor: pointer; white-space: nowrap; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.nav-item:hover { background: var(--raised); color: var(--text); }
.nav-item[aria-current="page"] { background: var(--active); color: var(--text); font-weight: 500; }
.topbar-status { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: var(--fs-data); white-space: nowrap; }
.dot-sep { color: var(--control); }
.btn.tiny { height: 28px; padding: 0 10px; font-size: var(--fs-small); }

/* ---------- stage：三栏常驻（ADR-0011 / Q1 / Q7） ----------
   expanded  = 目录栏 420px + 表单 1fr + 预览栏 400px
   collapsed = 专注模式：44px 窄条 + 表单 1fr + 预览栏 400px
   plain     = 版本管理 / 回收站 / 备份整幅面板，预览不参与
   预览栏在编辑类视图常驻，不再随目录收起而隐藏。 */
.stage { display: grid; gap: var(--gap); padding: var(--pad); align-items: start; min-width: 0; }
.stage.expanded { grid-template-columns: 420px minmax(0, 1fr) 400px; }
.stage.collapsed { grid-template-columns: 44px minmax(0, 1fr) 400px; }
.stage.plain { grid-template-columns: minmax(0, 1fr); }

/* 表单吃满 1fr：不再限宽 720px（旧规则会让列内留大片空白，Q2 / Q7） */
.editor-panel { min-width: 0; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--card-pad); min-width: 0; }
.panel header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel h2 { font-size: var(--fs-section); line-height: 1.3; font-weight: 600; }
.panel .meta { color: var(--faint); font-size: var(--fs-small); }

/* ---------- 可收缩目录 ---------- */
.catalog { padding: 12px; }
.catalog-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.catalog-head h2 { font-size: var(--fs-body); font-weight: 600; }
.catalog-head .meta { margin-left: auto; }
.catalog-toggle, .rail-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--control); border-radius: 4px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }
.catalog-toggle:hover, .rail-btn:hover { background: var(--raised); color: var(--text); }
.filters { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.filters .input[type="search"] { flex: 1 1 100%; }
/* 字段筛选 / 兼容状态两个下拉并排各 50%（Q8） */
.filter-row { flex: 1 1 100%; display: flex; gap: 8px; }
.filter-row .input { flex: 1 1 50%; width: 50%; min-width: 0; }
.record-list { display: grid; gap: 2px; max-height: calc(100svh - 240px); overflow-y: auto; }
/* 记录卡片改为单列纵向堆叠：首行姓名 + 操作，第二行备注 + 双时间，
   单位 / 职位各占整行 3 行，末行电话 + ECC。取消所有单行 ellipsis（Q10）。 */
.rec-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px 0; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-control); cursor: pointer; }
.rec-row:hover { background: var(--raised); }
.rec-row[aria-selected="true"] { background: var(--active); border-color: var(--control); }
.rec-name { font-size: var(--fs-data); font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.rec-org, .rec-title { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-small); line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.rec-title { color: var(--faint); }
.rec-meta { grid-column: 1 / -1; color: var(--faint); font-size: 11px; overflow-wrap: anywhere; line-height: 1.4; }
.rec-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.rec-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; background: var(--pill-pos-bg); color: var(--pill-pos-ink); white-space: nowrap; }
.rec-badge.warn { background: var(--pill-warn-bg); color: var(--pill-warn-ink); }
.btn.mini { height: 24px; padding: 0 8px; font-size: var(--fs-small); border-color: var(--border); }
.catalog-rail { display: none; flex-direction: column; align-items: center; gap: 12px; padding-top: 4px; }
.rail-text { writing-mode: vertical-rl; color: var(--faint); font-size: var(--fs-small); letter-spacing: 2px; }
.stage.collapsed .catalog { padding: 8px 4px; }
.stage.collapsed .catalog-head { margin-bottom: 0; }
.stage.collapsed .catalog-head h2, .stage.collapsed .catalog-head .meta,
.stage.collapsed .catalog-toggle, .stage.collapsed .catalog-body { display: none; }
.stage.collapsed .catalog-rail { display: flex; }
.empty-hint { color: var(--faint); font-size: var(--fs-data); padding: 14px 0 4px; }

/* ---------- 编辑器 ---------- */
.editor-empty { padding: 48px 12px; text-align: center; color: var(--muted); }
.editor-empty h2 { font-size: var(--fs-section); margin-bottom: 8px; color: var(--text); }
.save-state { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: var(--fs-data); white-space: nowrap; }
.save-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.save-dot.pending { background: var(--pill-warn-ink); }
.save-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; color: var(--faint); font-size: var(--fs-data); }
.unsaved-note { display: inline-flex; align-items: center; gap: 7px; color: var(--pill-warn-ink); font-size: var(--fs-data); }
.save-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.leave-hint { margin-top: 10px; color: var(--muted); font-size: var(--fs-data); }

/* ---------- 控件 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-height); padding: 0 12px; border-radius: var(--radius-control); border: 1px solid var(--control); background: var(--surface); font-size: var(--fs-body); font-weight: 500; cursor: pointer; transition: background-color var(--t-hover) ease; white-space: nowrap; }
.btn:hover { background: var(--raised); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.btn.primary:hover { background: #000; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.danger { color: var(--pill-neg-ink); }
.btn.danger:hover { background: var(--pill-neg-bg); border-color: var(--pill-neg-ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.input, select.input, textarea.input { height: var(--control-height); padding: 0 10px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); font-size: var(--fs-body); min-width: 0; }
textarea.input { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; max-width: 100%; line-height: 1.5; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-data); color: var(--muted); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-grid .wide { grid-column: 1 / -1; }
.pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: var(--fs-small); font-weight: 500; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); white-space: nowrap; }
.pill.pos { background: var(--pill-pos-bg); color: var(--pill-pos-ink); }
.pill.warn { background: var(--pill-warn-bg); color: var(--pill-warn-ink); }

/* ---------- 参数 ---------- */
.section-title { margin: 20px 0 10px; font-size: var(--fs-body); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.param-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.param-control { display: grid; gap: 4px; }
.param-control .input { width: 100%; }
.base { color: var(--faint); font-size: var(--fs-small); }
.advanced { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule); }
.advanced > summary { display: flex; align-items: center; gap: 10px; min-height: 30px; list-style: none; cursor: pointer; font-size: var(--fs-body); font-weight: 600; }
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 16px; font-weight: 400; }
.advanced[open] > summary::after { content: "\2212"; }
.adv-meta { color: var(--faint); font-size: var(--fs-data); font-weight: 400; }
.adv-body { margin-top: 14px; }
.tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1px solid var(--control); border-radius: 50%; color: var(--muted); font-size: var(--fs-small); line-height: 1; cursor: help; }
.tip-bubble { position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 236px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font-size: var(--fs-data); line-height: 1.55; font-weight: 400; display: none; box-shadow: 0 6px 20px rgba(32, 36, 42, 0.12); }
.tip:hover .tip-bubble, .tip:focus .tip-bubble, .tip:focus-within .tip-bubble { display: block; }

/* ---------- 中心图 ---------- */
.upload { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--raised); }
.upload-thumb { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border: 1px solid var(--control); border-radius: 4px; background: var(--surface); overflow: hidden; }
.upload-thumb img { width: 100%; height: 100%; object-fit: contain; }
.upload-body { min-width: 0; display: grid; gap: 6px; }
.upload-name { font-size: var(--fs-body); font-weight: 500; }
.upload-note { color: var(--muted); font-size: var(--fs-data); }
.upload-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }

/* ---------- 预览与兼容自检（signature element） ---------- */
/* 预览纵向两行：二维码在上居中（280–320px），兼容自检条紧随其下（Q3）。
   栏位常驻、高度随内容走，不拉伸填满列高。 */
.preview-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.qr-block { min-width: 0; }
.qr-stage { display: grid; place-items: center; width: 100%; max-width: 320px; margin: 0 auto; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); }
.qr-stage img { width: 100%; height: auto; image-rendering: pixelated; }
.qr-placeholder { min-height: 120px; display: grid; place-items: center; width: 100%; color: var(--muted); font-size: var(--fs-data); text-align: center; border: 1px dashed var(--control); border-radius: 4px; }
.qr-caption { margin-top: 8px; color: var(--faint); font-size: var(--fs-data); text-align: center; }
.qr-guide { display: grid; gap: 12px; justify-items: center; padding: 20px 12px; color: var(--muted); font-size: var(--fs-data); text-align: center; border: 1px dashed var(--control); border-radius: var(--radius-control); }
.qr-guide p { line-height: 1.6; }
.compat-block { min-width: 0; }
.compat-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.compat-label { font-size: var(--fs-body); font-weight: 600; }
.compat-rows { display: grid; margin: 8px 0 12px; }
.compat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 28px; padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-data); }
.compat-row:last-child { border-bottom: 0; }
.compat-row span { color: var(--muted); }
.compat-row b { font-weight: 500; text-align: right; }
.compat-row .data { color: var(--accent-ink); font-weight: 600; }
.meter { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width var(--t-hover) ease; }
.meter-label { margin-top: 6px; color: var(--muted); font-size: var(--fs-data); }
.compat-note { margin-top: 12px; padding: 8px 10px; border-radius: var(--radius-control); background: var(--pill-warn-bg); color: var(--pill-warn-ink); font-size: var(--fs-data); }
.qr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cap-note { margin-top: 10px; color: var(--muted); font-size: var(--fs-data); line-height: 1.55; }
.store-note { margin-top: 14px; padding: 10px 12px; border-radius: var(--radius-control); background: var(--pill-warn-bg); color: var(--pill-warn-ink); font-size: var(--fs-data); line-height: 1.55; }

/* ---------- 版本记录 / 备份 ---------- */
.rows { display: grid; margin-top: 12px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0; font-size: var(--fs-data); flex-wrap: wrap; }
.row + .row { border-top: 1px solid var(--rule); }
.row .r-name { min-width: 0; display: grid; gap: 2px; }
.row .r-note { color: var(--muted); font-size: var(--fs-small); }
.row .r-meta { color: var(--faint); font-size: var(--fs-small); white-space: nowrap; text-align: right; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.version-fields { display: none; flex: 1 0 100%; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-control); background: var(--raised); color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.version-fields.open { display: block; }
.import-result { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-control); font-size: var(--fs-data); }
.import-result.ok { background: var(--pill-pos-bg); color: var(--pill-pos-ink); }
.import-result.err { background: var(--pill-neg-bg); color: var(--pill-neg-ink); }

/* ---------- 响应式 ---------- */
/* 中等窗口（900–1359）：默认由 JS 收起目录进专注模式；若用户手动展开，
   目录栏收窄到 260–320px、预览栏 360px，尽量不挤爆表单（Q7）。 */
@media (min-width: 900px) and (max-width: 1359px) {
  .stage.expanded { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) 360px; }
  .stage.collapsed { grid-template-columns: 44px minmax(0, 1fr) 360px; }
}
/* 窄屏单列堆叠：预览在表单下方常驻，不需要收起目录（Q6）。 */
@media (max-width: 899px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .topbar-status { width: 100%; margin-left: 0; justify-content: flex-end; }
  .stage.expanded, .stage.collapsed, .stage.plain { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .stage.collapsed .catalog { padding: 12px; }
  .stage.collapsed .catalog-head { margin-bottom: 12px; }
  .stage.collapsed .catalog-head h2, .stage.collapsed .catalog-head .meta, .stage.collapsed .catalog-toggle { display: inline-flex; }
  .stage.collapsed .catalog-head .meta { margin-left: auto; }
  .stage.collapsed .catalog-body { display: block; }
  .stage.collapsed .catalog-rail { display: none; }
  .record-list { max-height: 260px; }
}
@media (max-width: 559px) {
  .app .field-grid, .app .param-grid, .app .preview-body, .app .adv-body .param-grid { grid-template-columns: minmax(0, 1fr); }
  .app .qr-stage { max-width: 260px; width: 100%; margin: 0 auto; }
  .topnav { width: 100%; overflow-x: auto; }
  .btn { flex: 1; }
  .tip-bubble { width: min(236px, 80vw); }
}

/* ---------- 记录卡片首行 / 第二行（Q10 重排） ---------- */
.rec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.rec-head .rec-name { flex: 1 1 auto; min-width: 0; }
.rec-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.rec-note { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 11px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.rec-dates { flex: 0 0 auto; margin-left: auto; color: var(--faint); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- 版本管理：按记录筛选条（Q6） ---------- */
.version-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--accent-soft); border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-data); }
.version-filter b { font-weight: 600; }

/* ---------- 回收站：批量勾选 + 行内字段展开（Q13 / Q14） ---------- */
.trash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--raised); }
.check-all { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-data); cursor: pointer; }
.trash-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; font-size: var(--fs-data); flex-wrap: wrap; }
.trash-row + .trash-row { border-top: 1px solid var(--rule); }
.trash-row > input[type="checkbox"] { flex: none; width: 15px; height: 15px; cursor: pointer; }
.trash-row .t-name { min-width: 0; display: grid; gap: 2px; flex: 1 1 200px; }
.trash-row .t-meta, .trash-row .t-sub { color: var(--faint); font-size: var(--fs-small); }
.trash-row .t-sub { color: var(--muted); }
.trash-fields { display: none; flex: 1 0 100%; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-control); background: var(--raised); color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.trash-fields.open { display: block; }

/* ---------- PWA：有新版本提示条（ADR-0012） ----------
   用 class 控制显隐，不依赖 [hidden]，避免被布局类覆盖的历史坑。 */
.pwa-update { display: none; position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); box-shadow: 0 8px 28px rgba(32,36,42,.18); font-size: var(--fs-data); color: var(--text); }
.pwa-update.is-visible { display: flex; }
.pwa-update-close { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; }