:root {
  color-scheme: light;
  --bg: #f3f6f4;
  --surface: #ffffff;
  --ink: #14221c;
  --muted: #728078;
  --line: #dfe7e2;
  --brand: #147a58;
  --brand-soft: #e6f3ed;
  --high: #c33b45;
  --high-soft: #fae9eb;
  --low: #2468b1;
  --low-soft: #e8f1fb;
  --normal: #278157;
  --normal-soft: #e7f4ed;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); min-height: 100vh; }
button, select { font: inherit; }
.shell { width: min(760px, 100%); margin: 0 auto; padding: 24px 18px 108px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.eyebrow { display: block; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 32px; letter-spacing: -.04em; }
h2 { font-size: 26px; letter-spacing: -.03em; margin-top: 2px; }
.profile-picker { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 700; }
.profile-picker select { min-width: 120px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 32px 10px 12px; background: var(--surface); color: var(--ink); font-weight: 700; }
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.summary-card { display: grid; gap: 3px; padding: 15px 14px; border: 2px solid transparent; border-radius: 16px; text-align: left; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.summary-card:active { transform: scale(.98); }
.summary-card[aria-pressed="true"] { border-color: currentColor; box-shadow: 0 5px 16px rgba(20,34,28,.12); }
.summary-card[aria-pressed="true"]::after { content: "Показаны только эти"; margin-top: 4px; font-size: 9px; font-weight: 800; }
.summary-card b { font-size: 25px; line-height: 1; }.summary-card span { font-size: 12px; font-weight: 700; }
.summary-card.danger { color: var(--high); background: var(--high-soft); }
.summary-card.low { color: var(--low); background: var(--low-soft); }
.summary-card.normal { color: var(--normal); background: var(--normal-soft); }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin: 28px 2px 14px; }
.section-heading + .summary { margin-bottom: 14px; }
.reminders-block { margin-bottom: 22px; }.reminder-list { display: grid; gap: 9px; margin-top: 9px; }.reminder-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: #fff7df; border: 1px solid #efdfad; }.reminder-date { min-width: 54px; color: #8a6417; font-size: 12px; font-weight: 800; }.reminder-card h3 { font-size: 14px; }.reminder-card p { margin-top: 3px; color: var(--muted); font-size: 12px; }.reminder-done { border: 0; border-radius: 10px; padding: 8px 10px; background: rgba(255,255,255,.75); color: #8a6417; font-weight: 800; }
.icon-button { border: 0; background: var(--surface); color: var(--brand); width: 42px; height: 42px; border-radius: 14px; font-size: 23px; }
.search-box { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 0 0 14px; padding: 0 12px; min-height: 48px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--muted); }
.search-box input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.search-box button { border: 0; background: transparent; color: var(--muted); font-size: 22px; }
.filter-row { display: flex; gap: 8px; margin: -4px 0 14px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 800; }
.filter-chip.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.lab-groups { display: grid; gap: 14px; }
.lab-group { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.lab-group h3 { padding: 17px 18px 12px; font-size: 17px; }
.lab-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; width: 100%; padding: 14px 18px; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.lab-row:active { background: #f5f8f6; }
.lab-name { font-weight: 700; }.lab-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }
.lab-value { text-align: right; }.lab-value strong { display: inline-block; padding: 5px 8px; border-radius: 9px; font-size: 15px; }
.lab-value small { display: block; margin-top: 5px; color: var(--muted); }
.status-high strong { color: var(--high); background: var(--high-soft); }
.status-low strong { color: var(--low); background: var(--low-soft); }
.status-normal strong { color: var(--normal); background: var(--normal-soft); }
.status-unknown strong { color: var(--ink); background: #eef1ef; }
.document-list { display: grid; gap: 10px; }
.document-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 14px; background: var(--surface); color: inherit; text-align: left; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; }
.document-card:active { background: #f5f8f6; }.open-mark { color: var(--brand); font-size: 22px; }
.document-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--brand); background: var(--brand-soft); font-weight: 800; }
.document-card h3 { font-size: 14px; overflow-wrap: anywhere; }.document-card p { color: var(--muted); font-size: 12px; margin-top: 5px; }
.empty { text-align: center; padding: 48px 28px; color: var(--muted); }.empty h3 { color: var(--ink); margin: 12px 0 6px; }.empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: auto; border-radius: 18px; background: var(--brand-soft); color: var(--brand); font-size: 27px; }
.view { display: none; }.view.active { display: block; }.hidden { display: none !important; }
.bottom-nav { position: fixed; z-index: 10; left: 50%; bottom: 0; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 1fr); width: min(760px, 100%); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); border-top: 1px solid var(--line); backdrop-filter: blur(16px); }
.home-list { display:grid; gap:10px; }.home-card,.quiet-card { padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }.home-card h3 { margin:5px 0 7px; }.home-card p { margin-top:5px; color:var(--muted); font-size:13px; }.person-tag { color:var(--brand); font-size:11px; font-weight:800; }.quiet-card { color:var(--muted); text-align:center; }.course-done { margin-top:12px; border:0; border-radius:10px; padding:8px 11px; background:var(--brand-soft); color:var(--brand); font-weight:800; }
.nav-item { display: grid; place-items: center; gap: 2px; border: 0; background: transparent; color: var(--muted); padding: 8px; font-size: 11px; font-weight: 700; }.nav-item span { font-size: 20px; }.nav-item.active { color: var(--brand); }
.error-box { position: fixed; left: 18px; right: 18px; bottom: 90px; max-width: 700px; margin: auto; padding: 13px 15px; border-radius: 13px; background: #3b2225; color: white; font-size: 13px; }
.modal { position: fixed; z-index: 30; inset: 0; display: grid; align-items: end; }
.modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(18,34,27,.46); }
.modal-sheet { position: relative; width: min(760px, 100%); max-height: 88vh; margin: 0 auto; padding: 8px 18px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 24px 24px 0 0; background: var(--bg); box-shadow: 0 -12px 40px rgba(18,34,27,.18); }
.modal-handle { width: 42px; height: 5px; margin: 2px auto 14px; border-radius: 9px; background: #c8d2cc; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.history-loading { padding: 42px 0; text-align: center; color: var(--muted); }
.chart-wrap { padding: 12px 8px 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.chart { display: block; width: 100%; min-width: 310px; height: auto; overflow: visible; }
.chart-grid { stroke: #e6ece8; stroke-width: 1; }.chart-band { fill: var(--normal-soft); }.chart-line { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.chart-point { stroke: white; stroke-width: 3; }.chart-point.high { fill: var(--high); }.chart-point.low { fill: var(--low); }.chart-point.normal { fill: var(--normal); }.chart-point.unknown { fill: var(--ink); }.chart-label { fill: var(--muted); font-size: 10px; }.chart-value { fill: var(--ink); font-size: 11px; font-weight: 800; }
.history-list { display: grid; gap: 8px; margin-top: 12px; }.history-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }.history-date { font-weight: 700; }.history-ref { margin-top: 3px; color: var(--muted); font-size: 12px; }.history-result { text-align: right; font-weight: 800; }
.source-button { grid-column: 1 / -1; justify-self: start; border: 0; padding: 7px 10px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); font-weight: 800; }
.event-list { display: grid; gap: 12px; }.event-card { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }.event-top { display: flex; justify-content: space-between; gap: 12px; }.event-date { color: var(--muted); font-size: 12px; font-weight: 700; }.event-card h3 { margin-top: 3px; }.event-specialty { margin-top: 4px; color: var(--brand); font-size: 13px; font-weight: 700; }.event-section { margin-top: 13px; }.event-section b { display: block; margin-bottom: 5px; font-size: 12px; text-transform: uppercase; color: var(--muted); }.event-section ul { margin: 0; padding-left: 18px; }
body.modal-open { overflow: hidden; }
.document-modal { position: fixed; z-index: 50; inset: 0; display: grid; grid-template-rows: auto 1fr; background: var(--bg); }
.document-viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.viewer-close { border: 0; border-radius: 11px; padding: 9px 12px; background: var(--brand-soft); color: var(--brand); font-weight: 800; }
.document-modal iframe { width: 100%; height: 100%; border: 0; background: white; }
@media (max-width: 430px) { .shell { padding-top: 18px; }.topbar { align-items: center; }.summary-card { padding: 13px 10px; }.summary-card span { font-size: 10px; } h1 { font-size: 28px; } }