:root {
  color-scheme: dark;
  --bg: #07111c;
  --bg-elevated: #0b1826;
  --panel: rgba(15, 31, 47, .88);
  --panel-solid: #0e2132;
  --panel-soft: rgba(19, 42, 62, .62);
  --text: #edf7f4;
  --muted: #8fa7b5;
  --subtle: #607987;
  --border: rgba(155, 199, 210, .13);
  --border-strong: rgba(155, 199, 210, .24);
  --mint: #63e4bb;
  --mint-strong: #37c99b;
  --blue: #7c9cff;
  --amber: #f1ba68;
  --orange: #ff986b;
  --red: #ff6f7f;
  --violet: #b49aff;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --radius: 22px;
  --radius-sm: 13px;
  --sidebar: 238px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #edf4f2;
  --bg-elevated: #f7fbfa;
  --panel: rgba(255, 255, 255, .9);
  --panel-solid: #fff;
  --panel-soft: rgba(226, 239, 237, .7);
  --text: #10232d;
  --muted: #526c77;
  --subtle: #728992;
  --border: rgba(24, 70, 78, .12);
  --border-strong: rgba(24, 70, 78, .22);
  --mint: #087f65;
  --mint-strong: #0d9877;
  --blue: #496bd7;
  --amber: #a96611;
  --orange: #c35a2d;
  --red: #c94352;
  --violet: #7050bf;
  --shadow: 0 18px 50px rgba(32, 70, 71, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button, input, select, textarea { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mint) 45%, transparent);
  outline-offset: 2px;
}
.ambient { position: fixed; z-index: -1; border-radius: 999px; filter: blur(1px); pointer-events: none; }
.ambient-one { width: 480px; height: 480px; top: -220px; right: -80px; background: radial-gradient(circle, rgba(99,228,187,.11), transparent 68%); }
.ambient-two { width: 520px; height: 520px; bottom: -260px; left: 15%; background: radial-gradient(circle, rgba(124,156,255,.08), transparent 68%); }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  padding: 24px 14px 18px;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--bg-elevated) 93%, transparent);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(24px);
  z-index: 50;
}
.brand {
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 22px;
  color: var(--text);
  text-align: left;
}
.brand > span:last-child { display: grid; line-height: 1.1; }
.brand strong { letter-spacing: .2em; font-size: 15px; }
.brand small { margin-top: 4px; color: var(--mint); font-size: 9px; letter-spacing: .13em; }
.brand-mark { width: 38px; height: 38px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 7px; border-radius: 13px; background: linear-gradient(140deg, rgba(99,228,187,.18), rgba(124,156,255,.1)); border: 1px solid rgba(99,228,187,.2); }
.brand-mark i { display: block; width: 4px; border-radius: 5px; background: var(--mint); box-shadow: 0 0 12px rgba(99,228,187,.45); }
.brand-mark i:nth-child(1) { height: 10px; }
.brand-mark i:nth-child(2) { height: 22px; }
.brand-mark i:nth-child(3) { height: 15px; }
.nav-list { display: grid; gap: 5px; }
.nav-item, .sidebar-settings {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  text-align: left;
  transition: .18s ease;
}
.nav-item span { width: 20px; text-align: center; font-size: 18px; font-weight: 400; }
.nav-item b { font-size: 13px; font-weight: 600; }
.nav-item:hover { color: var(--text); background: var(--panel-soft); }
.nav-item.active { color: var(--mint); background: linear-gradient(90deg, rgba(99,228,187,.13), rgba(99,228,187,.025)); border-color: rgba(99,228,187,.12); box-shadow: inset 3px 0 var(--mint); }
.privacy-seal { margin-top: auto; border: 1px solid var(--border); background: var(--panel-soft); border-radius: 15px; padding: 12px; display: flex; gap: 9px; align-items: flex-start; }
.privacy-seal > span { width: 8px; height: 8px; background: var(--mint); border-radius: 50%; margin-top: 4px; box-shadow: 0 0 12px var(--mint); }
.privacy-seal div { display: grid; }
.privacy-seal strong { font-size: 9px; letter-spacing: .14em; color: var(--mint); }
.privacy-seal small { font-size: 10px; margin-top: 3px; color: var(--muted); }
.sidebar-settings { margin-top: 8px; }

