/* 养护闭环统一视觉。
 * 暖纸 / 茶绿 / 细本草线描，与 profile.css?v=visual-v2-20260928 主色一致。
 * 320 / 390 / 1280 三档断点统一在 600px 与 900px。
 */
:root {
  --care-paper: #fffdf7;
  --care-paper-soft: #fbf6ec;
  --care-ink: #293e34;
  --care-green: #284d3e;
  --care-green-soft: #6b8a78;
  --care-gold: #9b784c;
  --care-muted: #766f60;
  --care-line: #e3dac8;
  --care-shadow: 0 18px 50px #2a1f0e10;
  font-feature-settings: "palt" 1;
}

/* The unified navigation must fit without squeezing Chinese labels into
 * single-character columns when care adds three destinations. */
.header { height: auto; min-height: 94px; flex-wrap: wrap; gap: calc(16px * var(--care-spacing-scale, .5)) calc(28px * var(--care-spacing-scale, .5)); padding-top: calc(18px * var(--care-spacing-scale, .5)); padding-bottom: calc(18px * var(--care-spacing-scale, .5)); }
.header nav { height: auto; flex: 1 1 500px; min-width: 0; flex-wrap: wrap; gap: calc(10px * var(--care-spacing-scale, .5)) calc(18px * var(--care-spacing-scale, .5)); }
.header nav .nav-button { white-space: nowrap; padding: calc(8px * var(--care-spacing-scale, .5)) 0; min-height: 40px; }

html[data-care-closed="true"] body { background: var(--care-paper-soft); }
html[data-care-closed="true"] main > *:not(.care-closed-shell) { display: none !important; }

.care-closed-shell {
  max-width: 640px;
  margin: calc(64px * var(--care-spacing-scale, .5)) auto;
  padding: calc(36px * var(--care-spacing-scale, .5)) calc(28px * var(--care-spacing-scale, .5));
  border: 1px solid var(--care-line);
  border-radius: 22px;
  background: var(--care-paper);
  box-shadow: var(--care-shadow);
  font-family: var(--care-font-body, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif);
  color: var(--care-ink);
}
.care-closed-shell .care-closed-eyebrow {
  font-size: var(--care-closed-eyebrow-size, 12px); line-height: var(--care-closed-eyebrow-lh, 1.5); letter-spacing: 3px; color: var(--care-gold); margin: 0 0 calc(12px * var(--care-spacing-scale, .5));
}
.care-closed-shell h1 {
  font-family: var(--care-font-head, "SimSun", serif); font-weight: var(--care-weight-head, 500);
  font-size: var(--care-closed-title-size, 28px); line-height: var(--care-closed-title-lh, 1.4);
  letter-spacing: 2px; color: var(--care-green); margin: 0 0 calc(18px * var(--care-spacing-scale, .5));
}
.care-closed-shell .care-closed-copy {
  font-size: var(--care-closed-copy-size, 14px); line-height: var(--care-closed-copy-lh, 1.9); color: var(--care-muted); margin: 0 0 calc(18px * var(--care-spacing-scale, .5));
}
.care-closed-shell .care-closed-actions a {
  display: inline-block; min-height: 44px; line-height: 44px; padding: 0 calc(22px * var(--care-spacing-scale, .5));
  border: 1px solid var(--care-green); border-radius: 24px;
  color: var(--care-green); text-decoration: none; font-size: var(--care-closed-action-size, 14px); line-height: var(--care-closed-action-lh, 1.4);
  background: var(--care-paper);
}

.care-shell-nav {
  display: flex; flex-wrap: wrap; gap: calc(10px * var(--care-spacing-scale, .5)) calc(14px * var(--care-spacing-scale, .5)); align-items: center;
  border: 1px solid var(--care-line); border-radius: 18px;
  padding: calc(14px * var(--care-spacing-scale, .5)) calc(18px * var(--care-spacing-scale, .5)); margin: calc(16px * var(--care-spacing-scale, .5)) 0 calc(24px * var(--care-spacing-scale, .5));
  background: var(--care-paper);
  font-family: var(--care-font-body, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif);
  font-size: 13px; color: var(--care-muted);
}
.care-shell-nav a {
  color: var(--care-green); text-decoration: none;
  border: 1px solid var(--care-line); border-radius: 20px;
  padding: calc(8px * var(--care-spacing-scale, .5)) calc(14px * var(--care-spacing-scale, .5)); min-height: 36px; line-height: 20px;
  background: var(--care-paper);
}
.care-shell-nav a:hover, .care-shell-nav a:focus-visible {
  border-color: var(--care-green); outline: none;
}
.care-shell-nav a[aria-current="page"] {
  background: var(--care-green); color: var(--care-paper);
}
.care-shell-nav .care-shell-nav-spacer { flex: 1 1 auto; }

