:root { --ink:#16383a; --teal:#0d5c63; --teal-dark:#073f44; --paper:#fffdf9; --line:#cbd9d7; --muted:#617374; --good:#19744a; --neutral:#475c63; --weak:#a2432e; }
* { box-sizing:border-box; }
body { margin:0; background:#eef5f3; color:var(--ink); font:19px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input { font:inherit; }
.page { width:min(100%,680px); margin:auto; padding:20px 16px 40px; }
.topbar,.section-heading { display:flex; justify-content:space-between; align-items:start; gap:14px; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:0; font-size:2rem; line-height:1.1; } h2 { font-size:1.35rem; margin-bottom:18px; }
.eyebrow { color:var(--teal); font-size:.8rem; font-weight:750; letter-spacing:.06em; margin-bottom:3px; text-transform:uppercase; }
.text-button { color:var(--teal-dark); border:0; background:transparent; text-decoration:underline; padding:8px 0; cursor:pointer; font-size:.9rem; }.user-menu { width:28px; height:28px; padding:0; border:0; border-radius:50%; color:#8ca09e; background:transparent; cursor:pointer; font-size:1.45rem; line-height:1; }.user-menu:hover,.user-menu:focus { color:var(--teal-dark); background:#dceae7; outline:0; }
.welcome { margin:24px 0 16px; display:flex; gap:8px; flex-wrap:wrap; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 3px 12px #2147430d; }
label { display:block; font-weight:700; } input { width:100%; border:2px solid #9caeac; border-radius:10px; color:var(--ink); background:white; min-height:54px; padding:8px 12px; margin-top:6px; }
input:focus { border-color:var(--teal); outline:3px solid #96d7cf; outline-offset:1px; }
.numbers-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.date-row { margin-bottom:22px; }.date-control { display:flex; position:relative; }.date-control input { margin:6px 0 0; padding-right:50px; cursor:pointer; }.date-control button { position:absolute; right:5px; top:11px; width:43px; height:43px; border:0; border-radius:8px; background:#e4f0ee; color:var(--teal-dark); cursor:pointer; font-size:1.25rem; }
.numbers-grid { margin:22px 0; } .number-field { position:relative; } .number-field input { font-size:1.6rem; font-weight:750; padding-right:65px; } .number-field.pulse { grid-column:1/-1; }
.hint { display:block; color:var(--muted); font-weight:400; font-size:.77rem; min-height:1.1em; }.unit { position:absolute; right:13px; bottom:16px; color:var(--muted); font-size:.77rem; font-weight:500; }
fieldset { border:0; margin:0; padding:0; } .feeling-fieldset + .feeling-fieldset { margin-top:22px; } legend { font-weight:750; margin-bottom:10px; }.feeling-options,.period-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.feeling-options label,.period-options label { position:relative; }.feeling-options input,.period-options input { position:absolute; opacity:0; }.feeling,.period { display:flex; min-height:92px; padding:10px 5px; border:2px solid var(--line); border-radius:12px; align-items:center; justify-content:center; flex-direction:column; text-align:center; font-size:.82rem; cursor:pointer; }.feeling b,.period b { font-size:2.2rem; line-height:1; }.period { color:var(--teal-dark); }.good { color:var(--good); }.neutral { color:var(--neutral); }.weak { color:var(--weak); }.feeling-options input:checked + .feeling,.period-options input:checked + .period { border-width:4px; background:#eef8f6; }.feeling-options input:focus + .feeling,.period-options input:focus + .period { outline:3px solid #96d7cf; }
.primary-button { width:100%; min-height:60px; margin-top:22px; border:0; border-radius:12px; background:var(--teal); color:#fff; font-size:1.15rem; font-weight:750; cursor:pointer; }.primary-button:hover { background:var(--teal-dark); }.primary-button:disabled { opacity:.6; cursor:wait; }.form-message { min-height:1.4em; margin:14px 0 0; font-weight:600; }.error { color:#a12719; }.success { color:var(--good); }
.history-section { margin-top:30px; }.section-heading h2 { margin-bottom:12px; }.section-heading span,.muted { color:var(--muted); font-size:.88rem; }.history { list-style:none; padding:0; margin:0; display:grid; gap:10px; }.history li { border:1px solid var(--line); background:var(--paper); border-radius:14px; padding:14px; }.measurement-main { display:flex; justify-content:space-between; gap:12px; align-items:center; }.reading { font-size:1.25rem; font-weight:780; }.reading small { font-size:.76rem; font-weight:500; color:var(--muted); }.measurement-meta { margin-top:6px; display:flex; justify-content:space-between; color:var(--muted); font-size:.82rem; }.mood { font-weight:700; }.mood.good { color:var(--good); }.mood.neutral { color:var(--neutral); }.mood.weak { color:var(--weak); }
.trend-section { margin-top:30px; }.period-filter { display:flex; flex-wrap:wrap; gap:7px; margin:-2px 0 12px; }.period-filter button { min-height:42px; border:2px solid var(--line); border-radius:21px; padding:5px 12px; color:var(--ink); background:var(--paper); font-size:.82rem; font-weight:700; cursor:pointer; }.period-filter button[aria-pressed="true"] { border-color:var(--teal); background:var(--teal); color:#fff; }.chart-card { border:1px solid var(--line); border-radius:14px; background:var(--paper); padding:12px 10px 10px; }.chart-card canvas { display:block; width:100%; height:230px; }.chart-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; color:var(--muted); font-size:.77rem; }.chart-legend span { display:flex; align-items:center; gap:5px; }.chart-legend i { width:11px; height:11px; border-radius:50%; }.legend-systolic { background:#2563eb; }.legend-diastolic { background:#1f8a4c; }.legend-pulse { background:#8060a7; }
.measurement-actions { display:flex; align-items:center; gap:8px; }.delete-measurement { width:38px; height:38px; border:0; border-radius:9px; background:transparent; color:#8b5144; cursor:pointer; font-size:1.15rem; }.delete-measurement:hover,.delete-measurement:focus { background:#fff0ed; color:#8e2c1a; outline:0; }
dialog { border:0; border-radius:18px; padding:0; width:min(calc(100% - 32px),500px); color:var(--ink); box-shadow:0 14px 45px #0005; }dialog::backdrop { background:#073f4490; }dialog form { padding:24px; }.dialog-copy { color:var(--muted); font-size:.92rem; }dialog .primary-button { margin-top:10px; }
.calendar-dialog { width:min(calc(100% - 32px),390px); padding:18px; }.calendar-header { display:grid; grid-template-columns:48px 1fr 48px; align-items:center; gap:6px; }.calendar-header h2 { text-align:center; margin:0; font-size:1.2rem; text-transform:capitalize; }.calendar-header button { min-height:48px; border:0; border-radius:10px; color:var(--teal-dark); background:#e4f0ee; font-size:2rem; cursor:pointer; }.calendar-weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center; }.calendar-weekdays { margin:18px 0 6px; color:var(--muted); font-size:.74rem; font-weight:700; }.calendar-days button { aspect-ratio:1; border:0; border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; font-weight:650; }.calendar-days button:hover,.calendar-days button:focus { background:#d8efeb; outline:0; }.calendar-days button.selected { background:var(--teal); color:white; }.calendar-days button.today { outline:2px solid var(--teal); outline-offset:-2px; }.calendar-days .empty { pointer-events:none; }.calendar-dialog .text-button { margin-top:16px; width:100%; text-align:center; }
.delete-dialog { width:min(calc(100% - 32px),390px); padding:24px; }.delete-dialog h2 { margin-bottom:10px; }.delete-dialog p { color:var(--muted); }.dialog-actions { display:flex; gap:10px; margin-top:22px; }.dialog-actions button { min-height:52px; flex:1; border-radius:10px; font-weight:750; cursor:pointer; }.secondary-button { border:2px solid var(--line); background:white; color:var(--ink); }.delete-button { border:0; background:#9f3724; color:white; }
@media (min-width:540px) { .numbers-grid { grid-template-columns:1fr 1fr 1fr; }.number-field.pulse { grid-column:auto; } }