/* ============================================================
   Cairn 关键帧套件 · base.css（标准件候选 · 零业务耦合）
   目标：像一家正经的业务管理系统（会计所/律所/秘书公司常见 SaaS）
   —— 白底、浅灰分隔线、单一克制主色、表格/表单为主
   —— 无渐变、无插画、无 emoji、无大圆角卡片堆叠、无阴影泛滥

   ⚠️ 换客户只改 :root 里的 4 个变量（见下方"客户主题变量"注释块），
      不动本文件其余任何一行。这是本 kit 参数化的全部内容——
      颜色/logo/系统名是"同一个东西的不同取值" → 参数；
      导航项数量、侧栏分组、内容区结构 → 会改变页面骨架，
      不是参数，留给 frame.html + components/ 由渲染者手改（见 README §2）。
   ============================================================ */

:root {
  /* ---------------- 客户主题变量（换客户只改这里） ---------------- */
  --color-primary: #5c3a44;   /* ELLA-001 · 取自 logo_mono_plum.png 非白像素中位色（=均值），见 _common.md §一 */
  --font-family: -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --logo-height: 24px;        /* 客户 logo 显示高度，套件红线 ≤26px（见 check.sh 检查项 f） */
  --nav-user-label: "使用者";  /* 顶部导航右上角用户身份文字，默认占位，渲染者按帧内容改 */

  /* ---------------- 主色派生色（用 color-mix 自动生成，不再需要客户手调深/浅两档） ---------------- */
  --color-primary-dark: color-mix(in srgb, var(--color-primary) 82%, black);
  --color-primary-bg:   color-mix(in srgb, var(--color-primary) 12%, white);

  /* ---------------- 通用色板（与客户主色解耦，不随换客户变化） ----------------
     返工 2026-09-02（Jacob：對面老師是韓國人、藝術生出身，對美觀敏感）——
     「精緻的克制」方向（Toss/Kakao 那類乾淨感）：暖白底、細邊框、無陰影。
     本节只改 ELLA-001 這份客戶物理拷貝，不動共享套件原檔。 */
  --color-text: #221C1E;
  --color-text-secondary: #8A8286;
  --color-text-muted: color-mix(in srgb, var(--color-text-secondary) 62%, white);

  --color-border: #ECE8E6;
  --color-border-strong: color-mix(in srgb, var(--color-border) 76%, black);
  --color-bg: #ffffff;
  --color-bg-subtle: #FAF9F7;
  --color-bg-nav: #ffffff;

  --color-success: #0f4c3a;   /* 已完成/已收 —— 业务状态色，独立于品牌色，不随换客户变化 */
  --color-success-bg: #eaf2ef;
  --color-danger: #9a3412;    /* 未收/待处理 —— 克制的赭红，非亮红 */
  --color-danger-bg: #fdf2ee;
  --color-disabled: #9ca3af;
  --color-disabled-bg: #f3f4f6;

  --font-size-base: 14px;
  --font-size-sm: 12px;
  --font-size-title: 20px;
  --font-size-subtitle: 16px;

  --radius: 8px;   /* 返工 2026-09-02：3px→8px，一般组件（面板/输入/标签）用；按钮/缩略图另有更精确的局部覆写 */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 28px;  /* 返工 2026-09-02：整体留白 +15–20% */

  /* 手机/桌面断点。767px 是实测取值（见 shot.sh 头部注释的 Chrome 视口下限坑），
     不是随手挑的数字，改动前先重读那段坑记录。 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.8; /* 返工 2026-09-02：1.55→1.8，行距放宽 ~16% */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--color-text); }
h1 { font-size: var(--font-size-title); }
h2 { font-size: var(--font-size-subtitle); }
h3 { font-size: var(--font-size-base); font-weight: 600; }
p { margin: 0; }

/* ---------------- 顶部导航（窄条） ---------------- */
.topnav {
  height: 52px; /* 返工 2026-09-02：48px→52px */
  background: var(--color-bg-nav);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  gap: var(--space-5);
}

.topnav__logo { display: flex; align-items: center; white-space: nowrap; }

.topnav__logo img {
  height: var(--logo-height);
  max-height: 26px; /* 套件红线：不管 --logo-height 怎么设，视觉高度不得超过 26px */
  width: auto;
  display: block;
}

