/* ==========================================================================
   v9-refresh.css v2 — V8/V9 表单/列表重构层
   --------------------------------------------------------------------------
   v1：owner 2026-09-25 的 8 张重构图（shots-all 003-010）。
   v2：owner 2026-09-26 参考图（记录成长）提炼出的差异，应用到全部 8 页：
     1. 每字段一张扁平卡（v9-fcard），不再是大卡内分隔线行；
     2. 控件在标签下方，内嵌浅灰圆角框（v9-fcard__box），不是下划线裸输入；
     3. 标题特大超粗（32px/800），标签 15px/600 深色（原 13px 灰）；
     4. 色板：页底 #F3F1EE · 卡 #FFFFFF · 芯片米 #F1EDE6 · CTA 深棕 #4A3F35；
     5. 无「必填」角标；hint 进 placeholder（请输入… / 请选择）；
     6. 单位后缀（kg/cm）在控件框右内侧（v9-fcard__suffix）；
     7. 分段按钮：白底细边框 + 可见圆点，选中浅米底 + 实心点（原深色块）；
     8. 页头 v9-head：返回小圆片 + 大标题/副标题 + 右上角插画位；
     9. CTA 下方灰色居中说明（v9-actions__note）。

   加载方式：只由重构页面经 base.html 的 {% block page_css %} 引入。
   为什么自带令牌：v7-home.css §8 的 --v8-* 只定义在
   .reference-page.mobile-dashboard 上，其它页面引用未定义的 var() 会
   invalid at computed-value time（底栏变 transparent 的同款坑）。
   ========================================================================== */

.v9-page {
  --v9-page: #F3F1EE;
  --v9-card: #FFFFFF;
  --v9-box: #F5F2EE;
  --v9-chip: #F1EDE6;
  --v9-ink: #262019;
  --v9-ink-2: #6B6259;
  --v9-ink-3: #A69C90;
  --v9-dark: #4A3F35;
  --v9-dark-2: #3A322A;
  --v9-line: rgba(26, 22, 17, .075);
  --v9-tile-sage: #E2E7DD;
  --v9-tile-sand: #F0E7D8;
  --v9-tile-rose: #F3E3DE;
  --v9-tile-stone: #F1EDE6;
  --v9-seg-on: #EFE9DF;
  --v9-r-card: 16px;
  --v9-r-box: 12px;
  --v9-danger: #A96A61;
  color: var(--v9-ink);
}
.v9-page { background: var(--v9-page); }

/* --- §0 页头 v9-head ------------------------------------------------------ */
.v9-head { display: grid; gap: 14px; margin: 0 0 18px; }
.v9-head__row { display: flex; align-items: center; gap: 10px; }
.v9-head__back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  background: var(--v9-card);
  color: var(--v9-ink);
  box-shadow: 0 1px 4px rgba(28, 22, 16, .06);
}
.v9-head__back .ui-icon { width: 18px; height: 18px; }
.v9-head__name { font-size: var(--t-sub, 14px); font-weight: 600; color: var(--v9-ink); }
.v9-head__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 12px; }
.v9-head__title {
  margin: 0 0 6px;
  font-size: var(--t-page, 33px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--v9-ink);
}
.v9-head__sub { margin: 0; font-size: var(--t-sub, 14px); font-weight: 500; color: var(--v9-ink-2); }
.v9-head__side { display: grid; justify-items: center; gap: 4px; }
.v9-head__photo {
  width: 96px; height: 96px;
  object-fit: cover;
  border-radius: 20px;
  transform: rotate(3deg);
  box-shadow: 0 6px 18px rgba(28, 22, 16, .10);
}
.v9-head__caption {
  margin: 0;
  /* 手写注允许比基线再小一档 —— 与首页 10px 微标签同档。 */
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--v9-ink-2);
  text-align: center;
  transform: rotate(-2deg);
}

/* --- §1 分组标题（008/009/010 的组头，不再是包壳卡） ---------------------- */
.v9-group { display: flex; align-items: center; gap: 10px; margin: 20px 2px 10px; }
.v9-group__title { font-size: var(--t-section, 14.5px); font-weight: 700; color: var(--v9-ink); }
.v9-group__aside { margin-left: auto; font-size: var(--t-micro, 11px); color: var(--v9-ink-3); }

