:root {
  --blue: #0093dd;
  --blue-deep: #006fa8;
  --blue-soft: #e8f6fc;
  --yellow: #f1a400;
  --yellow-soft: #fff5d8;
  --ink: #1f2937;
  --muted: #5f6b7a;
  --line: #dce4ea;
  --surface: #ffffff;
  --background: #f5f6f8;
  --danger: #b42318;
  --radius: 16px;
  --shadow: 0 12px 34px rgba(24, 52, 70, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--background);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 50% -20%, #e6f6fd 0, var(--background) 36rem); line-height: 1.55; }
button, input { font: inherit; }
button { touch-action: manipulation; }
a { color: var(--blue-deep); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid rgba(0, 147, 221, 0.28); outline-offset: 2px; }

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 8px 12px; color: #fff; background: var(--blue-deep); transform: translateY(-160%); border-radius: 8px; }
.skip-link:focus { transform: none; }
.page-shell { width: min(1120px, calc(100% - 32px)); margin: 24px auto 48px; }

.brand-header { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 22px 24px; overflow: hidden; color: #fff; background: var(--blue); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0, 113, 168, 0.2); }
.brand-header::after { content: ""; position: absolute; right: -70px; bottom: -116px; width: 250px; height: 250px; border: 36px solid rgba(255,255,255,.11); border-radius: 50%; pointer-events: none; }
.brand-logo { position: relative; z-index: 1; width: 68px; height: 68px; object-fit: contain; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 5px 14px rgba(18, 71, 98, 0.2); }
.brand-copy { position: relative; z-index: 1; min-width: 0; }
.brand-copy h1 { margin: 0 0 3px; font-size: clamp(1.45rem, 4vw, 2rem); line-height: 1.2; letter-spacing: -.02em; }
.brand-copy p { margin: 0; color: rgba(255,255,255,.92); font-size: .88rem; }
.brand-kicker { margin-bottom: 3px !important; font-weight: 700; }
.privacy-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; max-width: 150px; font-size: .78rem; color: #fff; }
.privacy-dot { width: 9px; height: 9px; flex: 0 0 auto; border: 2px solid #fff; border-radius: 50%; background: var(--yellow); }
.account-area { position: relative; z-index: 1; display: grid; justify-items: end; gap: 8px; }
/* 医生云端工作区只在资料页中、医生登录后显示；页首不重复展示旧版登录 / 同步状态栏。 */
body.ui-tool-shell .brand-header.legacy-action-bar { display: none !important; }
.brand-header.legacy-action-bar::after { display: none; }
.brand-header.legacy-action-bar .privacy-note { color: var(--muted); }
.brand-header.legacy-action-bar .privacy-dot { border-color: var(--blue); }
.auth-status { max-width:180px; overflow:hidden; color:#fff; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.auth-sign-out { min-height:30px; padding:5px 10px; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.55); border-radius:8px; font-size:.72rem; cursor:pointer; }
.auth-sign-out:hover { color:#173243; background:#fff; }
.auth-block { display:none; }
body.auth-pending .page-shell { visibility:hidden; }
body.auth-pending .auth-block, body.auth-blocked .auth-block { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; color:var(--ink); background:#f5f6f8; text-align:center; }
.auth-block > div { width:min(100%,420px); padding:34px; background:#fff; border-radius:14px; box-shadow:0 16px 42px rgba(18,61,89,.15); }
.auth-block img { width:92px; height:auto; padding:5px 8px; background:#fff; border-radius:8px; }
.auth-block h1 { margin:20px 0 8px; color:var(--blue-deep); font-size:1.38rem; }
.auth-block p { margin:0; color:var(--muted); line-height:1.65; }

main { display: grid; min-width: 0; gap: 16px; margin-top: 16px; }
.workspace-section { min-width: 0; padding: 26px 28px; background: color-mix(in srgb, var(--surface) 96%, #e9f7fd); border: 1px solid rgba(209, 224, 233, .72); border-radius: var(--radius); box-shadow: var(--shadow); }
.workspace-inactive { display: none !important; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.section-heading h2 { margin: 0; color: var(--ink); font-size: 1.16rem; line-height: 1.25; }
.section-kicker { margin: 0 0 4px; color: var(--blue-deep); font-size: .78rem; font-weight: 700; }
.section-help { max-width: 390px; margin: 0; color: var(--muted); font-size: .8rem; text-align: right; }
.required-mark { color: var(--danger); }

.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; }
.field { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: #4a5665; font-size: .81rem; font-weight: 600; }
.field input { width: 100%; height: 44px; padding: 8px 11px; color: var(--ink); background: #fff; border: 1px solid #cbd5dd; border-radius: 9px; }
.field input::placeholder { color: #8a96a3; }
.field input:hover { border-color: #93a4b1; }
.field input:focus { border-color: var(--blue); outline: 3px solid rgba(0,147,221,.14); }
.field input[aria-invalid="true"] { border-color: var(--danger); background: #fff8f7; }
.field-hint { display: block; min-height: 1.1em; color: var(--muted); font-size: .71rem; font-weight: 500; line-height: 1.25; }
.choice-field { margin: 0; padding: 0; border: 0; }
.choice-field legend { margin-bottom: 6px; padding: 0; }
.choice-row { display: flex; height: 44px; align-items: center; gap: 18px; padding: 0 11px; border: 1px solid #cbd5dd; border-radius: 9px; }
.choice-row label { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; cursor: pointer; }
.choice-row input { width: 17px; height: 17px; accent-color: var(--blue); }
.unit-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.unit-inputs label, .input-with-unit { position: relative; display: block; }
.unit-inputs input, .input-with-unit input { padding-right: 38px; }
.unit-inputs label span, .input-with-unit span { position: absolute; right: 11px; top: 50%; color: var(--muted); font-size: .78rem; font-weight: 500; transform: translateY(-50%); pointer-events: none; }
.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.button { min-height: 44px; padding: 9px 16px; border: 0; border-radius: 9px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.button.primary { color: #fff; background: var(--blue); box-shadow: 0 4px 11px rgba(0,147,221,.22); }
.button.primary:hover { background: var(--blue-deep); }
.button.secondary { color: var(--blue-deep); background: var(--blue-soft); }
.button.secondary:hover { color: #fff; background: var(--blue-deep); }
.button.danger-quiet { color: var(--danger); background: #fff1ef; }
.button.danger-quiet:hover { background: #fee4e1; }
.button.quiet { color: #586777; background: #eef2f5; }
.button.quiet:hover { color: #1f2937; background: #dfe7ec; }
.save-state { color: var(--muted); font-size: .8rem; }
.form-error { margin-top: 12px; padding: 9px 11px; color: #8d2019; background: #fff1ef; border-radius: 9px; font-size: .82rem; }
.doctor-sync-panel { margin-top: 18px; padding: 15px 16px; background: #f3f9fc; border: 1px solid #cfe6f1; border-radius: 12px; }
.doctor-sync-panel > div:first-child { display: flex; align-items: center; gap: 9px; }
.doctor-sync-panel strong, .doctor-sync-panel small { display: block; }
.doctor-sync-panel small { color: var(--muted); font-size: .7rem; }
.doctor-status-dot { width: 10px; height: 10px; background: #19a66a; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #83cfad; }
.doctor-sync-actions { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto auto; gap: 8px; margin-top: 12px; }
.doctor-sync-actions input { width: 100%; height: 44px; padding: 8px 11px; border: 1px solid #bdccd6; border-radius: 9px; }
.doctor-sync-panel > p { min-height: 1.2em; margin: 8px 0 0; color: var(--muted); font-size: .75rem; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dialog-heading span { color: var(--blue-deep); font-size: .72rem; font-weight: 750; }
.dialog-heading h2 { margin: 2px 0 0; font-size: 1.3rem; }
.dialog-heading button { width: 34px; height: 34px; color: #62717e; background: #edf2f5; border: 0; border-radius: 8px; font-size: 1.4rem; cursor: pointer; }

.age-banner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; padding: 0; overflow: hidden; background: var(--blue-deep); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.age-banner > div { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-right: 1px solid rgba(255,255,255,.2); }
.age-banner span { color: rgba(255,255,255,.76); font-size: .74rem; }
.age-banner strong { font-size: .98rem; }
.age-banner p { grid-column: 1 / -1; margin: 0; padding: 10px 20px; color: #4c3a00; background: var(--yellow-soft); font-size: .79rem; }

.record-form { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 14px; align-items: end; padding: 20px; background: linear-gradient(145deg, #f7fbfd, #f1f7fa); border: 1px solid #deebf1; border-radius: 14px; }
.record-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 11px; }
.record-storage-note { color: var(--muted); font-size: .72rem; font-weight: 500; }
.record-form .note-field { grid-column: span 2; }
.record-form .add-button { align-self: end; }
.record-form .full-row { grid-column: 1 / -1; margin: 0; }
.record-edit-state { padding: 9px 12px; color: #075f8d; background: #e4f5fc; border-radius: 9px; font-size: .8rem; font-weight: 700; }
.record-form-actions { display: flex; align-items: stretch; gap: 8px; }
.record-form-actions .button { flex: 1 1 auto; white-space: nowrap; }
.empty-state { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 110px; margin-top: 16px; color: var(--muted); text-align: left; border: 1px dashed #bdcbd5; border-radius: 12px; }
.empty-state p { margin: 0; font-size: .85rem; }
.empty-state strong { color: var(--ink); }
.empty-symbol { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: var(--blue); border-radius: 50%; font-size: 1.3rem; }
.records-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.records-list-toolbar strong { color: #3f5060; font-size: .82rem; }
.records-list-toolbar button { min-height: 32px; padding: 5px 10px; color: var(--blue-deep); background: var(--blue-soft); border: 0; border-radius: 8px; font-size: .74rem; font-weight: 750; cursor: pointer; }
.records-list-toolbar button:hover { color: #fff; background: var(--blue-deep); }
.records-wrap { max-width: 100%; min-width: 0; margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
.records-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.records-table th { padding: 10px 12px; color: #4d5a68; background: #f1f6f9; font-weight: 700; text-align: left; white-space: nowrap; }
.records-table td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.record-age { display: block; margin-top: 2px; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.record-row-actions { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.edit-record, .delete-record { padding: 5px 8px; background: transparent; border: 0; border-radius: 6px; font-weight: 700; cursor: pointer; }
.edit-record { color: var(--blue-deep); }
.edit-record:hover { background: var(--blue-soft); }
.delete-record { color: var(--danger); }
.delete-record:hover { background: #fff1ef; }

.chart-heading { align-items: flex-start; margin-bottom: 18px; }
.chart-heading-main { width: 100%; }
.chart-kicker-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; }
.chart-kicker-row .section-kicker { margin-bottom: 0; }
.chart-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.chart-inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; }
.text-link-action { min-height: 36px; padding: 3px 0; color: var(--blue-deep); background: transparent; border: 0; font-size: .8rem; font-weight: 700; text-align: left; text-decoration: underline; text-decoration-color: #8ec7df; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.text-link-action:hover { color: var(--blue); text-decoration-color: currentColor; }
.text-link-action strong { color: inherit; font-weight: 700; }
.standard-picker-wrap { position: relative; margin: 0; }
.standard-picker-wrap > summary { display: flex; min-height: 36px; align-items: center; gap: 5px; padding: 2px 0; color: var(--blue-deep); background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: .82rem; list-style: none; white-space: nowrap; }
.standard-picker-wrap > summary::-webkit-details-marker { display: none; }
.standard-picker-wrap > summary::after { margin-left: 3px; color: var(--blue-deep); content: "▾"; font-size: .72rem; }
.standard-picker-wrap > summary:hover { color: var(--blue); }
.standard-picker-wrap > summary:focus-visible { outline: 2px solid rgba(0,147,221,.3); outline-offset: 3px; }
.standard-picker-wrap[open] > summary { color: var(--blue); }
.standard-picker-wrap[open] > summary::after { content: "▴"; }
.standard-picker-wrap > summary strong { font-size: .84rem; }
.standard-picker-wrap > summary small { color: var(--muted); font-size: .7rem; font-weight: 500; }
.standard-picker { position: absolute; z-index: 20; top: 38px; left: 0; display: grid; min-width: 224px; padding: 6px; background: #fff; border: 1px solid var(--blue); border-radius: 10px; box-shadow: 0 12px 24px rgba(18, 61, 89, .14); }
.standard-picker button { min-height: 42px; padding: 8px 10px; color: var(--ink); background: #fff; border: 0; border-radius: 8px; font-size: .8rem; font-weight: 700; cursor: pointer; text-align: left; }
.standard-picker button:hover, .standard-picker button:focus-visible { color: var(--blue-deep); background: var(--blue-soft); }
.standard-picker button[aria-pressed="true"] { color: #fff; background: var(--blue-deep); }
.standard-badge { justify-self: start; margin: 4px; padding: 5px 7px; color: var(--blue-deep); background: var(--blue-soft); border-radius: 8px; font-size: .72rem; font-weight: 700; }
.tabs-scroller { overflow-x: auto; margin: 0 -24px; padding: 0 24px 2px; scrollbar-width: thin; }
.tabs { display: flex; width: max-content; min-width: 100%; gap: 3px; border-bottom: 1px solid var(--line); }
.tabs button { position: relative; padding: 10px 13px 11px; color: var(--muted); background: transparent; border: 0; cursor: pointer; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.tabs button::after { content: ""; position: absolute; right: 10px; bottom: -1px; left: 10px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.tabs button[aria-selected="true"] { color: var(--blue-deep); }
.tabs button[aria-selected="true"]::after { background: var(--blue); }
.metric-controls { display: flex; gap: 6px; margin-top: 14px; }
.metric-button { padding: 6px 12px; color: #51606f; background: #f0f4f7; border: 0; border-radius: 8px; font-size: .76rem; font-weight: 700; cursor: pointer; }
.metric-button.active { color: #fff; background: var(--blue-deep); }
.chart-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 19px 0 12px; }
.chart-intro h3 { margin: 0 0 2px; font-size: 1rem; }
.chart-intro p { margin: 0; color: var(--muted); font-size: .78rem; }
.chart-meta { display: flex; align-items: flex-end; flex-direction: column; gap: 9px; }
.chart-range-controls { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; background: var(--blue-soft); border-radius: 10px; }
.chart-range-controls[hidden] { display: none; }
.chart-range-controls button { min-width: 64px; min-height: 38px; padding: 7px 14px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; font-size: .78rem; font-weight: 700; cursor: pointer; }
.chart-range-controls button:hover { color: var(--blue-deep); background: #fff; }
.chart-range-controls button[aria-pressed="true"] { color: var(--blue-deep); background: #fff; }
.legend { display: flex; gap: 12px; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { display: inline-block; width: 17px; height: 3px; border-radius: 3px; }
.legend-reference { background: #86a4b8; }
.legend-child { background: var(--yellow); }
.chart-frame { position: relative; height: 430px; background: #fbfdfe; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
#growth-chart { display: block; width: 100%; height: 100%; }
.chart-guide { position: absolute; z-index: 1; top: 23px; bottom: 48px; width: 1px; background: rgba(0, 123, 185, .55); pointer-events: none; }
.chart-guide::before { position: absolute; top: -3px; left: -3px; width: 7px; height: 7px; content: ""; background: var(--blue); border-radius: 50%; }
.chart-tooltip { position: absolute; z-index: 2; max-width: 240px; padding: 8px 10px; color: #fff; background: rgba(26,39,50,.94); border-radius: 7px; box-shadow: 0 6px 16px rgba(15, 27, 36, .2); font-size: .74rem; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); }
.chart-tooltip.reference-mode { width: 200px; max-width: calc(100% - 20px); padding: 10px 12px; transform: translate(-50%, 0); }
.chart-tooltip.reference-mode strong { display: block; margin-bottom: 7px; }
.reference-values { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-variant-numeric: tabular-nums; }
.reference-values span:nth-child(4) { color: #ffd56a; font-weight: 750; }
.chart-selection { display: none; }
.chart-caveat { margin: 10px 0 0; color: var(--muted); font-size: .74rem; }
.fenton-frame { position: relative; width: min(100%, 820px); margin: 0 auto; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(26, 54, 70, .08); }
.fenton-frame img { display: block; width: 100%; height: auto; }
#fenton-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; }
#fenton-overlay polyline, #fenton-overlay .fenton-point { pointer-events: none; }
#fenton-overlay circle { cursor: pointer; pointer-events: all; }
#fenton-overlay .fenton-hit { fill: transparent; stroke: transparent; }
#fenton-overlay .fenton-point:focus { outline: none; stroke: #173243; stroke-width: 7; }
.fenton-tooltip { position: absolute; z-index: 120; width: max-content; max-width: min(260px, calc(100% - 20px)); padding: 9px 11px; color: #fff; background: rgba(26,39,50,.97); border-radius: 8px; box-shadow: 0 8px 20px rgba(15,27,36,.24); font-size: .74rem; line-height: 1.55; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); }
.fenton-tooltip strong { font-size: .78rem; }
.fenton-tooltip .measurement-values { display: grid; grid-template-columns: repeat(3, auto); gap: 3px 10px; margin-top: 3px; color: #fff1bd; font-variant-numeric: tabular-nums; }
.fenton-legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: .73rem; }
.fenton-legend span { display: flex; align-items: center; gap: 5px; }
.fenton-legend i { width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(31,41,55,.2); }
.fenton-weight { background: #f1a400; }
.fenton-length { background: #0093dd; }
.fenton-head { background: #c24f8b; }

.summary-content { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.summary-block h3 { margin: 0 0 5px; color: var(--blue-deep); font-size: .9rem; }
.summary-block p, .summary-block ul { margin: 0; color: #455262; font-size: .83rem; }
.summary-block .percentile-explainer { margin-top: 6px; color: var(--muted); font-size: .73rem; line-height: 1.55; }
.summary-block ul { padding-left: 1.2rem; }
.trend-summary { display: grid; gap: 7px; }
.summary-block .trend-objective,
.summary-block .trend-advice { line-height: 1.65; }
.trend-objective span,
.trend-advice span { display: block; margin-bottom: 2px; font-size: .72rem; font-weight: 750; }
.trend-objective span { color: var(--muted); }
.trend-advice { font-weight: 620; }
.trend-advice--steady { color: #27724e !important; }
.trend-advice--caution { color: #8a6500 !important; }
.trend-advice--attention { color: #a6413c !important; }
.summary-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.chart-management-actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 4px 2px; }
.source-note { padding: 17px 20px; color: #4e5b68; background: #e9f0f4; border-radius: 12px; }
.source-note h2 { margin: 0 0 9px; color: var(--ink); font-size: .88rem; }
.source-note p { margin: 9px 0 0; font-size: .76rem; }
#source-storage-note { margin-top: 0; color: var(--danger); font-weight: 650; line-height: 1.65; }
.source-standard-list { display: grid; gap: 5px; max-width: 94ch; margin: 0; padding-left: 1.2rem; font-size: .76rem; line-height: 1.65; }
.source-standard-list strong { color: var(--ink); font-weight: 700; }
footer { padding: 18px 8px 0; color: var(--muted); font-size: .75rem; text-align: center; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 100; padding: 10px 14px; color: #fff; background: #263540; border-radius: 9px; box-shadow: 0 10px 25px rgba(17,35,47,.22); font-size: .82rem; }
.print-only { display: none; }
.curve-print-sheet { display: none; }
.visually-hidden { position: absolute !important; top: 0 !important; left: 0 !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 740px) {
  .page-shell { width: min(100% - 20px, 920px); margin-top: 10px; }
  .brand-header { grid-template-columns: auto 1fr; gap: 13px; padding: 18px; }
  .brand-header.legacy-action-bar { display: none !important; }
  .account-area { grid-column: 1 / -1; width: 100%; grid-template-columns: 1fr auto; align-items: center; justify-items: start; }
  .brand-logo { width: 57px; height: 57px; }
  .brand-copy p:not(.brand-kicker) { font-size: .78rem; }
  .privacy-note { grid-column: 1 / -1; max-width: none; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.2); }
  .workspace-section { padding: 20px 17px; }
  .section-heading { display: block; margin-bottom: 16px; }
  .section-help { margin-top: 7px; text-align: left; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .age-banner { grid-template-columns: 1fr 1fr; }
  .age-banner > div:nth-child(2) { border-right: 0; }
  .age-banner > div:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.2); border-right: 0; }
  .record-form { grid-template-columns: 1fr 1fr; padding: 14px; }
  .record-title-row { align-items: flex-start; flex-direction: column; gap: 1px; }
  .doctor-sync-actions { grid-template-columns: 1fr 1fr; }
  .doctor-sync-actions label { grid-column: 1 / -1; }
  .record-form .note-field { grid-column: 1 / -1; }
  .record-form-actions { grid-column: 1 / -1; }
  .tabs-scroller { margin: 0 -16px; padding: 0 16px 2px; }
  .chart-frame { height: 390px; }
  .chart-selection { display: block; margin-top: 12px; padding: 12px; color: var(--ink); background: var(--blue-soft); border: 1px solid #c8dbe3; border-radius: 10px; }
  .chart-selection > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .chart-selection strong { color: var(--blue-deep); font-size: .84rem; }
  .chart-selection button { min-height: 36px; padding: 0 10px; color: var(--blue-deep); background: #fff; border: 1px solid #aed7e8; border-radius: 8px; font-size: .78rem; font-weight: 700; }
  .chart-selection p { margin: 7px 0 0; font-size: .82rem; line-height: 1.55; }
  .chart-intro { align-items: flex-start; flex-direction: column; gap: 9px; }
  .chart-meta { width: 100%; align-items: flex-start; }
  .chart-range-controls { width: 100%; }
  .chart-range-controls button { min-height: 44px; }
  .summary-content { grid-template-columns: 1fr; }
  .chart-heading { display: flex; flex-direction: column; }
  .chart-kicker-row { align-items: baseline; gap: 2px 12px; }
  .chart-title-row { align-items: baseline; flex-direction: row; gap: 4px 12px; margin-top: 3px; }
  .chart-inline-actions { gap: 2px 16px; }
  .standard-picker-wrap { width: auto; max-width: 100%; }
  .standard-picker-wrap > summary { justify-content: flex-start; max-width: 100%; }
  .standard-picker { right: auto; left: 0; width: min(320px, calc(100vw - 64px)); min-width: 0; }
}

@media (max-width: 480px) {
  .form-grid, .record-form { grid-template-columns: 1fr; }
  .doctor-sync-actions { grid-template-columns: 1fr; }
  .doctor-sync-actions label { grid-column: auto; }
  .record-form .note-field { grid-column: auto; }
  .record-form-actions { grid-column: auto; }
  .age-banner { grid-template-columns: 1fr; }
  .age-banner > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .age-banner > div:nth-child(3) { grid-column: auto; border-top: 0; }
  .form-actions { align-items: flex-start; flex-direction: column; }
  .form-actions .button { width: 100%; }
  .chart-frame { height: 355px; }
  .summary-actions .button { width: 100%; }
  .legend { flex-wrap: wrap; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  @page { size: A4; margin: 13mm; }
  .brand-header.legacy-action-bar { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
  .page-shell, body > .toast { display: none !important; }
  .curve-print-sheet { display: block; color: #1f2937; }
  .print-layout { width: 100%; border-collapse: collapse; }
  .print-layout thead { display: table-header-group; }
  .print-layout tbody { display: table-row-group; }
  .print-layout td { padding: 0; border: 0; }
  .print-layout thead td { padding-bottom: 4mm; }
  .print-brand-header { position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; height: 15mm; padding: 2mm 4mm; overflow: hidden; color: #fff; background: linear-gradient(105deg, #007db9 0%, #0093dd 58%, #0076ad 100%); border-radius: 8px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .print-brand-header::before { position: absolute; right: -10mm; bottom: -20mm; width: 70mm; height: 30mm; content: ""; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; transform: rotate(-7deg); }
  .print-brand-header::after { position: absolute; right: 35mm; bottom: 3.6mm; width: 2.3mm; height: 2.3mm; content: ""; background: #f1a400; border: 1mm solid rgba(255,255,255,.92); border-radius: 50%; box-shadow: 17mm -2.4mm 0 -1mm rgba(255,255,255,.82), 34mm -5.2mm 0 -1mm rgba(255,255,255,.58); }
  .print-brand-header img { position: relative; z-index: 1; width: 10mm; height: 10mm; object-fit: contain; padding: 1mm; background: #fff; border-radius: 5px; }
  .print-brand-header strong { position: relative; z-index: 1; font-size: 15pt; line-height: 1; letter-spacing: -.01em; }
  .print-percentile-markers { position: relative; z-index: 1; justify-self: end; display: flex; align-items: center; gap: 2mm; padding-right: 1mm; color: rgba(255,255,255,.74); font-size: 7pt; font-weight: 700; }
  .print-percentile-markers i { font-style: normal; }
  .print-percentile-markers i:nth-child(2) { padding: 1mm 1.5mm; color: #173243; background: #ffd56a; border-radius: 4px; }
  .curve-print-profile { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 18px; margin: 12px 0 16px; padding: 10px 12px; border: 1px solid #d7e3ea; border-radius: 8px; }
  .curve-print-profile div { font-size: 10pt; font-weight: 700; }
  .curve-print-profile span { display: block; margin-bottom: 2px; color: #6b7280; font-size: 8pt; font-weight: 500; }
  .visit-print-page { min-height: 267mm; padding-top: .1mm; break-before: page; page-break-before: always; }
  .visit-print-heading { margin: 9mm 0 3mm; padding-bottom: 2mm; color: #006fa8; border-bottom: 2px solid #0093dd; font-size: 13pt; }
  .visit-print-profile { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
  .visit-print-summary { grid-template-columns: 1fr 1fr; gap: 5mm 8mm; padding-top: 1mm; }
  .visit-print-summary .summary-block { break-inside: avoid; page-break-inside: avoid; }
  .visit-print-summary .summary-block h3 { margin: 0 0 1.5mm; color: #006fa8; font-size: 10.5pt; }
  .visit-print-summary .summary-block p,
  .visit-print-summary .summary-block ul { margin: 0; color: #394b57; font-size: 9.5pt; line-height: 1.65; }
  .visit-print-summary .summary-block ul { padding-left: 5mm; }
  .visit-print-note { margin: 9mm 0 0; padding: 4mm; color: #4e5b68; background: #e9f0f4; border-radius: 8px; font-size: 8.5pt; line-height: 1.6; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .print-standard-heading { margin: 0 0 10px; padding-bottom: 7px; color: #006fa8; border-bottom: 2px solid #0093dd; font-size: 13pt; }
  .print-curve-figure { margin: 0 0 12px; break-inside: avoid; page-break-inside: avoid; }
  .print-curve-figure h3 { margin: 0 0 5px; font-size: 10.5pt; }
  .print-curve-figure > img { display: block; width: 100%; height: auto; border: 1px solid #d7e3ea; border-radius: 7px; }
  .print-fenton-frame { position: relative; width: 72%; margin: 0 auto; }
  .print-fenton-frame img { display: block; width: 100%; height: auto; }
  .print-fenton-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .page-shell { width: 100%; margin: 0; }
  .brand-header { padding: 14px 16px; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .brand-header.workspace-inactive { display: grid !important; }
  .brand-logo { width: 50px; height: 50px; }
  .profile-section form, .record-form, .empty-state, .summary-actions, .source-note, footer, .tabs-scroller, .metric-controls, .chart-range-controls, .privacy-note, .skip-link, .toast, .standard-picker, .standard-picker-label { display: none !important; }
  [data-workspace] { display: block !important; }
  .print-only { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 20px; margin-top: 12px; }
  .print-profile-item { font-size: 9.5pt; }
  .print-profile-item span { display: block; color: #5f6b7a; font-size: 8pt; }
  .workspace-section, .age-banner { break-inside: avoid; box-shadow: none; border: 1px solid #d7e0e6; }
  .chart-frame { height: 380px; }
  .records-table { font-size: 9pt; }
  .records-table .delete-record { display: none; }
  .summary-content { grid-template-columns: 1fr 1fr; }
  main { gap: 10px; }
}

/* === 宝宝档案选择器（多份 model）=== */
.snapshot-picker { margin: 0 0 14px; background: #f5f8fa; border: 1px solid #d7e3ea; border-radius: 8px; }
.snapshot-picker > summary { display: flex; min-height: 44px; align-items: center; gap: 8px; padding: 0 12px; color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 700; list-style: none; }
.snapshot-picker > summary::-webkit-details-marker { display: none; }
.snapshot-picker > summary::before { color: var(--blue-deep); content: "▸"; }
.snapshot-picker[open] > summary::before { content: "▾"; }
.snapshot-picker > summary small { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 500; }
.snapshot-picker-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 12px 12px; border-top: 1px solid #d7e3ea; }
.snapshot-picker-label { color: #5f6b7a; font-size: 13px; font-weight: 600; }
.snapshot-picker select { flex: 1 1 200px; min-width: 200px; padding: 6px 10px; border: 1px solid #c8d1d8; border-radius: 6px; font-size: 14px; background: #fff; }
.snapshot-picker .button.quiet { font-size: 13px; padding: 6px 12px; }
.snapshot-picker .button.danger-quiet { color: #b03434; }

/* === 同步状态指示器（医生端）=== */
.cloud-sync-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 14px; font-size: 12.5px; background: #eef2f4; color: #5f6b7a; }
.cloud-sync-indicator::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #9aa4ac; }
.cloud-sync-indicator[data-status="syncing"] { background: #fff7e0; color: #8a6d1f; }
.cloud-sync-indicator[data-status="syncing"]::before { background: #f0b400; animation: pulse-dot 1.2s ease-in-out infinite; }
.cloud-sync-indicator[data-status="synced"] { background: #e6f7eb; color: #1a7a3a; }
.cloud-sync-indicator[data-status="synced"]::before { background: #2aaf56; }
.cloud-sync-indicator[data-status="error"] { background: #fdeaea; color: #a02525; cursor: pointer; }
.cloud-sync-indicator[data-status="error"]::before { background: #d83a3a; }
@keyframes pulse-dot { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* === 云端预览弹窗 === */
.cloud-preview-dialog { max-width: 720px; width: 92vw; max-height: 86vh; padding: 0; border: 0; border-radius: 12px; box-shadow: 0 18px 50px rgba(15, 30, 50, 0.25); }
.cloud-preview-dialog::backdrop { background: rgba(15, 30, 50, 0.45); }
.cloud-preview-dialog .dialog-heading { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e2e8ec; }
.cloud-preview-dialog .dialog-heading h2 { margin: 4px 0 0; font-size: 18px; color: #1a3a4a; }
.cloud-preview-dialog .dialog-heading span { color: #5f6b7a; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.cloud-preview-dialog .dialog-heading button { background: transparent; border: 0; font-size: 22px; color: #5f6b7a; cursor: pointer; padding: 0 8px; }
.cloud-preview-hint { margin: 0; padding: 10px 20px; background: #f5f8fa; color: #5f6b7a; font-size: 13px; }
.cloud-preview-content { padding: 16px 20px; max-height: 60vh; overflow: auto; }
.cloud-preview-content .preview-section { margin-bottom: 18px; }
.cloud-preview-content h3 { margin: 0 0 8px; font-size: 14px; color: #1a3a4a; border-bottom: 1px solid #e2e8ec; padding-bottom: 6px; }
.cloud-preview-content .preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; font-size: 14px; }
.cloud-preview-content .preview-grid div { padding: 4px 0; }
.cloud-preview-content .preview-grid span { color: #5f6b7a; display: block; font-size: 12px; }
.cloud-preview-content .preview-records table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cloud-preview-content .preview-records th, .cloud-preview-content .preview-records td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #eef2f4; }
.cloud-preview-content .preview-records th { background: #f5f8fa; color: #5f6b7a; font-weight: 600; }
.cloud-preview-actions { padding: 14px 20px; border-top: 1px solid #e2e8ec; display: flex; justify-content: flex-end; gap: 10px; }
.cloud-preview-empty { color: #5f6b7a; font-style: italic; padding: 20px 0; text-align: center; }
@media (max-width: 540px) { .cloud-preview-content .preview-grid { grid-template-columns: 1fr; } }

/* 网页内备份提醒：不申请系统通知，仅在打开生长曲线且到期时显示。 */
.backup-reminder-dialog { width:min(92vw,430px); padding:0; color:var(--ink); background:#fff; border:0; border-radius:14px; box-shadow:0 18px 50px rgba(15,30,50,.25); }
.backup-reminder-dialog::backdrop { background:rgba(15,30,50,.45); }
.backup-reminder-content { padding:24px; }
.backup-reminder-kicker { margin:0; color:var(--blue-deep); font-size:12px; font-weight:700; }
.backup-reminder-content h2 { margin:8px 0 0; color:var(--navy); font-size:21px; line-height:1.4; }
.backup-reminder-content>p:not(.backup-reminder-kicker) { margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.7; }
.backup-reminder-content .backup-reminder-note { color:var(--blue-deep); font-size:12px; font-weight:700; }
.backup-reminder-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
@media(max-width:540px) { .backup-reminder-content { padding:22px 20px; }.backup-reminder-actions { display:grid; grid-template-columns:1fr 1fr; }.backup-reminder-actions .button { width:100%; padding-right:8px; padding-left:8px; } }