:root { color-scheme: light; --ink:#23322f; --muted:#6f7c78; --paper:#f4f1eb; --card:#fffdfa; --line:#dcd9d1; --red:#b34a42; --blue:#397a8c; --gold:#b1812b; --green:#2f6659; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.shell { width:min(1120px, calc(100% - 40px)); margin:0 auto; padding:44px 0 32px; }
.hero { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; padding:0 8px; }
.eyebrow { margin:0 0 5px; color:var(--red); font-weight:800; letter-spacing:.16em; font-size:12px; }
h1 { margin:0; font:700 clamp(40px, 6vw, 62px)/1.05 Georgia, serif; }
.subtitle { margin:9px 0 0; color:var(--muted); }
.heart { display:grid; place-items:center; width:72px; height:72px; border-radius:50%; color:var(--red); background:#ead7d2; font-size:34px; }
.sync-panel { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin:-16px 8px 22px; color:var(--muted); font-size:13px; }
.sync-panel[hidden] { display:none; }
.sync-panel button { min-height:36px; padding:0 12px; }
.refresh-button { white-space:nowrap; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 40px rgba(56,48,37,.06); padding:25px 28px; margin-bottom:20px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.section-heading > div:first-child { display:flex; align-items:center; gap:12px; }
.section-heading h2 { margin:0; font:700 24px/1.2 Georgia, serif; }
.section-heading p { margin:0; color:var(--muted); font-size:14px; }
.step { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; color:white; background:var(--green); font-weight:800; font-size:13px; }
.measurements { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.field, .date-field { display:flex; flex-direction:column; gap:7px; font-weight:750; }
.input-wrap { display:flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:white; transition:.15s; }
.input-wrap:focus-within { border-color:var(--green); box-shadow:0 0 0 3px rgba(47,102,89,.12); }
.input-wrap input { width:100%; border:0; outline:0; padding:14px 5px 14px 16px; font:700 24px/1 system-ui; color:var(--ink); }
.input-wrap small { padding-right:14px; color:var(--muted); font-weight:600; }
.field em { color:var(--muted); font-size:12px; font-style:normal; font-weight:500; }
.systolic > span:first-child { color:var(--red); } .diastolic > span:first-child { color:var(--blue); } .pulse > span:first-child { color:var(--gold); }
.date-row { display:grid; grid-template-columns:minmax(240px,1fr) auto auto; gap:12px; align-items:end; border-top:1px solid var(--line); margin-top:22px; padding-top:20px; }
.date-field input { min-height:46px; padding:0 12px; border:1.5px solid var(--line); border-radius:10px; background:white; color:var(--ink); font:600 15px system-ui; }
button { min-height:46px; padding:0 19px; border-radius:10px; font:750 14px system-ui; cursor:pointer; }
.secondary { border:1.5px solid var(--green); background:white; color:var(--green); }
.primary { border:1.5px solid var(--green); background:var(--green); color:white; }
button:hover { filter:brightness(.96); } button:focus-visible, input:focus-visible { outline:3px solid rgba(47,102,89,.24); outline-offset:2px; }
.message { min-height:20px; margin:10px 0 -10px; color:var(--green); font-size:13px; font-weight:650; }
.legend { display:flex; flex-wrap:wrap; gap:18px; font-size:13px; font-weight:700; }
.legend span::before { content:""; display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:50%; background:currentColor; }
.red { color:var(--red); }.blue { color:var(--blue); }.gold { color:var(--gold); }.green { color:var(--green); }
.walk-color { color:#c46a2c; }.sleep-color { color:#665b9a; }
.chart-scroll { width:100%; overflow-x:auto; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; }
.chart-scroll[hidden] { display:none; }
#chart { width:100%; height:290px; display:none; }
.empty { color:var(--muted); text-align:center; padding:42px 15px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; text-align:left; }
th, td { padding:13px 12px; border-bottom:1px solid var(--line); }
td { font-size:14px; } td strong { font-size:16px; }
.delete { min-height:32px; padding:0 10px; border:0; background:transparent; color:#92635f; }
footer { padding:8px 20px; color:var(--muted); text-align:center; font-size:12px; }
.login-dialog { width:min(460px,calc(100% - 28px)); border:0; border-radius:18px; padding:0; color:var(--ink); background:var(--card); box-shadow:0 24px 80px rgba(24,34,31,.28); }
.login-dialog::backdrop { background:rgba(25,38,34,.48); backdrop-filter:blur(3px); }
.login-dialog form { display:grid; gap:16px; padding:25px; }
.login-dialog p { margin:0; color:var(--muted); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.dialog-heading h2 { margin:0; font:700 25px/1.2 Georgia,serif; }
.dialog-close { min-height:34px; width:34px; padding:0; border:0; background:transparent; color:var(--muted); font-size:28px; }
.login-dialog input { min-height:46px; padding:0 12px; border:1.5px solid var(--line); border-radius:10px; background:white; color:var(--ink); font:600 16px system-ui; }
.login-dialog .message { color:var(--red); }
.medication-heading { margin-bottom:0; }
.add-button { display:flex; align-items:center; gap:9px; border:1.5px solid var(--green); background:white; color:var(--green); }
.add-button span { font-size:24px; font-weight:400; line-height:1; }
.medication-form { display:grid; grid-template-columns:1fr; gap:16px; align-items:end; margin-top:22px; padding:20px; border-radius:14px; background:#f5f2ec; }
.medication-form[hidden] { display:none; }
.medication-form input, .medication-form select { min-height:46px; padding:0 12px; border:1.5px solid var(--line); border-radius:10px; background:white; color:var(--ink); font:600 15px system-ui; }
.medication-form .message { grid-column:1/-1; margin:0; }
.event-type-field { max-width:300px; }
.event-fields { display:grid; grid-template-columns:minmax(220px,1fr) minmax(230px,1fr) auto; gap:12px; align-items:end; }
.event-fields[hidden] { display:none; }
.interval-fields { grid-template-columns:minmax(230px,1fr) auto minmax(230px,1fr) auto; }
.duration-preview { grid-column:1/-1; color:var(--green); font-weight:800; }
.event-submit { justify-self:end; min-width:170px; }
.medication-note { margin:18px 0 0; color:var(--muted); font-size:13px; }
.event-kind { display:inline-flex; align-items:center; gap:7px; font-weight:700; }
.event-kind::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--blue); }
.event-kind.medication::before { background:var(--green); }
.event-kind.walk::before { background:#c46a2c; }
.event-kind.sleep::before { background:#665b9a; }
.medication-name { color:var(--green); }
.empty-value { color:#a7aca9; }
@media (max-width:760px) { .shell{width:min(100% - 22px,1120px);padding-top:24px}.card{padding:20px}.hero{align-items:flex-start}.heart{width:55px;height:55px}.sync-panel{margin-top:-10px;flex-wrap:wrap}.sync-panel span{width:100%;text-align:right}.section-heading{align-items:flex-start;flex-direction:column}.measurements{grid-template-columns:1fr}.date-row{grid-template-columns:1fr 1fr}.date-field{grid-column:1/-1}.primary{grid-column:1/-1}.chart-title .legend{margin-left:41px} }
@media (max-width:760px) { .event-fields,.interval-fields{grid-template-columns:1fr auto}.event-fields .date-field{grid-column:1}.event-submit{justify-self:stretch}.duration-preview{grid-column:1/-1} }
@media (max-width:520px) { .chart-card{padding-left:12px;padding-right:12px}.chart-title{padding:0 8px}.chart-title .legend{margin-left:0;gap:9px 13px;font-size:11px}.chart-scroll{padding-bottom:6px}#chart{height:320px} }