.app-shell { margin-left: var(--sidebar); min-height: 100vh; padding: 0 32px 70px; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 79px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(22px);
  margin: 0 -32px 28px;
  padding: 0 32px;
}
.topbar-title p, .eyebrow { margin: 0; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.topbar-title h1 { margin: 2px 0 0; font-size: 20px; letter-spacing: -.02em; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-actions time { color: var(--muted); font-size: 12px; margin-right: 4px; }
.mobile-menu { display: none; background: transparent; color: var(--text); border: 0; font-size: 22px; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.primary-button, .secondary-button, .text-button {
  border-radius: 12px;
  font-weight: 700;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.primary-button { border: 1px solid rgba(99,228,187,.28); padding: 10px 15px; color: #061610; background: linear-gradient(135deg, #73edc5, #4ad3a7); box-shadow: 0 8px 22px rgba(54,199,153,.16); }
.primary-button:hover, .secondary-button:hover { transform: translateY(-1px); }
.primary-button.compact { padding: 9px 13px; }
.secondary-button { border: 1px solid var(--border-strong); padding: 9px 13px; color: var(--text); background: var(--panel-soft); }
.text-button { border: 0; background: transparent; color: var(--mint); padding: 3px; font-size: 11px; }
.full { width: 100%; }

.view { display: none; animation: reveal .25s ease; }
.view.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.today-head, .page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 10px 0 22px; }
.today-head h2, .page-heading h2 { margin: 6px 0 5px; font-size: clamp(27px, 3vw, 40px); letter-spacing: -.045em; }
.today-head p:last-child, .page-heading > div > p:last-child { max-width: 720px; color: var(--muted); margin: 0; }
.date-orb { width: 74px; height: 82px; flex: 0 0 auto; display: grid; place-content: center; text-align: center; border-radius: 24px; background: linear-gradient(155deg, rgba(99,228,187,.14), rgba(124,156,255,.08)); border: 1px solid rgba(99,228,187,.2); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.date-orb small, .date-orb span { color: var(--mint); font-size: 9px; letter-spacing: .14em; }
.date-orb strong { font-size: 29px; line-height: 1.05; }
.heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.panel, .metric-grid article {
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 94%, transparent), color-mix(in srgb, var(--panel-soft) 72%, transparent));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel { padding: 20px; }
.today-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px; }
.next-action-card { grid-column: span 5; min-height: 250px; }
.bp-status-card { grid-column: span 7; }
.medication-today-card { grid-column: span 5; }
.gi-status-card { grid-column: span 3; }
.fodmap-today-card { grid-column: span 4; }
.appointment-today-card { grid-column: span 12; }
.accent-card { position: relative; overflow: hidden; border-color: rgba(99,228,187,.22); }
.accent-card::after { content: ""; position: absolute; width: 240px; height: 240px; right: -90px; bottom: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(99,228,187,.16), transparent 70%); pointer-events: none; }
.card-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.card-heading > p { margin: 0 auto 0 0; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.section-heading h3 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.02em; }
.live-dot { width: 7px; height: 7px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 12px var(--mint); }
.status-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: rgba(241,186,104,.12); color: var(--amber); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.status-chip.good { color: var(--mint); background: rgba(99,228,187,.12); }
.next-action-content { padding: 29px 0 20px; position: relative; z-index: 1; }
.next-action-content time { display: block; color: var(--mint); font-size: 12px; margin-bottom: 4px; }
.next-action-content h3 { margin: 0; font-size: clamp(25px, 3vw, 35px); line-height: 1.05; letter-spacing: -.045em; }
.next-action-content p { color: var(--muted); max-width: 460px; margin: 12px 0 0; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.bp-status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 22px 0 17px; }
.bp-status-grid > div { min-width: 0; padding: 14px; border-radius: 15px; background: var(--panel-soft); border: 1px solid var(--border); display: grid; }
.bp-status-grid small, .next-meal small, .avoid-strip small { color: var(--subtle); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.bp-status-grid strong { margin: 5px 0 2px; font-size: 18px; white-space: nowrap; }
.bp-status-grid span { color: var(--muted); font-size: 10px; }
.micro-stats { display: flex; gap: 13px; flex-wrap: wrap; padding: 17px 0 12px; color: var(--muted); font-size: 10px; }
.micro-stats b { color: var(--text); font-size: 14px; margin-right: 2px; }
.today-medication-list { display: grid; gap: 7px; }
.today-med-row { display: grid; grid-template-columns: 47px 1fr auto; gap: 9px; align-items: center; padding: 9px 10px; background: var(--panel-soft); border: 1px solid var(--border); border-radius: 12px; }
.today-med-row > time { color: var(--mint); font-size: 11px; font-weight: 700; }
.today-med-row div { display: grid; min-width: 0; }
.today-med-row strong { font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.today-med-row small { color: var(--muted); font-size: 9px; }
.today-med-row button { border: 1px solid var(--border-strong); background: transparent; color: var(--text); border-radius: 9px; padding: 6px 8px; font-size: 9px; }
.today-med-row.done { opacity: .64; }
.today-med-row.done button { color: var(--mint); }
.symptom-radar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 17px 0; }
.symptom-radar div { padding: 11px; border: 1px solid var(--border); background: var(--panel-soft); border-radius: 13px; display: grid; }
.symptom-radar small { color: var(--muted); font-size: 9px; }
.symptom-radar strong { font-size: 19px; }
.bowel-summary { border-top: 1px solid var(--border); padding-top: 13px; display: grid; }
.bowel-summary span, .bowel-summary small { color: var(--muted); font-size: 10px; }
.bowel-summary strong { font-size: 13px; margin: 2px 0; }
.phase-line { display: flex; align-items: center; gap: 12px; margin: 19px 0; }
.phase-line div { display: grid; }
.phase-line small { color: var(--muted); font-size: 10px; }
.phase-badge { padding: 6px 9px; background: rgba(99,228,187,.12); border: 1px solid rgba(99,228,187,.2); color: var(--mint); border-radius: 10px; font-size: 9px; font-weight: 900; letter-spacing: .1em; white-space: nowrap; }
.next-meal { border: 1px solid var(--border); background: var(--panel-soft); border-radius: 14px; padding: 12px; display: grid; }
.next-meal strong { margin: 3px 0; }
.next-meal span { color: var(--muted); font-size: 10px; }
.avoid-strip { margin-top: 8px; display: grid; gap: 2px; color: var(--muted); font-size: 10px; }
.compact-appointments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 16px; }
.compact-appointment { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-soft); }
.compact-appointment .calendar-block { width: 43px; height: 48px; display: grid; place-content: center; text-align: center; border-radius: 11px; background: rgba(124,156,255,.1); color: var(--blue); }
.calendar-block small { font-size: 8px; }
.calendar-block strong { font-size: 18px; line-height: 1; }
.compact-appointment div:last-child { display: grid; }
.compact-appointment span { color: var(--muted); font-size: 9px; }
.daily-timeline-panel { margin-top: 15px; }
.progress-track { height: 6px; border-radius: 99px; background: var(--panel-soft); overflow: hidden; margin: 14px 0 19px; }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--blue)); transition: width .3s ease; }
.daily-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
.schedule-item { padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-soft); display: grid; position: relative; }
.schedule-item time { color: var(--mint); font-weight: 800; font-size: 10px; }
.schedule-item strong { margin: 5px 0; font-size: 11px; line-height: 1.25; }
.schedule-item small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.schedule-item.TAKEN { opacity: .55; }
.schedule-item.DUE, .schedule-item.OVERDUE { border-color: rgba(241,186,104,.34); }