/* 兼容 v1 的 section 卡（004/005/007 列表页沿用） */
.v9-section {
  border-radius: var(--v9-r-card);
  background: var(--v9-card);
  padding: 16px;
  margin: 0 0 12px;
}
.v9-section__head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 12px; }
.v9-section__title { font-size: var(--t-section, 14.5px); font-weight: 700; color: var(--v9-ink); }
.v9-section__aside { margin-left: auto; font-size: var(--t-micro, 11px); color: var(--v9-ink-3); }
.v9-section__body { display: grid; gap: 4px; }

/* --- §2 图标芯片 ----------------------------------------------------------
   参考图：芯片统一米色底 + 深棕线性图标；tone 仍可覆盖。 */
.v9-chip {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--v9-chip);
  color: var(--v9-dark);
}
.v9-chip .ui-icon { width: 19px; height: 19px; }
.v9-chip--sage  { background: var(--v9-tile-sage); }
.v9-chip--sand  { background: var(--v9-tile-sand); }
.v9-chip--rose  { background: var(--v9-tile-rose); }
.v9-chip--stone { background: var(--v9-tile-stone); }
.v9-chip--sm { width: 32px; height: 32px; border-radius: 10px; }
.v9-chip--sm .ui-icon { width: 17px; height: 17px; }

/* --- §3 字段卡 v9-fcard（每字段一张扁平卡） -------------------------------- */
.v9-fcard {
  border-radius: var(--v9-r-card);
  background: var(--v9-card);
  padding: 14px 16px 16px;
  margin: 0 0 10px;
}
.v9-fcard__head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.v9-fcard__label { font-size: var(--t-body, 13px); font-weight: 650; color: var(--v9-ink); }
.v9-fcard__note { margin: 8px 2px 0; font-size: var(--t-caption, 11.5px); color: var(--v9-ink-3); }
.v9-fcard__error { margin: 8px 2px 0; font-size: var(--t-caption, 11.5px); color: var(--v9-danger); }
.v9-fcard--error .v9-fcard__box,
.v9-fcard--error .v9-seg__opt { box-shadow: inset 0 0 0 1.5px var(--v9-danger); }

/* 控件框：内嵌浅灰圆角框，无边框；聚焦时深色细环。 */
.v9-fcard__box { position: relative; display: flex; align-items: center; }
.v9-fcard__box input[type="text"],
.v9-fcard__box input[type="number"],
.v9-fcard__box input[type="date"],
.v9-fcard__box input[type="time"],
.v9-fcard__box input[type="datetime-local"],
.v9-fcard__box input[type="url"],
.v9-fcard__box select,
.v9-fcard__box textarea {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  border-radius: var(--v9-r-box);
  background: var(--v9-box);
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--v9-ink);
}
.v9-fcard__box textarea { min-height: 96px; resize: vertical; }
.v9-fcard__box input:focus,
.v9-fcard__box select:focus,
.v9-fcard__box textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--v9-dark-2); }
.v9-fcard__box ::placeholder { color: var(--v9-ink-3); }
.v9-fcard__box--suffix input,
.v9-fcard__box--suffix select { padding-right: 52px; }
.v9-fcard__suffix {
  position: absolute; right: 14px;
  font-size: var(--t-body, 13px); font-weight: 600; color: var(--v9-ink-2);
  pointer-events: none;
}

/* select：去原生箭头，换 v8 静色 chevron。 */
.v9-fcard__box select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6259' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 40px;
}

/* RadioSelect → 分段按钮组 v2：白底细边框 + 可见圆点；选中浅米底 + 实心点。 */
.v9-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.v9-seg__opt {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  border-radius: var(--v9-r-box);
  background: var(--v9-card);
  box-shadow: inset 0 0 0 1.25px rgba(26, 22, 17, .14);
  font-size: var(--t-body, 13px); font-weight: 600;
  color: var(--v9-ink-2);
  cursor: pointer;
}
.v9-seg__opt input {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; margin: 0; flex: none;
  border-radius: 50%;
  background: var(--v9-card);
  border: 1.5px solid #B9B0A5;
  cursor: pointer;
}
.v9-seg__opt.is-selected,
.v9-seg__opt:has(input:checked) {
  background: var(--v9-seg-on);
  box-shadow: none;
  color: var(--v9-ink);
}
.v9-seg__opt input:checked { border: 5.5px solid var(--v9-dark-2); }