/* ---------------- 登录页专用 logo 容器（v0.1 新增）----------------
   无导航/侧栏的登录页（F1 一类）用这个，红线放宽到 ≤40px（check.sh 项 f
   的 .auth__logo 分支）——理由：登录页只有一张卡片居中，logo 是整屏视觉
   重心，26px 太小；有完整导航条的页面仍走 .topnav__logo 的 26px 红线，
   两条红线不是同一回事，不要混用。 */
.auth__logo { display: flex; align-items: center; justify-content: center; }

.auth__logo img {
  height: var(--logo-height);
  max-height: 40px; /* 套件红线：登录页 logo 视觉高度不得超过 40px */
  width: auto;
  display: block;
}

.topnav__menu { display: flex; gap: var(--space-4); flex: 1; }

.topnav__menu a {
  position: relative; /* 返工 2026-09-02：改配 ::after 圆头短线，见下 */
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 13px;
  padding: var(--space-1) 0;
}

.topnav__menu a.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

/* 返工 2026-09-02：tab 下划线由「整行 border-bottom」改「置中圆头短线」（精致克制） */
.topnav__menu a.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-primary);
}

.topnav__user { font-size: 13px; color: var(--color-text-secondary); white-space: nowrap; }

/* ---------------- 布局 ---------------- */
.layout { display: flex; min-height: calc(100vh - 48px); }

.sidebar {
  width: 176px;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  flex-shrink: 0;
}

.sidebar__group-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sidebar__item {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 13px;
  border-left: 2px solid transparent;
}

.sidebar__item.is-active {
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border-left-color: var(--color-primary);
  font-weight: 600;
}

.main { flex: 1; padding: var(--space-5); max-width: 1120px; }

/* ---------------- 页头 ---------------- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-4);
}

.page-header__title { display: flex; align-items: baseline; gap: var(--space-3); }

.breadcrumb {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

/* ---------------- 按钮行（标题下一行，静态截图不用 fixed，见 README 坑清单） ---------------- */
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family);
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 12px; /* 返工 2026-09-02：按钮固定 12px 圆角，不随一般 --radius 走 */
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: none; /* 精致的克制：不用阴影 */
}

.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #ffffff; font-weight: 600; letter-spacing: 0.01em; }
.btn-secondary { background: var(--color-bg); color: var(--color-text); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-disabled,
.btn:disabled { background: var(--color-disabled-bg); color: var(--color-disabled); border-color: var(--color-border); cursor: not-allowed; font-weight: 600; } /* v0.1 反向沉淀（source: S4「全部確認並入賬」），复用既有 --color-disabled* 变量，不新增变量 */

/* ---------------- 面板/区块 ---------------- */
.panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}

.panel__header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.panel__header h2 { font-size: 14px; font-weight: 600; }
.panel__header-actions { display: flex; align-items: center; gap: var(--space-3); }
.panel__body { padding: var(--space-4); }

/* ---------------- 内容区网格：左宽右窄两栏（材料表/待办等按此摆放） ---------------- */
.content-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  grid-template-areas:
    "primary side1"
    "primary side2";
  gap: var(--space-4);
  align-items: start;
}

.panel-primary { grid-area: primary; }
.panel-side1 { grid-area: side1; }
.panel-side2 { grid-area: side2; }

/* ---------------- 阶段条：桌面横版 ---------------- */
.stage-track {
  display: flex;
  align-items: flex-start;
  padding: var(--space-2) 0;
}

.stage-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 76px;
  position: relative;
  text-align: center;
}

.stage-step::before {
  content: "";
  position: absolute;
  top: 9px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--color-border-strong);
  z-index: 0;
}
.stage-step:first-child::before { content: none; }

.stage-step__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-bg);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--color-bg);
}

.stage-step__label {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.stage-step.is-done .stage-step__dot { background: var(--color-primary); border-color: var(--color-primary); }
.stage-step.is-done .stage-step__dot::after { content: "✓"; color: #fff; }
.stage-step.is-done::before { background: var(--color-primary); }
.stage-step.is-done .stage-step__label { color: var(--color-text-secondary); }

.stage-step.is-current .stage-step__dot { background: var(--color-bg); border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg); }
.stage-step.is-current .stage-step__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
.stage-step.is-current .stage-step__label { color: var(--color-primary); font-weight: 700; }

.stage-step.is-pending .stage-step__label { color: var(--color-text-muted); }

/* ---------------- 阶段条：手机竖版紧凑列表（九步全显示，不做横向滚动——
   横向滚动在静态截图上看不出"可滑动"，见旧版 F4 存疑记录，此版直接换掉） ---------------- */
.stage-vlist { list-style: none; margin: 0; padding: 0; }

.stage-vitem {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  position: relative;
  padding-bottom: var(--space-3);
}
.stage-vitem:last-child { padding-bottom: 0; }

.stage-vitem__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18px;
  flex-shrink: 0;
}