.metric-grid { display: grid; gap: 13px; margin-bottom: 15px; }
.metric-grid.four { grid-template-columns: repeat(4, 1fr); }
.metric-grid article { padding: 17px; display: grid; }
.metric-grid small { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.metric-grid strong { font-size: 24px; letter-spacing: -.04em; margin: 6px 0 0; }
.metric-grid span { color: var(--muted); font-size: 10px; }
.chart-panel { margin-bottom: 15px; }
.large-chart { min-height: 290px; margin-top: 17px; }
.large-chart svg, .gi-chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-label { fill: var(--muted); font-size: 10px; }
.chart-sys, .chart-dia, .chart-hr { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-sys { stroke: var(--mint); }
.chart-dia { stroke: var(--blue); }
.chart-hr { stroke: var(--amber); stroke-dasharray: 5 5; }
.chart-dot { stroke: var(--panel-solid); stroke-width: 2; }
.chart-legend { display: flex; gap: 13px; flex-wrap: wrap; color: var(--muted); font-size: 9px; }
.chart-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.chart-legend .sys::before { background: var(--mint); }
.chart-legend .dia::before { background: var(--blue); }
.chart-legend .hr::before { background: var(--amber); }
.table-scroll { overflow-x: auto; margin: 12px -6px -5px; }
.data-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.data-table th { padding: 10px 12px; text-align: left; color: var(--subtle); font-size: 8px; letter-spacing: .1em; border-bottom: 1px solid var(--border); }
.data-table td { padding: 13px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table strong { font-size: 12px; }
.data-table small, .row-note { display: block; color: var(--muted); font-size: 9px; margin-top: 2px; }
.classification { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 7px; font-size: 8px; font-weight: 900; letter-spacing: .07em; }
.classification.GREEN, .classification.NORMAL, .classification.good { background: rgba(99,228,187,.12); color: var(--mint); }
.classification.YELLOW, .classification.FOLLOW, .classification.watch { background: rgba(241,186,104,.12); color: var(--amber); }
.classification.ORANGE, .classification.HIGH { background: rgba(255,152,107,.12); color: var(--orange); }
.classification.RED { background: rgba(255,111,127,.12); color: var(--red); }

.safety-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 17px; margin-bottom: 15px; border-radius: 16px; background: linear-gradient(90deg, rgba(99,228,187,.1), rgba(124,156,255,.05)); border: 1px solid rgba(99,228,187,.2); }
.safety-banner > span { color: var(--mint); font-size: 21px; }
.safety-banner strong { font-size: 12px; }
.safety-banner p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.segmented { display: inline-flex; gap: 3px; padding: 4px; margin: 0 0 14px; background: var(--panel-soft); border: 1px solid var(--border); border-radius: 12px; }
.segmented button { border: 0; background: transparent; color: var(--muted); padding: 7px 12px; border-radius: 9px; font-size: 10px; font-weight: 700; }
.segmented button.active { background: var(--panel-solid); color: var(--mint); box-shadow: 0 4px 12px rgba(0,0,0,.13); }
.medication-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-bottom: 15px; }
.med-card { padding: 17px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); display: grid; grid-template-columns: 44px 1fr; gap: 13px; }
.med-card.HELD { opacity: .62; }
.med-glyph { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, rgba(99,228,187,.16), rgba(124,156,255,.1)); color: var(--mint); font-size: 18px; font-weight: 900; }
.med-card-main { min-width: 0; }
.med-card-head { display: flex; justify-content: space-between; gap: 10px; }
.med-card h3 { margin: 0; font-size: 15px; }
.med-card h3 small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 500; }
.med-dose { display: block; color: var(--mint); font-size: 11px; font-weight: 700; margin: 9px 0 5px; }
.med-card p { color: var(--muted); font-size: 10px; margin: 4px 0; }
.med-schedule { display: flex; gap: 5px; flex-wrap: wrap; margin: 9px 0; }
.med-schedule span { padding: 4px 7px; border: 1px solid var(--border); background: var(--panel-soft); border-radius: 8px; font-size: 9px; }
.med-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.med-actions button { border: 1px solid var(--border-strong); background: var(--panel-soft); color: var(--text); border-radius: 9px; padding: 7px 9px; font-size: 9px; font-weight: 700; }
.med-actions button.primary { color: #061610; background: var(--mint); border-color: transparent; }
.timeline-list { display: grid; gap: 0; margin-top: 13px; }
.timeline-item { position: relative; padding: 10px 0 10px 27px; border-left: 1px solid var(--border); margin-left: 7px; display: grid; }
.timeline-item::before { content: ""; position: absolute; width: 8px; height: 8px; left: -5px; top: 17px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); }
.timeline-item strong { font-size: 11px; }
.timeline-item span, .timeline-item time { color: var(--muted); font-size: 9px; }