/* CheckboxInput → 右侧开关（appearance:none 直接样式化 input 本体，可点可提交）。 */
.v9-fcard__box--switch { justify-content: flex-end; padding: 2px 0; }
.v9-fcard__box--switch input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  position: relative;
  width: 48px; height: 28px; margin: 0;
  border: 0; border-radius: 999px;
  background: #E5E0D8;
  transition: background .18s ease;
  cursor: pointer;
}
.v9-fcard__box--switch input[type="checkbox"]::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(28, 22, 16, .18);
  transition: transform .18s ease;
}
.v9-fcard__box--switch input[type="checkbox"]:checked { background: var(--v9-dark); }
.v9-fcard__box--switch input[type="checkbox"]:checked::after { transform: translateX(20px); }
.v9-fcard__box--switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--v9-ink-2); outline-offset: 2px; }

/* --- §4 主操作 ------------------------------------------------------------
   参考图：整宽深棕按钮 + 下方灰色居中说明。 */
.v9-actions { display: grid; gap: 8px; margin: 16px 0 0; }
.v9-actions__note { margin: 0; font-size: var(--t-caption, 11.5px); color: var(--v9-ink-3); text-align: center; }
.v9-actions__error { font-size: var(--t-body, 13px); color: var(--v9-danger); }
.v9-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--v9-dark);
  color: #fff;
  font: inherit;
  font-size: var(--t-sub, 15px);
  font-weight: 700;
  cursor: pointer;
  padding: 10px 18px;
}
.v9-cta:hover { background: var(--v9-dark-2); }
/* 保留产品既有的「主按钮吸底」行为（graphite .save position:sticky），
   只换成 v9 的深棕外观；吸底便于长表单随时提交。 */
.v9-page .record-form .save.v9-cta { position: sticky; bottom: 12px; z-index: 6; }

/* --- §5 行式信息行（004/005 列表页用） ------------------------------------ */
.v9-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 12px;
  padding: 12px 0;
}
.v9-row + .v9-row { border-top: 1px solid var(--v9-line); }
.v9-row__meta { min-width: 0; display: grid; gap: 2px; }
.v9-row__title { font-size: var(--t-body, 13px); font-weight: 650; color: var(--v9-ink); }
.v9-row__sub { font-size: var(--t-caption, 11.5px); color: var(--v9-ink-3); }
.v9-row__value { font-size: var(--t-body, 13px); color: var(--v9-ink-2); font-variant-numeric: tabular-nums; }

/* Django 默认 errorlist：统一成静语系的红，不继承 ul 圆点。 */
.v9-page .errorlist { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; }
.v9-page .errorlist li { font-size: var(--t-body, 13px); color: var(--v9-danger); }

/* v8 空态复用的颜色兜底（--v8-* 只定义在 .reference-page.mobile-dashboard）。 */
.v9-page .v8-empty-copy__title { color: var(--v9-ink); }
.v9-page .v8-empty-copy__text { color: var(--v9-ink-2); }

/* --- §5b 空态三件套（插画位 + 文案 + 「＋ 记录XX」入口，参考图 005） ------- */
.v9-emptyflow {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px 0 8px;
  text-align: center;
}
.v9-emptyflow__art {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--v9-chip);
  color: var(--v9-ink-2);
}
.v9-emptyflow__art .ui-icon { width: 30px; height: 30px; }
.v9-emptyflow__text { margin: 0; font-size: var(--t-note, 12px); color: var(--v9-ink-2); }
.v9-empty-cta {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--v9-box);
  color: var(--v9-ink);
  font-size: var(--t-label, 12.5px);
  font-weight: 700;
}
.v9-empty-cta .ui-icon { width: 15px; height: 15px; }
.v9-empty-cta:hover { background: var(--v9-seg-on); }
.v9-section__aside { display: inline-flex; align-items: center; gap: 3px; }
.v9-section__aside .ui-icon { width: 13px; height: 13px; }

/* --- §6 桌面端 -------------------------------------------------------------
   重构图只给了移动构图；桌面沿用同一语言放宽间距，不另造一套。 */
@media (min-width: 900px) {
  .v9-page { --v9-r-card: 18px; }
  .v9-fcard { max-width: 560px; }
  .v9-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .v9-head__title { font-size: 34px; }
}