.stage-vitem__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: var(--color-bg);
  flex-shrink: 0;
}

.stage-vitem__line {
  width: 2px;
  flex: 1;
  background: var(--color-border-strong);
  margin-top: 2px;
}
.stage-vitem:last-child .stage-vitem__line { display: none; }

.stage-vitem__label {
  font-size: 13px;
  color: var(--color-text-muted);
  padding-top: 1px;
}

.stage-vitem.is-done .stage-vitem__dot { background: var(--color-primary); border-color: var(--color-primary); }
.stage-vitem.is-done .stage-vitem__dot::after { content: "✓"; color: #fff; }
.stage-vitem.is-done .stage-vitem__line { background: var(--color-primary); }
.stage-vitem.is-done .stage-vitem__label { color: var(--color-text-secondary); }

.stage-vitem.is-current .stage-vitem__dot { background: var(--color-bg); border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg); }
.stage-vitem.is-current .stage-vitem__dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }
.stage-vitem.is-current .stage-vitem__label { color: var(--color-primary); font-weight: 700; }

/* ---------------- 表格 ---------------- */
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.data-table th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  white-space: nowrap;
}

.data-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; }

/* ---------------- 状态标签 ---------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-weight: 600;
  white-space: nowrap;
}
.tag-success { background: var(--color-success-bg); color: var(--color-success); }
.tag-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.tag-muted { background: var(--color-disabled-bg); color: var(--color-text-muted); }
.tag-primary { background: var(--color-primary-bg); color: var(--color-primary); } /* 第四色：v0.1 反向沉淀（source: F3/F8「在服務」），用主色浅底，不新增变量 */

/* ---------------- 待办列表 ---------------- */
.todo-list { list-style: none; margin: 0; padding: 0; }

.todo-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}
.todo-item:last-child { border-bottom: none; }

.todo-checkbox {
  width: 15px;
  height: 15px;
  border: 1px solid var(--color-border-strong);
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
}
.todo-item.is-done .todo-checkbox { background: var(--color-primary); border-color: var(--color-primary); }
.todo-item.is-done .todo-checkbox::after { content: "✓"; }
.todo-item.is-done .todo-text { color: var(--color-text-muted); text-decoration: line-through; }

.todo-due { margin-left: auto; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }

