:root { color-scheme: light; --bg: #f5f6f2; --panel: #fff; --line: #dce5df; --text: #203d36; --muted: #596e66; --accent: #087d66; --soft: #eaf4ee; --heart: #bc4d3c; --blue: #4b68b3; --filter-height: 280px; }
.app-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); max-width: 1500px; margin: 0 auto; }
.app-layout main { width: 100%; min-width: 0; }
.module-sidebar { padding: 36px 14px; border-right: 1px solid var(--line); }
.module-sidebar nav { position: sticky; top: 24px; display: grid; gap: 8px; margin-top: 18px; }
.module-sidebar nav a { padding: 12px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.module-sidebar nav a span { display: inline-block; width: 24px; }
.module-sidebar nav a[aria-current] { background: var(--accent); color: white; }
.module-sidebar > p { color: var(--muted); font-size: 12px; margin: 30px 12px; }
.daily-date-panel { margin-bottom: 24px; }
.daily-date-form, .daily-dates, .daily-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.daily-dates { margin-top: 16px; gap: 8px; }
.daily-dates a { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: 12px; }
.daily-dates a[aria-current] { background: var(--soft); border-color: var(--accent); font-weight: 700; }
.daily-summary small, .daily-method, .daily-chart-panel details { font-size: 12px; color: var(--muted); }
.daily-summary dd small { font-size: 16px; }
#daily-chart { width: 100%; display: block; touch-action: pan-y; }
#daily-chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.daily-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.daily-step-bar { fill: var(--accent); opacity: .5; }
.daily-heart-point { fill: var(--heart); }
.daily-workout-line { stroke-dasharray: 4 2; }
.daily-heart-key { color: var(--heart); fill: var(--heart); }
.daily-steps-key { color: var(--accent); fill: var(--accent); }
.daily-cursor { stroke: var(--text); stroke-dasharray: 4 4; pointer-events: none; }
.daily-cursor[hidden] { display: none; }
#daily-tooltip { min-height: 28px; font-size: 13px; font-variant-numeric: tabular-nums; }
.wellness-panel { margin-top: 24px; }
.wellness-source, .sleep-clock small { font-size: 12px; color: var(--muted); }
.sleep-clock { font-size: 18px; font-weight: 600; }
.wellness-panel h3 { font-size: 14px; margin: 0 0 8px; }
.wellness-chart-wrap { min-width: 0; padding-top: 18px; }
.wellness-chart { width: 100%; display: block; touch-action: pan-y; }
.wellness-chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wellness-line { fill: none; stroke: var(--blue); stroke-width: 1.5; }
.wellness-point { fill: var(--blue); }
.wellness-cursor { stroke: var(--text); stroke-dasharray: 3 4; pointer-events: none; }
.wellness-cursor[hidden] { display: none; }
.wellness-tooltip { font-size: 12px; color: var(--muted); min-height: 22px; }
.daily-alert { fill: var(--heart); }
.wellness-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; }
.wellness-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; background: var(--key); }
.wellness-test { padding: 16px 0; border-top: 1px solid var(--line); }
.wellness-optional > summary { font-weight: 600; cursor: pointer; }
.wellness-table-scroll { max-width: 100%; overflow-x: auto; }
.wellness-table-scroll table { min-width: 650px; }
.wellness-table-scroll td { white-space: nowrap; }
@media (max-width: 800px) {
  .app-layout { display: block; }
  .module-sidebar { padding: 12px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .module-sidebar > .eyebrow, .module-sidebar > p { display: none; }
  .module-sidebar nav { position: static; display: flex; margin: 0; flex-wrap: wrap; }
  .module-sidebar nav a { padding: 8px 10px; font-size: 12px; }
  .daily-legend { font-size: 12px; }
  .daily-chart-panel { padding: 16px 10px; }
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 85% 0, #e6f1e7 0, transparent 45%), var(--bg); color: var(--text); font: 15px/1.6 system-ui, sans-serif; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
header { padding: 20px 5%; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 28px; background: #ffffffb8; }
.brand { font-size: 25px; font-weight: 700; color: var(--text); } .tagline, footer { color: var(--muted); }
.badge { margin-left: auto; color: var(--accent); font-size: 10px; letter-spacing: 1px; border: 1px solid var(--line); background: var(--soft); border-radius: 20px; padding: 5px 12px; white-space: nowrap; }
.header-links { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 13px; }
.header-links { flex-wrap: wrap; }
.header-links form { margin: 0; }
.login-layout { width: min(100%, 500px); margin: 8vh auto; }
.login-panel h1 { font-size: 32px; line-height: 1.2; margin: 12px 0; }
.login-form { display: grid; gap: 10px; margin-top: 24px; }
.login-form input { width: 100%; min-width: 0; padding: 12px; font: inherit; border: 1px solid var(--line); border-radius: 9px; }
.login-form button { margin-top: 14px; }
.login-help { color: var(--muted); font-size: 12px; margin-top: 24px; }
.section-heading { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.section-heading h2 { margin-bottom: 0; }.section-heading a { font-size: 13px; }
.zone-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.zone-setting { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-top: 3px solid var(--zone-color); border-radius: 12px; }
.zone-setting legend { color: var(--zone-color); font-weight: 700; padding: 0 6px; }
.zone-setting label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13px; }
.zone-setting input { width: 100%; }.zone-setting small { color: var(--muted); font-size: 12px; }
.settings-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
main { max-width: 1250px; margin: 32px auto; padding: 0 24px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
#connection-state { margin-left: 12px; color: var(--muted); }
.actions { display: flex; gap: 10px; } button { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 9px 16px; font: inherit; font-weight: 550; cursor: pointer; transition: background .15s, border-color .15s; }
button:hover { background: var(--soft); border-color: #9abaae; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 650; box-shadow: 0 3px 8px #087d6615; } button.primary:hover { background: #076752; } button:disabled { opacity: .4; cursor: not-allowed; }
.sync-status { color: var(--muted); font-size: 12px; } .notice { background: var(--soft); border-left: 3px solid var(--accent); border-radius: 9px; padding: 12px 16px; } .error { color: #a33e29; }
.page-heading { display: flex; justify-content: space-between; align-items: center; margin: 35px 0 20px; }
.page-heading h1 { margin: 0; font-size: clamp(26px, 3vw, 38px); letter-spacing: -1.2px; line-height: 1.2; max-width: 25ch; } .eyebrow { color: var(--accent); font-size: 11px; letter-spacing: 1.8px; font-weight: 700; }
.page-intro { color: var(--muted); max-width: 65ch; margin-bottom: 0; }
.saved-count { background: var(--soft); border-radius: 20px; padding: 6px 14px; color: var(--accent); white-space: nowrap; font-size: 12px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; overflow: auto; box-shadow: 0 4px 20px #203d3605; }
h2 { font-size: 19px; letter-spacing: -.3px; margin: 0 0 20px; } table { width: 100%; border-collapse: collapse; text-align: left; }
th { color: var(--muted); font-size: 12px; font-weight: 650; } th, td { padding: 14px 12px; border-bottom: 1px solid var(--line); }
thead { background: #f3f7f4; } td { font-variant-numeric: tabular-nums; }
#activity-list tbody tr:nth-child(even) { background: #fafbf9; }
#activity-list tbody tr:hover { background: var(--soft); }
#activity-list td:first-child a { font-weight: 650; color: var(--text); }
#activity-list td:first-child { border-left: 3px solid #b1d9c9; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.route-history-panel { margin-bottom: 20px; overflow: hidden; }
.route-history-scroll { overflow-x: auto; max-width: 100%; }
#route-history-table { min-width: 650px; }
#route-history-table td { white-space: nowrap; vertical-align: top; }
#route-history-table small { display: block; font-weight: 400; color: var(--muted); }
.route-value { font-weight: 650; }
.route-delta, .route-coverage { margin-top: 4px; font-size: 12px; }
.route-current { background: var(--soft); }
.route-average { background: #f3f7f4; border-top: 2px solid var(--line); }
.route-history-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#route-map { height: 310px; border-radius: 6px; } #heart-rate-chart { width: 100%; min-height: 240px; }
.axis { stroke: #9bad9f; } svg text { fill: var(--muted); font: 12px system-ui; } .heart-line { stroke: var(--heart); stroke-width: 2; fill: none; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-height: 400px; overflow: auto; } summary { cursor: pointer; color: var(--accent); }
.metrics th { width: 40%; overflow-wrap: anywhere; } footer { max-width: 1250px; margin: 35px auto; padding: 24px; font-size: 12px; }
.calendar-panel { margin-bottom: 24px; }
.calendar-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.calendar-heading h2 { font-size: 24px; margin-bottom: 0; }
.calendar-heading p { margin: 4px 0; }
.calendar-month + .calendar-month { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.calendar-month h3 { margin: 0 0 12px; font-size: 16px; }
.calendar-scroll { overflow-x: auto; padding: 4px; margin: -4px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; min-width: 630px; }
.calendar-weekday { color: var(--muted); text-align: center; font-size: 12px; }
.calendar-day { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 116px; padding: 10px; border-radius: 7px; border: 1px solid transparent; }
.calendar-day:hover { text-decoration: none; outline: 2px solid var(--accent); }
.calendar-day.today { border-color: var(--accent); }
.calendar-day.selected { outline: 3px solid var(--text); outline-offset: 1px; }
.calendar-date { font-weight: 650; }
.calendar-activities { display: flex; flex-direction: column; gap: 5px; font-size: 12px; line-height: 1.35; }
.calendar-activity { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 6px; }
.calendar-activity-type { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.calendar-activity-duration { white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-level="0"] { background: #f1f4ef; color: var(--muted); border-color: #e5ebe3; }
[data-level="1"] { background: #b4e8d8; color: #09281f; }
[data-level="2"] { background: #66c7aa; color: #09281f; }
[data-level="3"] { background: #2b8a6e; color: #fff; }
[data-level="4"] { background: #15533f; color: #fff; }
.calendar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; margin-bottom: 0; }
.legend-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.calendar-note { color: var(--muted); font-size: 12px; }
.activity-summary { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
.activity-summary > div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; flex: 1 1 auto; }
.activity-summary dt { color: var(--muted); font-size: 12px; }
.activity-summary dd { margin: 0; font-size: 22px; font-variant-numeric: tabular-nums; }
.summary-card { border-left: 2px solid var(--line); padding-left: 16px; }
.activity-summary .heart-summary { border-top: 3px solid var(--heart); } .activity-summary .speed-summary, .activity-summary .ascent-summary { border-top: 3px solid var(--accent); }
.activity-summary dd.summary-pair { display: flex; align-items: flex-start; gap: 16px; }
.summary-stat { display: flex; flex-direction: column; min-height: 46px; }
.stat-label { font-size: 11px; letter-spacing: .8px; color: var(--muted); font-weight: 650; }
.secondary-stat { border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font-size: 17px; }
.heart-summary .secondary-stat { color: var(--heart); } .speed-summary .secondary-stat { color: var(--accent); }
.ascent-summary dd { color: var(--accent); }
.ascent-summary .stat-label { letter-spacing: .5px; }
.splits-panel { margin-bottom: 20px; }
.split-heading { display: flex; align-items: center; gap: 10px; }
.split-heading h2 { margin-bottom: 0; }
.split-method { margin-bottom: 12px; font-size: 12px; color: var(--muted); max-width: 90ch; }
.split-note { color: var(--muted); font-size: 13px; max-width: 90ch; }
#split-table { font-variant-numeric: tabular-nums; white-space: nowrap; }
#split-table tbody th { color: var(--text); font-weight: 650; }
#split-table tbody tr:hover { background: var(--soft); }
#split-table .split-profile-uphill { --split-rgb: 252, 119, 126; }
#split-table .split-profile-downhill { --split-rgb: 57, 198, 165; }
#split-table .split-profile-uphill, #split-table .split-profile-downhill { background: rgba(var(--split-rgb), var(--split-tint)); }
#split-table .split-profile-uphill:hover, #split-table .split-profile-downhill:hover { background: rgba(var(--split-rgb), calc(var(--split-tint) + .05)); }
#split-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.partial-split { color: var(--muted); }
.split-badge { font-size: 10px; color: var(--accent); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; margin-left: 6px; }
.zone-0 { --zone-color: #657785; } .zone-1 { --zone-color: #586b91; } .zone-2 { --zone-color: #257eb5; } .zone-3 { --zone-color: #087d66; } .zone-4 { --zone-color: #946008; } .zone-5 { --zone-color: #b7414c; }
.zone-band rect { fill: var(--zone-color); opacity: .12; }
.zone-band text { fill: var(--zone-color); font-weight: 650; }
.zone-band { pointer-events: none; }
.zones-panel { margin-bottom: 20px; }
.zone-bar { display: flex; height: 28px; border-radius: 7px; background: var(--line); margin: 16px 0; }
.zone-segment { flex: 0 0 auto; position: relative; min-width: 0; background: var(--zone-color); color: #fff; text-align: center; font-size: 11px; font-weight: 750; }
.zone-segment:first-child { border-radius: 7px 0 0 7px; }.zone-segment:last-child { border-radius: 0 7px 7px 0; }
.zone-segment > span { display: block; overflow: hidden; line-height: 28px; }
.zone-unknown { background: repeating-linear-gradient(135deg, #e1e7e2, #e1e7e2 5px, #bcc9bf 5px, #bcc9bf 10px); }
.zone-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; font-variant-numeric: tabular-nums; }
.zone-legend-item { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf9; }
.zone-legend-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.zone-legend-item strong { color: var(--zone-color); }.zone-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--zone-color); margin-right: 5px; }
.zone-range { color: var(--muted); font-size: 11px; }
.zone-percent { font-weight: 650; }.zone-duration { color: var(--muted); }
#available-metrics > summary { color: var(--text); font-size: 17px; font-weight: 650; }
.metrics-count { color: var(--muted); font-size: 11px; font-weight: 400; margin-left: 10px; }
#available-metrics[open] > summary { margin-bottom: 20px; }
.heart-chart-container { position: relative; }
#heart-rate-chart { touch-action: pan-y; }
.chart-cursor line { stroke: var(--muted); stroke-dasharray: 4 4; }
.chart-cursor circle { fill: var(--heart); stroke: var(--bg); stroke-width: 2; }
.elevation-line { stroke: var(--accent); stroke-width: 2; fill: none; opacity: .8; }
.elevation-axis { stroke: var(--accent); }
svg text.elevation-label { fill: var(--accent); }
.chart-cursor circle.elevation-dot { fill: var(--accent); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; }
.heart-key { color: var(--heart); } .elevation-key { color: var(--accent); }
.chart-cursor[hidden], .chart-cursor [hidden] { display: none; }
.chart-tooltip { position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; max-width: 100%; white-space: normal; text-align: center; font-variant-numeric: tabular-nums; font-size: 12px; }
.chart-hint { color: var(--muted); font-size: 13px; margin-bottom: 0; }
.chart-explanation { margin-top: 16px; font-size: 13px; }
.duration-panel { margin-bottom: 24px; }
.duration-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.duration-heading h2 { font-size: 24px; margin-bottom: 0; }
.duration-heading .eyebrow { margin: 4px 0; }
.duration-gap { display: flex; flex-direction: column; text-align: right; font-variant-numeric: tabular-nums; }
.duration-gap strong { font-size: 24px; }
.duration-legend { margin: 16px 0; }
.duration-chart-container { position: relative; }
#duration-chart { display: block; width: 100%; touch-action: pan-y; }
.duration-grid { stroke: var(--line); stroke-dasharray: 3 5; }
.duration-line { fill: none; stroke-width: 2.5; }
.recent-line { stroke: var(--accent); }
.previous-line { stroke: var(--blue); stroke-dasharray: 6 4; }
.recent-key { color: var(--accent); }
.previous-key { color: var(--blue); }
.chart-cursor circle.recent-dot { fill: var(--accent); }
.chart-cursor circle.previous-dot { fill: var(--blue); }
#duration-tooltip { max-width: min(100%, 390px); }
@media (max-width: 720px) { .duration-heading { align-items: flex-start; flex-direction: column; } .duration-gap { text-align: left; } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 720px) { .detail-grid { grid-template-columns: 1fr; } .tagline { display: none; } .toolbar { align-items: flex-start; flex-direction: column; } th, td { padding: 8px; } }
@media (max-width: 720px) { .calendar-heading { align-items: flex-start; flex-direction: column; } .calendar-grid { gap: 4px; } .calendar-day { padding: 6px; } }

/* The journal remains server-rendered and usable without JavaScript. */
[hidden] { display: none !important; }
input, select { max-width: 100%; background: #f8faf7; color: var(--text); border: 1px solid #c4d2c9; border-radius: 8px; padding: 8px 10px; font: inherit; color-scheme: light; }
.sticky-filters { position: sticky; top: 12px; z-index: 1100; margin-bottom: 24px; background: #fffffff7; border: 1px solid #c4d8cd; border-radius: 14px; box-shadow: 0 6px 24px #203d3612; backdrop-filter: blur(16px); }
.sticky-filters > summary { padding: 12px 18px; font-size: 13px; font-weight: 650; color: var(--text); }
.sticky-filters[open] > summary { border-bottom: 1px solid var(--line); }
.filter-period { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 12px; }
.journal-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 16px 18px; max-height: 60vh; overflow-y: auto; }
#activity-list, .activity-cards, #duration-chart { scroll-margin-top: var(--filter-height); }
.journal-filters label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
.journal-filters label input, .journal-filters label select { min-height: 38px; }
.search-filter { flex: 1; min-width: 180px; }
.filter-note, .selection-note { width: 100%; font-size: 12px; color: var(--muted); margin: 0; }
.selection-note { margin: 12px 0 20px; }
.jump-link { margin-left: auto; }
.journal-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.journal-kpis article, .supplemental-metrics article { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.journal-kpis article:first-child { background: var(--soft); border-color: #bedacb; }
.journal-kpis article:first-child strong { color: var(--accent); }
.journal-kpis strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.journal-kpis small, .supplemental-metrics small { color: var(--muted); font-size: 12px; }
.insights-panel { margin-bottom: 24px; background: linear-gradient(120deg, #edf6ef, #fff); border-color: #cbded1; }
.insights-panel h2 { margin-bottom: 10px; }
.insights-panel ul { padding-left: 20px; margin: 0 0 12px; }
.insights-panel li + li { margin-top: 8px; }
#calendar-disclosure > summary { color: var(--text); font-size: 17px; font-weight: 650; }
#calendar-disclosure[open] > summary { margin-bottom: 18px; }
.calendar-view-switch { display: flex; gap: 8px; margin: 10px 0 14px; }
[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.calendar-agenda { display: none; }
.calendar-panel[data-view="agenda"] .calendar-scroll, .calendar-panel[data-view="agenda"] .calendar-legend { display: none; }
.calendar-panel[data-view="agenda"] .calendar-agenda { display: grid; gap: 8px; }
.agenda-day { display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--line); border-left: 3px solid #9dcebb; border-radius: 10px; color: var(--text); background: #f8faf7; }
.agenda-day small { color: var(--muted); font-weight: 400; margin-left: 10px; }
.agenda-day span { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.agenda-day b { font-variant-numeric: tabular-nums; font-weight: 400; color: var(--accent); }
.session-name, #activity-list .average-speed small { display: block; color: var(--muted); font-size: 11px; }
.activity-cards { display: none; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 18px; font-size: 13px; }
.history-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.history-panel { margin: 24px 0; }
.history-chart { width: 100%; display: block; }
.weekly-bar, .history-point { fill: var(--accent); }
.weekly-bar:hover, .weekly-bar:focus { fill: #8faeff; }
.history-values { color: var(--muted); font-size: 12px; }
.sport-stack { display: flex; height: 20px; border-radius: 8px; overflow: hidden; margin: 20px 0; }
.sport-color-0 { background: #39c6a5; }.sport-color-1 { background: #8faeff; }.sport-color-2 { background: #fc927e; }.sport-color-3 { background: #f4b35e; }.sport-color-4 { background: #bc9bea; }.sport-color-5 { background: #58baf5; }
.sport-distribution { padding: 0; list-style: none; }
.sport-distribution li { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 10px 0; }
.sport-distribution i { width: 10px; height: 10px; border-radius: 50%; }
.sport-distribution strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.sport-distribution small { color: var(--muted); }
.supplemental-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.supplemental-metrics strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.recorded-name { color: var(--muted); margin-top: -12px; }
.running-summary .summary-pair { flex-direction: row-reverse; }
.single-module { grid-template-columns: 1fr; }
.single-module #heart-rate-chart { max-height: 380px; }
.chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.chart-controls small { color: var(--muted); font-size: 11px; }
.signal-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.signal-charts > section:only-child { grid-column: 1 / -1; }
.signal-chart { width: 100%; display: block; touch-action: pan-y; }
.signal-chart-container { position: relative; }
.signal-line { stroke: var(--accent); stroke-width: 2; fill: none; }
.signal-note { color: var(--muted); font-size: 12px; }
[data-split]:focus, [data-split]:hover { background: var(--soft); }
.efforts-panel { margin-bottom: 20px; }
.efforts-panel button { margin-top: 16px; }
#effort-history { color: var(--muted); font-size: 13px; }
.empty-state { color: var(--muted); background: #f5f8f3; border: 1px dashed #c5d4c8; border-radius: 12px; padding: 20px; text-align: center; }
.zones-unavailable { background: #f8faf6; }
@media (max-width: 720px) {
  main { padding: 0 16px; margin-top: 24px; }.panel { padding: 16px; border-radius: 12px; }
  header { padding: 16px; gap: 12px; }.brand { font-size: 22px; }.badge { font-size: 8px; padding: 4px 8px; }
  .header-links .badge { display: none; }.header-links { font-size: 12px; }
  .zone-settings-grid { grid-template-columns: 1fr; }
  .page-heading { gap: 12px; align-items: flex-start; }.page-intro { font-size: 13px; }.saved-count { padding: 4px 8px; font-size: 11px; }
  .sticky-filters { top: 8px; }.sticky-filters > summary { padding: 12px; }.filter-period { display: block; margin: 2px 0 0 16px; font-size: 11px; }
  .journal-filters { padding: 12px; gap: 10px; }.journal-filters input, .journal-filters select { width: 100%; }
  .journal-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .journal-kpis article { padding: 12px; }.journal-kpis strong { font-size: 22px; }
  .journal-filters label { flex: 1 1 120px; min-width: 0; }.journal-filters .search-filter { flex-basis: 100%; }
  .jump-link { margin-left: 0; }.journal-filters button { width: 100%; }
  .history-grid, .signal-charts { grid-template-columns: 1fr; }
  #activity-list { display: none; }.activity-cards { display: grid; gap: 10px; }
  .activity-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
  .activity-card > a { font-weight: 650; font-size: 16px; }.activity-card time, .activity-card > small { color: var(--muted); font-size: 12px; }
  .activity-card > div { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
  .activity-summary { gap: 16px 24px; }.supplemental-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-day { min-height: 94px; }
  .zone-legend { grid-template-columns: 1fr; }
  #duration-chart text, .history-chart text, .signal-chart text { font-size: 20px; }
}
.sport-icon { display: inline-block; width: 1.4em; flex-shrink: 0; font-size: 13px; margin-right: 4px; }
.sticky-filters .daily-dates { margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); }
.body-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.body-metric-grid article { border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.body-metric-grid strong { display: block; font-size: 26px; margin: 8px 0; }
.body-history-scroll { overflow-x: auto; }
.body-periods { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 0; }
.body-periods a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.body-periods a[aria-current] { background: var(--soft); border-color: var(--accent); font-weight: 700; }
.body-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 12px; margin-bottom: 12px; }
.body-chart-legend span::before { content: ""; display: inline-block; width: 22px; margin-right: 8px; vertical-align: middle; border-top: 2px solid var(--blue); }
.body-chart-legend .body-fat-key::before { border-top-color: var(--heart); border-top-style: dashed; }
.body-fat-series .wellness-line { stroke: var(--heart); stroke-dasharray: 5 3; }
.body-fat-series .wellness-point, .body-fat-series text { fill: var(--heart); }
.body-weight-series text { fill: var(--blue); }
.body-chart-legend + .daily-chart-scroll .wellness-chart { min-width: 640px; }
.wellness-curve { stroke-linecap: round; stroke-linejoin: round; }
.body-health-heading { display: flex; justify-content: space-between; align-items: start; gap: 24px; flex-wrap: wrap; }
.body-health-heading h2 { margin-bottom: 8px; }
.body-health-value { display: grid; gap: 4px; }
.body-health-value strong { color: var(--accent); font-size: 42px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.body-health-value span, .body-health-value small { color: var(--muted); font-size: 12px; }
.body-health-panel .wellness-line { stroke: var(--accent); stroke-width: 2.5; }
.body-health-panel .wellness-point { fill: var(--accent); }
.body-health-panel .wellness-chart, .body-raw-content .wellness-chart { min-width: 640px; }
.body-raw-measurements > summary { cursor: pointer; font-size: 15px; font-weight: 700; }
.body-raw-content { padding-top: 24px; }
.body-raw-content > section + section { border-top: 1px solid var(--line); margin-top: 20px; }
.body-target-summary { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 16px 0; font-size: 12px; color: var(--muted); }
.body-target-summary strong { display: block; margin-top: 4px; color: var(--text); font-size: 16px; }
.body-score-reference { stroke: var(--accent); stroke-dasharray: 6 4; opacity: .55; }
.settings-sections { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 24px; font-size: 14px; }
.personal-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; margin: 24px 0; }
.personal-settings-grid label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; }
.personal-settings-grid input { width: 100%; }
.personal-settings-panel { margin-bottom: 24px; }
.personal-settings-panel, .zone-settings-panel { scroll-margin-top: 24px; }