main.care-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: calc(28px * var(--care-spacing-scale, .5)) calc(22px * var(--care-spacing-scale, .5)) calc(64px * var(--care-spacing-scale, .5));
  /* 字体族不再本页强制：交给 care-tokens 的 --care-font-body（华文新魏）继承。*/
  color: var(--care-ink);
}
main.care-shell > a.back {
  display: inline-block; font-size: var(--care-fs-body-3); color: var(--care-green);
  text-decoration: none; margin-bottom: calc(18px * var(--care-spacing-scale, .5));
}
main.care-shell h1 {
  font-family: var(--care-font-head); font-weight: var(--care-weight-head);
  font-size: var(--care-fs-h1); line-height: var(--care-lh-title); letter-spacing: 2px;
  color: var(--care-green); margin: 0 0 calc(14px * var(--care-spacing-scale, .5));
}
main.care-shell > p.lede {
  font-size: var(--care-fs-subtitle); line-height: var(--care-lh-body-2); color: var(--care-muted);
  margin: 0 0 calc(12px * var(--care-spacing-scale, .5));
}
main.care-shell p.hint {
  font-size: var(--care-fs-body-3); color: var(--care-muted); line-height: var(--care-lh-small);
  margin: 0 0 calc(12px * var(--care-spacing-scale, .5));
}
main.care-shell #status {
  min-height: 24px; font-size: var(--care-fs-xs); line-height: var(--care-lh-small);
  color: #725b3c; margin: calc(8px * var(--care-spacing-scale, .5)) 0 calc(16px * var(--care-spacing-scale, .5));
  overflow-wrap: anywhere;
}
main.care-shell .actions {
  display: flex; flex-wrap: wrap; gap: calc(10px * var(--care-spacing-scale, .5)) calc(14px * var(--care-spacing-scale, .5));
  align-items: center; margin: calc(16px * var(--care-spacing-scale, .5)) 0;
}
main.care-shell .actions button,
main.care-shell .actions a {
  font: inherit; min-height: 44px; padding: calc(10px * var(--care-spacing-scale, .5)) calc(18px * var(--care-spacing-scale, .5));
  border-radius: 24px; border: 1px solid var(--care-green);
  background: var(--care-paper); color: var(--care-green);
  text-decoration: none; cursor: pointer;
}
main.care-shell .actions button.primary,
main.care-shell .actions a.primary {
  background: var(--care-green); color: var(--care-paper);
  border-color: var(--care-green);
}
main.care-shell .actions a.quiet,
main.care-shell .actions button.quiet {
  background: transparent; border-color: var(--care-line); color: var(--care-muted);
}
main.care-shell article.card {
  background: var(--care-paper);
  border: 1px solid var(--care-line);
  border-radius: 18px;
  padding: calc(22px * var(--care-spacing-scale, .5)) calc(22px * var(--care-spacing-scale, .5)) calc(18px * var(--care-spacing-scale, .5));
  margin: calc(16px * var(--care-spacing-scale, .5)) 0;
  box-shadow: var(--care-shadow);
}
main.care-shell article.card h2,
main.care-shell article.card h3 {
  font-family: var(--care-font-head); font-weight: var(--care-weight-head);
  font-size: var(--care-fs-h3); line-height: var(--care-lh-title);
  color: var(--care-green);
  margin: 0 0 calc(8px * var(--care-spacing-scale, .5));
  overflow-wrap: anywhere;
}
main.care-shell article.card p {
  margin: 0 0 calc(8px * var(--care-spacing-scale, .5));
  font-size: var(--care-fs-body-2); line-height: var(--care-lh-body-2);
  color: var(--care-ink);
  overflow-wrap: anywhere;
}
main.care-shell article.card .meta {
  font-size: var(--care-fs-xs); color: var(--care-gold); letter-spacing: 1px;
  margin: 0 0 calc(8px * var(--care-spacing-scale, .5)); text-transform: none;
}
main.care-shell article.card .source {
  font-size: var(--care-fs-body-3); color: var(--care-muted); margin-top: calc(6px * var(--care-spacing-scale, .5));
}