/* ---------------- 基本信息条：桌面完整 / 手机折叠一行 ---------------- */
.info-bar { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.info-item { min-width: 120px; }
.info-item__label { font-size: 12px; color: var(--color-text-muted); margin-bottom: 2px; }
.info-item__value { font-size: 13px; color: var(--color-text); font-weight: 600; }
.info-item__value.is-empty { color: var(--color-text-muted); font-weight: 400; }

.info-compact {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow-x: auto;
}

/* ---------------- 最近记录（留痕） ---------------- */
.log-list { list-style: none; margin: 0; padding: 0; }
.log-item { padding: var(--space-1) 0; font-size: 12px; color: var(--color-text-secondary); display: flex; gap: var(--space-2); }
.log-item__time { color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }

/* ---------------- 文件链接 ---------------- */
.file-link { color: var(--color-primary); text-decoration: underline; font-size: 12px; }

/* ---------------- 材料表：手机两行式卡片（名称+状态一行，明细第二行小字） ---------------- */
.material-card { border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; }
.material-card:last-child { border-bottom: none; }
.material-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.material-card__name { font-size: 13px; font-weight: 600; color: var(--color-text); }
.material-card__meta { font-size: 12px; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 2px 10px; }

/* ============================================================
   以下到下一条大分隔线之间：v0.1 反向沉淀组件（2026-08-31，SEDX-001 15 帧）
   全部从帧里的内联 <style> 原样抽出、去客户耦合（改用 base.css 既有变量），
   帧原样保留自己的 <style>（同名 class 更晚出现在文档里，级联覆盖，视觉
   不受影响）——见 README §「变更记录」v0.1。每个组件在 components/*.html
   有一段独立示例 + 用法注释，直接整段复制去用，不用现翻这里。
   ============================================================ */

/* ---------------- 筛选标签行（source: F3/F9/S1，三个变体合一）----------------
   F3 用整行下划线（本版推荐用法，见 .filter-tabs--bordered）；F9/S1 原是无
   边线的简版。⚠️ 这里只把 .filter-tabs 基础规则收窄成三帧共同子集（display/
   gap/margin-bottom），边线+自动换行是可选加强、放进 .filter-tabs--bordered
   modifier——不直接塞进 .filter-tabs，是因为 CSS 级联按属性生效、不是整条
   规则被同名旧帧"挡住"：F9/S1 帧自己的 <style> 只声明了 display/gap/
   margin-bottom/font-size 这几条，如果 base.css 在 .filter-tabs 上多声明
   border-bottom/padding-bottom/flex-wrap，这些没被旧帧覆盖的属性会直接
   渗透生效、改变旧帧已出的截图（v0.1 开发中实测撞过这个坑，已改成这个安全
   写法，教训见 README「坑清单」）。新帧想要 F3 的边线版本，class 上加
   `filter-tabs--bordered`；只要 `filter-tabs` 就是最简版。 */
.filter-tabs {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.filter-tabs--bordered {
  flex-wrap: wrap;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.filter-tab { font-size: 13px; color: var(--color-text-secondary); text-decoration: none; }
.filter-tab.is-active { color: var(--color-primary); font-weight: 600; }

/* ---------------- 分组数字卡（source: F2「工作台」四张卡）---------------- */
.dash-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.dash-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.dash-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.dash-card__title { font-size: 13px; color: var(--color-text-secondary); font-weight: 600; }
.dash-card__num { font-size: 28px; font-weight: 700; color: var(--color-text); margin: var(--space-2) 0 4px; }
.dash-card__sub { font-size: 12px; color: var(--color-text-muted); min-height: 16px; }

/* ---------------- 表单：标签/输入框/必填星号/提示（source: F4「新增客戶」）---------------- */
.form-field { margin-bottom: var(--space-4); }
.form-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: 6px;
}
.form-required { color: var(--color-danger); font-weight: 600; }
.form-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: var(--font-family);
  color: var(--color-text);
  box-sizing: border-box;
}
.form-input::placeholder { color: var(--color-text-muted); }
.form-hint { font-size: 12px; color: var(--color-text-muted); } /* 不带 margin：F4 用 margin-top、F6 用 margin-bottom，方向随上下文而定，帧里自己按需加（同上「筛选标签行」注释里讲的级联渗透坑，这条不重复展开） */
.form-footnote { font-size: 12px; color: var(--color-text-muted); margin-top: var(--space-2); }

/* ---------------- 表单：多选文字标签（source: F4「服務類型」）---------------- */
.choice-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice-tag {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  padding: 5px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--color-text-secondary);
}

/* ---------------- 表单：单选清单（source: F6「歸到哪一項」）---------------- */
.choice-list { display: flex; flex-direction: column; gap: var(--space-2); }
.choice-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--color-text);
}
.choice-item__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  flex-shrink: 0;
}
.choice-item.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}
.choice-item.is-selected .choice-item__dot {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: inset 0 0 0 3px var(--color-bg);
}
.choice-item__suffix { color: var(--color-text-muted); }

/* ---------------- 虚线上传框（source: F6「拍照或選擇文件」）---------------- */
.upload-box {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius);
  padding: var(--space-5);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}

/* ---------------- 提醒卡：主色左边框（source: F7「法定節點」）---------------- */
.reminder-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
}
.reminder-card__title { font-size: 14px; font-weight: 600; color: var(--color-text); }
.reminder-card__sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

/* ---------------- 浅色框列表（source: F10「匯出包內容」）---------------- */
.light-box {
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-top: var(--space-4);
}
.light-box__title { font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-2); }
.light-box ul { list-style: none; margin: 0; padding: 0; }
.light-box li { font-size: 13px; color: var(--color-text-secondary); padding: 3px 0; font-family: ui-monospace, monospace; }

/* ---------------- 侧栏：标题+就地入口复合头（source: S3「類型」+「編輯類型」）----------------
   放在 <aside class="sidebar"> 最上面代替 .sidebar__group-title，其余
   .sidebar__item 列表照常用套件既有样式，本组件只补"标题旁带一个文字链"
   这一种复合头，"类型树"本身不是新组件。 */
