: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, select { font: inherit; }
button { touch-action: manipulation; }
a { color: var(--blue-deep); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select: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; }
.profile-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.profile-group { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.profile-group:first-child { padding-top: 0; border-top: 0; }
.profile-group-title { grid-column: 1 / -1; margin: 0; color: var(--ink); font-size: .92rem; line-height: 1.35; }
.profile-group > .field { min-width: 0; }
.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; }

.workspace-section[data-workspace="records"] { container-name: record-section; container-type: inline-size; }
.record-form { display: grid; width: 100%; max-width: 100%; min-width: 0; 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-measurement-heading { display: none; }
.record-measurement-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.record-date-field, .record-measurement-field { min-width: 0; }
.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-form .record-date-field > input,
.record-form .record-measurement-field .input-with-unit { width: 100%; max-width: 100%; }
.record-length-position { width: 100%; min-height: 36px; margin-top: 2px; padding: 6px 9px; color: #405262; background: #fff; border: 1px solid #cbd5dd; border-radius: 8px; font-size: .73rem; }
.record-length-help { color: var(--muted); font-size: .65rem; font-weight: 450; line-height: 1.35; }
.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 { min-width: 0; align-items: flex-start; margin-bottom: 18px; }
.chart-heading-main { width: 100%; min-width: 0; }
.chart-title-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 14px; margin-top: 4px; }
.chart-title-row h2 { min-width: 0; }
.chart-inline-actions { display: flex; width: 100%; min-width: 0; align-items: center; flex-wrap: nowrap; gap: 8px; }
.chart-inline-actions .text-link-action { display: inline-flex; min-width: 0; min-height: 44px; align-items: center; justify-content: center; padding: 8px 12px; color: var(--blue-deep); background: transparent; border: 1px solid transparent; border-radius: 10px; box-shadow: none; font-size: .86rem; font-weight: 750; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
.chart-inline-actions .text-link-action:hover { color: var(--blue-deep); background: #f3faff; border-color: #aed7e8; box-shadow: none; }
.chart-inline-actions .text-link-action:active { transform: translateY(1px); box-shadow: none; }
.chart-inline-actions .text-link-action:focus-visible { text-decoration: none; }
.chart-inline-actions .chart-action-label { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-profile-action { gap: 5px; }
.chart-profile-action::after { margin-left: 1px; color: var(--blue); content: "›"; font-size: 1.05em; line-height: 1; }
.chart-profile-action strong { color: inherit; font-size: .9rem; font-weight: 800; }
.chart-profile-switch { color: var(--muted); font-size: .76rem; font-weight: 700; }
.chart-inline-actions .chart-profile-action { background: transparent; border-color: transparent; }
.chart-inline-actions .chart-profile-action:hover { background: #f3faff; border-color: transparent; }
.chart-inline-actions #chart-add-record { color: var(--blue-deep); background: transparent; border-color: transparent; box-shadow: none; text-decoration: underline; text-decoration-color: #8ec7df; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.chart-inline-actions #chart-add-record::before { display: none; content: none; }
.chart-inline-actions #chart-add-record:hover { color: var(--blue); background: #f3faff; border-color: transparent; box-shadow: none; text-decoration-color: currentColor; }
.chart-summary-action { margin-left: auto; color: var(--blue-deep) !important; background: transparent !important; border-color: transparent !important; }
.chart-summary-action::after { margin-left: 8px; content: "→"; font-size: 1.05em; line-height: 1; }
.chart-summary-action:hover { color: var(--blue-deep) !important; background: #f3faff !important; border-color: transparent !important; }
.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: 40px; align-items: center; gap: 7px; padding: 6px 0; color: var(--blue-deep); background: transparent; border: 1px solid transparent; border-radius: 0; box-shadow: none; cursor: pointer; font-size: .86rem; font-weight: 750; line-height: 1.2; list-style: none; text-decoration: none; white-space: nowrap; transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease; }
.standard-picker-wrap > summary::-webkit-details-marker { display: none; }
.standard-picker-wrap > summary::after { margin-left: 4px; color: var(--blue-deep); content: "▾"; font-size: .82rem; }
.standard-picker-wrap > summary:hover { color: var(--blue); background: #f3faff; border-color: transparent; box-shadow: none; }
.standard-picker-wrap > summary:active { transform: translateY(1px); }
.standard-picker-wrap > summary:focus-visible { outline: 3px solid rgba(0,147,221,.28); outline-offset: 2px; }
.standard-picker-wrap[open] > summary { color: var(--blue); }
.standard-picker-wrap[open] > summary::after { content: "▴"; }
.standard-picker-wrap > summary strong { font-size: .88rem; }
.standard-picker-wrap > summary small { color: var(--blue-deep); font-size: .74rem; font-weight: 750; }
.standard-picker { position: absolute; z-index: 20; top: 44px; 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%; touch-action: pan-y; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.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 { position: absolute; z-index: 3; top: 9px; left: 50%; display: none; width: min(560px, calc(100% - 20px)); margin: 0; padding: 9px 12px; box-sizing: border-box; color: var(--ink); background: rgba(234,246,252,.9); border: 1px solid rgba(200,219,227,.92); border-radius: 10px; box-shadow: 0 8px 20px rgba(26,54,70,.14); font-size: .82rem; line-height: 1.55; pointer-events: none; transform: translateX(-50%); }
.chart-caveat { margin: 10px 0 0; color: var(--muted); font-size: .74rem; }
.preterm-standard-guidance { padding: 10px 12px; color: #24485d; background: #fff; border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0; font-weight: 650; }
.preterm-standard-guidance[hidden] { display: none; }
.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-section .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.summary-section .section-heading > div { min-width: 0; }
.summary-section .section-heading .text-link-action { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.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: 9px; }
.trend-section { display: grid; gap: 3px; }
.summary-block .trend-objective,
.summary-block .trend-advice { line-height: 1.65; }
.trend-metric-label { font-weight: 750; }
.trend-section-label,
.trend-advice span { display: block; margin-bottom: 2px; font-size: .72rem; font-weight: 750; }
.trend-section-label { 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-section .summary-content { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.summary-section .summary-block { min-width: 0; }
.summary-section .summary-block h3 { margin: 0 0 10px; color: var(--blue-deep); font-size: 18px; line-height: 1.4; }
.summary-section .summary-block p,
.summary-section .summary-block ul { color: #3e5361; font-size: 16px; line-height: 1.7; }
.summary-section .summary-latest-metric { display: block; margin-top: 4px; }
.summary-section .summary-block .percentile-explainer { margin-top: 8px; color: #617784; font-size: 14px; line-height: 1.6; }
.summary-section .summary-content > .trend-summary { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; background: transparent; border: 0; border-radius: 0; }
.summary-section .trend-summary > h3 { margin: 0; font-size: 18px; line-height: 1.4; }
.summary-section .trend-section { align-content: start; gap: 8px; min-width: 0; padding-top: 12px; border-top: 1px solid #e1ebef; }
.summary-section .trend-section-label { margin: 0; color: #456170; font-size: 14px; font-weight: 700; line-height: 1.5; }
.summary-section .summary-block .trend-objective { color: #334d5c; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.summary-section .trend-section .trend-objective + .trend-objective { margin-top: 8px; }
.summary-section .trend-metric-label { display: block; color: #24485d; font-size: 14px; font-weight: 700; }
.summary-section .trend-evidence-line { display: block; }
.summary-section .trend-evidence-line + .trend-evidence-line { margin-top: 4px; }
.summary-section .trend-evidence-date { display: block; color: #456170; font-variant-numeric: tabular-nums; }
.summary-section .summary-block .trend-advice { margin: 0; padding: 0; border: 0; border-radius: 0; font-size: 16px; font-weight: 550; line-height: 1.7; background: transparent; }
.summary-section .trend-advice span { margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.summary-section .trend-advice--steady { color: #246447 !important; }
.summary-section .trend-advice--caution { color: #765500 !important; }
.summary-section .trend-advice--attention { color: #873f37 !important; }
.summary-section .summary-content > .summary-block:last-child { padding-top: 16px; border-top: 1px solid #d9e5ea; }
.summary-section .summary-content > .summary-block:last-child ul { display: grid; gap: 8px; margin-top: 0; padding-left: 1.2rem; }
.page-shell:has(#summary-section:not([hidden])) { margin-bottom: 32px; }
body.calendar-pwa-enabled:has(#summary-section:not([hidden])) { padding-bottom: 112px; }
@media (max-width: 740px) {
  .summary-section .summary-content { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .summary-section .summary-content > .trend-summary { grid-column: 1; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; }
  .summary-section .trend-summary > h3,
  .summary-section .summary-block .trend-advice { grid-column: 1; }
  .summary-section .trend-section { gap: 6px; padding-top: 9px; }
  .summary-section .summary-content > .summary-block:last-child { grid-column: 1; }
}
.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: 0; color: #4e5b68; background: #e9f0f4; border: 1px solid #dce8ed; border-radius: 12px; overflow: hidden; }
.source-note > summary { display: flex; min-height: 52px; align-items: center; gap: 8px; padding: 12px 20px; color: var(--ink); cursor: pointer; font-size: .92rem; font-weight: 750; list-style: none; }
.source-note > summary::-webkit-details-marker { display: none; }
.source-note > summary::before { color: var(--blue); content: "▸"; font-size: .95rem; line-height: 1; }
.source-note[open] > summary::before { content: "▾"; }
.source-note > summary small { margin-left: auto; color: var(--muted); font-size: .74rem; font-weight: 600; }
.source-note > summary:hover { background: #e1edf2; }
.source-note > summary:focus-visible { outline: 3px solid rgba(0,147,221,.28); outline-offset: -3px; }
.source-note[open] > summary { border-bottom: 1px solid #d5e2e8; }
.source-note-body { padding: 0 20px 17px; }
.source-note-body p { margin: 9px 0 0; font-size: .76rem; }
#source-storage-note { margin: 10px 2px 0; color: var(--danger); font-size: .78rem; 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; }
  .profile-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .profile-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .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: repeat(2, minmax(0, 1fr)); padding: 14px; }
  .record-measurement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-measurement-grid > .record-measurement-field:nth-child(odd) { grid-column: 1 / 2; }
  .record-measurement-grid > .record-measurement-field:nth-child(even) { grid-column: 2 / 3; }
  .record-form .record-measurement-heading,
  .record-form .note-field,
  .record-form-actions,
  .record-form .form-error { grid-column: 1 / -1; }
  .record-title-row { align-items: flex-start; flex-direction: column; gap: 1px; }
  .record-measurement-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 2px 0 -2px; color: var(--ink); }
  .record-measurement-heading strong { font-size: .86rem; font-weight: 750; }
  .record-measurement-heading span { color: var(--muted); font-size: .72rem; font-weight: 600; }
  .record-form .field input { min-width: 0; min-height: 48px; }
  .doctor-sync-actions { grid-template-columns: 1fr 1fr; }
  .doctor-sync-actions label { grid-column: 1 / -1; }
  .tabs-scroller { margin: 0 -16px; padding: 0 16px 2px; }
  .chart-frame { height: 390px; }
  .chart-selection { display: block; }
  .chart-selection p { margin: 0; }
  .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-title-row { align-items: center; flex-direction: row; gap: 8px; margin-top: 3px; }
  .chart-inline-actions { display: flex; width: 100%; max-width: 100%; min-width: 0; flex-flow: row nowrap; gap: 6px; }
  .chart-inline-actions > .text-link-action { flex: 1 1 0; width: 0; min-width: 0; justify-content: center; padding-right: 7px; padding-left: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chart-profile-action { gap: 3px; }
  .chart-profile-action strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chart-profile-switch { flex: 0 0 auto; font-size: .7rem; }
  .chart-summary-action { margin-left: 0; }
  .standard-picker-wrap { width: auto; max-width: 100%; }
  .standard-picker-wrap > summary { justify-content: flex-start; max-width: 100%; }
  .standard-picker { right: 0; left: auto; width: min(320px, calc(100vw - 48px)); min-width: 0; }
}

/* 记录表单按自身可用宽度适配，避免折叠屏、分屏和横屏依赖 viewport 假设。两栏轨道含间距，因此日期与测量控件均小于容器宽度的一半。 */
@container record-section (max-width: 820px) {
  .record-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-measurement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-measurement-grid > .record-measurement-field:nth-child(odd) { grid-column: 1 / 2; }
  .record-measurement-grid > .record-measurement-field:nth-child(even) { grid-column: 2 / 3; }
  .record-form .record-measurement-heading,
  .record-form .note-field,
  .record-form-actions,
  .record-form .form-error { grid-column: 1 / -1; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 1024px) {
    .record-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .record-measurement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .record-measurement-grid > .record-measurement-field:nth-child(odd) { grid-column: 1 / 2; }
    .record-measurement-grid > .record-measurement-field:nth-child(even) { grid-column: 2 / 3; }
    .record-form .record-measurement-heading,
    .record-form .note-field,
    .record-form-actions,
    .record-form .form-error { grid-column: 1 / -1; }
  }
}

@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr; }
  .doctor-sync-actions { grid-template-columns: 1fr; }
  .doctor-sync-actions label { grid-column: auto; }
  .record-form .note-field, .record-form-actions { grid-column: 1 / -1; }
  .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; }
}

/* 统一工具壳层会把 field 收成第 1 列；基本资料页保留每组的两栏信息结构。 */
@media (max-width: 760px) {
  .v2-tool-unified .profile-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .v2-tool-unified .profile-group { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .v2-tool-unified .profile-group > .field { grid-column: auto !important; width: 100% !important; min-width: 0 !important; }
}

/* 统一工具壳层会把所有 field 收成第 1 列；记录页在移动端保留测量项两栏。 */
@media (max-width: 760px) {
  .v2-tool-unified .record-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .v2-tool-unified .record-measurement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .v2-tool-unified .record-measurement-grid > .record-measurement-field:nth-child(odd) { grid-column: 1 / 2 !important; width: 100% !important; }
  .v2-tool-unified .record-measurement-grid > .record-measurement-field:nth-child(even) { grid-column: 2 / 3 !important; width: 100% !important; }
  .v2-tool-unified .record-form .note-field,
  .v2-tool-unified .record-form .record-measurement-heading,
  .v2-tool-unified .record-form-actions,
  .v2-tool-unified .record-form .form-error { grid-column: 1 / -1 !important; width: 100% !important; }
  .v2-tool-unified .profile-group > .field,
  .v2-tool-unified .record-measurement-grid > .record-measurement-field,
  .v2-tool-unified .field input,
  .v2-tool-unified .field select,
  .v2-tool-unified .unit-inputs,
  .v2-tool-unified .unit-inputs label,
  .v2-tool-unified .input-with-unit,
  .v2-tool-unified .choice-row { min-width: 0; max-width: 100%; }
  .v2-tool-unified .field input,
  .v2-tool-unified .field select { min-width: 0 !important; }
}

@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; } }

.family-import-dialog { color: var(--ink); background: var(--surface); }
.family-import-dialog .cloud-preview-content { max-height: min(60vh, 560px); }
.family-import-dialog .family-import-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin: 0 0 18px; }
.family-import-dialog .family-import-summary div { min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.family-import-dialog .family-import-summary span { display: block; color: var(--muted); font-size: 12px; }
.family-import-dialog .family-import-summary strong { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.family-import-dialog .family-import-child { padding: 12px 0; border-top: 1px solid var(--line); }
.family-import-dialog .family-import-child h4 { margin: 0 0 6px; color: var(--blue-deep); font-size: 14px; }
.family-import-dialog .family-import-child p { margin: 4px 0 0; color: var(--ink); font-size: 13px; line-height: 1.6; }
.family-import-dialog .family-import-conflicts { margin-top: 8px; color: var(--blue-deep); font-size: 13px; }
.family-import-dialog .family-import-error { color: var(--danger); }
.family-import-dialog .cloud-preview-actions .button:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 540px) {
  .family-import-dialog .family-import-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-import-dialog .cloud-preview-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .family-import-dialog .cloud-preview-actions .button { width: 100%; }
}

/* 网页内备份提醒：不申请系统通知，仅在打开生长曲线且到期时显示。 */
.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; } }

/* 孩子资料页不显示共享工具菜单，其他工作区保留原操作入口。 */
body.calendar-pwa-enabled.growth-profile-open .v2-tool-context{display:none!important}

.growth-family-role-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 32px));padding:26px;color:#1F3847;background:#fff;border:1px solid #AED7E8;border-radius:16px;box-shadow:0 16px 48px rgba(18,61,89,.16);font-family:inherit}
.growth-family-role-dialog::backdrop{background:rgba(18,61,89,.35)}
.growth-family-role-dialog h2{margin:0 0 12px;color:#123D59;font-size:20px;line-height:1.4}
.growth-family-role-dialog p{margin:0 0 18px;color:#617784;font-size:14px;line-height:1.7}
.growth-family-role-dialog label{display:block;margin-bottom:8px;font-size:14px;font-weight:600}
.growth-family-role-dialog input{box-sizing:border-box;width:100%;min-height:48px;padding:12px;border:1px solid #AED7E8;border-radius:10px;font:inherit;background:#fff;color:#1F3847}
.growth-family-role-dialog input:focus-visible{outline:3px solid #EAF6FC;border-color:#0093DD}
.growth-family-role-dialog .family-role-error{margin:8px 0;color:#B84A4A;min-height:24px}
.growth-family-role-dialog .family-role-actions{display:flex;gap:12px}
.growth-family-role-dialog .family-role-actions button{flex:1;min-height:48px;margin:0}
.growth-family-role-dialog .family-role-actions button[type=submit]{background:#0093DD;color:white}

/* Measurement records keep date, metrics, notes and operations in separate rows. */
.records-table td { padding: 14px 16px; }
.measurement-record { min-width: 0; }
.measurement-record-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.measurement-record-heading span, .measurement-record-detail { color: var(--muted); font-size: .8rem; }
.measurement-record-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 12px 0; }
.measurement-record-values > span { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.measurement-record-values small { color: var(--muted); font-size: .8rem; }
.measurement-record-values strong { font-size: .85rem; }
.measurement-record-note { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.measurement-record-detail { margin: 4px 0; overflow-wrap: anywhere; }
.measurement-record .record-row-actions { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 10px; justify-content: flex-end; }
#record-error .button { margin-top: 8px; }
#growth-readonly-note { color: var(--muted); }
@media (max-width: 360px) {
  .records-table td { padding: 12px; }
  .measurement-record-values { gap: 10px 8px; }
}

@container record-section (max-width: 360px) {
  .v2-tool-unified .record-form .record-date-field { grid-column: 1 / -1 !important; max-width: 160px; }
}

.growth-reference { margin-top: 16px; padding: 16px; border: 1px solid #c7dce8; border-radius: 12px; background: #fff; font-size: 16px; }
.growth-reference[hidden] { display: none; }
.growth-reference-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; margin-top: 14px; font-size: 14px; }
.growth-reference-values b { display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }
.growth-reference-current { color: #087fb9; }
.growth-reference-content p { line-height: 1.7; overflow-wrap: anywhere; }
.growth-reference-nav { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.growth-reference-count { font-size: 14px; text-align: center; }
.growth-reference-nav button { flex-shrink: 0; min-height: 44px; }
#growth-chart { touch-action: pan-y; }
@media(max-width: 400px) { .growth-reference-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } .growth-reference { padding: 12px; } }
@media(max-width: 400px) {
  .growth-reference-nav { flex-wrap: wrap; }
  .growth-reference-count { order: -1; flex-basis: 100%; }
  .growth-reference-nav button { flex: 1; min-width: 0; }
}

/* 家长分析：先读测量事实，文字依据按需展开。 */
.summary-section .summary-content { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.growth-latest-values { display: grid; grid-template-columns: repeat(var(--metric-count, 3), minmax(0, 1fr)); gap: 16px; margin: 14px 0; }
.summary-section .summary-latest-metric { display: grid; align-content: start; gap: 5px; margin: 0; min-width: 0; font-size: 14px; }
.summary-latest-metric > strong { font-size: 24px; line-height: 1.3; color: #173e55; font-variant-numeric: tabular-nums; }
.summary-latest-metric small, .growth-interval-values small { font-size: 14px; font-weight: 400; }
.growth-latest-percentile { color: #36596e; font-size: 16px; overflow-wrap: anywhere; }
.growth-interval h4, .growth-daily h4 { margin: 8px 0 12px; font-size: 16px; color: #24485d; }
.growth-interval-values { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid #d9e5ea; border-bottom: 1px solid #d9e5ea; }
.growth-interval-end, .growth-interval-delta { display: grid; gap: 6px; align-content: start; min-width: 0; }
.growth-interval-values time, .growth-interval-values span { font-size: 14px; line-height: 1.6; color: #456170; overflow-wrap: anywhere; }
.growth-interval-values strong { font-size: 22px; line-height: 1.35; font-variant-numeric: tabular-nums; color: #173e55; }
.growth-interval-delta { text-align: center; }
.growth-interval-delta strong { color: #006fa8; }
.growth-daily { margin-top: 8px; }
.summary-section .growth-summary-date { font-size: 14px; color: #456170; }
.growth-daily-plot { display: flex; gap: 8px; margin-top: 12px; height: 170px; }
.growth-daily-axis { display: flex; width: 48px; flex-shrink: 0; flex-direction: column; justify-content: space-between; padding: 10px 0 12px; font-size: 12px; color: #456170; font-variant-numeric: tabular-nums; }
.growth-daily-plot svg { display: block; width: 100%; min-width: 0; height: 170px; }
.summary-section .growth-daily-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 12px 8px; margin: 10px 0; padding: 0; list-style: none; }
.growth-daily-values li { display: grid; gap: 4px; min-width: 0; }
.growth-daily-values time { color: #456170; font-size: 14px; }
.growth-daily-values strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.growth-daily-values small { font-size: 12px; font-weight: 400; }
.growth-evidence { padding: 0; border: 0; background: transparent; }
.growth-evidence > summary { min-height: 44px; padding: 10px 0; color: #006fa8; cursor: pointer; font-size: 14px; }
.growth-evidence > summary:focus-visible { outline: 2px solid #006fa8; outline-offset: 3px; border-radius: 4px; }
.summary-section .growth-summary-warning { color: #765500; font-size: 15px; line-height: 1.7; }
.summary-section .growth-summary-empty { color: #456170; font-size: 14px; }
.growth-birth-facts { display: grid; gap: 12px; margin: 12px 0 0; }
.growth-birth-facts > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; font-size: 16px; line-height: 1.65; }
.growth-birth-facts dt { color: #456170; }
.growth-birth-facts dd { margin: 0; color: #24485d; overflow-wrap: anywhere; }
@media(max-width: 400px) {
  .summary-latest-metric > strong { font-size: 22px; }
  .summary-latest-metric > strong small { display: block; margin-top: 3px; }
  .growth-interval-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .growth-interval-delta { grid-column: 1 / -1; grid-row: 2; grid-template-columns: auto auto auto; justify-content: space-between; align-items: center; text-align: left; padding-top: 8px; border-top: 1px solid #e1ebef; }
  .growth-birth-facts > div { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
}
@media print {
  .growth-evidence > summary { display: none; }
  .growth-evidence::details-content { content-visibility: visible; }
  .growth-evidence > :not(summary) { display: block !important; }
  .growth-interval, .growth-daily { break-inside: avoid; }
}

.growth-proportion-summary { display: grid; gap: 12px; }
.summary-section .growth-proportion-summary h3 { margin: 0; }
.growth-proportion-summary .growth-summary-date { font-size: 14px; color: #456170; }
.growth-proportion-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 12px 0; border-top: 1px solid #d9e5ea; border-bottom: 1px solid #d9e5ea; }
.growth-proportion-facts div { min-width: 0; }
.growth-proportion-facts dt { color: #456170; font-size: 14px; line-height: 1.6; }
.growth-proportion-facts dd { margin: 5px 0 0; color: #173e55; font-size: 20px; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.growth-proportion-interval h4 { margin: 8px 0 12px; color: #24485d; font-size: 16px; }
.growth-proportion-interval .growth-interval-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.growth-proportion-summary .growth-evidence .trend-objective { margin-top: 10px; }
@media print { .growth-proportion-facts, .growth-proportion-interval { break-inside: avoid; } }

.growth-proportion-facts dd small { font-size: 14px; font-weight: 400; white-space: nowrap; }

/* 曲线页屏幕布局：缩短工具栏间距，纵向触摸交给浏览器。 */
@media screen {
  #charts-section .chart-heading { margin-bottom: 8px; }
  #charts-section .chart-title-row { margin-top: 0; }
  #charts-section .metric-controls { margin-top: 8px; }
  #chart-panel .chart-intro { gap: 8px; margin: 8px 0; }
  #chart-panel .chart-meta { gap: 6px; }
  #chart-panel .chart-range-controls { width: min(192px, 100%); }
  #chart-panel .chart-range-controls button { min-height: 44px; padding: 4px 12px; }
  body.calendar-pwa-enabled #chart-panel .chart-frame { height: clamp(240px, calc(100vh - 400px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 500px); height: clamp(240px, calc(100svh - 400px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 500px); }
  #growth-chart { touch-action: pan-y pinch-zoom; }
}
.summary-section .trend-advice--neutral { color: #36596e !important; }
.review-observation { padding-bottom: 16px; border-bottom: 1px solid #d9e5ea; }
.summary-section .review-observation ul { display: grid; gap: 8px; margin: 10px 0; }
.review-latest { display: grid; gap: 18px; margin: 16px 0; }
.review-latest > div { display: grid; grid-template-columns: 68px 1fr auto; gap: 8px; align-items: baseline; }
.review-latest strong { color: #173e55; font-size: 22px; }
.review-latest small { font-size: 14px; font-weight: 400; }
.review-ruler { grid-column: 1 / -1; padding: 8px 8px 0; }
.review-ruler-line { position: relative; height: 3px; background: #d9e5ea; }
.review-ruler-line i { position: absolute; top: -5px; width: 12px; height: 12px; border: 2px solid #36596e; border-radius: 50%; background: white; transform: translateX(-50%); }
.review-ruler-labels { display: flex; justify-content: space-between; margin-top: 8px; color: #456170; font-size: 12px; }
.metric-review { margin-top: 20px; padding-top: 16px; border-top: 1px solid #d9e5ea; }
.metric-review h4 { margin: 0 0 12px; color: #24485d; font-size: 18px; }
.metric-review h5 { margin: 18px 0 8px; color: #24485d; font-size: 16px; }
.metric-review p + p { margin-top: 8px; }
.review-peak { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e1ebef; font-size: 14px; }
.review-peak strong { font-size: 20px; color: #173e55; }
.summary-section .review-daily-list { list-style: none; margin: 12px 0; padding: 0; }
.review-daily-list li { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px 0; border-bottom: 1px solid #e1ebef; }
.review-daily-list li > span { grid-column: 1 / -1; color: #456170; font-size: 14px; }
.review-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.review-reference p { margin-top: 12px; font-size: 15px; line-height: 1.7; }
.preterm-growth-readout { display: grid; gap: 24px; min-width: 0; }
.preterm-growth-readout > * { min-width: 0; }
.summary-section .preterm-growth-metric { margin-top: 20px; padding: 16px 0 0; border-top: 1px solid #d9e5ea; }
.summary-section .preterm-growth-metric h4 { margin: 0 0 12px; color: #24485d; font-size: 18px; }
.summary-section .preterm-growth-metric > .trend-advice { margin-top: 10px; }
.summary-section .preterm-growth-metric .preterm-trajectory-title { margin: 0; color: var(--blue-deep); font-size: 14px; font-weight: 700; }
.summary-section .preterm-trajectory-interval h5 { margin: 10px 0; color: #24485d; font-size: 15px; }
.preterm-trajectory-range--within { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preterm-trajectory-current { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 8px !important; color: #456170; }
.preterm-trajectory-current strong { color: #173e55; }
.summary-section .preterm-trajectory-details { margin-top: 7px; padding-top: 6px; border-top: 1px solid #d9e5ea; }
.summary-section .preterm-trajectory-details p { color: #617784; font-size: 14px; }
.summary-section .review-next-step { padding-top: 16px; border-top: 1px solid #d9e5ea; }
.summary-section .review-reference h4 { margin: 16px 0 8px; color: #24485d; font-size: 16px; }
.preterm-review-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 16px; padding: 0; }
.preterm-review-facts > div { min-width: 0; padding: 9px 10px; background: #fff; border: 1px solid #dceaf0; border-radius: 8px; }
.preterm-review-facts dt, .preterm-review-metric-facts dt { color: var(--muted); font-size: 13px; line-height: 1.5; }
.preterm-review-facts dd { margin: 3px 0 0; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.preterm-review-metric-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 16px; margin: 0; }
.preterm-review-metric-facts > div { display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr); gap: 4px 10px; min-width: 0; }
.preterm-review-metric-facts dd { min-width: 0; margin: 0; color: #24485d; font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.summary-section .preterm-growth-metric .preterm-review-metric-facts + .trend-advice { margin-top: 10px; }
.preterm-trajectory { margin-top: 10px; padding: 10px 12px; background: var(--blue-soft); border-radius: 8px; }
.summary-section .preterm-growth-metric .preterm-trajectory-title { margin: 0; color: var(--blue-deep); font-size: 14px; font-weight: 700; }
@media (max-width: 740px) {
  .preterm-growth-readout { gap: 20px; }
  .preterm-review-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preterm-review-metric-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .preterm-trajectory-range--within { grid-template-columns: minmax(0, 1fr); }
}
.chart-summary-action::after { content: none; }
.chart-title-row .standard-picker-wrap { margin-right: auto; }
.chart-title-row .growth-range-slot { min-width: 0; font-size: 13px; color: var(--muted); }
.growth-range-slot .chart-range-controls { position: relative; display: block; width: auto; padding: 0; background: transparent; border: 0; }
.growth-range-slot .chart-range-controls[hidden] { display: none; }
.growth-range-slot summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; white-space: nowrap; color: var(--blue-deep); list-style: none; }
.growth-range-slot summary::-webkit-details-marker { display: none; }
.growth-range-slot[data-range-state="optional"] summary { color: var(--blue-deep); }
.growth-range-slot[data-range-state="fixed"] #growth-static-range { color: var(--muted); cursor: default; }
.growth-range-options { position: absolute; z-index: 25; right: 0; width: min(280px, calc(100vw - 48px)); padding: 8px; background: white; border: 1px solid var(--blue-deep); border-radius: 8px; }
.growth-range-options button { width: 100%; min-height: 44px; text-align: left; color: var(--blue-deep); background: white; border: 0; }
.growth-range-options button:hover, .growth-range-options button[aria-pressed="true"] { background: var(--blue-soft); }
#chart-panel .chart-meta { flex-direction: row; }
.chart-title-row .standard-picker-wrap > summary small { display: none; }
.chart-title-row .standard-picker-wrap > summary strong { font-size: 13px; }
.chart-title-row .standard-picker-wrap > summary::after { content: "▾"; margin-left: 4px; font-size: 12px; }
.who-age-basis-switch { display: inline-flex; width: max-content; max-width: 100%; min-height: 36px; align-items: center; gap: 3px; margin-top: 3px; padding: 2px 4px; color: var(--muted); background: var(--blue-soft); border-radius: 10px; font-size: 13px; }
.who-age-basis-switch[hidden] { display: none; }
.who-age-basis-switch button { min-width: 0; min-height: 32px; padding: 5px 9px; color: var(--ink); background: transparent; border: 0; border-radius: 8px; font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }
.who-age-basis-switch button:hover { color: var(--blue-deep); background: #fff; }
.who-age-basis-switch button[aria-pressed="true"] { color: var(--blue-deep); background: #fff; box-shadow: 0 1px 3px rgba(26,54,70,.12); }
.who-age-basis-switch button:focus-visible { outline: 3px solid rgba(0,147,221,.28); outline-offset: 1px; }
@media (max-width: 420px) { .who-age-basis-switch { gap: 0; font-size: 12px; } .who-age-basis-switch button { padding-inline: 7px; } }
.chart-profile-action::after { content: none; }