main.care-shell form {
  display: grid; gap: calc(14px * var(--care-spacing-scale, .5));
  background: var(--care-paper-soft);
  border: 1px solid var(--care-line);
  border-radius: 18px;
  padding: calc(22px * var(--care-spacing-scale, .5));
}
main.care-shell form label {
  display: grid; gap: calc(6px * var(--care-spacing-scale, .5)); font-size: var(--care-fs-body-3); color: var(--care-muted);
}
main.care-shell form input,
main.care-shell form select,
main.care-shell form textarea {
  font: inherit; font-size: var(--care-fs-body-2);
  padding: calc(10px * var(--care-spacing-scale, .5)) calc(12px * var(--care-spacing-scale, .5)); min-height: 44px;
  border: 1px solid var(--care-line); border-radius: 12px;
  background: var(--care-paper);
}
main.care-shell form textarea { min-height: 96px; resize: vertical; }
main.care-shell form button[type="submit"] {
  font: inherit; min-height: 44px; padding: calc(10px * var(--care-spacing-scale, .5)) calc(22px * var(--care-spacing-scale, .5));
  background: var(--care-green); color: var(--care-paper);
  border: 1px solid var(--care-green); border-radius: 24px;
  justify-self: end; cursor: pointer;
}
main.care-shell form [role="status"] { font-size: var(--care-fs-xs); color: var(--care-gold); }

main.care-shell dialog {
  border: 1px solid var(--care-line);
  border-radius: 22px;
  padding: calc(26px * var(--care-spacing-scale, .5));
  background: var(--care-paper);
  width: min(520px, calc(100% - 32px));
  max-height: 90dvh; overflow: auto;
  box-shadow: var(--care-shadow);
}
main.care-shell dialog::backdrop { background: #282e265c; }
main.care-shell dialog h2 {
  font-family: var(--care-font-head, "SimSun", serif); font-weight: 600;
  font-size: var(--care-fs-h3, 20px); line-height: var(--care-lh-title, 1.4);
  color: var(--care-green); margin: 0 0 calc(8px * var(--care-spacing-scale, .5));
}
main.care-shell dialog .hint { font-size: var(--care-fs-body-3); color: var(--care-muted); }

main.care-shell section.pill-row {
  display: flex; flex-wrap: wrap; gap: calc(8px * var(--care-spacing-scale, .5)); margin: calc(12px * var(--care-spacing-scale, .5)) 0;
}
main.care-shell section.pill-row a {
  font-size: var(--care-fs-xs); padding: calc(6px * var(--care-spacing-scale, .5)) calc(12px * var(--care-spacing-scale, .5)); border-radius: 16px;
  border: 1px solid var(--care-line); color: var(--care-green);
  background: var(--care-paper); text-decoration: none;
}

@media (max-width: 600px) {
  main.care-shell { padding: calc(18px * var(--care-spacing-scale, .5)) calc(14px * var(--care-spacing-scale, .5)) calc(48px * var(--care-spacing-scale, .5)); }
  main.care-shell h1 { font-size: 28px; }
  main.care-shell .actions button,
  main.care-shell .actions a { padding: calc(9px * var(--care-spacing-scale, .5)) calc(14px * var(--care-spacing-scale, .5)); font-size: var(--care-fs-body-3); }
  main.care-shell article.card { padding: calc(18px * var(--care-spacing-scale, .5)); }
}
@media (min-width: 900px) {
  main.care-shell { padding-top: calc(36px * var(--care-spacing-scale, .5)); }
}

/* UI归一：active 下弹窗/表单/关闭态卡片沿用公共 token；非 active 旧页面保持原值。*/
html[data-care-ui=active] main.care-shell dialog{border-radius:var(--care-dialog-radius,22px);max-height:var(--care-dialog-max-h,90dvh)}
html[data-care-ui=active] main.care-shell form input,html[data-care-ui=active] main.care-shell form select,html[data-care-ui=active] main.care-shell form textarea{min-height:var(--care-input-min-h,44px)}
html[data-care-ui=active] .care-closed-shell{border-radius:var(--care-card-radius,22px)}