:root {
  color-scheme: light;
  --ink: #162033;
  --muted: #687386;
  --line: #dde3ed;
  --paper: #fff;
  --surface: #f7f8fb;
  --red: #d83c4c;
  --red-dark: #b72739;
  --blue: #2f6ee5;
  --shadow: 0 12px 36px rgb(31 48 79 / 8%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: linear-gradient(150deg, #f7f9ff 0%, #f8f8fa 55%, #fff4f4 100%); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }

.app-shell { width: min(100%, 760px); margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 20px max(40px, env(safe-area-inset-bottom)); }
.topbar, .section-heading, .capture-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar { margin-bottom: 24px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(28px, 7vw, 36px); letter-spacing: -.045em; }
h2 { font-size: 19px; letter-spacing: -.025em; }
h3 { font-size: 17px; margin-top: 2px; }
.eyebrow { margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.icon-button, .secondary-button { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 12px; padding: 10px 13px; font-size: 14px; font-weight: 650; box-shadow: 0 2px 6px rgb(16 24 40 / 3%); }

.settings, .capture-card, .result-card, .shortcut-guide { border: 1px solid var(--line); border-radius: 20px; background: rgb(255 255 255 / 88%); box-shadow: var(--shadow); }
.settings { margin-bottom: 16px; padding: 20px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 18px; }
.settings-grid .wide { grid-column: 1 / -1; }
label { display: grid; gap: 7px; color: #4e5b6d; font-size: 13px; font-weight: 650; }
input, select { width: 100%; min-width: 0; border: 1px solid #ccd5e1; border-radius: 10px; outline: none; background: #fff; color: var(--ink); padding: 11px 12px; font-size: 15px; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(47 110 229 / 15%); }
.session-note { align-self: flex-start; border-radius: 99px; background: #edf2fb; color: #4d617e; padding: 6px 9px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.settings-hint, .shortcut-block p { margin-top: 13px; color: var(--muted); font-size: 13px; line-height: 1.5; }

.capture-card, .result-card { padding: 22px; }
.upload-surface { display: grid; place-items: center; position: relative; min-height: 285px; margin: 18px 0 14px; overflow: hidden; border: 1.5px dashed #b9c5d7; border-radius: 16px; background: linear-gradient(135deg, #f3f7fc, #fbfcfe); cursor: pointer; }
.upload-surface:hover { border-color: var(--blue); }
.upload-surface img { width: 100%; max-height: 430px; object-fit: contain; }
.upload-empty { display: grid; gap: 8px; padding: 30px; text-align: center; }
.upload-empty strong { font-size: 17px; }
.upload-empty span { max-width: 280px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.capture-actions { justify-content: stretch; }
.capture-actions > * { flex: 1; text-align: center; }
.primary-button, .health-button { border: 0; border-radius: 12px; background: var(--red); color: white; padding: 12px 16px; font-weight: 750; box-shadow: 0 6px 14px rgb(216 60 76 / 21%); }
.primary-button:hover, .health-button:hover { background: var(--red-dark); }
.status { min-height: 20px; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.status.error { color: #bd2739; }
.status.success { color: #18824a; }
.platform-note { margin: 16px 0 0; padding: 12px; border-radius: 10px; background: #eef3fb; color: #50617a; font-size: 13px; line-height: 1.5; }

.result-card { margin-top: 16px; }
.reading-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 19px 0 15px; }
.reading-field { padding: 13px 12px 11px; border-radius: 14px; background: #f6f8fc; color: var(--muted); }
.reading-field span { display: flex; align-items: baseline; gap: 3px; }
.reading-field input { min-width: 0; border: 0; background: transparent; padding: 3px 0 0; color: var(--ink); font-size: 31px; font-weight: 780; letter-spacing: -.07em; box-shadow: none; }
.reading-field em { font-size: 10px; font-style: normal; white-space: nowrap; }
.systolic { border-top: 3px solid var(--red); }
.diastolic { border-top: 3px solid var(--blue); }
.pulse { border-top: 3px solid #8b6bd9; }
.date-field { margin-bottom: 18px; }
.shortcut-block { display: grid; grid-template-columns: 1fr 190px; gap: 14px; padding: 18px; border-radius: 16px; background: #172033; color: white; }
.shortcut-block .eyebrow { color: #b1bfd5; }
.shortcut-block p { color: #c4cede; }
.shortcut-block label { color: #dce5f4; }
.shortcut-block input { border-color: #4f5d73; background: #242f45; color: white; }
.health-button { grid-column: 1 / -1; background: #f05263; }
details { margin-top: 15px; color: var(--muted); font-size: 13px; }
summary { cursor: pointer; font-weight: 650; }
pre { max-height: 180px; overflow: auto; margin: 10px 0 0; padding: 12px; border-radius: 10px; background: #121a2a; color: #d9e2f1; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.shortcut-guide { margin-top: 16px; padding: 17px 20px; line-height: 1.6; }
.shortcut-guide ol { margin: 12px 0 0; padding-left: 20px; }
.shortcut-guide code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #44536b; }
footer { padding: 24px 4px 0; color: #788396; text-align: center; font-size: 12px; }

@media (max-width: 520px) {
  .app-shell { padding-inline: 14px; }
  .capture-card, .result-card { padding: 17px; }
  .settings-grid, .shortcut-block { grid-template-columns: 1fr; }
  .reading-grid { grid-template-columns: 1fr 1fr; }
  .pulse { grid-column: 1 / -1; }
  .shortcut-block label, .health-button { grid-column: 1; }
  .session-note { display: none; }
}