.program-hero { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 15px; overflow: hidden; position: relative; }
.program-hero h3 { font-size: 27px; margin: 10px 0 4px; }
.program-hero p { max-width: 680px; color: var(--muted); margin: 0; }
.program-progress { display: flex; align-items: center; gap: 13px; min-width: 235px; }
.progress-ring { --progress: 2%; width: 88px; height: 88px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at center, var(--panel-solid) 55%, transparent 57%), conic-gradient(var(--mint) var(--progress), var(--panel-soft) 0); }
.progress-ring strong { font-size: 20px; }
.progress-ring small { color: var(--muted); font-size: 7px; letter-spacing: .1em; }
.program-progress > span { color: var(--mint); font-size: 10px; font-weight: 700; max-width: 120px; }
.gut-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 15px; margin-bottom: 15px; }
.meal-plan-list { display: grid; gap: 8px; margin-top: 15px; }
.meal-row { display: grid; grid-template-columns: 54px 90px 1fr; gap: 10px; padding: 11px; background: var(--panel-soft); border: 1px solid var(--border); border-radius: 13px; }
.meal-row time { color: var(--mint); font-weight: 800; font-size: 10px; }
.meal-row strong { font-size: 10px; }
.meal-row span { color: var(--muted); font-size: 10px; }
.meal-row small { display: block; color: var(--subtle); font-size: 8px; margin-top: 3px; }
.meal-row.current { border-color: rgba(99,228,187,.34); background: rgba(99,228,187,.07); }
.portion-policy, .clinical-note { margin: 13px 0 0; padding: 11px 13px; border-radius: 12px; background: rgba(241,186,104,.08); border: 1px solid rgba(241,186,104,.17); color: var(--muted); font-size: 9px; }
.hydration-panel { text-align: center; }
.hydration-vessel { position: relative; height: 230px; width: 130px; margin: 18px auto; border-radius: 24px 24px 38px 38px; border: 2px solid var(--border-strong); overflow: hidden; background: var(--panel-soft); display: grid; place-items: center; }
.hydration-vessel i { position: absolute; inset: auto 0 0; height: 0; background: linear-gradient(180deg, rgba(124,156,255,.6), rgba(99,228,187,.72)); transition: height .35s ease; }
.hydration-vessel span { position: relative; z-index: 1; font-size: 24px; font-weight: 800; }
.hydration-panel > p { color: var(--muted); font-size: 9px; }
.hydration-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.hydration-actions button { padding: 8px 4px; border-radius: 9px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); font-size: 9px; }
.gi-chart { height: 240px; margin-top: 14px; }
.bowel-history { display: flex; gap: 7px; overflow-x: auto; padding-top: 12px; }
.bowel-pill { min-width: 105px; border: 1px solid var(--border); background: var(--panel-soft); border-radius: 12px; padding: 9px; display: grid; }
.bowel-pill strong { font-size: 12px; }
.bowel-pill span { color: var(--muted); font-size: 8px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tag-cloud span { padding: 6px 9px; border-radius: 99px; border: 1px solid rgba(255,152,107,.18); background: rgba(255,152,107,.07); color: var(--orange); font-size: 9px; }
.allowed-note { margin-top: 14px; padding: 13px; border-radius: 13px; background: rgba(99,228,187,.08); display: grid; }
.allowed-note strong { color: var(--mint); font-size: 10px; }
.allowed-note span { color: var(--muted); font-size: 9px; }
.challenge-panel, .tolerance-panel { margin-bottom: 15px; }
.challenge-sequence { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 15px; }
.challenge-step { padding: 11px; text-align: center; border: 1px solid var(--border); border-radius: 13px; background: var(--panel-soft); display: grid; }
.challenge-step small { color: var(--subtle); font-size: 8px; }
.challenge-step strong { font-size: 9px; margin-top: 3px; }
.challenge-step.current { border-color: rgba(99,228,187,.4); color: var(--mint); }
.tolerance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tolerance-column { border: 1px solid var(--border); background: var(--panel-soft); border-radius: 14px; padding: 12px; min-height: 110px; }
.tolerance-column h4 { margin: 0 0 7px; font-size: 9px; letter-spacing: .08em; color: var(--muted); }
.tolerance-column span { display: block; padding: 5px 0; font-size: 10px; border-bottom: 1px solid var(--border); }

.profile-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; margin-bottom: 15px; }
.avatar { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(145deg, rgba(99,228,187,.2), rgba(124,156,255,.16)); color: var(--mint); font-size: 22px; font-weight: 900; }
.profile-strip small { color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.profile-strip h3 { margin: 2px 0; }
.profile-strip p { margin: 0; color: var(--muted); font-size: 10px; }
.record-tabs { display: flex; gap: 5px; overflow-x: auto; margin-bottom: 15px; border-bottom: 1px solid var(--border); }
.record-tabs button { white-space: nowrap; padding: 10px 14px; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 10px; border-bottom: 2px solid transparent; }
.record-tabs button.active { color: var(--mint); border-color: var(--mint); }
.medical-panel { display: none; }
.medical-panel.active { display: block; animation: reveal .2s ease; }
.workflow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.workflow-card { padding: 15px; border: 1px solid rgba(124,156,255,.2); border-radius: 16px; background: linear-gradient(145deg, rgba(124,156,255,.1), var(--panel-soft)); }
.workflow-card h3 { margin: 8px 0 2px; font-size: 14px; }
.workflow-card p { color: var(--muted); margin: 0; font-size: 9px; }
.workflow-steps { display: flex; gap: 4px; margin-top: 12px; }
.workflow-steps span { flex: 1; padding: 5px; border-radius: 7px; background: var(--panel-soft); color: var(--muted); font-size: 7px; text-align: center; }
.workflow-steps span.active { background: rgba(99,228,187,.12); color: var(--mint); }
.appointment-list { display: grid; gap: 9px; }
.appointment-card { display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: center; padding: 15px; background: var(--panel); border: 1px solid var(--border); border-radius: 17px; }
.appointment-date { width: 58px; height: 60px; border-radius: 14px; background: var(--panel-soft); display: grid; place-content: center; text-align: center; }
.appointment-date small { color: var(--mint); font-size: 8px; }
.appointment-date strong { font-size: 23px; line-height: 1; }
.appointment-card h3 { margin: 0; font-size: 14px; }
.appointment-card p { margin: 3px 0; color: var(--muted); font-size: 9px; }
.appointment-card .meta { display: flex; gap: 9px; flex-wrap: wrap; color: var(--subtle); font-size: 8px; }
.appointment-card button { border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); padding: 7px 9px; border-radius: 9px; font-size: 8px; }
.lab-summary-strip { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.lab-summary-strip > span { padding: 8px 11px; border-radius: 11px; background: var(--panel-soft); font-size: 9px; }
.lab-summary-strip b { font-size: 15px; margin-right: 3px; }
.lab-summary-strip .high { color: var(--orange); }
.lab-summary-strip .watch { color: var(--amber); }
.lab-summary-strip .good { color: var(--mint); }
.lab-summary-strip button { margin-left: auto; }
.clinical-event-list { display: grid; gap: 10px; }
.clinical-event { padding: 16px 16px 16px 19px; border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: 16px; background: var(--panel); }
.clinical-event header { display: flex; justify-content: space-between; gap: 12px; }
.clinical-event h3 { margin: 0; font-size: 14px; }
.clinical-event time { color: var(--mint); font-size: 9px; white-space: nowrap; }
.clinical-event p { color: var(--muted); font-size: 10px; margin: 7px 0 0; }
.context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.condition-grid { display: grid; gap: 9px; }
.condition-card { padding: 14px; border: 1px solid var(--border); background: var(--panel); border-radius: 15px; }
.condition-card h3 { margin: 7px 0 3px; font-size: 13px; }
.condition-card p { margin: 0; color: var(--muted); font-size: 9px; }

.report-layout { display: grid; grid-template-columns: 230px 1fr; gap: 15px; align-items: start; }
.report-controls { position: sticky; top: 95px; display: grid; gap: 7px; }
.report-controls h3 { margin: 0 0 7px; }
.report-controls label { display: flex; gap: 8px; align-items: center; padding: 7px; border-radius: 9px; color: var(--muted); font-size: 10px; }
.report-controls input { accent-color: var(--mint); }
.report-paper { background: #fff; color: #18272d; border-radius: 16px; padding: clamp(22px, 4vw, 52px); min-height: 800px; box-shadow: var(--shadow); }
.report-brand { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid #1a9e7a; padding-bottom: 17px; margin-bottom: 17px; }
.report-brand h2 { margin: 0; color: #0c725c; font-size: 24px; }
.report-brand p, .report-brand time { color: #64767c; font-size: 9px; margin: 2px 0; }
.report-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 18px; }
.report-summary-grid div { border: 1px solid #dce6e4; background: #f5faf9; border-radius: 9px; padding: 9px; display: grid; }
.report-summary-grid small { color: #6c7c80; font-size: 7px; letter-spacing: .08em; }
.report-summary-grid strong { font-size: 12px; }
.report-section { margin-top: 20px; }
.report-section h3 { color: #0d725d; margin: 0 0 8px; font-size: 14px; }
.report-section p, .report-section li { font-size: 9px; line-height: 1.55; }
.report-table { width: 100%; border-collapse: collapse; font-size: 8px; }
.report-table th, .report-table td { padding: 6px; text-align: left; border-bottom: 1px solid #e3ecea; vertical-align: top; }
.report-table th { color: #5b6b70; background: #f2f7f6; }
.report-disclaimer { border-top: 1px solid #dce6e4; color: #6c7c80; font-size: 8px; margin-top: 22px; padding-top: 11px; }

.audit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 15px; }
.migration-report { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; }
.migration-report div { padding: 10px; background: var(--panel-soft); border: 1px solid var(--border); border-radius: 12px; display: grid; }
.migration-report small { color: var(--muted); font-size: 8px; }
.migration-report strong { font-size: 16px; }
.safety-list { display: grid; gap: 8px; margin-top: 15px; }
.safety-row { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 9px; }
.safety-row span { color: var(--mint); }
.privacy-card { text-align: center; display: grid; place-content: center; }
.privacy-icon { font-size: 30px; color: var(--mint); }
.privacy-card h3 { margin: 8px 0 3px; }
.privacy-card p { margin: 0; color: var(--muted); font-size: 9px; }
.audit-list { max-height: 520px; overflow: auto; margin-top: 12px; }
.audit-row { display: grid; grid-template-columns: 150px 100px 130px 1fr; gap: 10px; padding: 9px; border-bottom: 1px solid var(--border); font-size: 9px; }
.audit-row time, .audit-row span { color: var(--muted); }
.audit-row b { color: var(--mint); }

.modal {
  width: min(840px, calc(100% - 24px));
  max-height: min(90vh, 900px);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  background: var(--panel-solid);
  color: var(--text);
  box-shadow: 0 34px 100px rgba(0,0,0,.5);
}
.modal::backdrop { background: rgba(2,8,13,.76); backdrop-filter: blur(7px); }
.modal-shell { padding: 21px; max-height: min(90vh, 900px); overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 4px 0 0; font-size: 24px; letter-spacing: -.04em; }
.quick-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 17px; }
.quick-menu button { min-height: 110px; text-align: left; border: 1px solid var(--border); background: var(--panel-soft); border-radius: 16px; color: var(--text); padding: 14px; display: grid; }
.quick-menu button span { font-size: 20px; color: var(--mint); }
.quick-menu button strong { align-self: end; }
.quick-menu button small { color: var(--muted); font-size: 9px; }
.record-form { display: none; padding-top: 16px; }
.record-form.active { display: grid; gap: 12px; }
.record-form > label, .form-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.form-grid { display: grid; gap: 10px; }
.form-grid.two { grid-template-columns: repeat(2, 1fr); }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.form-grid.four { grid-template-columns: repeat(4, 1fr); }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel-soft);
  padding: 10px 11px;
  color: var(--text);
  font-size: 12px;
}
textarea { resize: vertical; }
input[type="range"] { padding: 0; accent-color: var(--mint); }
input[type="checkbox"] { width: 16px; height: 16px; padding: 0; accent-color: var(--mint); }
.vital-inputs label { position: relative; }
.vital-inputs input { padding-right: 48px; font-size: 19px; font-weight: 800; }
.vital-inputs label > span { position: absolute; right: 9px; bottom: 13px; color: var(--muted); font-size: 8px; }
fieldset { margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 14px; }
legend { padding: 0 6px; color: var(--mint); font-size: 10px; font-weight: 800; }
legend small { color: var(--muted); font-weight: 400; }
.check-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.check-grid label { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--panel-soft); border-radius: 10px; padding: 8px; color: var(--muted); font-size: 9px; }
.sliders label { padding: 8px; background: var(--panel-soft); border: 1px solid var(--border); border-radius: 11px; }
.sliders output { justify-self: end; color: var(--mint); font-size: 14px; }
.dose-confirm { padding: 13px; border-radius: 13px; background: rgba(99,228,187,.08); color: var(--muted); border: 1px solid rgba(99,228,187,.18); }
.dose-confirm strong { color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 5px; }
.settings-modal { width: min(650px, calc(100% - 24px)); }
.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 8px; width: min(350px, calc(100% - 36px)); }
.toast { padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 13px; background: var(--panel-solid); box-shadow: var(--shadow); font-size: 11px; animation: toast-in .2s ease; }
.toast.warning { border-color: rgba(241,186,104,.4); color: var(--amber); }
.toast.error { border-color: rgba(255,111,127,.45); color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } }
.empty-state { padding: 25px; text-align: center; color: var(--muted); font-size: 10px; border: 1px dashed var(--border); border-radius: 13px; }
.mobile-dock { display: none; }

@media (max-width: 1180px) {
  .next-action-card, .bp-status-card { grid-column: span 6; }
  .medication-today-card, .fodmap-today-card { grid-column: span 6; }
  .gi-status-card { grid-column: span 6; }
  .appointment-today-card { grid-column: span 6; }
  .bp-status-grid { grid-template-columns: repeat(2, 1fr); }
  .compact-appointments { grid-template-columns: 1fr; }
  .audit-grid { grid-template-columns: 1fr 1fr; }
  .privacy-card { grid-column: auto; }
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow); }
  .sidebar.open { transform: none; }
  .app-shell { margin-left: 0; padding: 0 18px 92px; }
  .topbar { margin: 0 -18px 22px; padding: 0 18px; min-height: 68px; }
  .mobile-menu { display: block; }
  .topbar-title { margin-right: auto; margin-left: 8px; }
  .topbar-actions time { display: none; }
  .mobile-dock {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 45;
    padding: 7px;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
    backdrop-filter: blur(20px);
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
  }
  .mobile-dock button { border: 0; background: transparent; color: var(--muted); border-radius: 13px; padding: 7px 2px; display: grid; place-items: center; gap: 1px; font-size: 8px; font-weight: 700; }
  .mobile-dock button span { font-size: 18px; }
  .mobile-dock button.active { color: var(--mint); background: rgba(99,228,187,.08); }
  .metric-grid.four { grid-template-columns: repeat(2, 1fr); }
  .gut-grid { grid-template-columns: 1fr; }
  .medication-grid { grid-template-columns: 1fr; }
  .challenge-sequence { grid-template-columns: repeat(3, 1fr); }
  .tolerance-grid { grid-template-columns: repeat(2, 1fr); }
  .report-layout { grid-template-columns: 1fr; }
  .report-controls { position: static; grid-template-columns: repeat(2, 1fr); }
  .report-controls h3 { grid-column: 1 / -1; }
  .context-grid { grid-template-columns: 1fr; }
  .audit-row { grid-template-columns: 120px 80px 100px 1fr; }
}

@media (max-width: 650px) {
  body { font-size: 13px; }
  .app-shell { padding-inline: 12px; }
  .topbar { margin-inline: -12px; padding-inline: 12px; }
  .topbar-title p { display: none; }
  .topbar-title h1 { font-size: 16px; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .primary-button { padding: 8px 10px; font-size: 11px; }
  .today-head, .page-heading { align-items: flex-start; margin-top: 2px; }
  .today-head h2, .page-heading h2 { font-size: 28px; }
  .today-head p:last-child, .page-heading p:last-child { font-size: 11px; }
  .date-orb { width: 61px; height: 70px; border-radius: 20px; }
  .date-orb strong { font-size: 24px; }
  .page-heading { display: grid; }
  .today-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .next-action-card, .bp-status-card, .medication-today-card, .gi-status-card, .fodmap-today-card, .appointment-today-card { grid-column: 1; }
  .panel { padding: 15px; border-radius: 18px; }
  .next-action-card { min-height: 220px; }
  .next-action-content { padding-top: 22px; }
  .bp-status-grid { gap: 7px; }
  .bp-status-grid > div { padding: 11px; }
  .bp-status-grid strong { font-size: 15px; }
  .metric-grid { gap: 7px; }
  .metric-grid article { padding: 12px; }
  .metric-grid strong { font-size: 20px; }
  .large-chart { min-height: 235px; }
  .program-hero { align-items: flex-start; }
  .program-progress { min-width: 100px; display: grid; justify-items: center; }
  .program-progress > span { text-align: center; }
  .progress-ring { width: 78px; height: 78px; }
  .meal-row { grid-template-columns: 48px 1fr; }
  .meal-row > div { grid-column: 1 / -1; }
  .hydration-vessel { height: 180px; width: 110px; }
  .appointment-card { grid-template-columns: 48px 1fr; }
  .appointment-card > div:last-child { grid-column: 2; }
  .appointment-date { width: 48px; height: 54px; }
  .audit-grid { grid-template-columns: 1fr; }
  .privacy-card { grid-column: 1; }
  .migration-report { grid-template-columns: 1fr 1fr; }
  .audit-row { grid-template-columns: 1fr 80px; }
  .audit-row span:last-child { grid-column: 1 / -1; }
  .form-grid.two, .form-grid.three, .form-grid.four { grid-template-columns: 1fr; }
  .sliders { grid-template-columns: repeat(2, 1fr) !important; }
  .quick-menu { grid-template-columns: repeat(2, 1fr); }
  .quick-menu button { min-height: 95px; }
  .modal-shell { padding: 16px; }
  .modal-header h2 { font-size: 21px; }
  .tolerance-grid { grid-template-columns: 1fr; }
  .report-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .report-paper { padding: 18px; border-radius: 12px; overflow-x: auto; }
  .report-controls { grid-template-columns: 1fr; }
}

@media print {
  body { background: #fff; }
  .sidebar, .topbar, .mobile-dock, .page-heading, .report-controls, .ambient, .toast-stack { display: none !important; }
  .app-shell { margin: 0; padding: 0; }
  .view { display: none !important; }
  [data-view-panel="reports"] { display: block !important; }
  .report-layout { display: block; }
  .report-paper { box-shadow: none; border-radius: 0; padding: 0; min-height: 0; }
  @page { size: A4; margin: 14mm; }
  .report-section { break-inside: avoid; }
}

/* ===================== iOS build additions (v20260904-ios1) ===================== */
body { min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
.app-shell { min-height: 100dvh; }
.mic-button { color: var(--red); font-size: 15px; }
html.standalone .topbar { padding-top: env(safe-area-inset-top); min-height: calc(79px + env(safe-area-inset-top)); }
html.standalone .sidebar { padding-top: calc(22px + env(safe-area-inset-top)); }
html.standalone .app-shell { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
html.standalone .toast-stack { bottom: calc(92px + env(safe-area-inset-bottom)); }
/* iOS zooms into inputs smaller than 16px; keep them at 16px on touch devices only. */
@media (pointer: coarse) { input:not([type=checkbox]):not([type=range]), select, textarea { font-size: 16px; } }

.shell-bar { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 90; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--panel-solid); box-shadow: var(--shadow); }
.shell-bar[hidden] { display: none; }
.shell-bar > div { display: grid; gap: 2px; margin-right: auto; }
.shell-bar strong { font-size: 12px; }
.shell-bar span { color: var(--muted); font-size: 11px; }
.shell-bar.update { border-color: rgba(99,228,187,.4); }
@media (min-width: 901px) { .shell-bar { left: auto; right: 24px; bottom: 24px; width: min(460px, calc(100% - 48px)); } }

/* Voice memos */
.voice-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .9fr); gap: 15px; margin-bottom: 15px; }
.voice-modes { display: inline-flex; margin-bottom: 4px; }
.voice-modes button[disabled] { opacity: .35; }
.voice-stage { display: grid; justify-items: center; gap: 10px; padding: 22px 0 18px; text-align: center; }
.voice-record-button { width: 92px; height: 92px; border-radius: 50%; border: 0; display: grid; place-items: center; background: linear-gradient(135deg, #73edc5, #4ad3a7); box-shadow: 0 0 0 10px rgba(99,228,187,.12), 0 14px 40px rgba(54,199,153,.25); transition: transform .15s ease; }
.voice-record-button::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: #061610; transition: border-radius .18s ease, transform .18s ease; }
body.voice-recording .voice-record-button::before { border-radius: 7px; background: #fff; transform: scale(.85); }
.voice-record-button:active { transform: scale(.95); }
body.voice-recording .voice-record-button { background: linear-gradient(135deg, #ff8496, #ff5a6e); box-shadow: 0 0 0 10px rgba(255,111,127,.16), 0 14px 40px rgba(255,111,127,.3); animation: voice-pulse 1.4s ease-in-out infinite; }
@keyframes voice-pulse { 50% { box-shadow: 0 0 0 22px rgba(255,111,127,.05), 0 14px 40px rgba(255,111,127,.3); } }
@media (prefers-reduced-motion: reduce) { body.voice-recording .voice-record-button { animation: none; } }
#voice-timer { font-size: 30px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.voice-status { margin: 0; color: var(--muted); font-size: 12px; max-width: 420px; }
.voice-status.good { color: var(--mint); }
.voice-status.warning { color: var(--amber); }
.voice-status.error { color: var(--red); }
.voice-recorder { display: grid; gap: 12px; }
.voice-recorder > label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.voice-recorder label small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.voice-examples { display: grid; gap: 6px; margin-top: 12px; }
.voice-examples small { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.voice-examples span { padding: 8px 11px; border-radius: 11px; background: var(--panel-soft); border: 1px solid var(--border); color: var(--text); font-size: 11px; }
.voice-side { display: grid; gap: 10px; align-content: start; }
.metric-grid.three { grid-template-columns: repeat(3, 1fr); }
.metric-grid.compact { gap: 7px; margin-bottom: 0; }
.metric-grid.compact article { padding: 11px; }
.metric-grid.compact strong { font-size: 20px; }
.voice-footnote { margin: 0; color: var(--muted); font-size: 10px; }
.voice-memo-list { display: grid; gap: 10px; margin-top: 13px; }
.voice-empty { display: grid; gap: 6px; padding: 22px; text-align: center; border: 1px dashed var(--border-strong); border-radius: 15px; color: var(--muted); font-size: 12px; }
.voice-empty strong { color: var(--text); }
.voice-memo { padding: 14px; display: grid; gap: 10px; }
.voice-memo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.voice-memo-head time, .voice-meta { color: var(--muted); font-size: 10px; }
.voice-meta { margin-left: auto; }
.voice-tag { padding: 3px 8px; border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: .12em; background: var(--panel-soft); color: var(--muted); border: 1px solid var(--border); }
.voice-tag.tag-BP { color: var(--blue); }
.voice-tag.tag-MEDICATION { color: var(--mint); }
.voice-tag.tag-MEAL { color: var(--amber); }
.voice-tag.tag-SYMPTOM { color: var(--orange); }
.voice-memo-transcript { width: 100%; resize: vertical; }
.voice-memo-player audio { width: 100%; margin-top: 2px; }
.voice-memo-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.voice-memo-actions button { border: 1px solid var(--border-strong); background: var(--panel-soft); color: var(--text); border-radius: 9px; padding: 8px 10px; font-size: 10px; font-weight: 700; }
.voice-memo-actions button.primary { color: #061610; background: var(--mint); border-color: transparent; }
.voice-memo-actions button.danger { color: var(--red); }

@media (max-width: 900px) {
  .mobile-dock { grid-template-columns: repeat(6, 1fr); }
  .voice-layout { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .metric-grid.three { grid-template-columns: repeat(3, 1fr); }
  .voice-record-button { width: 104px; height: 104px; font-size: 38px; }
  .voice-memo-actions button { flex: 1 1 auto; }
}
@media print { .shell-bar, .mic-button { display: none !important; } }