:root {
  --ink: #17191c;
  --ink-soft: #32363c;
  --sub: #69707a;
  --muted: #8a9098;
  --line: #e2e5e9;
  --line-strong: #cfd4da;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f8f9fa;
  --blue: #3478f6;
  --green: #248b5a;
  --mint: #18a87b;
  --red: #e35249;
  --orange: #e98b2a;
  --yellow: #e3aa22;
  --violet: #7554c7;
  --shadow: 0 10px 32px rgba(22, 28, 36, .055);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  letter-spacing: 0;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.side {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  width: 244px;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: #fff;
  padding: 24px 16px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 24px; font-size: 22px; font-weight: 760; }
.logo { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: var(--ink); color: #fff; }
.nav { display: grid; gap: 3px; }
.nav-btn {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0 12px;
  color: #656b74;
  text-align: left;
}
.nav-btn .ico { width: 22px; text-align: center; font-size: 17px; }
.nav-btn:hover, .nav-btn.active { background: #eef0f3; color: var(--ink); }
.nav-btn.active { box-shadow: inset 3px 0 var(--ink); font-weight: 680; }
.bottom { margin-top: auto; }
.profile { display: grid; width: 100%; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; border: 0; border-top: 1px solid var(--line); background: transparent; padding: 17px 8px 0; text-align: left; }
.avatar { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #dfe9ff; color: #315aa6; font-size: 12px; font-weight: 750; }
.profile small { display: block; color: var(--sub); }

.shell { min-height: 100vh; margin-left: 244px; }
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  min-height: 90px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.9);
  padding: 17px clamp(22px, 4vw, 52px);
  backdrop-filter: blur(18px);
}
.eyebrow { margin: 0 0 5px; color: var(--sub); font-size: 12px; font-weight: 680; }
.top h1 { margin: 0; font-size: 24px; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.sync-pill, .status { display: inline-flex; align-items: center; border-radius: 999px; background: #e8f5ed; padding: 6px 10px; color: #226e47; font-size: 12px; font-weight: 680; }
.sync-pill.offline { background: #fff1dc; color: #8b5b15; }
.icon-btn { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; }
.content { width: min(1160px, calc(100% - 44px)); margin: auto; padding: 28px 0 100px; }
.view { animation: enter .2s ease; }
@keyframes enter { from { opacity: .35; transform: translateY(4px); } }

.card, .panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.primary, .secondary, .danger {
  min-height: 40px;
  border-radius: 8px;
  padding: 0 15px;
  font-weight: 680;
  white-space: nowrap;
}
.primary { border: 1px solid var(--ink); background: var(--ink); color: #fff; }
.primary:hover { background: #292c31; }
.secondary { border: 1px solid var(--line-strong); background: #fff; color: var(--ink); }
.secondary:hover { background: #f4f5f7; }
.danger { border: 1px solid #f4cac7; background: #fff0ef; color: #a93630; }
.small { min-height: 34px; padding: 0 11px; font-size: 12px; }
.full { width: 100%; }
.spacer { flex: 1; }
.empty-block { border: 1px dashed var(--line-strong); border-radius: 8px; padding: 26px; color: var(--sub); text-align: center; }

.summary { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 38px; padding: 29px 38px; }
.hero-summary { min-height: 266px; }
.ring {
  --angle: 0deg;
  --ring-color: var(--red);
  position: relative;
  display: grid;
  width: 170px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) var(--angle), #edf0f2 0);
}
.ring::after { position: absolute; inset: 12px; border-radius: 50%; background: #fff; content: ""; }
.ring div { position: relative; z-index: 1; max-width: 120px; text-align: center; }
.ring b { display: block; overflow-wrap: anywhere; font-size: 30px; }
.ring small { color: var(--sub); font-size: 11px; }
.summary h2 { margin: 13px 0 7px; font-size: 26px; }
.summary-copy > p { margin: 0; color: var(--sub); font-size: 14px; }
.macro-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 25px; }
.macro-lines div { display: grid; grid-template-columns: 1fr auto; gap: 7px; font-size: 12px; }
.macro-lines i { grid-column: 1 / -1; display: block; height: 6px; overflow: hidden; border-radius: 99px; background: #edf0f2; }
.macro-lines em { display: block; width: 0; height: 100%; border-radius: 99px; background: var(--blue); transition: width .2s; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.metric { min-width: 0; padding: 18px; text-align: left; }
.metric-button { appearance: none; width: 100%; color: inherit; }
.metric-button:hover { border-color: #bfc5cc; }
.metric-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; background: #edf3ff; color: #3c69bd; }
.food-tone { background: #fef0e8; color: #b95d29; }
.water-tone { background: #e8f4ff; color: #2b6da8; }
.green-tone { background: #eaf6ef; color: #24754a; }
.red-tone { background: #fff0ef; color: #aa413a; }
.metric p { margin: 14px 0 3px; color: var(--sub); font-size: 12px; }
.metric > b { display: block; font-size: 20px; }
.metric small { color: #898e95; }
.progress { height: 6px; margin-top: 15px; overflow: hidden; border-radius: 99px; background: #eef0f3; }
.progress i { display: block; width: 0; height: 100%; border-radius: 99px; background: var(--blue); transition: width .2s; }
.progress.large { height: 10px; margin: 0; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-head h2, .panel-head h2 { margin: 0; font-size: 28px; }
.page-head p, .panel-head p { margin: 7px 0 0; color: var(--sub); }
.food-page-head { align-items: center; }
.nutrition-title { display:flex; align-items:center; gap:12px; }
.nutrition-title h2 { margin:0; }
.nutrition-title .icon-square { flex:0 0 44px; width:44px; height:44px; }
.date-actions { display: flex; align-items: center; gap: 7px; }
.date-button { min-width: 128px; min-height: 40px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; padding: 0 13px; font-weight: 680; }
.icon-square { width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font-size: 24px; }
.segmented { display: flex; align-items: center; gap: 3px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #e9ebee; padding: 3px; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.segmented button { min-height: 36px; flex: 1; border: 0; border-radius: 6px; background: transparent; padding: 0 14px; color: var(--sub); font-size: 13px; font-weight: 680; white-space: nowrap; }
.segmented button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(20,24,30,.12); }
.food-tabs { margin-bottom: 18px; }
.food-panel { animation: enter .2s ease; }

.nutrition-summary { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; padding: 26px 30px; }
.calorie-overview { display: flex; align-items: center; gap: 30px; }
.calorie-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; text-align: center; }
.calorie-equation b { display: block; font-size: 20px; }
.calorie-equation small { color: var(--sub); font-size: 11px; }
.calorie-equation > span { color: var(--muted); }
.summary-side { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); padding-left: 30px; }
.summary-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.summary-heading h3 { margin: 0; font-size: 23px; }
.summary-note { margin: 10px 0 20px; color: var(--sub); font-size: 13px; line-height: 1.5; }
.streak-line { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 13px; color: var(--sub); font-size: 12px; }
.streak-line strong { color: var(--ink); font-size: 18px; }

.section-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 28px 0 12px; }
.section-title h3 { margin: 0; font-size: 20px; }
.section-title p { margin: 5px 0 0; color: var(--sub); font-size: 13px; }
.compact-title { margin: 22px 0 10px; }
.nutrient-card { padding: 25px; }
.nutrient-grid { display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: 16px; }
.nutrient { min-width: 0; text-align: center; }
.nutrient h4 { overflow: hidden; margin: 0 0 10px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.nutrient-value { margin: 0 0 10px; color: var(--nutrient-color, var(--orange)); font-size: 18px; font-weight: 760; }
.mini-ring { --percent: 0deg; --nutrient-color: var(--orange); position: relative; display: grid; width: 74px; aspect-ratio: 1; margin: 0 auto 9px; place-items: center; border-radius: 50%; background: conic-gradient(var(--nutrient-color) var(--percent), #e9ebee 0); }
.mini-ring::after { position: absolute; inset: 8px; border-radius: 50%; background: #fff; content: ""; }
.mini-ring b { position: relative; z-index: 1; font-size: 13px; }
.nutrient small { color: var(--sub); }

.meal-list { display: grid; gap: 10px; }
.meal-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.meal-card.recommended { border-color: #a7c0ef; box-shadow: 0 0 0 2px rgba(52,120,246,.08); }
.meal-head { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 13px; min-height: 76px; padding: 12px 16px; }
.meal-symbol { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 8px; background: #f0f2f5; font-size: 18px; }
.meal-name { display: flex; align-items: center; gap: 8px; }
.meal-name strong { font-size: 15px; }
.recommended-label { border-radius: 999px; background: #e8f1ff; padding: 4px 7px; color: #2c61ac; font-size: 10px; font-weight: 700; }
.meal-meta { margin: 4px 0 0; color: var(--sub); font-size: 12px; }
.meal-actions { display: flex; gap: 7px; }
.meal-actions button { min-height: 36px; }
.meal-entries { border-top: 1px solid var(--line); }
.meal-empty { padding: 14px 17px; color: var(--sub); font-size: 12px; }
.entry-row { display: grid; min-height: 56px; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; border-bottom: 1px solid #edf0f2; padding: 8px 17px; }
.entry-row:last-child { border-bottom: 0; }
.entry-row button { border: 0; background: transparent; color: inherit; text-align: left; }
.entry-row strong { display: block; font-size: 13px; }
.entry-row small { color: var(--sub); }
.entry-row .entry-kcal { font-size: 12px; font-weight: 700; }
.entry-edit { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line) !important; border-radius: 50%; background: #fff !important; text-align: center !important; }

.hydration-card { padding: 25px; }
.hydration-overview { display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 30px; }
.water-visual { display: grid; min-height: 155px; place-items: center; align-content: center; border-radius: 8px; background: #eaf5ff; color: #215e94; }
.water-visual span { font-size: 30px; line-height: 1; }
.water-visual b { margin: 8px 0 4px; color: var(--ink); font-size: 30px; }
.water-visual small { color: var(--sub); }
.water-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.inline-input { display: flex; min-width: 230px; flex: 1; }
.inline-input input { min-width: 0; min-height: 40px; flex: 1; border: 1px solid var(--line-strong); border-radius: 8px 0 0 8px; padding: 0 10px; }
.inline-input button { border-radius: 0 8px 8px 0; }
.water-history { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.water-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 7px 10px; color: #315b80; font-size: 12px; }
.water-chip button { border: 0; background: transparent; color: var(--sub); padding: 0; }
.week-water { display: grid; height: 126px; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 8px; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.water-day { display: grid; height: 100%; grid-template-rows: 1fr auto; align-items: end; gap: 6px; text-align: center; }
.water-day i { width: min(30px, 80%); min-height: 3px; margin: auto; border-radius: 5px 5px 2px 2px; background: #61a9e7; }
.water-day small { color: var(--sub); font-size: 10px; }

.panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 25px 0 16px; }
.toolbar { display: flex; align-items: center; gap: 8px; }
.search-field { display: flex; min-height: 42px; align-items: center; gap: 7px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; padding: 0 11px; }
.search-field input { min-width: 0; flex: 1; border: 0; outline: 0; }
.grow { flex: 1; }
.list { overflow: hidden; }
.row { display: flex; min-height: 72px; align-items: center; gap: 14px; border-bottom: 1px solid #eceef0; padding: 10px 19px; }
.row:last-child { border-bottom: 0; }
.row-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #eef3ff; color: #3e6ac0; }
.row-main { min-width: 0; flex: 1; }
.row strong { font-size: 14px; }
.row p { overflow: hidden; margin: 3px 0 0; color: var(--sub); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.row .cal { font-size: 12px; font-weight: 700; }
.row-actions { display: flex; gap: 6px; }
.icon-action { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; }
.recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.recipe-card { display: flex; min-height: 220px; flex-direction: column; padding: 19px; }
.recipe-card h3 { margin: 23px 0 5px; }
.recipe-card p { margin: 0; color: var(--sub); font-size: 12px; }
.recipe-card .recipe-nutrition { display: flex; gap: 12px; margin: 15px 0; color: var(--ink-soft); font-size: 11px; }
.recipe-card .row-actions { margin-top: auto; }

.stats-layout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.measurement-form { grid-column: 1 / -1; padding: 21px; }
.measurement-form h3 { margin: 0; }
.form-row.three { grid-template-columns: repeat(3, 1fr); }
.chart-card { min-height: 250px; padding: 21px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; }
.chart-head h3 { margin: 0; }
.data-chart { display: flex; height: 175px; align-items: flex-end; gap: 6px; margin-top: 18px; border-bottom: 1px solid var(--line); padding: 0 4px; }
.chart-column { position: relative; display: flex; height: 100%; min-width: 4px; flex: 1; align-items: flex-end; justify-content: center; }
.chart-column i { width: 70%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--orange); }
.chart-column span { position: absolute; bottom: -19px; color: var(--sub); font-size: 9px; }
.line-chart .chart-column i { width: 8px; min-height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px #dce8ff; }
.measurement-values { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 5px; }
.measurement-values small { color: var(--sub); }

.notice { margin: 0 0 12px; border: 1px solid #d6e3f5; border-radius: 8px; background: #f1f6fd; padding: 14px 16px; }
.notice p { margin: 4px 0 0; color: #596b80; font-size: 12px; line-height: 1.45; }
.reminder-list { padding: 0; }
.reminder-row { display: grid; grid-template-columns: 34px minmax(150px,1fr) 118px 118px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 14px 17px; }
.reminder-row:last-child { border-bottom: 0; }
.reminder-row strong { font-size: 13px; }
.toggle { position: relative; display: inline-block; width: 34px; height: 21px; }
.toggle input { position: absolute; opacity: 0; }
.toggle span { position: absolute; inset: 0; border-radius: 99px; background: #c8ccd1; transition: .2s; }
.toggle span::after { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; content: ""; transition: .2s; }
.toggle input:checked + span { background: var(--green); }
.toggle input:checked + span::after { transform: translateX(13px); }
.day-picker { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.day-picker button { width: 30px; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--sub); font-size: 10px; }
.day-picker button.active { border-color: var(--ink); background: var(--ink); color: #fff; }

.workout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.workout-card { display: flex; min-height: 210px; flex-direction: column; padding: 20px; }
.workout-card .work-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 8px; background: #edf3ff; font-size: 22px; }
.workout-card h3 { margin: 28px 0 5px; }
.workout-card p { margin: 0; color: var(--sub); font-size: 13px; }
.workout-card button { margin-top: auto; }
.routine { margin-top: 20px; }
.exercise-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 13px; border-bottom: 1px solid #eceef0; padding: 15px 18px; }
.exercise-row:last-child { border-bottom: 0; }
.exercise-row .sets { display: flex; gap: 7px; }
.set-pill { border-radius: 6px; background: #f1f3f6; padding: 6px 8px; font-size: 11px; }
.done-check { width: 28px; height: 28px; border: 1px solid #ccd1d8; border-radius: 50%; background: #fff; }
.done-check.checked { border-color: var(--green); background: var(--green); color: #fff; }
.training-page-head { align-items: center; }
.training-environment { width: min(340px, 100%); margin-bottom: 14px; }
.active-workout-banner { display: flex; min-height: 108px; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; border-color: #b7caea; background: #f6f9ff; padding: 20px 22px; }
.active-workout-banner h3 { margin: 9px 0 4px; font-size: 21px; }
.active-workout-banner p { margin: 0; color: var(--sub); font-size: 13px; }
.training-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.training-metric { min-width: 0; padding: 17px; }
.training-metric p { margin: 13px 0 4px; color: var(--sub); font-size: 12px; }
.training-metric b { display: block; overflow-wrap: anywhere; font-size: 21px; }
.training-metric small { color: var(--muted); font-size: 11px; }
.training-tabs { margin: 18px 0; }
.training-panel { animation: enter .2s ease; }
.training-filters { display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(145px, .75fr)) auto; align-items: center; gap: 8px; margin-bottom: 14px; }
.training-filters .search-field { min-width: 0; }
.favorite-filter { min-height: 44px; white-space: nowrap; }
.exercise-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.exercise-catalog-grid > .muscle-category-grid,
.exercise-catalog-grid > .catalog-muscle-intro,
.exercise-catalog-grid > .catalog-results-head { grid-column: 1 / -1; }
.catalog-muscle-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 2px 2px 4px; }
.catalog-muscle-intro strong { font-size: 15px; }
.catalog-muscle-intro span { color: var(--sub); font-size: 11px; text-align: right; }
.catalog-results-head { display: flex; min-width: 0; align-items: center; gap: 10px; }
.catalog-results-head strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-results-head span { margin-left: auto; color: var(--sub); font-size: 11px; }
.exercise-card { display: grid; min-width: 0; grid-template-columns: 94px 1fr; gap: 15px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 14px; box-shadow: var(--shadow); }
.exercise-card-copy { min-width: 0; }
.exercise-card h3 { overflow: hidden; margin: 4px 0 4px; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.exercise-card p { overflow: hidden; margin: 0; color: var(--sub); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.exercise-card .exercise-tags { margin: 8px 0 10px; }
.exercise-card-actions { display: flex; gap: 6px; }
.exercise-card-actions button { min-height: 32px; padding: 0 9px; font-size: 11px; }
.favorite-button { display: grid; width: 32px; min-width: 32px; padding: 0 !important; place-items: center; }
.favorite-button.active { border-color: #d9a51c; background: #fff8df; color: #956d00; }
.exercise-visual { display: grid; min-height: 105px; place-items: center; overflow: hidden; border-radius: 8px; background: linear-gradient(180deg,#f7f9fa,#edf2f3); }
.exercise-motion-svg { width: 100%; height: 100%; min-height: 105px; overflow: visible; }
.exercise-visual.compact .exercise-motion-svg { min-height: 82px; }
.exercise-visual.large .exercise-motion-svg { min-height: 300px; }
.motion-floor { fill: none; stroke: #cbd3d7; stroke-linecap: round; stroke-width: 2; }
.figure-bone { fill: none; stroke: #aab4ba; stroke-linecap: round; stroke-linejoin: round; stroke-width: 13; }
.figure-torso { fill: #d7dee1; stroke: #9aa6ad; stroke-linejoin: round; stroke-width: 2; }
.figure-head { fill: #d7dee1; stroke: #9aa6ad; stroke-width: 2; }
.figure-muscle { fill: none; stroke: transparent; stroke-linecap: round; stroke-width: 9; }
.figure-joint { fill: #d7dee1; stroke: #9aa6ad; stroke-width: 1.5; }
.figure-torso-muscle { fill: transparent; opacity: .88; }
.figure-muscle.primary { stroke: #df5a50; }
.figure-muscle.secondary { stroke: #ef9a78; }
.figure-joint.primary { fill: #df5a50; stroke: #c94e45; }
.figure-joint.secondary { fill: #ef9a78; stroke: #dd8668; }
.figure-torso-muscle.primary { fill: #df5a50; }
.figure-torso-muscle.secondary { fill: #ef9a78; }
.motion-bench, .motion-machine { fill: none; stroke: #77858c; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.motion-barbell { stroke: #38434a; stroke-linecap: round; stroke-width: 4; }
.motion-weight, .motion-plate, .motion-kettlebell, .motion-ball { fill: #3f4a50; stroke: #fff; stroke-width: 2; }
.motion-plate { fill: #222b30; }
.motion-kettlebell { fill: #263238; }
.motion-ball { fill: #218b70; }
.motion-cable { stroke: #5f6b71; stroke-width: 2; }
.motion-band { stroke: #20a58c; stroke-dasharray: 5 4; stroke-linecap: round; stroke-width: 3; }
.motion-label { fill: #657078; font-size: 8px; font-weight: 700; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
  .exercise-motion-svg animate { display: none; }
}
.exercise-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.exercise-tags span { border-radius: 999px; background: #edf0f3; padding: 4px 7px; color: #59616c; font-size: 10px; }
.workout-card { min-height: 238px; }
.workout-card .workout-card-top { display: flex; align-items: center; justify-content: space-between; }
.workout-card h3 { margin-top: 22px; }
.workout-card .plan-days { margin-top: 8px; color: var(--ink-soft); font-size: 11px; }
.workout-card .row-actions { margin-top: auto; padding-top: 18px; }
.workout-card .row-actions button { margin-top: 0; }
.workout-card .row-actions .primary { flex: 1; }
.workout-environment { border-radius: 999px; background: #edf0f3; padding: 5px 8px; color: var(--sub); font-size: 10px; font-weight: 700; }
.training-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.training-stats-grid .training-records, .training-stats-grid .strength-explanation { min-height: 230px; }
.strength-chart { display: flex; height: 175px; align-items: flex-end; gap: 8px; margin-top: 18px; border-bottom: 1px solid var(--line); padding: 0 5px; }
.strength-bar { position: relative; display: flex; min-width: 9px; height: 100%; flex: 1; align-items: flex-end; justify-content: center; }
.strength-bar i { width: min(32px, 78%); min-height: 3px; border-radius: 5px 5px 0 0; background: var(--blue); }
.strength-bar span { position: absolute; bottom: -20px; color: var(--sub); font-size: 9px; }
.strength-bar b { position: absolute; bottom: calc(var(--height, 0%) + 6px); color: var(--ink-soft); font-size: 9px; white-space: nowrap; }
.muscle-volume-list { display: grid; gap: 12px; margin-top: 20px; }
.muscle-volume-row { display: grid; grid-template-columns: 120px 1fr 72px; align-items: center; gap: 10px; font-size: 11px; }
.muscle-volume-row i { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: #edf0f2; }
.muscle-volume-row em { display: block; height: 100%; border-radius: 99px; background: var(--green); }
.muscle-volume-row b { text-align: right; }
.strength-explanation { padding: 22px; }
.strength-explanation h3 { margin: 5px 0 10px; }
.strength-explanation > p:last-child { color: var(--sub); font-size: 13px; line-height: 1.55; }
.history-detail { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.history-detail small { color: var(--sub); }
.history-session-detail { border-bottom: 1px solid var(--line); background: #fafbfc; padding: 4px 19px 12px 75px; }
.history-exercise { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #e8ebee; padding: 9px 0; font-size: 11px; }
.history-exercise span { color: var(--sub); text-align: right; }

.training-builder-modal { width: min(1120px, 100%); max-height: 94vh; padding: 0; }
.sticky-modal-head { position: sticky; top: 0; z-index: 4; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); padding: 20px 23px; backdrop-filter: blur(14px); }
.builder-layout { display: grid; grid-template-columns: 285px minmax(0, 1fr); min-height: 560px; }
.builder-settings { border-right: 1px solid var(--line); background: #fafbfc; padding: 20px; }
.builder-workspace { min-width: 0; padding: 20px; }
.builder-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.builder-toolbar h3 { margin: 0; }
.builder-toolbar p { margin: 4px 0 0; color: var(--sub); font-size: 12px; }
.label-title { display: block; margin-bottom: 7px; color: #5e6570; font-size: 12px; }
.training-day-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.training-day-picker button { height: 34px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--sub); font-size: 10px; }
.training-day-picker button.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.training-textarea { min-height: 84px; resize: vertical; padding-top: 11px; line-height: 1.45; }
.plan-exercise-list { display: grid; gap: 10px; }
.plan-exercise-editor { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.plan-exercise-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px; }
.exercise-order-buttons { display: grid; gap: 4px; }
.exercise-order-buttons button { width: 28px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.plan-exercise-summary h4 { margin: 0; }
.plan-exercise-summary p { margin: 3px 0 0; color: var(--sub); font-size: 11px; }
.plan-exercise-config { border-top: 1px solid var(--line); background: #fbfcfd; padding: 12px; }
.exercise-config-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.exercise-config-grid .label { font-size: 10px; }
.exercise-config-grid .field { min-height: 38px; padding: 0 8px; font-size: 11px; }
.plan-set-table { display: grid; gap: 5px; margin-top: 11px; }
.plan-set-row { display: grid; grid-template-columns: 34px 1.15fr 1fr 1fr .85fr .85fr 1fr 32px; align-items: end; gap: 5px; }
.plan-set-row > span { align-self: center; color: var(--sub); font-size: 11px; font-weight: 700; text-align: center; }
.plan-set-row .label { font-size: 9px; }
.plan-set-row .field { min-height: 35px; padding: 0 6px; font-size: 11px; }
.weight-inline { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 4px; }
.weight-inline > span { color: var(--sub); font-size: 11px; }
.remove-set { width: 32px; height: 35px; border: 1px solid #f0cecb; border-radius: 7px; background: #fff3f2; color: #a93630; }
.plan-exercise-footer { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.plan-exercise-footer button { min-height: 32px; padding: 0 9px; font-size: 10px; }
.superset-settings { display: grid; gap: 7px; margin-top: 15px; }
.superset-row { display: grid; grid-template-columns: auto repeat(3, 1fr); align-items: end; gap: 8px; border: 1px solid #d9e3f2; border-radius: 8px; background: #f4f8fe; padding: 11px; }
.superset-badge { align-self: center; border-radius: 999px; background: #dce9fb; padding: 6px 9px; color: #315f9d; font-size: 11px; font-weight: 750; }
.sticky-modal-actions { position: sticky; bottom: 0; z-index: 4; margin: 0; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); padding: 14px 23px; backdrop-filter: blur(14px); }
.compact-training-filters { grid-template-columns: 1fr 220px; margin-top: 16px; }
.exercise-picker-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.exercise-picker-item { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 8px; text-align: left; }
.exercise-picker-item .exercise-visual { min-height: 75px; }
.exercise-picker-item .exercise-visual svg { width: 62px; height: 72px; }
.exercise-picker-item strong { display: block; font-size: 13px; }
.exercise-picker-item small { display: block; margin-top: 3px; color: var(--sub); font-size: 10px; }
.exercise-detail-layout { display: grid; grid-template-columns: 260px 1fr; gap: 25px; margin-top: 18px; }
.exercise-detail-visual .exercise-visual { min-height: 340px; }
.exercise-detail-visual .exercise-visual svg { width: 210px; height: 300px; }
.exercise-detail-copy h3 { margin: 22px 0 6px; font-size: 15px; }
.exercise-detail-copy > p { color: var(--sub); line-height: 1.6; }
.safety-note { margin-top: 20px; border-left: 3px solid var(--orange); background: #fff7eb; padding: 12px 14px; }
.safety-note p { margin: 4px 0 0; color: #75552d; font-size: 12px; line-height: 1.5; }
.check-row { display: flex; gap: 22px; }

.workout-session-modal { align-items: stretch; padding: 10px; }
.session-modal { width: min(1200px, 100%); max-height: calc(100vh - 20px); padding: 0; }
.session-topbar { position: sticky; top: 0; z-index: 5; display: flex; min-height: 76px; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); padding: 13px 20px; backdrop-filter: blur(14px); }
.session-topbar h2 { margin: 0; }
.session-clock { margin-left: auto; text-align: right; }
.session-clock b { display: block; font-variant-numeric: tabular-nums; font-size: 23px; }
.session-clock small { color: var(--sub); }
.session-progress { height: 5px; background: #e9ecef; }
.session-progress i { display: block; width: 0; height: 100%; background: var(--green); transition: width .2s; }
.session-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); min-height: 650px; }
.session-exercise-nav { border-right: 1px solid var(--line); background: #f8f9fa; padding: 10px; }
.session-nav-item { display: grid; width: 100%; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 9px; border: 0; border-radius: 8px; background: transparent; padding: 10px; color: var(--ink); text-align: left; }
.session-nav-item > span { min-width:0; }
.session-nav-item:hover, .session-nav-item.active { background: #e9edf2; }
.session-nav-item.complete .session-nav-index { border-color: var(--green); background: var(--green); color: #fff; }
.session-nav-index { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; font-size: 10px; }
.session-nav-item strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.session-nav-item small { display: block; margin-top: 2px; color: var(--sub); font-size: 9px; }
.session-main { min-width: 0; padding: 22px; }
.session-exercise-head { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 24px; }
.session-visual .exercise-visual { min-height: 205px; }
.session-visual .exercise-visual svg { width: 135px; height: 185px; }
.session-exercise-head h2 { margin: 10px 0 5px; font-size: 28px; }
.session-exercise-head p { margin: 0 0 12px; color: var(--sub); }
.session-exercise-head small { color: var(--sub); }
.progression-suggestion { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 15px; border: 1px solid #cfe3d8; border-radius: 8px; background: #f0f8f3; padding: 12px 14px; }
.progression-suggestion p { margin: 3px 0 0; color: #527062; font-size: 11px; }
.session-set-table { margin-top: 18px; overflow-x: auto; }
.session-set-header, .session-set-row { display: grid; min-width: 620px; grid-template-columns: 55px 1fr 110px 100px 90px 52px; align-items: center; gap: 8px; }
.session-set-header { border-bottom: 1px solid var(--line); padding: 0 9px 8px; color: var(--sub); font-size: 10px; font-weight: 700; }
.session-set-row { min-height: 58px; border-bottom: 1px solid #edf0f2; padding: 8px 9px; }
.session-set-row.complete { background: #f2f8f4; }
.session-set-row .field { min-height: 38px; padding: 0 8px; }
.session-input-group { min-width: 0; }
.session-input-group > small, .session-set-type > small, .session-set-number > small { display: none; }
.session-set-number { font-weight: 750; text-align: center; }
.complete-set { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; }
.complete-set.active { border-color: var(--green); background: var(--green); color: #fff; }
.session-notes-label { margin-top: 18px; }
.session-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.rest-timer { position: sticky; right: 0; bottom: 0; left: 0; z-index: 6; display: flex; align-items: center; justify-content: center; gap: 24px; border-top: 1px solid #ced8e6; background: rgba(242,247,253,.97); padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); backdrop-filter: blur(16px); }
.rest-ring { --rest-angle: 360deg; position: relative; display: grid; width: 88px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--blue) var(--rest-angle), #dce3eb 0); }
.rest-ring::after { position: absolute; inset: 8px; border-radius: 50%; background: #fff; content: ""; }
.rest-ring div { position: relative; z-index: 1; text-align: center; }
.rest-ring b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.rest-ring small { color: var(--sub); font-size: 9px; }
.rest-timer h3 { margin: 4px 0 9px; }
.quick-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.quick { min-height: 150px; padding: 20px; }
.quick.big { background: #182034; color: #fff; }
.quick .tag { display: inline-block; border-radius: 999px; background: rgba(255,255,255,.1); padding: 5px 9px; font-size: 11px; }
.quick h3 { margin: 24px 0 5px; font-size: 20px; }
.quick p { margin: 0; color: #747b86; font-size: 13px; }
.quick.big p { color: #bec6d5; }
.progress-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.stat-stack { display: grid; gap: 12px; }
.stat { padding: 20px; }
.stat p { margin: 0; color: var(--sub); font-size: 12px; }
.stat b { display: block; margin-top: 8px; font-size: 26px; }
.profile-panel { padding: 22px; }

.field { width: 100%; min-height: 44px; border: 1px solid #d9dde2; border-radius: 8px; background: #fff; padding: 0 13px; outline: none; }
.field:focus, .search-field:focus-within { border-color: #83a9f3; box-shadow: 0 0 0 3px rgba(52,120,246,.1); }
.form-grid { display: grid; gap: 12px; margin-top: 18px; }
.label { display: grid; gap: 6px; color: #5e6570; font-size: 12px; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.form-hint { margin: 3px 0 0; color: var(--sub); font-size: 12px; }
.nutrition-form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.check-line { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 13px; }
.check-line input { width: 18px; height: 18px; accent-color: var(--green); }

.modal { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; background: rgba(23,25,28,.62); padding: 18px; }
.modal.open { display: grid; }
.modal-box { width: min(470px, 100%); max-height: min(90vh, 860px); overflow: auto; border-radius: 12px; background: #fff; padding: 23px; box-shadow: 0 20px 80px rgba(5,10,18,.2); }
.modal-box.wide { width: min(780px, 100%); }
.modal-box.training-builder-modal { width: min(1120px, calc(100vw - 36px)); max-height: 94vh; padding: 0; }
.modal-box.session-modal { width: min(1200px, calc(100vw - 20px)); max-height: calc(100vh - 20px); padding: 0; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.modal-head h2 { margin: 0; font-size: 22px; }
.close { width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 50%; background: #f0f2f4; font-size: 20px; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal-field { margin-top: 18px; }
.picker-results { display: grid; max-height: 430px; gap: 7px; overflow: auto; margin-top: 13px; }
.picker-item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 10px; text-align: left; }
.picker-item:hover { border-color: #aab2bc; }
.picker-item img, .picker-thumb { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 7px; background: #f1f3f5; object-fit: contain; }
.picker-item strong { display: block; }
.picker-item small { display: block; margin-top: 3px; color: var(--sub); }
.picker-item > b { font-size: 12px; }
.segmented.compact { margin-top: 13px; }
.selected-food { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 18px 0; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.selected-food h2 { margin: 0; }
.selected-food p { margin: 5px 0 0; color: var(--sub); }
.back-link { border: 0; background: transparent; padding: 0; color: var(--blue); }
.calculated-box { border-radius: 8px; background: #f4f6f8; padding: 14px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.calculated-box strong { color: var(--ink); }
.scanner { position: relative; margin-top: 16px; overflow: hidden; border-radius: 8px; background: #101215; aspect-ratio: 4 / 3; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scan-line { position: absolute; top: 50%; right: 12%; left: 12%; height: 2px; background: #57df8f; box-shadow: 0 0 10px #57df8f; }
.scan-status { margin: 12px 0; color: var(--sub); font-size: 13px; }
.short { max-width: 150px; }
.recipe-builder { margin-top: 18px; }
.ingredient-list { display: grid; gap: 6px; margin: 12px 0; }
.ingredient-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 8px 2px; font-size: 13px; }
.ingredient-row button { border: 0; background: transparent; color: var(--red); }
.consistency-note { margin-top: 13px; border-radius: 8px; background: #f5f6f8; padding: 12px 14px; color: var(--sub); font-size: 12px; line-height: 1.45; }
.consistency-note.warning { background: #fff4e5; color: #805722; }
.meal-settings { display: grid; gap: 7px; }
.meal-setting-row { display: grid; grid-template-columns: 1fr 110px 100px; gap: 9px; }
.goals-grid { margin-top: 18px; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 80; max-width: min(420px, calc(100vw - 40px)); transform: translateY(100px); border-radius: 8px; background: #17191c; color: #fff; padding: 12px 16px; opacity: 0; transition: .25s; }
.toast.show { transform: none; opacity: 1; }
.mobile { display: none; }

@media (max-width: 1080px) {
  .nutrient-grid { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .nutrition-summary { grid-template-columns: 1fr; }
  .summary-side { border-top: 1px solid var(--line); border-left: 0; padding-top: 20px; padding-left: 0; }
  .recipe-grid { grid-template-columns: repeat(2, 1fr); }
  .training-metrics { grid-template-columns: repeat(2, 1fr); }
  .exercise-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-filters { grid-template-columns: repeat(2, 1fr); }
  .favorite-filter { padding-left: 4px; }
  .exercise-config-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .side { width: 205px; }
  .shell { margin-left: 205px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .quick-grid, .workout-grid { grid-template-columns: 1fr 1fr; }
  .quick.big { grid-row: span 2; }
  .summary { gap: 25px; padding: 26px; }
  .progress-grid { grid-template-columns: 1fr; }
  .hydration-overview { grid-template-columns: 190px 1fr; }
  .stats-layout { grid-template-columns: 1fr; }
  .measurement-form { grid-column: auto; }
  .nutrition-form-grid { grid-template-columns: repeat(2, 1fr); }
  .builder-layout { grid-template-columns: 235px minmax(0, 1fr); }
  .plan-set-row { grid-template-columns: 32px repeat(3, 1fr) 32px; }
  .plan-set-row .set-rpe, .plan-set-row .set-rir, .plan-set-row .set-rest { grid-row: 2; }
  .plan-set-row .set-rest { grid-column: 4; }
  .plan-set-row .remove-set { grid-column: 5; grid-row: 1 / span 2; align-self: center; }
  .session-layout { grid-template-columns: 205px minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .side { display: none; }
  .shell { margin-left: 0; }
  .top { min-height: 75px; padding: 12px 15px; }
  .top h1 { font-size: 19px; }
  .top .eyebrow, .top .icon-btn, .top .avatar { display: none; }
  .sync-pill { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .content { width: calc(100% - 24px); padding: 14px 0 96px; }
  .summary { grid-template-columns: 1fr; padding: 20px; }
  .hero-summary { min-height: 0; }
  .ring { width: 145px; margin: auto; }
  .summary h2 { font-size: 22px; }
  .macro-lines { grid-template-columns: 1fr; gap: 12px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric { padding: 14px; }
  .page-head, .panel-head { align-items: flex-start; }
  .page-head h2, .panel-head h2 { font-size: 23px; }
  .page-head p, .panel-head p { font-size: 12px; }
  .food-page-head { display: grid; }
  .date-actions { width: 100%; }
  .date-button { flex: 1; }
  .food-tabs { margin-right: -12px; margin-left: -12px; border-right: 0; border-left: 0; border-radius: 0; padding-right: 12px; padding-left: 12px; }
  .food-tabs button { flex: 0 0 auto; }
  .nutrition-summary { padding: 20px; }
  .calorie-overview { display: grid; gap: 18px; }
  .calorie-equation { gap: 8px; }
  .section-title { align-items: flex-start; }
  .section-title .primary { min-height: 38px; padding: 0 10px; font-size: 12px; }
  .nutrient-card { padding: 18px 10px; }
  .nutrient-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 5px; }
  .nutrient h4 { font-size: 11px; }
  .nutrient-value { font-size: 15px; }
  .mini-ring { width: 62px; }
  .meal-head { grid-template-columns: 40px 1fr auto; padding: 10px 12px; }
  .meal-actions .copy-meal { display: none; }
  .meal-actions button { width: 36px; min-height: 36px; overflow: hidden; padding: 0; font-size: 0; }
  .meal-actions .add-meal::after { font-size: 22px; content: "+"; }
  .hydration-card { padding: 17px; }
  .hydration-overview { grid-template-columns: 1fr; }
  .water-visual { min-height: 125px; }
  .inline-input { min-width: 100%; }
  .toolbar { flex-wrap: wrap; }
  .search-field { min-width: 100%; }
  .recipe-grid, .quick-grid, .workout-grid { grid-template-columns: 1fr; }
  .training-page-head { display: grid; }
  .training-page-head .primary { width: 100%; }
  .training-environment { width: 100%; }
  .active-workout-banner { align-items: flex-start; }
  .training-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .training-metric { padding: 14px; }
  .training-tabs { margin-right: -12px; margin-left: -12px; border-right: 0; border-left: 0; border-radius: 0; padding-right: 12px; padding-left: 12px; }
  .training-tabs button { flex: 0 0 auto; }
  .training-filters, .compact-training-filters { grid-template-columns: 1fr; }
  .exercise-catalog-grid, .exercise-picker-results { grid-template-columns: 1fr; }
  .exercise-card { grid-template-columns: 82px 1fr; }
  .exercise-card .exercise-visual { min-height: 94px; }
  .training-stats-grid { grid-template-columns: 1fr; }
  .builder-layout { display: block; }
  .builder-settings { border-right: 0; border-bottom: 1px solid var(--line); }
  .builder-toolbar { align-items: flex-start; }
  .exercise-config-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-set-row { min-width: 0; grid-template-columns: 28px repeat(4, minmax(0, 1fr)) 32px; }
  .plan-set-table { overflow: visible; }
  .plan-set-row > span { grid-column: 1; grid-row: 1 / span 2; }
  .plan-set-row .set-type { grid-column: 2 / span 2; grid-row: 1; }
  .plan-set-row .set-weight { grid-column: 4 / span 2; grid-row: 1; }
  .plan-set-row .set-reps { grid-column: 2; grid-row: 2; }
  .plan-set-row .set-rpe { grid-column: 3; grid-row: 2; }
  .plan-set-row .set-rir { grid-column: 4; grid-row: 2; }
  .plan-set-row .set-rest { grid-column: 5; grid-row: 2; }
  .plan-set-row .remove-set { grid-column: 6; grid-row: 1 / span 2; align-self: center; }
  .superset-row { grid-template-columns: 1fr 1fr; }
  .superset-badge { grid-column: 1 / -1; }
  .exercise-detail-layout { grid-template-columns: 1fr; }
  .exercise-detail-visual .exercise-visual { min-height: 230px; }
  .exercise-detail-visual .exercise-visual svg { width: 155px; height: 210px; }
  .workout-session-modal { align-items: end; padding: 0; }
  .session-modal { max-height: 100vh !important; border-radius: 0 !important; }
  .session-layout { display: block; min-height: 0; }
  .session-exercise-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 7px; }
  .session-nav-item { min-width: 165px; }
  .session-main { padding: 16px; }
  .session-exercise-head { grid-template-columns: 105px 1fr; gap: 14px; }
  .session-visual .exercise-visual { min-height: 130px; }
  .session-visual .exercise-visual svg { width: 90px; height: 120px; }
  .session-exercise-head h2 { font-size: 21px; }
  .session-set-table { overflow: visible; }
  .session-set-header { display: none; }
  .session-set-row { min-width: 0; grid-template-areas: "number type weight done" "number reps rpe done"; grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 9px 8px; padding: 12px 4px; }
  .session-set-number { grid-area: number; align-self: center; }
  .session-set-type { grid-area: type; }
  .session-set-weight { grid-area: weight; }
  .session-set-reps { grid-area: reps; }
  .session-set-rpe { grid-area: rpe; }
  .session-set-row .complete-set { grid-area: done; align-self: center; }
  .session-input-group > small, .session-set-type > small, .session-set-number > small { display: block; margin-bottom: 4px; color: var(--sub); font-size: 9px; font-weight: 600; }
  .session-set-row .weight-inline { grid-template-columns: minmax(0, 1fr) 18px; gap: 2px; }
  .session-actions { flex-wrap: wrap; }
  .session-actions .spacer { display: none; }
  .session-actions #finishWorkout { width: 100%; }
  .rest-timer { justify-content: flex-start; gap: 14px; }
  .rest-ring { width: 72px; flex: 0 0 auto; }
  .rest-timer .toolbar { gap: 5px; }
  .rest-timer .toolbar button { min-height: 34px; padding: 0 8px; font-size: 10px; }
  .quick.big { grid-row: auto; }
  .quick { min-height: 135px; }
  .form-row, .form-row.three { grid-template-columns: 1fr; }
  .nutrition-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reminder-row { grid-template-columns: 34px 1fr 105px; }
  .reminder-interval { grid-column: 2 / -1; }
  .day-picker { grid-column: 1 / -1; }
  .modal { align-items: end; padding: 0; }
  .modal-box, .modal-box.wide { width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .modal-box.training-builder-modal, .modal-box.session-modal { width: 100%; max-height: 100vh; padding: 0; }
  .selected-food { display: grid; }
  .meal-setting-row { grid-template-columns: 1fr 86px 78px; }
  .mobile {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: flex;
    height: 74px;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    border-top: 1px solid var(--line);
    background: rgba(255,255,255,.94);
    padding: 0 3px max(7px, env(safe-area-inset-bottom));
    backdrop-filter: blur(18px);
    scrollbar-width: none;
  }
  .mobile::-webkit-scrollbar { display: none; }
  .mobile button { display: grid; min-width: 49px; flex: 1 0 14%; gap: 3px; border: 0; background: transparent; color: #858b93; font-size: 9px; text-align: center; }
  .mobile button.active { color: var(--ink); font-weight: 700; }
  .toast { right: 12px; bottom: 84px; left: 12px; max-width: none; text-align: center; }
}

@media (max-width: 390px) {
  .metrics { grid-template-columns: 1fr; }
  .calorie-equation small { font-size: 9px; }
  .calorie-equation b { font-size: 17px; }
  .nutrition-form-grid { grid-template-columns: 1fr; }
  .meal-setting-row { grid-template-columns: 1fr 78px; }
  .meal-setting-row .meal-percent { grid-column: 1 / -1; }
  .training-metrics { grid-template-columns: 1fr; }
  .active-workout-banner { display: grid; }
  .active-workout-banner button { width: 100%; }
  .exercise-card { grid-template-columns: 74px 1fr; gap: 10px; padding: 10px; }
  .exercise-config-grid { grid-template-columns: 1fr; }
  .plan-exercise-summary { grid-template-columns: auto 1fr; }
  .plan-exercise-summary .row-actions { grid-column: 1 / -1; }
  .session-exercise-head { grid-template-columns: 1fr; }
  .session-visual { display: none; }
  .rest-timer { display: grid; grid-template-columns: 64px 1fr; }
  .rest-ring { width: 64px; }
}

/* Allenamento: catalogo anatomico neutro e sessione guidata */
.category-art {
  display: grid;
  overflow: hidden;
  place-items: center;
  border-radius: 8px;
  background: #eef3f3;
}
.neutral-muscle-map { width: 100%; height: 100%; }
.map-body { fill: #d9e0e3; stroke: #97a4aa; stroke-width: 1.5; }
.map-body-line { fill: none; stroke: #a9b4ba; stroke-linecap: round; stroke-width: 8; }
.map-zone { fill: transparent; opacity: .94; }
.map-zone.primary { fill: #df5a50; }
.map-zone.secondary { fill: #ef9a78; }
.exercise-card-art { width: 94px; min-height: 112px; align-self: stretch; }
.exercise-picker-shell { padding: 12px; }
.modal-box.exercise-picker-modal {
  display: flex;
  width: min(1050px, calc(100vw - 24px));
  height: min(94vh, 900px);
  max-height: none;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.exercise-picker-head { flex: 0 0 auto; border-bottom: 1px solid var(--line); padding: 18px 20px; }
.exercise-picker-head > div { min-width: 0; flex: 1; }
.exercise-picker-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-back { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 19px; }
.exercise-picker-controls { display: grid; flex: 0 0 auto; grid-template-columns: 1fr auto; gap: 8px; border-bottom: 1px solid var(--line); padding: 12px 20px; }
.exercise-picker-controls .search-field { min-width: 0; }
.picker-filter-button { min-width: 82px; }
.exercise-picker-filter-panel { display: grid; flex: 0 0 auto; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: center; gap: 8px; border-bottom: 1px solid var(--line); background: #fafbfc; padding: 10px 20px; }
.exercise-picker-filter-panel .field { min-width: 0; }
.exercise-picker-subfilters { display: flex; flex: 0 0 auto; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--line); padding: 9px 20px; scrollbar-width: none; }
.exercise-picker-subfilters::-webkit-scrollbar { display: none; }
.exercise-picker-subfilters button { min-height: 34px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 0 11px; color: var(--sub); font-size: 11px; font-weight: 650; }
.exercise-picker-subfilters button.active { border-color: var(--ink); background: var(--ink); color: #fff; }
.exercise-picker-content { min-height: 0; flex: 1; overflow-y: auto; padding: 16px 20px 22px; }
.muscle-category-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.muscle-category-card { display: grid; min-width: 0; min-height: 138px; grid-template-columns: minmax(0,1fr) 138px 18px; align-items: center; gap: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 0 14px 0 18px; color: var(--ink); text-align: left; box-shadow: 0 4px 18px rgba(22,28,36,.035); }
.muscle-category-card:hover { border-color: #bfc8cc; background: #fbfcfc; }
.muscle-category-card span { min-width: 0; }
.muscle-category-card strong { display: block; font-size: 18px; }
.muscle-category-card small { display: block; margin-top: 6px; color: var(--sub); font-size: 11px; }
.muscle-category-card > b { color: var(--muted); font-size: 22px; }
.muscle-category-art { width: 138px; height: 138px; border-radius: 0; }
.exercise-picker-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.exercise-picker-item { position: relative; display: block; overflow: hidden; padding: 0; }
.exercise-picker-item.selected { border-color: #3d9a78; box-shadow: inset 0 0 0 1px #3d9a78; }
.exercise-picker-main { display: grid; width: 100%; min-height: 104px; grid-template-columns: 92px minmax(0,1fr) 32px; align-items: center; gap: 12px; border: 0; background: transparent; padding: 8px 44px 8px 8px; color: var(--ink); text-align: left; }
.exercise-picker-main .exercise-visual { width: 92px; height: 88px; min-height: 88px; }
.exercise-picker-main .exercise-motion-svg { width: 100%; height: 100%; min-height: 88px; }
.exercise-picker-main span { min-width: 0; }
.exercise-picker-main strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.exercise-picker-main small, .exercise-picker-main em { display: block; overflow: hidden; margin-top: 4px; color: var(--sub); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.exercise-picker-main i { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--sub); font-size: 16px; font-style: normal; }
.exercise-picker-item.selected .exercise-picker-main i { border-color: var(--green); background: var(--green); color: #fff; }
.picker-info { position: absolute; top: 10px; right: 8px; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--blue); font-size: 12px; font-weight: 750; }
.exercise-picker-actions { display: flex; min-height: 68px; flex: 0 0 auto; align-items: center; gap: 10px; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); backdrop-filter: blur(14px); }
.exercise-picker-actions > button { min-width: 145px; }
.exercise-picker-actions > span { flex: 1; color: var(--sub); font-size: 12px; text-align: center; }

.exercise-detail-art { position: relative; min-height: 360px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #eef3f3; }
.exercise-detail-art > .exercise-visual { position: absolute; inset: 0; min-height: 360px; border-radius: 0; }
.exercise-detail-art > .exercise-visual .exercise-motion-svg { width: 100%; height: 100%; min-height: 360px; padding: 18px; }
.detail-category-art { position: absolute; right: 12px; bottom: 12px; width: 116px; height: 102px; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.9); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.visual-motion-toggle { position: absolute; top: 12px; right: 12px; min-height: 34px; border: 1px solid rgba(255,255,255,.9); border-radius: 7px; background: rgba(255,255,255,.9); padding: 0 10px; color: var(--ink-soft); font-size: 10px; font-weight: 700; backdrop-filter: blur(8px); }
.visual-motion-toggle:disabled { color: var(--sub); }
.exercise-muscles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 14px 0 2px; }
.exercise-muscles > div { border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; padding: 10px 12px; }
.exercise-muscles small { display: block; color: var(--sub); font-size: 9px; text-transform: uppercase; }
.exercise-muscles strong { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; }

.session-modal { overflow-y: auto; }
.session-topbar { min-height: 82px; justify-content: center; }
.session-back { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 20px; }
.session-topbar-title { min-width: 0; text-align: center; }
.session-topbar-title h2 { overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.session-topbar-title .eyebrow { overflow: hidden; max-width: 280px; text-overflow: ellipsis; white-space: nowrap; }
.session-clock { margin-left: auto; }
.session-pause { min-width: 84px; }
.session-layout { grid-template-columns: 205px minmax(0,1fr); min-height: 0; }
.session-main { padding: 20px clamp(18px,3vw,38px) 30px; }
.session-exercise-head { grid-template-columns: minmax(250px,360px) minmax(0,1fr); gap: clamp(20px,4vw,52px); }
.session-art-stage { position: relative; min-height: 310px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #eef3f3; }
.session-art-stage > .exercise-visual { position: absolute; inset: 0; min-height: 310px; border-radius: 0; }
.session-art-stage > .exercise-visual .exercise-motion-svg { width: 100%; height: 100%; min-height: 310px; padding: 12px; }
.session-category-art { position: absolute; right: 10px; bottom: 10px; width: 94px; height: 84px; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.9); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.session-exercise-copy h2 { margin: 12px 0 7px; font-size: clamp(24px,3vw,36px); line-height: 1.08; }
.session-exercise-copy p { font-size: 13px; }
.session-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 22px 0; }
.session-kpi { display: grid; justify-items: center; gap: 8px; text-align: center; }
.session-kpi-ring { --kpi-angle: 360deg; position: relative; display: grid; width: 112px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(#319b9f var(--kpi-angle),#e5e9eb 0); }
.session-kpi-ring::after { position: absolute; inset: 7px; border-radius: 50%; background: #fff; content: ""; }
.session-kpi-ring.teal { background: conic-gradient(#218b70 360deg,#e5e9eb 0); }
.session-kpi-ring.coral { background: conic-gradient(#de6259 var(--kpi-angle),#e5e9eb 0); }
.session-kpi-ring b { position: relative; z-index: 1; font-size: 23px; font-variant-numeric: tabular-nums; }
.session-kpi > span { max-width: 120px; color: var(--sub); font-size: 10px; line-height: 1.35; }
.session-quick-log { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 52px; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; padding: 12px; }
.session-quick-log label { min-width: 0; }
.session-quick-log label > span { display: block; margin-bottom: 5px; color: var(--sub); font-size: 10px; }
.session-quick-add { width: 52px; min-height: 44px; align-self: end; padding: 0; font-size: 27px; }
.session-quick-comment { grid-column: 1 / -1; }
.session-set-group { border-bottom: 1px solid #edf0f2; }
.session-set-group.complete { background: #f2f8f4; }
.session-set-group .session-set-row { border-bottom: 0; background: transparent; }
.session-set-note { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 8px; padding: 0 9px 10px 64px; color: var(--sub); font-size: 9px; }
.session-set-note .field { min-height: 34px; font-size: 11px; }
.session-history { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 4px; }
.session-history .section-title { margin-top: 15px; }
.session-history-list { display: grid; border: 1px solid var(--line); border-radius: 8px; }
.session-history-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 11px 13px; }
.session-history-list > div:last-child { border-bottom: 0; }
.session-history-list strong, .session-history-list small { display: block; }
.session-history-list strong { font-size: 11px; }
.session-history-list small { margin-top: 3px; color: var(--sub); font-size: 9px; }
.session-history-list b { font-size: 11px; white-space: nowrap; }
.session-history-chart { display: flex; height: 160px; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--line); padding: 12px 10px 0; }
.session-history-chart > div { position: relative; display: flex; height: 100%; flex: 1; align-items: flex-end; justify-content: center; }
.session-history-chart i { width: min(38px,72%); min-height: 8px; border-radius: 5px 5px 0 0; background: #319b9f; }
.session-history-chart b { position: absolute; top: 0; font-size: 9px; }
.session-history-chart span { position: absolute; bottom: -18px; color: var(--sub); font-size: 8px; }
.compact-empty { padding: 16px; font-size: 11px; }

@media (max-width: 840px) {
  .exercise-picker-filter-panel { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .muscle-category-grid { grid-template-columns: 1fr; }
  .session-layout { display: flex; flex-direction: column; }
  .session-exercise-nav { order: 2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; border-top: 1px solid var(--line); border-right: 0; border-bottom: 0; }
  .session-nav-item { min-width: 0; }
  .session-main { order: 1; }
  .session-exercise-head { grid-template-columns: minmax(220px,310px) minmax(0,1fr); }
}

@media (max-width: 720px) {
  .exercise-picker-shell { align-items: stretch; padding: 0; }
  .modal-box.exercise-picker-modal { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; padding: 0; }
  .exercise-picker-head { padding: calc(12px + env(safe-area-inset-top)) 12px 12px; }
  .exercise-picker-head h2 { font-size: 19px; }
  .exercise-picker-controls { grid-template-columns: minmax(0,1fr) auto; padding: 10px 12px; }
  .exercise-picker-controls .search-field { min-width: 0; }
  .exercise-picker-filter-panel { grid-template-columns: 1fr 1fr; padding: 9px 12px; }
  .exercise-picker-subfilters { overflow: visible; flex-wrap: wrap; padding: 8px 12px; }
  .exercise-picker-content { padding: 10px 12px 18px; }
  .muscle-category-card { min-height: 112px; grid-template-columns: minmax(0,1fr) 112px 14px; padding-left: 14px; }
  .muscle-category-art { width: 112px; height: 112px; }
  .muscle-category-card strong { font-size: 16px; }
  .exercise-picker-results { grid-template-columns: 1fr; }
  .exercise-picker-main { min-height: 94px; grid-template-columns: 78px minmax(0,1fr) 30px; }
  .exercise-picker-main .exercise-visual { width: 78px; height: 78px; min-height: 78px; }
  .exercise-picker-main .exercise-motion-svg { min-height: 78px; }
  .exercise-picker-actions { min-height: 70px; padding-right: 12px; padding-left: 12px; }
  .exercise-picker-actions > button { min-width: 0; flex: 1; }
  .exercise-picker-actions > span { display: none; }
  .exercise-detail-art, .exercise-detail-art > .exercise-visual { min-height: 280px; }
  .exercise-detail-art > .exercise-visual .exercise-motion-svg { min-height: 280px; padding: 10px; }
  .detail-category-art { width: 90px; height: 80px; }
  .session-topbar { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 9px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
  .session-topbar-title { text-align: left; }
  .session-topbar-title .eyebrow { max-width: 150px; }
  .session-clock { display: none; }
  .session-pause { min-width: 72px; padding: 0 10px; }
  .session-main { padding: 12px 12px 24px; }
  .session-exercise-head { grid-template-columns: 1fr; gap: 14px; }
  .session-visual { display: block; }
  .session-art-stage, .session-art-stage > .exercise-visual, .session-art-stage > .exercise-visual .exercise-motion-svg { min-height: min(75vw,330px); }
  .session-exercise-copy h2 { font-size: 25px; }
  .session-kpis { gap: 7px; margin: 18px 0; }
  .session-kpi-ring { width: min(27vw,104px); }
  .session-kpi-ring b { font-size: 19px; }
  .session-quick-log { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 48px; }
  .session-quick-add { width: 48px; }
  .session-set-group .session-set-row { grid-template-areas: "number type weight done" "number reps rpe done"; grid-template-columns: 34px minmax(0,1fr) minmax(0,1fr) 38px; }
  .session-set-note { grid-template-columns: 1fr; padding: 0 4px 10px 42px; }
  .session-set-note > span { display: none; }
  .session-exercise-nav { grid-template-columns: 1fr 1fr; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .session-nav-item { min-width: 0; }
  .session-nav-item strong { white-space: normal; }
  .session-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .session-actions #finishWorkout { grid-column: 1 / -1; }
}

@media (max-width: 390px) {
  .exercise-picker-filter-panel { grid-template-columns: 1fr; }
  .exercise-picker-main { grid-template-columns: 70px minmax(0,1fr) 28px; padding-right: 39px; }
  .exercise-picker-main .exercise-visual { width: 70px; height: 74px; min-height: 74px; }
  .exercise-picker-main .exercise-motion-svg { min-height: 74px; }
  .session-kpi-ring { width: 88px; }
  .session-kpi > span { font-size: 9px; }
  .session-exercise-nav { grid-template-columns: 1fr; }
  .session-visual { display: block; }
}

/* Cardio */
.cardio-page-head { align-items: center; }
.cardio-connection { margin-bottom: 12px; border: 1px solid #efd194; border-radius: 8px; background: #fff7e6; padding: 10px 13px; color: #76541e; font-size: 12px; }
.cardio-connection.offline { border-color: #efc0b8; background: #fff0ed; color: #8a3b31; }
.cardio-connection.pending { border-color: #b9d8cf; background: #edf8f4; color: #266656; }
.cardio-tabs { margin-bottom: 20px; }
.cardio-panel { animation: enter .2s ease; }
.cardio-week-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.cardio-week-metric { position: relative; min-height: 128px; overflow: hidden; padding: 18px; }
.cardio-week-metric::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--blue); content: ""; }
.cardio-week-metric.time::before { background: var(--green); }
.cardio-week-metric.activity::before { background: var(--orange); }
.cardio-week-metric.calories::before { background: var(--red); }
.cardio-week-metric p { margin: 0; color: var(--sub); font-size: 12px; }
.cardio-week-metric b { display: block; margin-top: 14px; font-size: 25px; }
.cardio-week-metric small { color: var(--muted); }
.cardio-dashboard-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 12px; margin-top: 12px; }
.cardio-goal-panel, .cardio-quick-panel { min-height: 270px; padding: 20px; }
.compact-title { margin: 0 0 15px; }
.compact-title h3 { margin: 0; }
.compact-title p { margin: 4px 0 0; color: var(--sub); font-size: 12px; }
.cardio-goal-bars { display: grid; gap: 15px; }
.cardio-goal-bars > div span { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.cardio-goal-bars small { color: var(--sub); }
.cardio-goal-bars i { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: #e9edf0; }
.cardio-goal-bars em { display: block; height: 100%; border-radius: inherit; background: var(--mint); }
.cardio-quick-types { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.cardio-quick-types button { display: grid; min-width: 0; min-height: 80px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); }
.cardio-quick-types span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 750; }
.cardio-quick-types small { max-width: 100%; overflow: hidden; padding: 0 4px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.cardio-resume-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; border: 1px solid #a8d7c8; border-radius: 8px; background: #edf9f5; padding: 17px 20px; }
.cardio-resume-banner strong, .cardio-resume-banner p { display: block; margin: 6px 0 0; }
.cardio-resume-banner p { color: var(--sub); font-size: 12px; }
.cardio-activity-list { overflow: hidden; }
.cardio-activity-row { display: grid; width: 100%; min-height: 86px; grid-template-columns: 45px 1fr auto; align-items: center; gap: 13px; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 13px 17px; color: var(--ink); text-align: left; }
.cardio-activity-row:last-child { border-bottom: 0; }
.cardio-activity-row:hover { background: var(--surface-2); }
.cardio-type-symbol { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #e8f5f1; color: #16735d; font-weight: 780; }
.cardio-activity-main { min-width: 0; }
.cardio-activity-main strong, .cardio-activity-main small, .cardio-activity-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cardio-activity-main small { margin: 4px 0; color: var(--sub); font-size: 10px; }
.cardio-activity-main span { color: var(--ink-soft); font-size: 12px; }
.cardio-activity-side { text-align: right; }
.cardio-activity-side b, .cardio-activity-side small, .cardio-activity-side em { display: block; }
.cardio-activity-side small { color: var(--sub); font-size: 10px; }
.cardio-activity-side em { margin-top: 4px; color: var(--orange); font-size: 9px; font-style: normal; }
.cardio-empty { display: grid; min-height: 150px; place-items: center; align-content: center; gap: 7px; padding: 24px; color: var(--sub); text-align: center; }
.cardio-empty p { margin: 0; font-size: 12px; }
.cardio-empty.standalone { min-height: 300px; border: 1px dashed var(--line-strong); border-radius: 8px; }

.cardio-record-toolbar { display: grid; grid-template-columns: minmax(170px,1fr) minmax(150px,.7fr) auto auto auto; align-items: end; gap: 10px; margin-bottom: 12px; }
.cardio-auto-pause { min-height: 40px; white-space: nowrap; }
.cardio-route-selected { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; border: 1px solid #b8d6ed; border-radius: 8px; background: #eef7fd; padding: 11px 14px; }
.cardio-route-selected strong, .cardio-route-selected small { display: block; }
.cardio-route-selected small { margin-top: 3px; color: var(--sub); }
.cardio-live { position: relative; min-height: 520px; overflow: hidden; border-color: #cbd3d9; background: #dce6e7; box-shadow: none; }
.cardio-live-map { position: absolute; inset: 0; }
.cardio-live-overlay { position: absolute; inset: 14px 14px auto; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.cardio-record-dot { border-radius: 99px; background: rgba(255,255,255,.9); padding: 7px 10px; color: var(--sub); font-size: 11px; font-weight: 700; backdrop-filter: blur(12px); }
.cardio-record-dot.active { color: #a4332d; }
.cardio-record-dot.active::before { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--red); content: ""; animation: cardio-pulse 1.2s ease infinite; }
@keyframes cardio-pulse { 50% { opacity: .35; } }
.cardio-live-readout { position: absolute; inset: auto 14px 14px; z-index: 5; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.cardio-live-readout > div { border: 1px solid rgba(255,255,255,.7); border-radius: 8px; background: rgba(20,25,29,.82); padding: 14px 18px; color: #fff; backdrop-filter: blur(12px); }
.cardio-live-readout small { display: block; color: #cbd3d6; font-size: 10px; }
.cardio-live-readout b { display: block; margin-top: 4px; font-size: 31px; }
.cardio-live-readout em { font-size: 13px; font-style: normal; }
.cardio-live-metrics { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin: 10px 0; }
.cardio-live-metrics article { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 14px; }
.cardio-live-metrics small, .cardio-live-metrics span { display: block; overflow: hidden; color: var(--sub); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.cardio-live-metrics b { display: block; margin: 8px 0 2px; overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.cardio-indoor-scene { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; background: linear-gradient(150deg,#eef4f3 0,#d8e6e2 55%,#eef0f4 100%); color: #26443d; }
.cardio-indoor-scene span { display: grid; width: 100px; height: 100px; place-items: center; border: 1px solid #9dc8bb; border-radius: 50%; background: rgba(255,255,255,.66); font-size: 34px; font-weight: 780; }
.cardio-indoor-scene strong { margin-top: 15px; font-size: 22px; }
.cardio-indoor-scene small { margin-top: 5px; color: var(--sub); }
.cardio-indoor-live { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 10px 0; padding: 16px; }
.cardio-indoor-live h3 { margin: 3px 0 0; }
.cardio-indoor-inputs { display: grid; grid-template-columns: repeat(3,minmax(100px,1fr)); gap: 8px; }
.cardio-indoor-inputs label { color: var(--sub); font-size: 10px; }
.cardio-indoor-inputs input { display: block; margin-top: 4px; }
.cardio-record-controls { position: sticky; bottom: 0; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.94); padding: 12px; backdrop-filter: blur(16px); }
.cardio-start-button { min-width: 170px; min-height: 58px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font-size: 18px; font-weight: 760; }
.cardio-control { min-width: 100px; min-height: 48px; }
.cardio-control.finish { border: 1px solid #b23a33; border-radius: 8px; background: #b23a33; color: #fff; font-weight: 700; }
.cardio-record-note { margin: 10px 0 0; color: var(--sub); font-size: 11px; text-align: center; }

.cardio-map-wrap { position: relative; }
.cardio-map { position: relative; width: 100%; min-height: 320px; overflow: hidden; background-color: #dce5e4; background-image: linear-gradient(#cbd8d6 1px,transparent 1px),linear-gradient(90deg,#cbd8d6 1px,transparent 1px); background-size: 32px 32px; }
.cardio-map .map-tiles { position: absolute; inset: 0; overflow: hidden; }
.cardio-map .map-tiles img { position: absolute; width: 256px; height: 256px; user-select: none; }
.cardio-map .map-track { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cardio-map .map-track polyline { fill: none; stroke: #087f6c; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; filter: drop-shadow(0 1px 1px rgba(255,255,255,.75)); }
.map-current { position: absolute; z-index: 4; width: 16px; height: 16px; transform: translate(-50%,-50%); border: 3px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 2px 8px rgba(15,30,40,.35); }
.map-attribution { position: absolute; right: 3px; bottom: 2px; z-index: 5; background: rgba(255,255,255,.8); padding: 1px 4px; color: #48525a; font-size: 8px; }
.map-tools { position: absolute; top: 12px; right: 12px; z-index: 6; display: grid; gap: 5px; }
.map-button { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(255,255,255,.94); color: var(--ink); font-size: 20px; box-shadow: 0 4px 16px rgba(20,30,35,.12); }
.cardio-route-builder { overflow: hidden; margin-bottom: 16px; }
.cardio-route-form { display: grid; grid-template-columns: 1.3fr repeat(2,1fr) auto; align-items: end; gap: 10px; padding: 16px; }
.route-map { min-height: 430px; cursor: crosshair; }
.route-builder-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; }
.route-builder-footer p { margin: 0; color: var(--sub); font-size: 12px; }
.cardio-route-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.cardio-route-card { position: relative; display: grid; grid-template-columns: 42% 1fr; min-height: 220px; overflow: hidden; }
.cardio-route-preview { min-height: 220px; }
.cardio-route-copy { min-width: 0; padding: 18px; }
.cardio-route-copy h3 { margin: 10px 0 5px; }
.cardio-route-copy p { margin: 0 0 15px; color: var(--sub); font-size: 12px; }
.cardio-route-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cardio-route-favorite { position: absolute; top: 12px; right: 12px; color: #b57a00; }

.cardio-stats-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cardio-custom-range { display: flex; align-items: center; gap: 6px; }
.cardio-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.cardio-stat { min-width: 0; padding: 17px; }
.cardio-stat p { margin: 0; color: var(--sub); font-size: 11px; }
.cardio-stat b { display: block; margin: 10px 0 4px; overflow: hidden; font-size: 21px; text-overflow: ellipsis; white-space: nowrap; }
.cardio-stat small { color: var(--green); font-size: 9px; }
.cardio-chart-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 12px; margin: 12px 0; }
.cardio-bar-chart { display: flex; height: 175px; align-items: flex-end; gap: 7px; margin-top: 18px; border-bottom: 1px solid var(--line); padding: 15px 4px 0; }
.cardio-bar-chart > div { position: relative; display: flex; height: 100%; min-width: 8px; flex: 1; align-items: flex-end; justify-content: center; }
.cardio-bar-chart i { width: min(34px,70%); min-height: 5px; border-radius: 4px 4px 0 0; background: var(--mint); }
.cardio-bar-chart b { position: absolute; top: -13px; font-size: 8px; }
.cardio-bar-chart span { position: absolute; bottom: -17px; color: var(--sub); font-size: 8px; white-space: nowrap; }
.cardio-record-list { display: grid; gap: 5px; margin-top: 15px; }
.cardio-record-list > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; border-bottom: 1px solid var(--line); padding: 9px 0; }
.cardio-record-list span, .cardio-record-list small { color: var(--sub); font-size: 10px; }
.cardio-record-list small { grid-column: 1 / -1; }
.cardio-goal-editor { display: grid; grid-template-columns: 220px 1fr; align-items: end; gap: 20px; margin-bottom: 12px; padding: 20px; }
.cardio-goal-editor h3 { margin: 5px 0 0; }
.cardio-goal-fields { display: grid; grid-template-columns: repeat(4,minmax(90px,1fr)) auto; align-items: end; gap: 8px; }

.cardio-finish-summary, .cardio-detail-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 17px 0; }
.cardio-finish-modal .modal-actions { position: sticky; bottom: -23px; z-index: 6; margin-right: -23px; margin-left: -23px; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); padding: 13px 23px calc(13px + env(safe-area-inset-bottom)); backdrop-filter: blur(15px); }
.cardio-finish-summary > div, .cardio-detail-metrics > div { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); padding: 13px; }
.cardio-finish-summary small, .cardio-detail-metrics small { display: block; color: var(--sub); font-size: 9px; }
.cardio-finish-summary b, .cardio-detail-metrics b { display: block; margin-top: 6px; font-size: 17px; }
.cardio-textarea { min-height: 95px; resize: vertical; }
.cardio-indoor-fields { margin-top: 3px; }
.cardio-photo-preview { overflow: hidden; max-width: 260px; border-radius: 8px; }
.cardio-photo-preview img { display: block; width: 100%; max-height: 180px; object-fit: cover; }
.cardio-detail-modal { width: min(980px,100%) !important; }
.cardio-detail-head { align-items: flex-start; }
.cardio-detail-title { width: min(620px,100%); border: 0; background: transparent; color: var(--ink); font-size: 26px; font-weight: 760; }
.cardio-detail-head p { margin: 5px 0 0; color: var(--sub); }
.cardio-detail-photo { display: block; width: 100%; max-height: 380px; margin-top: 16px; border-radius: 8px; object-fit: cover; }
.detail-map { min-height: 360px; margin-top: 16px; border-radius: 8px; }
.cardio-detail-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.cardio-detail-section { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.cardio-detail-section > h3 { margin: 0 0 12px; }
.cardio-detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cardio-split-list { border: 1px solid var(--line); border-radius: 8px; }
.cardio-split-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 10px 12px; font-size: 11px; }
.cardio-split-list > div:last-child { border-bottom: 0; }
.cardio-profile-chart { display: flex; height: 130px; align-items: flex-end; gap: 3px; border-bottom: 1px solid var(--line); }
.cardio-profile-chart i { position: relative; min-width: 2px; flex: 1; border-radius: 2px 2px 0 0; background: var(--blue); }
.cardio-profile-chart span { position: absolute; bottom: -16px; right: 0; color: var(--sub); font-size: 8px; }
.cardio-comments { display: grid; gap: 7px; margin: 12px 0; }
.cardio-comments > div { border-radius: 8px; background: var(--surface-2); padding: 10px 12px; }
.cardio-comments p { margin: 4px 0; }
.cardio-comments small { color: var(--sub); }
.cardio-reactions { display: flex; gap: 7px; }
.cardio-reactions .active { border-color: #79b5a5; background: #e9f7f3; color: #166b58; }
.muted-copy { color: var(--sub); font-size: 12px; }
.cardio-detail-loading { min-height: 320px; display: grid; place-items: center; color: var(--sub); }

@media (max-width: 1080px) {
  .cardio-record-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cardio-record-toolbar button, .cardio-auto-pause { width: 100%; }
  .cardio-live-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .cardio-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cardio-goal-editor { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .cardio-week-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cardio-dashboard-grid, .cardio-chart-grid { grid-template-columns: 1fr; }
  .cardio-route-list { grid-template-columns: 1fr; }
  .cardio-route-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cardio-goal-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cardio-goal-fields .primary { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .cardio-page-head { display: grid; }
  .cardio-page-head .primary { width: 100%; }
  .cardio-tabs { margin-right: -12px; margin-left: -12px; border-right: 0; border-left: 0; border-radius: 0; padding-right: 12px; padding-left: 12px; }
  .cardio-tabs button { flex: 0 0 auto; }
  .cardio-week-grid { gap: 8px; }
  .cardio-week-metric { min-height: 106px; padding: 14px; }
  .cardio-week-metric b { font-size: 20px; }
  .cardio-dashboard-grid { gap: 8px; }
  .cardio-goal-panel, .cardio-quick-panel { min-height: 0; padding: 16px; }
  .cardio-resume-banner { align-items: flex-start; }
  .cardio-record-toolbar { grid-template-columns: 1fr 1fr; }
  .cardio-record-toolbar > button { grid-column: 1 / -1; }
  .cardio-auto-pause { padding: 0 4px; }
  .cardio-live { min-height: 58vh; margin-right: -12px; margin-left: -12px; border-right: 0; border-left: 0; border-radius: 0; }
  .cardio-live-readout { inset: auto 10px 10px; }
  .cardio-live-readout b { font-size: 24px; }
  .cardio-live-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .cardio-live-metrics article { padding: 11px; }
  .cardio-live-metrics b { font-size: 17px; }
  .cardio-indoor-live { display: grid; }
  .cardio-indoor-inputs { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .cardio-record-controls { bottom: 80px; flex-wrap: wrap; margin-right: -4px; margin-left: -4px; padding: 9px; }
  .cardio-start-button { width: 100%; }
  .cardio-control { min-width: 0; flex: 1; padding: 0 9px; font-size: 11px; }
  .cardio-control.finish { flex: 1 0 100%; }
  .route-map { min-height: 58vh; margin-right: -1px; margin-left: -1px; }
  .route-builder-footer { display: grid; }
  .route-builder-footer .toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .route-builder-footer .toolbar .primary { grid-column: 1 / -1; }
  .cardio-route-card { grid-template-columns: 1fr; }
  .cardio-route-preview { min-height: 180px; }
  .cardio-stats-toolbar { display: grid; }
  .cardio-stats-toolbar .segmented { margin-right: -12px; margin-left: -12px; border-right: 0; border-left: 0; border-radius: 0; }
  .cardio-custom-range { display: grid; grid-template-columns: 1fr auto 1fr; }
  .cardio-stat-grid { gap: 7px; }
  .cardio-stat { padding: 13px; }
  .cardio-stat b { font-size: 18px; }
  .cardio-goal-editor { padding: 16px; }
  .cardio-finish-summary, .cardio-detail-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cardio-finish-modal .modal-actions { bottom: calc(-20px - env(safe-area-inset-bottom)); margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; }
  .cardio-detail-modal { height: 100vh; max-height: 100vh !important; border-radius: 0 !important; }
  .cardio-detail-title { font-size: 22px; }
  .detail-map { min-height: 300px; margin-right: -16px; margin-left: -16px; border-radius: 0; }
  .cardio-detail-columns { grid-template-columns: 1fr; gap: 0; }
  .cardio-activity-row { grid-template-columns: 39px minmax(0,1fr) auto; gap: 9px; padding: 11px 12px; }
  .cardio-type-symbol { width: 38px; height: 38px; }
  .cardio-activity-side b { font-size: 13px; }
}

@media (max-width: 390px) {
  .cardio-record-toolbar { grid-template-columns: 1fr; }
  .cardio-record-toolbar > button { grid-column: auto; }
  .cardio-live-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cardio-indoor-inputs { grid-template-columns: 1fr; }
  .cardio-route-form, .cardio-goal-fields { grid-template-columns: 1fr; }
  .cardio-goal-fields .primary { grid-column: auto; }
  .cardio-quick-types { grid-template-columns: repeat(2,1fr); }
  .cardio-finish-summary, .cardio-detail-metrics { grid-template-columns: 1fr 1fr; }
}



/* Shared, compact controls and mobile-safe action bars. */
button svg { flex:none; vertical-align:middle; }
button { touch-action:manipulation; }
button:disabled { cursor:not-allowed; opacity:.48; }
button:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid #137e74; outline-offset:3px; }
.food-shortcuts { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.weekly-averages { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin:20px 0; border-block:1px solid #e4e7eb; }
.weekly-averages article { min-width:0; padding:16px 12px; display:grid; gap:6px; }
.weekly-averages strong { font-size:21px; }
.weekly-averages small,.data-note { color:#626970; font-size:12px; }
.weekly-table,.table-scroll { overflow:auto; }
.weekly-table table,.table-scroll table { width:100%; border-collapse:collapse; }
.weekly-table th,.weekly-table td,.table-scroll th,.table-scroll td { padding:12px 10px; border-bottom:1px solid #e6e8eb; text-align:left; font-size:13px; }
.program-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.program-card { min-width:0; padding:22px; border:1px solid #dce1e5; border-radius:8px; text-align:left; color:#192025; background:#fff; }
.program-card h3 { margin:14px 0 8px; font-size:20px; overflow-wrap:anywhere; }
.program-days { display:grid; gap:8px; }
.program-day,.program-exercise { width:100%; display:grid; align-items:center; gap:16px; padding:16px; text-align:left; background:#fff; border:0; border-bottom:1px solid #e2e5e8; color:#202629; }
.program-day { grid-template-columns:40px minmax(0,1fr) 20px; }
.program-day>span { display:grid; place-items:center; width:36px; height:36px; border:1px solid #bcc5ca; border-radius:50%; }
.program-day strong,.program-exercise strong { display:block; font-size:16px; overflow-wrap:anywhere; }
.program-day small,.program-exercise small { display:block; margin-top:6px; color:#646c73; }
.program-exercise { grid-template-columns:86px minmax(0,1fr) 16px; padding-inline:0; }
.program-day-actions { position:sticky; bottom:8px; padding:14px 0; background:#fff; z-index:2; }
.program-day-actions button { width:100%; }
.program-day-edit { display:grid; grid-template-columns:minmax(0,1fr) 40px 40px; gap:8px; align-items:end; margin:12px 0; }
.media-pending { display:flex!important; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:#697279; background:#f2f4f5!important; }
.media-pending small { font-size:11px; text-align:center; padding:4px; }
.exercise-visual video { width:100%; height:100%; max-height:400px; object-fit:contain; display:block; background:#fff; }
.exercise-visual.large { aspect-ratio:16/9; width:100%; height:auto; max-height:400px; }
.exercise-visual.compact { width:86px; height:86px; min-width:0; }
.exercise-history-date { padding:14px 0; border-bottom:1px solid #e0e4e7; }
.exercise-history-date h3 { font-size:15px; margin:0 0 10px; }
.exercise-history-date>div { display:grid; grid-template-columns:32px 1fr auto; gap:8px; padding:10px 0; font-size:14px; }
#exerciseDetailExtra { padding:20px 0; }
#exerciseDetailTabs { overflow-x:auto; margin-bottom:16px; }
#exerciseDetailTabs button { min-height:44px; white-space:nowrap; }
.leaflet-container { z-index:0; font-family:inherit; }
.leaflet-container img { max-width:none!important; max-height:none!important; }
.leaflet-control a { color:#1d2529; }
.cardio-live-overlay,.cardio-live-readout { pointer-events:none; z-index:500; }
.cardio-live-readout { color:#141b20; text-shadow:0 1px 2px #fff; background:rgba(255,255,255,.93); border-radius:8px; padding:10px; }
.cardio-map[data-tile-error="true"]::after { content:"Mappa non disponibile: controlla la connessione"; position:absolute; top:8px; left:50px; z-index:500; padding:6px; background:#fff; color:#9f3636; font-size:12px; }
.modal-actions { gap:8px; }
.modal.open { z-index:1000; }
#routineModal.open { z-index:1100; }
#exercisePickerModal.open { z-index:1200; }
#exerciseDetailModal.open { z-index:1300; }
#toast { z-index:3000; }
#moreModal .modal-box { display:grid; gap:12px; }
#moreModal .secondary { min-height:48px; }
@media(max-width:700px) {
  .program-grid { grid-template-columns:1fr; }
  .program-day-actions { bottom:76px; }
  .weekly-averages { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .weekly-averages article:last-child { grid-column:1/-1; }
  .weekly-table table { min-width:520px; }
  .mobile-nav-btn { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:11px; }
  .mobile-nav-btn svg { width:22px; height:22px; }
  nav.mobile { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .session-clock { display:block; margin-left:auto; }
  .session-clock b { font-size:16px; }
  .session-clock small { font-size:10px; }
  .exercise-picker-main strong,.exercise-card h3 { white-space:normal; overflow:visible; text-overflow:clip; }
  .modal-box,.modal-box.wide,.modal-box.training-builder-modal,.modal-box.session-modal,.modal-box.exercise-picker-modal { max-height:100dvh; }
  .modal-actions,.sticky-modal-actions,.exercise-picker-actions { position:sticky; bottom:0!important; z-index:10; background:#fff; padding:12px 12px max(12px,env(safe-area-inset-bottom)); margin:0!important; flex-wrap:wrap; }
  .modal-actions>.primary { min-height:46px; }
  #exerciseDetailTabs { display:flex; }
  #exerciseDetailTabs button { flex:1; padding:8px; font-size:12px; }
  .session-topbar { grid-template-columns:40px minmax(0,1fr) auto 44px; gap:8px; padding:12px; }
  .session-topbar h2 { font-size:18px; }
  .session-topbar .session-pause { min-width:0; padding:9px; }
  .session-quick-entry { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 48px; }
  .program-exercise { grid-template-columns:72px minmax(0,1fr) 12px; gap:10px; }
  .program-exercise .exercise-visual { width:72px; height:72px; }
  .program-exercise strong { font-size:14px; }
}
.advanced-set-row { grid-template-areas: "number measure measure measure measure measure measure remove" "number type weight reps rpe rir rest remove"; grid-template-columns: 28px 1.15fr 1.2fr .8fr .7fr .7fr 1fr 32px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.advanced-set-row > .set-number { grid-area: number; }
.advanced-set-row > .set-measure-config { grid-area: measure; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.advanced-set-row > .set-type { grid-area: type; }
.advanced-set-row > .set-weight { grid-area: weight; }
.advanced-set-row > .set-reps { grid-area: reps; }
.advanced-set-row > .set-rpe { grid-area: rpe; }
.advanced-set-row > .set-rir { grid-area: rir; }
.advanced-set-row > .set-rest { grid-area: rest; }
.advanced-set-row > .remove-set { grid-area: remove; }
.plan-exercise-editor .label,.session-quick-log label > span { font-size: 13px; }
.plan-exercise-editor .field { min-width: 0; font-size: 14px; min-height: 42px; }
@media (max-width: 700px) {
  .plan-set-row.advanced-set-row { grid-template-columns: 24px repeat(4,minmax(0,1fr)) 30px; grid-template-areas: "number measure measure measure measure remove" "number type type weight weight remove" "number reps rpe rir rest remove"; gap: 8px 5px; }
  .advanced-set-row > .set-measure-config { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .advanced-set-row .field { font-size: 16px; padding: 0 5px; }
  .session-quick-log label > span { min-height: 32px; }
}
.session-quick-log label { min-width: 0; }
#sessionOnlyNote { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
#sessionOnlyNote label { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
#sessionOnlyNote input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; }

/* Scoped to the catalog and exercise detail, not the workout session player. */
#exerciseCatalog .catalog-category { min-height:88px; grid-template-columns:minmax(0,1fr) 20px; padding:18px; }
#exerciseCatalog .catalog-category small { font-size:13px; }
#exerciseCatalog .exercise-card { grid-template-columns:112px minmax(0,1fr); box-shadow:none; }
#exerciseCatalog .exercise-card h3 { font-size:16px; white-space:normal; overflow-wrap:anywhere; }
#exerciseCatalog .exercise-card p { font-size:13px; white-space:normal; }
#exerciseCatalog .exercise-card-actions { flex-wrap:wrap; }
#exerciseCatalog .exercise-card-actions button { min-height:44px; font-size:14px; }
#exerciseCatalog .exercise-card-actions .icon-action { width:44px; padding:0; flex:none; }
#exerciseCatalog .exercise-card-actions [data-catalog-add] { background:var(--ink); border-color:var(--ink); color:#fff; }
.catalog-thumbnail { width:100%; aspect-ratio:1; align-self:start; border-radius:8px; overflow:hidden; background:#f5f6f7; }
.catalog-thumbnail img { display:block; width:100%; height:100%; object-fit:contain; background:#fff; }
.catalog-media-missing { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; height:100%; min-height:100px; padding:12px; color:#626970; text-align:center; }
.catalog-media-missing span { font-size:13px; }
.catalog-media { margin:0; min-width:0; }
.catalog-media > .catalog-media-missing { aspect-ratio:16/10; background:#f5f6f7; border-radius:8px; }
.catalog-video-frame { aspect-ratio:16/10; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; }
.catalog-video-frame video { display:block; width:100%; height:100%; object-fit:contain; }
.catalog-media-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.catalog-media-controls button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; }
.catalog-media-controls [role=status] { font-size:13px; color:var(--sub); flex:1; }
.catalog-media-note { font-size:13px; line-height:1.6; color:var(--sub); margin:12px 0; }
.catalog-media-note a { color:var(--ink); text-decoration:underline; }
.catalog-muscle-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:16px 0; border-block:1px solid var(--line); }
.catalog-muscle-legend > div { display:flex; align-items:flex-start; gap:9px; min-width:0; }
.muscle-swatch { flex:none; width:13px; height:13px; margin-top:4px; border-radius:50%; border:1px solid rgba(0,0,0,.15); }
.catalog-primary .muscle-swatch { background:#22a65a; }
.catalog-secondary .muscle-swatch { background:#69bff0; }
.catalog-muscle-legend small { display:block; font-size:13px; color:var(--sub); margin-bottom:5px; }
.catalog-muscle-legend strong { font-size:14px; line-height:1.5; font-weight:600; overflow-wrap:anywhere; }
.catalog-muscle-groups { padding-block:16px; }
#exerciseDetailMuscles { display:block; margin:14px 0; }
#exerciseDetailModal .modal-box { display:flex; flex-direction:column; padding:0; overflow:hidden; max-height:94dvh; }
#exerciseDetailModal .modal-head { padding:18px 20px; margin:0; flex:none; }
#exerciseDetailName { font-size:20px; overflow-wrap:anywhere; }
#exerciseDetailModal .close { min-width:44px; min-height:44px; flex:none; }
#exerciseDetailTabs { margin:0; padding:0 20px 12px; flex:none; }
#exerciseDetailContent { min-height:0; overflow-y:auto; flex:1; padding:12px 20px 24px; overscroll-behavior:contain; }
#exerciseDetailContent .exercise-detail-layout { align-items:start; }
#exerciseDetailContent .exercise-detail-copy p { font-size:14px; line-height:1.65; }
.catalog-detail-footer { flex:none; display:flex; flex-wrap:wrap; gap:8px; padding:12px 20px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#fff; }
.catalog-detail-footer button { min-height:44px; font-size:14px; }
.catalog-detail-footer #addDetailExercise { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; }
#catalogAddDialog { border:1px solid var(--line); border-radius:8px; padding:20px; width:min(440px,calc(100% - 32px)); color:var(--ink); box-shadow:var(--shadow); }
#catalogAddDialog::backdrop { background:rgba(0,0,0,.4); }
#catalogAddDialog h2 { margin:0 0 12px; font-size:20px; }
#catalogAddDialog p { font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
#catalogAddDialog select { width:100%; margin:8px 0 18px; }
#catalogAddDialog .modal-actions { flex-wrap:wrap; }
#catalogAddDialog button { min-height:44px; }
@media(max-width:600px) {
  #exerciseCatalog .exercise-card { grid-template-columns:88px minmax(0,1fr); }
  #exerciseCatalog .exercise-card-actions { gap:6px; }
  #exerciseCatalog .exercise-card-actions button { padding-inline:8px; }
  #exerciseDetailModal .modal-box { width:100%; height:96dvh; max-height:96dvh; border-radius:8px 8px 0 0; }
  #exerciseDetailModal .modal-head { padding:14px 16px; }
  #exerciseDetailContent { padding:12px 16px 20px; }
  #exerciseDetailTabs { padding-inline:16px; }
  #exerciseDetailContent .exercise-detail-layout { display:block; }
  .catalog-detail-footer { padding-inline:16px; }
  .catalog-detail-footer #favoriteDetailExercise { font-size:13px; }
  #exerciseDetailName { font-size:18px; }
}

/* Cardio map and recording surface. All overrides stay within this section. */
#cardioApp { position:relative; }
#cardioApp button { touch-action:manipulation; }
#cardioApp .cardio-page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
#cardioApp .cardio-page-head h2 { margin:0; font-size:24px; }
#cardioApp .cardio-icon { display:inline-grid; width:44px; height:44px; min-width:44px; place-items:center; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); padding:0; }
#cardioApp .cardio-icon:hover { background:#f0f3f5; }
#cardioApp button:focus-visible, #cardioApp summary:focus-visible { outline:3px solid #3478f6; outline-offset:3px; }
#cardioApp .cardio-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 0 14px; border:0; border-radius:8px; padding:4px; background:#e9ecf0; }
#cardioApp .cardio-tabs button { min-width:0; min-height:44px; padding:6px; font-size:13px; white-space:normal; line-height:15px; }
#cardioApp .cardio-record-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
#cardioApp .cardio-record-toolbar .label { display:flex; align-items:center; gap:12px; min-width:0; color:var(--sub); font-size:12px; }
#cardioApp #cardioType { width:200px; max-width:100%; min-height:44px; font-size:16px; color:var(--ink); background:#fff; }
#cardioApp .cardio-route-pick { display:flex; align-items:center; gap:8px; min-height:44px; width:auto; }
#cardioApp .cardio-route-selected { margin:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:#fff; }
#cardioApp .cardio-route-selected > span { display:flex; align-items:center; gap:8px; min-width:0; }
#cardioApp .cardio-route-selected strong { font-size:13px; overflow-wrap:anywhere; }
#cardioApp .cardio-route-selected small { white-space:nowrap; margin:0; }
#cardioApp .cardio-live { min-height:0; height:clamp(300px,50dvh,560px); margin:0; border:0; border-radius:0; background:#e8ece8; isolation:isolate; }
#cardioApp .cardio-live-overlay { inset:12px 12px auto; z-index:3; gap:8px; align-items:flex-start; }
#cardioApp .cardio-live-overlay .status { max-width:72%; border-radius:6px; background:rgba(255,255,255,.96); color:#3d4947; font-size:11px; font-weight:500; box-shadow:0 1px 5px #00000012; }
#cardioApp .cardio-record-dot { border-radius:6px; font-size:11px; white-space:nowrap; }
#cardioApp .cardio-map-actions { position:absolute; right:12px; bottom:32px; z-index:3; display:grid; gap:8px; }
#cardioApp .cardio-map-actions .cardio-icon { box-shadow:0 2px 9px #16212524; border:0; }
#cardioApp .cardio-map-actions .cardio-icon[aria-pressed="true"] { color:#1676e8; }
#cardioApp .cardio-direction-legend { position:absolute; z-index:3; left:12px; bottom:28px; max-width:60%; padding:4px 6px; border-radius:4px; background:rgba(255,255,255,.94); color:#27445c; font-size:11px; }
#cardioApp .cardio-heading-marker, #cardioApp .cardio-travel-marker { border:0; background:transparent; }
#cardioApp .cardio-heading-cone { position:absolute; left:0; top:0; width:0; height:0; border-left:24px solid transparent; border-right:24px solid transparent; border-bottom:76px solid rgba(22,118,232,.20); transform-origin:50% 100%; pointer-events:none; }
#cardioApp .cardio-travel-arrow { position:absolute; left:0; top:0; color:#124e81; font-size:25px; font-weight:800; line-height:1; transform-origin:50% 50%; pointer-events:none; text-shadow:0 1px 2px #fff; }
#cardioApp .cardio-locate-prompt { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; max-width:85%; width:230px; padding:12px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 3px 15px #00000016; color:var(--ink); font-size:14px; }
#cardioApp .leaflet-container { background:#e8ece8; }
#cardioApp .leaflet-control-attribution { font-size:11px; line-height:1.25; background:rgba(255,255,255,.94); }
#cardioApp .leaflet-control-zoom a { width:36px; height:36px; line-height:36px; }
#cardioApp .leaflet-control-zoom { border:0; box-shadow:0 2px 8px #16212520; }
#cardioApp .cardio-map-error { position:absolute; inset:auto 64px 40px; z-index:4; background:#fff; color:#93362f; padding:10px; font-size:12px; border-radius:6px; }
#cardioApp .cardio-map-error button { border:0; background:transparent; color:inherit; text-decoration:underline; min-height:32px; }
#cardioApp .cardio-console { position:sticky; bottom:0; z-index:5; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; padding:18px 20px 14px; }
#cardioApp .cardio-primary-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; text-align:center; }
#cardioApp .cardio-primary-metrics > div { min-width:0; }
#cardioApp .cardio-primary-metrics small { display:block; color:var(--sub); font-size:12px; }
#cardioApp .cardio-primary-metrics b { display:block; margin-top:5px; font-size:30px; line-height:1.2; font-variant-numeric:tabular-nums; white-space:nowrap; }
#cardioApp .cardio-secondary-metrics { display:flex; justify-content:center; gap:24px; margin:12px 0; color:var(--sub); font-size:12px; }
#cardioApp .cardio-secondary-metrics b { margin-left:5px; color:var(--ink); font-variant-numeric:tabular-nums; }
#cardioApp .cardio-record-controls { position:static; display:flex; flex-wrap:nowrap; gap:10px; border:0; border-radius:0; padding:0; margin:0; background:transparent; backdrop-filter:none; }
#cardioApp .cardio-record-controls > button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; }
#cardioApp .cardio-start-button { width:100%; max-width:500px; min-width:0; border-radius:8px; background:#17191c; font-size:16px; }
#cardioApp .cardio-control { flex:1; min-width:0; font-size:14px; }
#cardioApp .cardio-control.finish { flex:1; background:#fff; border:1px solid #bcc4cc; color:#17191c; }
#cardioApp .cardio-record-foot { display:flex; align-items:center; gap:12px; margin:10px 0; }
#cardioApp .cardio-record-foot:empty { display:none; }
#cardioApp .cardio-record-note { color:#687078; font-size:11px; line-height:1.5; text-align:left; margin:0; }
#cardioApp .cardio-focus .cardio-live { display:none; }
#cardioApp .cardio-focus .cardio-console { position:relative; bottom:auto; min-height:40dvh; display:flex; flex-direction:column; justify-content:center; gap:18px; border:0; }
#cardioApp .cardio-focus .cardio-primary-metrics { display:flex; flex-direction:column-reverse; align-items:center; gap:24px; }
#cardioApp .cardio-focus .cardio-primary-metrics small { font-size:14px; }
#cardioApp .cardio-focus .cardio-primary-metrics b { font-size:52px; }
#cardioApp .cardio-focus .cardio-calorie-metric { display:none; }
#cardioApp .cardio-focus .cardio-secondary-metrics { font-size:16px; }
#cardioApp .cardio-focus .cardio-secondary-metrics b { display:block; margin:6px 0 0; font-size:36px; text-align:center; }
#cardioApp .cardio-finish-details { margin:18px 0 0; border-top:1px solid var(--line); }
#cardioApp .cardio-finish-details summary { min-height:44px; display:flex; align-items:center; color:var(--ink); cursor:pointer; font-weight:600; }
#cardioApp .cardio-finish-details .form-grid { padding:12px 0; }
#cardioApp .cardio-discard-link { display:block; margin:12px 0 0 auto; border:0; background:none; color:#a13333; text-decoration:underline; font-size:12px; }
#cardioApp .cardio-indoor-scene { background:#f1f3f5; color:#3b464b; }
#cardioApp .cardio-indoor-scene > svg { width:64px; height:64px; stroke-width:1.1; }
#cardioApp .cardio-live.indoor { height:220px; }
#cardioApp .cardio-indoor-live { border:0; border-bottom:1px solid var(--line); padding:16px 0; }
#cardioApp .cardio-indoor-inputs { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); }
#cardioApp .cardio-indoor-inputs input { font-size:16px; }
#cardioApp .cardio-routes-heading { align-items:center; gap:14px; flex-wrap:wrap; }
#cardioApp .cardio-routes-heading h3 { font-size:19px; }
#cardioApp .cardio-routes-heading .toolbar { flex-wrap:wrap; align-items:center; }
#cardioApp .cardio-route-overview { border-bottom:1px solid var(--line); }
#cardioApp #cardioOverviewMap { height:400px; min-height:0; background-image:none; }
#cardioApp #cardioRouteOverviewInfo { position:relative; display:flex; align-items:center; gap:12px; padding:16px 0; }
#cardioApp #cardioRouteOverviewInfo > div { flex:1; min-width:0; }
#cardioApp #cardioRouteOverviewInfo h3 { font-size:17px; margin:0 0 5px; overflow-wrap:anywhere; }
#cardioApp #cardioRouteOverviewInfo p { margin:0; color:var(--sub); font-size:12px; }
#cardioApp #cardioRouteOverviewInfo .primary { display:flex; align-items:center; gap:7px; min-height:44px; }
#cardioApp .cardio-route-menu summary { display:grid; place-items:center; width:44px; height:44px; cursor:pointer; list-style:none; }
#cardioApp .cardio-route-menu summary::-webkit-details-marker { display:none; }
#cardioApp .cardio-route-menu > div { position:absolute; right:0; top:62px; z-index:8; display:grid; width:180px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }
#cardioApp .cardio-route-menu button { display:flex; align-items:center; gap:10px; border:0; border-bottom:1px solid var(--line); background:transparent; padding:12px; text-align:left; font-size:13px; }
#cardioApp .cardio-route-list { display:block; }
#cardioApp .cardio-route-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:14px; align-items:center; width:100%; padding:20px 12px; text-align:left; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); }
#cardioApp .cardio-route-row.selected { background:#ebf2f0; box-shadow:inset 3px 0 #117e70; }
#cardioApp .cardio-route-row strong { display:block; overflow-wrap:anywhere; font-size:15px; }
#cardioApp .cardio-route-row small { display:block; margin-top:6px; color:var(--sub); font-size:12px; }
#cardioApp .cardio-route-row b { font-size:14px; white-space:nowrap; }
#cardioApp .cardio-empty > svg { width:44px; height:44px; margin-bottom:18px; stroke-width:1.2; }
#cardioApp .cardio-route-builder { border:0; box-shadow:none; border-radius:0; }
#cardioApp .cardio-route-builder .map-tools { z-index:3; }
#cardioApp .cardio-chart-grid > .card, #cardioApp .cardio-goal-editor { border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; background:transparent; }
#cardioApp .cardio-stats-toolbar .segmented { max-width:100%; }
#cardioApp .cardio-type-symbol > svg { width:24px; height:24px; }
#cardioApp .modal-field { margin-top:18px; }
#cardioApp #cardioSettingsModal .secondary { width:100%; min-height:44px; }
#cardioApp .cardio-detail-title { min-width:0; }
@media(max-width:720px) {
  body:has(#view-cardio:not(.hidden)) .content { padding-top:12px; }
  #cardioApp .cardio-page-head { position:absolute; right:0; top:0; margin:0; }
  #cardioApp .cardio-connection:not(.hidden) { margin-top:54px; margin-right:54px; }
  #cardioApp .cardio-page-head h2 { display:none; }
  #cardioApp .cardio-tabs { margin-right:54px; margin-left:0; margin-bottom:12px; }
  #cardioApp .cardio-tabs button { font-size:12px; padding:8px 3px; }
  #cardioApp .cardio-record-toolbar .label { font-size:0; flex:1; }
  #cardioApp #cardioType { width:100%; }
  #cardioApp .cardio-record-toolbar .cardio-route-pick { width:auto; }
  #cardioApp .cardio-live { height:clamp(230px,calc(100dvh - 420px),540px); margin-inline:-12px; }
  #cardioApp .cardio-console { bottom:calc(76px + env(safe-area-inset-bottom)); padding:14px 12px 12px; margin-inline:-12px; }
  #cardioApp .cardio-primary-metrics b { font-size:26px; }
  #cardioApp .cardio-primary-metrics small { font-size:11px; }
  #cardioApp .cardio-primary-metrics { gap:6px; }
  #cardioApp .cardio-secondary-metrics { margin:10px 0; }
  #cardioApp .cardio-route-selected { padding:8px 0; }
  #cardioApp .cardio-route-selected > span { flex-wrap:wrap; gap:5px; }
  #cardioApp #cardioOverviewMap { height:clamp(240px,45dvh,420px); }
  #cardioApp #cardioRouteOverviewInfo { flex-wrap:wrap; gap:8px; }
  #cardioApp #cardioRouteOverviewInfo > div { flex-basis:calc(100% - 60px); }
  #cardioApp #cardioRouteOverviewInfo .primary { order:3; width:100%; justify-content:center; }
  #cardioApp .cardio-route-row { gap:10px; padding:18px 8px; }
  #cardioApp .cardio-route-row strong { font-size:14px; }
  #cardioApp .cardio-routes-heading .toolbar { width:100%; gap:8px; }
  #cardioApp .cardio-routes-heading .toolbar .secondary { flex:1; min-height:44px; padding:10px 8px; }
  #cardioApp .cardio-detail-metrics b { overflow-wrap:anywhere; }
  #cardioApp .detail-map { width:calc(100% + 32px); }
  #cardioApp .cardio-live.indoor { height:200px; }
}
@media(max-width:370px) {
  #cardioApp .cardio-primary-metrics b { font-size:23px; }
  #cardioApp .cardio-tabs button { font-size:11px; }
}
@media(max-height:650px) {
  #cardioApp .cardio-console { position:static; }
}
@media(prefers-reduced-motion:reduce) {
  #cardioApp .cardio-record-dot.active::before { animation:none; }
}