.sidebar__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-4); }
.sidebar__header-title { font-size: var(--font-size-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.sidebar__header-action { font-size: 12px; color: var(--color-primary); text-decoration: underline; }

/* ---------------- 类型横向标签：手机版侧栏降级（source: S3）----------------
   桌面版侧栏 <=767px 被套件既有规则整体隐藏（见 .sidebar 的手机媒体查询），
   这里补手机版的等价入口——一行可换行的横向标签，默认隐藏，手机断点显示。 */
.type-tabs-mobile { display: none; flex-wrap: wrap; gap: 8px 10px; margin-bottom: var(--space-4); font-size: 13px; }
.type-tabs-mobile a { color: var(--color-text-secondary); text-decoration: none; padding: 4px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius); }
.type-tabs-mobile a.is-active { color: #fff; background: var(--color-primary); border-color: var(--color-primary); font-weight: 600; }

/* ---------------- 左列表+右预览两栏（source: S2「報表」左侧清单+右侧预览，去 report 耦合改通用名）---------------- */
.list-preview { display: flex; gap: var(--space-4); align-items: flex-start; }
.list-preview__list { width: 220px; flex-shrink: 0; }
.list-preview__main { flex: 1; min-width: 0; }

/* ---------------- 读出值确认行（source: S4「金額/日期/付款人」逐行确认）---------------- */
.confirm-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); gap: var(--space-3); }
.confirm-row:last-child { border-bottom: none; }
.confirm-row__label { font-size: 12px; color: var(--color-text-muted); width: 60px; flex-shrink: 0; }
.confirm-row__value { font-size: 14px; font-weight: 600; color: var(--color-text); flex: 1; }
.confirm-row__actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ---------------- 手机卡片通用样式（source: F9 記錄卡/S1 收款卡/S3 文件卡/S5 成員卡，四个降级合一）----------------
   这四种手机降级卡片原本各写一套几乎一样的 CSS（仅字号/颜色微差），
   v0.1 收敛成一组通用 BEM 片段：
     .m-card              一条记录（底部分隔线，最后一条不画线）
     .m-card__top          首行：左侧名称/主字段 + 右侧状态标签或次要值
     .m-card__name          首行左侧的粗体主字段（如客户名/文件名）
     .m-card__line          一行 13px 常规字重的正文（如「事项」）
     .m-card__meta           一行 12px 浅色小字，可重复多行（如「金额/日期」「角色/范围」）
     .m-card__footer          末行：左文字 + 右文字链，两端对齐（如「到期日 + 登記收款」）
   四个用法示例见 components/m-card.html，不是四套各自的 class。 */
.m-card { border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; }
.m-card:last-child { border-bottom: none; }
.m-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 4px; }
.m-card__name { font-size: 13px; font-weight: 600; color: var(--color-text); }
.m-card__line { font-size: 13px; color: var(--color-text); margin-bottom: 2px; }
.m-card__meta { font-size: 12px; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 2px 10px; margin-bottom: 4px; }
.m-card__meta:last-child { margin-bottom: 0; }
.m-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 12px; }

/* ============================================================
   桌面/手机双档显示：统一约定
   *-desktop 类：默认显示（各自天然 display 值，未强制覆盖）；<=767px 隐藏
   *-mobile  类：默认 display:none；<=767px 改为显示
   ============================================================ */
.info-mobile,
.stage-mobile,
.material-mobile {
  display: none;
}

@media (max-width: 767px) {
  .topnav { padding: 0 var(--space-3); gap: var(--space-3); }
  .topnav__menu { display: none; } /* 手机版菜单收进汉堡，此套件简化为隐藏，不做汉堡菜单交互 */
  .topnav__user { margin-left: auto; }

  .sidebar { display: none; }

  .main { padding: var(--space-3); max-width: 100%; }

  .page-header { flex-direction: column; align-items: stretch; }

  .panel__body { padding: var(--space-3); }

  .content-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "primary"
      "side1"
      "side2";
  }

  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: var(--space-2); }

  .info-desktop,
  .stage-desktop,
  .material-desktop {
    display: none;
  }

  .info-mobile { display: block; }
  .stage-mobile { display: block; }
  .material-mobile { display: block; }

  /* ---- v0.1 反向沉淀组件的手机断点规则（对应 base.css 上方同名组件） ---- */
  .dash-cards { grid-template-columns: repeat(2, 1fr); } /* source: F2 */
  .reminder-card { flex-direction: column; align-items: flex-start; gap: var(--space-2); } /* source: F7 */
  .list-preview { flex-direction: column; } /* source: S2 */
  .list-preview__list { width: 100%; }
  .type-tabs-mobile { display: flex; } /* source: S3，桌面版 .sidebar 已被上方规则整体隐藏 */
}