:root {
  --canvas: #ecfff3;
  --surface: #fff;
  --surface-translucent: rgb(255 255 255 / 78%);
  --surface-subtle-translucent: rgb(255 255 255 / 64%);
  --nav-surface: rgb(242 255 247 / 94%);
  --workout-surface: #e4ffed;
  --ink: #0b2b1a;
  --ink-soft: #3d624e;
  --accent: #007a45;
  --accent-hover: #005f35;
  --accent-text: #00683a;
  --accent-contrast: #fff;
  --accent-surface: #bfffd6;
  --accent-surface-strong: #96ffc0;
  --accent-border: #41c778;
  --divider: #b4ddc2;
  --control-border: #5b8c6d;
  --control-border-hover: #386b4b;
  --placeholder: #4c6e59;
  --focus: #6e23d9;
  --focus-ring: rgb(110 35 217 / 20%);
  --overlay: rgb(8 24 14 / 58%);
  --inverse-surface: #0b2b1a;
  --inverse-ink: #fff;
  --success: #166534;
  --success-surface: #edf9f0;
  --success-border: #82be92;
  --danger: #98233f;
  --danger-hover: #76182f;
  --danger-surface: #fff0f3;
  --danger-border: #d98ba0;
  --warning: #7a490f;
  --warning-surface: #fff7e8;
  --warning-border: #d5ae73;
  --info: #244f69;
  --info-surface: #edf7fc;
  --info-border: #8db7cf;
  --code-surface: #dff9e8;
  --code-ink: #123d25;
  --paused-surface: #d9f2e2;
  --shadow: 0 10px 30px rgb(0 83 42 / 10%);
  --shadow-raised: 0 18px 50px rgb(0 83 42 / 17%);
  --button-shadow: 0 8px 22px rgb(0 122 69 / 26%);
  --icon-filter: brightness(0) saturate(100%) invert(33%) sepia(91%) saturate(1130%) hue-rotate(116deg) brightness(82%) contrast(104%);
  --raspberry: var(--accent);
  --raspberry-dark: var(--accent-text);
  --rose: var(--accent-surface);
  --rose-strong: var(--accent-border);
  --blush: var(--canvas);
  --paper: var(--surface);
  --line: var(--divider);
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="original_pink"] {
  --canvas: #fff;
  --surface: #fff;
  --surface-translucent: rgb(255 255 255 / 78%);
  --surface-subtle-translucent: rgb(255 255 255 / 66%);
  --nav-surface: rgb(255 253 253 / 94%);
  --workout-surface: #fff;
  --ink: #20161d;
  --ink-soft: #59505a;
  --accent: #b91346;
  --accent-hover: #8f1038;
  --accent-text: #8f1038;
  --accent-surface: #f8e3e9;
  --accent-surface-strong: #fff0f4;
  --accent-border: #e9bdc9;
  --divider: #ded8de;
  --control-border: #a77988;
  --control-border-hover: #855563;
  --placeholder: #76545f;
  --focus: #8b1bff;
  --focus-ring: rgb(139 27 255 / 18%);
  --overlay: rgb(45 5 18 / 58%);
  --inverse-surface: #480e27;
  --inverse-ink: #fff;
  --danger: #981b3f;
  --danger-hover: #76132f;
  --danger-surface: #fff1f3;
  --danger-border: #d998a9;
  --code-surface: #f6f2f3;
  --code-ink: #3d2029;
  --paused-surface: #f5eef0;
  --shadow: 0 10px 30px rgb(45 11 23 / 8%);
  --shadow-raised: 0 18px 50px rgb(45 11 23 / 14%);
  --button-shadow: 0 8px 22px rgb(143 16 56 / 22%);
  --icon-filter: none;
}

html[data-theme="calm"] {
  --canvas: #f7f5fa;
  --workout-surface: #f1edf5;
  --ink: #251d2c;
  --ink-soft: #62586b;
  --accent: #6b4e7c;
  --accent-hover: #50385e;
  --accent-text: #50385e;
  --accent-surface: #ece5f1;
  --accent-surface-strong: #ded2e6;
  --accent-border: #cdbed7;
  --divider: #e3dde8;
  --control-border: #8d7899;
  --control-border-hover: #6f5a7b;
  --placeholder: #6a6072;
  --nav-surface: rgb(253 251 255 / 94%);
  --overlay: rgb(28 20 34 / 58%);
  --inverse-surface: #251d2c;
  --shadow: 0 10px 30px rgb(37 29 44 / 8%);
  --shadow-raised: 0 18px 50px rgb(37 29 44 / 14%);
  --button-shadow: 0 8px 22px rgb(80 56 94 / 20%);
}

html[data-theme="day_blue"] {
  --canvas: #eef8ff;
  --workout-surface: #e4f4ff;
  --ink: #092b42;
  --ink-soft: #3d6177;
  --accent: #0068ad;
  --accent-hover: #004f87;
  --accent-text: #005b98;
  --accent-surface: #c7eaff;
  --accent-surface-strong: #9edaff;
  --accent-border: #3da7e5;
  --divider: #b8ddec;
  --control-border: #5f8499;
  --control-border-hover: #39677f;
  --placeholder: #4c6e82;
  --nav-surface: rgb(245 251 255 / 94%);
  --overlay: rgb(8 29 45 / 58%);
  --inverse-surface: #092b42;
  --shadow: 0 10px 30px rgb(0 80 135 / 10%);
  --shadow-raised: 0 18px 50px rgb(0 80 135 / 17%);
  --button-shadow: 0 8px 22px rgb(0 104 173 / 26%);
  --icon-filter: brightness(0) saturate(100%) invert(31%) sepia(96%) saturate(1160%) hue-rotate(169deg) brightness(82%) contrast(104%);
}

html[data-theme="night_pink"] {
  color-scheme: dark;
  --canvas: #19000c;
  --surface: #280413;
  --surface-translucent: rgb(40 4 19 / 86%);
  --surface-subtle-translucent: rgb(40 4 19 / 74%);
  --nav-surface: rgb(25 0 12 / 94%);
  --workout-surface: #120006;
  --ink: #fff0f6;
  --ink-soft: #f0b8cd;
  --accent: #b91659;
  --accent-hover: #c91c65;
  --accent-text: #ff5f9b;
  --accent-surface: #4a0824;
  --accent-surface-strong: #5d0a2c;
  --accent-border: #c42b68;
  --divider: #64213d;
  --control-border: #a65c78;
  --control-border-hover: #dc7ca0;
  --placeholder: #d9a1b6;
  --focus: #d678ff;
  --focus-ring: rgb(214 120 255 / 24%);
  --overlay: rgb(0 0 0 / 72%);
  --inverse-surface: #fff0f6;
  --inverse-ink: #19000c;
  --success: #9de5b1;
  --success-surface: #14291d;
  --success-border: #4d8e60;
  --danger: #ffabc0;
  --danger-hover: #8f2948;
  --danger-surface: #3b1723;
  --danger-border: #a95770;
  --warning: #efc98e;
  --warning-surface: #332718;
  --warning-border: #8e7146;
  --info: #a9d8f0;
  --info-surface: #142936;
  --info-border: #517d94;
  --code-surface: #24030f;
  --code-ink: #f4dde5;
  --paused-surface: #320619;
  --shadow: 0 10px 30px rgb(0 0 0 / 28%);
  --shadow-raised: 0 18px 50px rgb(0 0 0 / 44%);
  --button-shadow: 0 8px 24px rgb(0 0 0 / 30%);
  --icon-filter: brightness(0) saturate(100%) invert(56%) sepia(70%) saturate(1900%) hue-rotate(300deg) brightness(103%) contrast(101%);
}

html[data-theme="night_amoled"] {
  color-scheme: dark;
  --canvas: #000;
  --surface: #050b07;
  --surface-translucent: rgb(5 11 7 / 90%);
  --surface-subtle-translucent: rgb(5 11 7 / 78%);
  --nav-surface: rgb(0 0 0 / 94%);
  --workout-surface: #000;
  --ink: #f2fff7;
  --ink-soft: #b8ddc6;
  --accent: #007f42;
  --accent-hover: #087b42;
  --accent-text: #39f08b;
  --accent-surface: #062d18;
  --accent-surface-strong: #093d20;
  --accent-border: #0aaa54;
  --divider: #173a28;
  --control-border: #4e7d60;
  --control-border-hover: #76a987;
  --placeholder: #a8cbb5;
  --focus: #b58cff;
  --focus-ring: rgb(181 140 255 / 24%);
  --overlay: rgb(0 0 0 / 82%);
  --inverse-surface: #f2fff7;
  --inverse-ink: #000;
  --success: #8de3a8;
  --success-surface: #0b2414;
  --success-border: #3f8154;
  --danger: #ff9fb6;
  --danger-hover: #8c2943;
  --danger-surface: #2e1018;
  --danger-border: #9b4e62;
  --warning: #eac486;
  --warning-surface: #291f11;
  --warning-border: #80663e;
  --info: #9ed4ef;
  --info-surface: #0c2330;
  --info-border: #47778f;
  --code-surface: #050706;
  --code-ink: #dff2e5;
  --paused-surface: #101412;
  --shadow: 0 10px 30px rgb(0 0 0 / 52%);
  --shadow-raised: 0 18px 50px rgb(0 0 0 / 68%);
  --button-shadow: 0 8px 24px rgb(0 0 0 / 52%);
  --icon-filter: brightness(0) saturate(100%) invert(74%) sepia(90%) saturate(770%) hue-rotate(91deg) brightness(101%) contrast(96%);
}

html[data-theme="night_sepia"] {
  color-scheme: dark;
  --canvas: #140a00;
  --surface: #211004;
  --surface-translucent: rgb(33 16 4 / 88%);
  --surface-subtle-translucent: rgb(33 16 4 / 76%);
  --nav-surface: rgb(20 10 0 / 94%);
  --workout-surface: #0f0700;
  --ink: #fff0d7;
  --ink-soft: #ebc797;
  --accent: #945400;
  --accent-hover: #9d5a00;
  --accent-text: #ffb84d;
  --accent-surface: #432400;
  --accent-surface-strong: #5a3100;
  --accent-border: #bc761b;
  --divider: #573513;
  --control-border: #8d6a42;
  --control-border-hover: #ba8e57;
  --placeholder: #caae88;
  --focus: #d5a7ff;
  --focus-ring: rgb(213 167 255 / 22%);
  --overlay: rgb(0 0 0 / 72%);
  --inverse-surface: #fff0d7;
  --inverse-ink: #140a00;
  --success: #a7d99c;
  --success-surface: #1c2a18;
  --success-border: #587f50;
  --danger: #f0a7a0;
  --danger-hover: #843c37;
  --danger-surface: #351b18;
  --danger-border: #925e58;
  --warning: #e4c085;
  --warning-surface: #332817;
  --warning-border: #806a43;
  --info: #a9ccda;
  --info-surface: #192a31;
  --info-border: #597985;
  --code-surface: #1b0d03;
  --code-ink: #ead9c2;
  --paused-surface: #2f1907;
  --shadow: 0 10px 30px rgb(0 0 0 / 30%);
  --shadow-raised: 0 18px 50px rgb(0 0 0 / 46%);
  --button-shadow: 0 8px 24px rgb(0 0 0 / 32%);
  --icon-filter: brightness(0) saturate(100%) invert(80%) sepia(72%) saturate(850%) hue-rotate(337deg) brightness(105%) contrast(102%);
}

html[data-theme="day_sepia"] {
  --canvas: #fff5df;
  --surface: #fffaf0;
  --surface-translucent: rgb(255 250 240 / 84%);
  --surface-subtle-translucent: rgb(255 250 240 / 70%);
  --nav-surface: rgb(255 248 231 / 94%);
  --workout-surface: #ffedc7;
  --ink: #3a1d00;
  --ink-soft: #765023;
  --accent: #9a4f00;
  --accent-hover: #713800;
  --accent-text: #824000;
  --accent-surface: #ffd997;
  --accent-surface-strong: #ffc85c;
  --accent-border: #d68a27;
  --divider: #e8c994;
  --control-border: #9a794d;
  --control-border-hover: #755527;
  --placeholder: #79552b;
  --overlay: rgb(44 31 18 / 60%);
  --inverse-surface: #3a1d00;
  --shadow: 0 10px 30px rgb(130 64 0 / 10%);
  --shadow-raised: 0 18px 50px rgb(130 64 0 / 17%);
  --button-shadow: 0 8px 22px rgb(154 79 0 / 26%);
  --icon-filter: brightness(0) saturate(100%) invert(29%) sepia(98%) saturate(1260%) hue-rotate(12deg) brightness(89%) contrast(104%);
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.2bf3d951bf9d.woff2") format("woff2");
}

* {
  box-sizing: border-box;
}

html {
  background: var(--blush);
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  min-width: 0;
  margin: 0;
  background: var(--blush);
  color: var(--ink);
  font: 400 16px/1.5 "Inter Variable", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img:not([src$="activity-white.svg"]) {
  filter: var(--icon-filter);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  transform: translateY(-150%);
  border-radius: 8px;
  background: var(--inverse-surface);
  color: var(--inverse-ink);
  padding: 10px 14px;
}

.skip-link:focus {
  transform: none;
}

.shell {
  width: min(100%, 600px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(102px + env(safe-area-inset-bottom));
}

.app-header,
.workout-header,
.section-heading,
.exercise-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.app-header {
  min-height: 52px;
  margin-bottom: 22px;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  align-items: flex-start;
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  text-decoration: none;
}

.brand-credit {
  color: var(--ink-soft);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.profile-link,
.text-action,
.back-to-list {
  border: 0;
  background: none;
  color: var(--raspberry-dark);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.profile-link,
.text-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.notice {
  margin: 0 0 16px;
  border: 1px solid var(--rose-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  padding: 13px 15px;
  font-weight: 700;
  box-shadow: var(--shadow);
  animation: notice-in 150ms var(--ease-out);
}

.workout-page .notice-success {
  position: fixed;
  z-index: 40;
  top: max(10px, env(safe-area-inset-top));
  right: 14px;
  left: 14px;
  width: min(calc(100% - 28px), 492px);
  margin: 0 auto;
  box-shadow: var(--shadow);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--raspberry-dark);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

h1,
h2,
p {
  margin-top: 0;
}

h1,
h2 {
  letter-spacing: normal;
  font-weight: 800;
}

h1 {
  margin-bottom: 14px;
  font-size: clamp(2.1rem, 10vw, 3.65rem);
  line-height: 1;
}

h2 {
  margin-bottom: 0;
  font-size: 1.55rem;
  line-height: 1.1;
}

.dashboard-hero {
  padding: 8px 0 20px;
}

.dashboard-hero h1 {
  margin-bottom: 22px;
}

.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}

.week-day {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-weight: 800;
}

.week-day small {
  font-size: 0.72rem;
}

.week-day i {
  width: 34px;
  height: 34px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
}

.week-day.is-done i {
  border-color: var(--raspberry);
  background: var(--raspberry);
  box-shadow: inset 0 0 0 7px var(--raspberry), inset 0 0 0 9px var(--accent-contrast);
}

.week-day.is-today i {
  box-shadow: 0 0 0 3px var(--rose-strong);
}

.primary-action,
.secondary-action,
.save-set {
  display: inline-flex;
  min-height: 58px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 15px;
  background: var(--raspberry);
  color: var(--accent-contrast);
  padding: 15px 20px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--button-shadow);
  transition: transform 100ms var(--ease-out), background 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}

.primary-action:hover,
.save-set:hover {
  background: var(--accent-hover);
}

.primary-action:active,
.save-set:active,
.step-actions button:active {
  transform: scale(0.97);
}

.primary-action img {
  width: 27px;
  height: 27px;
}

.resume-action {
  background: var(--accent-hover);
  box-shadow: var(--button-shadow);
}

.gym-tag-dialog {
  width: min(calc(100% - 24px), 520px);
  max-height: min(90dvh, 720px);
  margin: auto;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  background: transparent;
  padding: 0;
}

.gym-tag-dialog::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(3px);
}

.gym-tag-dialog-card {
  border: 1px solid var(--rose-strong);
  border-radius: 28px;
  background: var(--paper);
  padding: 22px;
  box-shadow: var(--shadow-raised);
}

.gym-tag-dialog-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.gym-tag-dialog-card h2 {
  margin-bottom: 7px;
  font-size: clamp(1.55rem, 7vw, 2.1rem);
}

.gym-tag-dialog-card header p:last-child {
  max-width: 38ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.dialog-close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--rose);
  color: var(--ink);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
}

.gym-tag-options {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 0;
  padding: 0 2px 2px;
}

.gym-tag-option {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--blush);
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.gym-tag-option:has(input:checked) {
  border-color: var(--raspberry);
  background: var(--accent-surface-strong);
  box-shadow: inset 0 0 0 1px var(--raspberry);
}

.gym-tag-option input {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
  accent-color: var(--raspberry);
}

.gym-tag-option span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.gym-tag-option strong {
  overflow-wrap: anywhere;
}

.gym-tag-option small,
.gym-tag-new-name small {
  color: var(--ink-soft);
  font-size: 0.76rem;
}

.gym-tag-option.is-new {
  border-style: dashed;
}

.gym-tag-new-name {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: var(--ink);
  font-weight: 850;
}

.gym-tag-new-name[hidden] {
  display: none;
}

.gym-tag-new-name input {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--rose-strong);
  border-radius: 15px;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 14px;
}

.gym-tag-dialog-actions {
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1.3fr);
  gap: 10px;
  margin-top: 18px;
}

.gym-tag-dialog-actions .primary-action,
.gym-tag-dialog-actions .secondary-action {
  min-height: 54px;
  padding: 12px 14px;
}

.content-section {
  padding: 28px 0 4px;
}

.section-heading {
  margin-bottom: 14px;
}

.exercise-list,
.summary-list,
.timeline,
.legacy-events {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.exercise-action,
.summary-list article,
.legacy-events article {
  display: flex;
  width: 100%;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.exercise-action {
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.exercise-action:focus-visible {
  outline-offset: -4px;
}

.exercise-action:hover,
.exercise-action:active {
  background: var(--accent-surface);
}

.exercise-row form {
  margin: 0;
}

.exercise-row + .exercise-row,
.summary-list article + article,
.legacy-events article + article {
  border-top: 1px solid var(--line);
}

.exercise-copy,
.summary-list article > div,
.legacy-events article > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.exercise-copy strong {
  overflow-wrap: anywhere;
  font-size: 1rem;
  line-height: 1.35;
}

.exercise-copy > span {
  color: var(--raspberry-dark);
  font-weight: 700;
}

.exercise-copy small,
.summary-list small,
.legacy-events span {
  color: var(--ink-soft);
}

.exercise-action > img {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.search-field {
  display: block;
  margin-bottom: 12px;
}

.search-field input,
.activity-select select,
.form-surface input,
.form-surface textarea,
.form-surface select {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  padding: 13px 15px;
}

[hidden] {
  display: none !important;
}

.search-empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 28px 18px;
  text-align: center;
}

.search-empty[hidden] {
  display: none;
}

.search-empty span {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.account-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  padding: 34px 4px 12px;
  font-size: 0.84rem;
}

.account-tools a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink-soft);
}

.bottom-nav {
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(100%, 600px);
  min-height: 76px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  background: var(--nav-surface);
  padding: 8px 14px max(8px, env(safe-area-inset-bottom));
  backdrop-filter: blur(18px);
}

.bottom-nav a {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 800;
  text-decoration: none;
  border-radius: 13px;
  transition: color 120ms var(--ease-out), background 120ms var(--ease-out), transform 100ms var(--ease-out);
}

.bottom-nav img {
  width: 25px;
  height: 25px;
  opacity: 0.67;
}

.bottom-nav a.is-active {
  color: var(--raspberry);
  background: var(--rose);
}

.bottom-nav a.is-active img {
  opacity: 1;
}

/* Active workout */
.workout-page {
  background: var(--workout-surface);
}

.workout-header .session-gym-tag,
.summary-gym-tag,
.history-gym-tag,
.previous-gym-context span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 1px solid var(--rose-strong);
  border-radius: 99px;
  background: var(--rose);
  color: var(--raspberry-dark);
  padding: 4px 8px;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.2;
}

.exercise-title {
  display: block;
  margin-bottom: 20px;
}

.exercise-title > div {
  width: 100%;
}

.exercise-title p {
  margin: 5px 0 0;
  color: var(--raspberry-dark);
  font-size: 1.1rem;
  font-weight: 900;
}

.exercise-title > .eyebrow {
  margin: 0 0 8px;
  font-size: 0.68rem;
}

.exercise-title h1 {
  max-width: none;
  margin-bottom: 0;
  font-size: clamp(2rem, 8.8vw, 3.4rem);
  text-wrap: balance;
}

.compact-heading {
  align-items: end;
  margin-bottom: 10px;
}

.compact-heading .eyebrow {
  margin-bottom: 4px;
}

.compact-heading h2 {
  font-size: 1.22rem;
}

.session-exercises {
  margin-bottom: 14px;
}

.exercise-switcher {
  position: relative;
}

.exercise-switcher summary {
  display: grid;
  min-width: 58px;
  min-height: 48px;
  place-items: center;
  border-radius: 15px;
  color: var(--raspberry-dark);
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.exercise-switcher summary::-webkit-details-marker {
  display: none;
}

.switcher-panel {
  display: grid;
  width: 100%;
  max-height: 55dvh;
  margin-top: 8px;
  overscroll-behavior: contain;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 12px;
  box-shadow: var(--shadow);
}

.switcher-panel > strong {
  padding: 8px 9px 12px;
}

.switcher-panel a {
  display: grid;
  gap: 2px;
  border-radius: 12px;
  color: var(--ink);
  padding: 10px;
  text-decoration: none;
}

.switcher-panel a:hover,
.switcher-panel a[aria-current="true"] {
  background: var(--accent-surface-strong);
}

.switcher-panel small {
  color: var(--ink-soft);
}

.workout-switcher {
  width: 100%;
  margin-bottom: 16px;
}

.workout-switcher > summary {
  display: flex;
  width: 100%;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--rose-strong);
  border-radius: 18px;
  background: var(--paper);
  color: var(--raspberry-dark);
  padding: 13px 15px;
  font-size: 0.96rem;
  box-shadow: var(--shadow);
}

.workout-switcher > summary span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workout-switcher > summary img {
  width: 23px;
  height: 23px;
}

.workout-switcher > summary > img {
  width: 20px;
  height: 20px;
  transition: transform 140ms ease;
}

.workout-switcher[open] > summary > img {
  transform: rotate(90deg);
}

.previous-performance {
  margin-bottom: 16px;
  border: 1px solid var(--rose-strong);
  border-radius: var(--radius);
  background: var(--surface-translucent);
  padding: 14px;
}

.previous-performance-header {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.previous-performance-header::-webkit-details-marker {
  display: none;
}

.previous-performance-header > span:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.previous-performance-header small,
.previous-performance > time {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.disclosure-label {
  color: var(--accent-text);
  font-size: 0.75rem;
  font-weight: 700;
}

.disclosure-label::after {
  content: " +";
}

[open] > summary .disclosure-label::after {
  content: " −";
}

.previous-gym-context {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 -2px;
}

.previous-gym-context small {
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
}

.previous-gym-context.is-different span {
  border-color: var(--warning-border);
  background: var(--warning-surface);
  color: var(--warning);
}

.previous-performance-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--line);
}

.previous-performance-summary > div {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  background: var(--paper);
  padding: 9px 10px;
}

.previous-performance-summary small {
  color: var(--ink-soft);
  font-size: 0.66rem;
}

.previous-performance-summary strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.previous-set-chart {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.previous-set-chart li {
  display: grid;
  grid-template-columns: 20px minmax(34px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.previous-set-number {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 7px;
  background: var(--rose);
  color: var(--raspberry-dark);
  font-size: 0.66rem;
  font-weight: 900;
}

.previous-set-track {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 99px;
  background: var(--rose);
  appearance: none;
}

.previous-set-track::-webkit-progress-bar {
  border-radius: inherit;
  background: var(--rose);
}

.previous-set-track::-webkit-progress-value {
  border-radius: inherit;
  background: color-mix(in srgb, var(--raspberry) 58%, var(--rose));
}

.previous-set-track::-moz-progress-bar {
  border-radius: inherit;
  background: color-mix(in srgb, var(--raspberry) 58%, var(--rose));
}

.previous-set-chart strong {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.previous-set-chart li.is-best .previous-set-number,
.previous-set-chart li.is-best .previous-set-track::-webkit-progress-value,
.previous-set-chart li.is-best .previous-set-track::-moz-progress-bar {
  background: var(--raspberry-dark);
  color: var(--accent-contrast);
}

.previous-set-chart li small {
  grid-column: 2 / -1;
  margin-top: -7px;
  color: var(--raspberry-dark);
  font-size: 0.62rem;
  font-weight: 900;
}

.previous-performance-hint {
  margin: 11px 0 0;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  padding-top: 9px;
  font-size: 0.7rem;
  line-height: 1.35;
}

@media (max-width: 350px) {
  .previous-performance-summary {
    grid-template-columns: 1fr 1fr;
  }

  .previous-performance-summary > div:last-child {
    grid-column: 1 / -1;
  }
}

.metric-value input::-webkit-outer-spin-button,
.metric-value input::-webkit-inner-spin-button,
.workout-shell .compact-stepper input::-webkit-outer-spin-button,
.workout-shell .compact-stepper input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.rest-panel {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  margin: 16px 0 24px;
  border: 1px solid var(--rose-strong);
  border-radius: var(--radius);
  background: var(--rose);
  padding: 14px 15px;
}

.rest-panel > div {
  display: grid;
}

.rest-panel span {
  font-size: 0.82rem;
  font-weight: 800;
}

.rest-panel strong {
  font-size: 2.2rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

.rest-panel button {
  min-height: 48px;
  border: 1px solid var(--raspberry);
  border-radius: 14px;
  background: transparent;
  color: var(--raspberry-dark);
  padding: 9px 12px;
  font-weight: 900;
  cursor: pointer;
}

.rest-panel button img {
  width: 21px;
  height: 21px;
}

.completed-sets h2 {
  margin-bottom: 10px;
  font-size: 1.28rem;
}

.set-count-badge {
  border-radius: 99px;
  background: var(--rose);
  color: var(--raspberry-dark);
  padding: 7px 10px;
  font-size: 0.75rem;
  font-weight: 900;
}

.set-row {
  display: grid;
  grid-template-columns: 30px 1fr auto 28px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 12px 3px;
}

.set-row > span {
  color: var(--raspberry);
  font-size: 1.25rem;
  font-weight: 900;
}

.set-row small {
  color: var(--ink-soft);
}

.set-row > img {
  width: 26px;
  height: 26px;
}

.empty-copy {
  color: var(--ink-soft);
}

.rest-tool {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-subtle-translucent);
}

.rest-tool > summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.rest-tool > summary::-webkit-details-marker {
  display: none;
}

.rest-tool > summary span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.rest-tool > summary img {
  width: 21px;
  height: 21px;
}

.rest-tool .rest-panel {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
}

.back-to-list {
  display: block;
  min-height: 48px;
  margin-top: 20px;
  padding: 12px;
  text-align: center;
}

/* History, progress, forms */
.page-intro {
  padding: 12px 0 28px;
}

.page-intro.compact {
  padding-bottom: 14px;
}

.page-intro h1 {
  margin-bottom: 12px;
}

.page-intro p:last-child {
  max-width: 38ch;
  margin-bottom: 0;
  color: var(--ink-soft);
}

.summary-intro {
  padding-top: 36px;
  text-align: center;
}

.summary-intro > p {
  margin-right: auto;
  margin-left: auto;
}

.summary-gym-tag {
  margin: 2px auto 20px;
}

.summary-list article > span {
  color: var(--raspberry-dark);
  font-weight: 900;
}

.stacked-actions {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.secondary-action {
  border: 1px solid var(--rose-strong);
  background: transparent;
  color: var(--raspberry-dark);
  box-shadow: none;
}

.timeline-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 86px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  padding: 14px;
  text-decoration: none;
}

.timeline-row:last-child {
  border-bottom: 0;
}

.timeline-row time {
  display: grid;
  justify-items: center;
  border-radius: 15px;
  background: var(--rose);
  padding: 7px;
}

.timeline-row time strong {
  font-size: 1.25rem;
  line-height: 1;
}

.timeline-row time span,
.timeline-row > div span {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.timeline-row > div {
  display: grid;
  gap: 3px;
}

.timeline-row > div .history-gym-tag {
  margin-top: 3px;
  font-size: 0.68rem;
}

.timeline-row > img {
  width: 22px;
  height: 22px;
}

.active-workout-card {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--rose-strong);
  border-radius: var(--radius);
  background: var(--rose);
  color: var(--ink);
  padding: 13px 15px;
  text-decoration: none;
}

.active-workout-card > span:first-child {
  display: grid;
  gap: 2px;
}

.active-workout-card small,
.active-workout-card > span:last-child {
  color: var(--raspberry-dark);
  font-size: 0.72rem;
  font-weight: 800;
}

.empty-state {
  padding: 30px 20px;
  text-align: center;
}

.empty-state h2 {
  margin-bottom: 8px;
}

.empty-state p {
  margin: 0;
  color: var(--ink-soft);
}

.legacy-events {
  margin-top: 28px;
}

.legacy-events h2 {
  padding: 18px 16px 8px;
}

.legacy-events time {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.activity-select {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.activity-select label {
  font-size: 0.82rem;
  font-weight: 900;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 28px;
}

.stats-grid article {
  display: grid;
  min-height: 112px;
  align-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 16px;
}

.stats-grid span {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.stats-grid strong {
  font-size: 1.7rem;
  letter-spacing: -0.04em;
}

.chart-section {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 18px 16px;
}

.chart-section canvas {
  display: block;
  width: 100%;
  height: 240px;
  margin-top: 16px;
}

.chart-empty {
  margin: 18px 0 8px;
  color: var(--ink-soft);
  text-align: center;
}

.chart-section.has-data .chart-empty {
  display: none;
}

.form-surface {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 18px;
}

.form-surface p,
.form-surface label {
  display: grid;
  gap: 7px;
  margin: 0;
  font-weight: 800;
}

.form-surface ul {
  margin: 0;
  padding-left: 20px;
}

.form-surface #id_fields_list {
  display: grid;
  gap: 9px;
}

.form-surface #id_fields_list label {
  display: flex;
  min-height: 42px;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.form-surface input[type="checkbox"] {
  width: 22px;
  height: 22px;
}

.helper-copy,
.sync-state {
  color: var(--ink-soft);
  font-size: 0.87rem;
}

.simple-stepper {
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  gap: 7px;
}

.simple-stepper button {
  border: 0;
  border-radius: 14px;
  background: var(--raspberry);
  color: var(--accent-contrast);
  font-size: 1.6rem;
  font-weight: 800;
}

/* Shared polish: forms, feedback and operator surfaces */
input,
select,
textarea,
button {
  min-width: 0;
}

input,
select,
textarea {
  accent-color: var(--raspberry);
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.search-field input,
.activity-select select,
.form-surface input,
.form-surface textarea,
.form-surface select,
.inline-form input,
.ops-item input {
  border-color: var(--control-border);
  background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 3%, transparent);
  transition: border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background 120ms var(--ease-out);
}

.search-field input:hover,
.activity-select select:hover,
.form-surface input:hover,
.form-surface textarea:hover,
.form-surface select:hover,
.inline-form input:hover,
.ops-item input:hover {
  border-color: var(--control-border-hover);
}

.search-field input:focus,
.activity-select select:focus,
.form-surface input:focus,
.form-surface textarea:focus,
.form-surface select:focus,
.inline-form input:focus,
.ops-item input:focus {
  border-color: var(--raspberry);
  outline: 0;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.form-surface {
  gap: 18px;
  border-color: var(--line);
  padding: clamp(16px, 5vw, 22px);
  box-shadow: var(--shadow);
}

.form-surface.compact-form {
  gap: 10px;
}

.form-surface.compact-form .field-group {
  margin-bottom: 6px;
}

.field-group,
.form-surface .field-group {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
}

.field-group > span:first-child,
.field-group > label:first-child {
  line-height: 1.3;
}

.field-group small,
.field-help {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 550;
  line-height: 1.4;
}

.field-help ul {
  display: grid;
  gap: 4px;
  margin: 1px 0 0;
  padding-left: 17px;
}

.field-error,
.field-group .field-error {
  color: var(--danger);
  font-weight: 750;
}

.form-error-summary {
  border-left: 3px solid var(--danger);
  border-radius: 8px;
  background: var(--danger-surface);
  color: var(--danger);
  padding: 11px 13px;
  font-size: 0.84rem;
  font-weight: 750;
}

.field-error ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.form-error-summary ul,
.form-surface .errorlist {
  margin: 0;
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: 700;
}

.choice-group > label:first-child {
  font-weight: 900;
}

.form-surface #id_fields_list {
  gap: 7px;
  padding: 0;
  list-style: none;
}

.form-surface #id_fields_list label {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--blush);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}

.form-surface #id_fields_list label:has(input:checked) {
  border-color: var(--raspberry);
  background: var(--rose);
}

.notice-success {
  border-color: var(--success-border);
  background: var(--success-surface);
  color: var(--success);
}

.notice-error {
  border-color: var(--danger-border);
  background: var(--danger-surface);
  color: var(--danger);
}

.notice-info {
  border-color: var(--info-border);
  background: var(--info-surface);
  color: var(--info);
}

.danger {
  background: var(--danger);
  box-shadow: var(--button-shadow);
}

.danger:hover {
  background: var(--danger-hover);
}

.callout {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 15px 16px;
}

.callout p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.callout-warning {
  border-color: var(--warning-border);
  background: var(--warning-surface);
}

.theme-settings-form {
  display: grid;
  gap: 18px;
}

.theme-mode-picker {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.theme-mode-picker legend,
.theme-picker {
  min-width: 0;
}

.theme-mode-picker legend {
  margin-bottom: 10px;
  font-size: 1.08rem;
  font-weight: 800;
}

.theme-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.theme-mode-options label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.theme-mode-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.theme-mode-options label > span {
  display: grid;
  min-height: 78px;
  align-content: center;
  gap: 2px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 12px 13px;
  transition: transform 100ms var(--ease-out), border-color 120ms var(--ease-out), background 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}

.theme-mode-options strong {
  font-size: 0.94rem;
  font-weight: 800;
}

.theme-mode-options small {
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.35;
}

.theme-mode-options input:checked + span {
  border-color: var(--accent);
  background: var(--accent-surface);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.theme-mode-options input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.theme-mode-options label:active > span {
  transform: scale(.98);
}

[data-theme-mode-panel][hidden] {
  display: none;
}

.system-theme-panel {
  display: grid;
  gap: 26px;
}

.system-theme-status {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  background: var(--accent-surface);
  padding: 12px 14px;
}

.system-theme-status > span {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.system-theme-status p {
  display: grid;
  gap: 1px;
  margin: 0;
}

.system-theme-status strong {
  font-size: 0.84rem;
  font-weight: 800;
}

.system-theme-status small {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
}

.theme-picker {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.theme-picker legend {
  margin-bottom: 2px;
  font-size: 1.08rem;
  font-weight: 800;
}

.theme-picker > .field-help {
  max-width: 48ch;
  margin: 0 0 14px;
}

.theme-options {
  display: grid;
  gap: 10px;
}

.theme-option {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.theme-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.theme-option-card {
  position: relative;
  display: grid;
  min-height: 126px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 11px 14px;
  overflow: hidden;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: 15px;
  box-shadow: var(--shadow);
  transition: transform 100ms var(--ease-out), border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background 120ms var(--ease-out);
}

.theme-option-heading {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 1px;
}

.theme-option-heading strong {
  overflow-wrap: anywhere;
  font-size: 1rem;
  font-weight: 800;
}

.theme-option-heading small {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
}

.theme-swatches {
  display: flex;
  align-items: flex-start;
  padding-right: 30px;
}

.theme-swatches i {
  width: 26px;
  height: 26px;
  margin-left: -6px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 24%, transparent);
}

.theme-swatches [data-swatch="original_pink-1"] { background: #b91346; }
.theme-swatches [data-swatch="original_pink-2"] { background: #f8e3e9; }
.theme-swatches [data-swatch="original_pink-3"] { background: #fbf7f8; }
.theme-swatches [data-swatch="day_green-1"] { background: #007a45; }
.theme-swatches [data-swatch="day_green-2"] { background: #96ffc0; }
.theme-swatches [data-swatch="day_green-3"] { background: #ecfff3; }
.theme-swatches [data-swatch="calm-1"] { background: #6b4e7c; }
.theme-swatches [data-swatch="calm-2"] { background: #ece5f1; }
.theme-swatches [data-swatch="calm-3"] { background: #f7f5fa; }
.theme-swatches [data-swatch="day_blue-1"] { background: #0068ad; }
.theme-swatches [data-swatch="day_blue-2"] { background: #9edaff; }
.theme-swatches [data-swatch="day_blue-3"] { background: #eef8ff; }
.theme-swatches [data-swatch="night_pink-1"] { background: #ff5f9b; }
.theme-swatches [data-swatch="night_pink-2"] { background: #5d0a2c; }
.theme-swatches [data-swatch="night_pink-3"] { background: #19000c; }
.theme-swatches [data-swatch="night_amoled-1"] { background: #39f08b; }
.theme-swatches [data-swatch="night_amoled-2"] { background: #093d20; }
.theme-swatches [data-swatch="night_amoled-3"] { background: #000; }
.theme-swatches [data-swatch="night_sepia-1"] { background: #ffb84d; }
.theme-swatches [data-swatch="night_sepia-2"] { background: #5a3100; }
.theme-swatches [data-swatch="night_sepia-3"] { background: #140a00; }
.theme-swatches [data-swatch="day_sepia-1"] { background: #9a4f00; }
.theme-swatches [data-swatch="day_sepia-2"] { background: #ffc85c; }
.theme-swatches [data-swatch="day_sepia-3"] { background: #fff5df; }

.theme-swatches i:first-child {
  margin-left: 0;
}

.theme-option-description {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.theme-option-check {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--control-border);
  border-radius: 50%;
  background: var(--surface);
  color: transparent;
  font-size: 0.78rem;
  font-weight: 900;
}

.theme-option > input:checked + .theme-option-card {
  border-color: var(--accent);
  background: var(--accent-surface);
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow);
}

.theme-option > input:checked + .theme-option-card .theme-option-check {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.theme-option > input:focus-visible + .theme-option-card {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.theme-option:active .theme-option-card {
  transform: scale(.985);
}

.account-settings-links {
  display: grid;
  gap: 2px;
  margin-top: 34px;
  border-top: 1px solid var(--divider);
  padding-top: 22px;
}

.account-settings-links h2 {
  margin-bottom: 10px;
  font-size: 1.28rem;
}

.account-settings-links a {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-sm);
  color: var(--accent-text);
  padding: 10px 12px;
  font-weight: 700;
  text-decoration: none;
}

.account-settings-links a::after {
  content: "›";
  font-size: 1.4rem;
  line-height: 1;
}

.account-settings-links .danger-link {
  color: var(--danger);
}

.standalone-action {
  margin-top: 10px;
}

.status-pill,
.count-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--blush);
  color: var(--ink-soft);
  padding: 5px 9px;
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.status-pill-accent {
  border-color: var(--rose-strong);
  background: var(--rose);
  color: var(--raspberry-dark);
}

.status-pill-success {
  border-color: var(--success-border);
  background: var(--success-surface);
  color: var(--success);
}

.status-pill-muted {
  color: var(--ink-soft);
}

.conflict-grid {
  display: grid;
  gap: 12px;
}

.conflict-card {
  display: grid;
  gap: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 16px;
}

.conflict-card h2 {
  font-size: 1.15rem;
}

.conflict-card pre {
  max-height: 180px;
  margin: 0;
  overflow: auto;
  border-radius: 12px;
  background: var(--code-surface);
  color: var(--code-ink);
  padding: 12px;
  font: 0.75rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.token-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: clamp(16px, 5vw, 22px);
  box-shadow: var(--shadow);
}

.token-card code {
  display: block;
  overflow-wrap: anywhere;
  border: 1px dashed var(--rose-strong);
  border-radius: 13px;
  background: var(--blush);
  color: var(--ink);
  padding: 16px;
  font: 700 0.92rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  user-select: all;
}

.copy-feedback {
  min-height: 1.2em;
  margin: -5px 0 0;
  color: var(--success);
  font-size: 0.8rem;
  font-weight: 750;
  text-align: center;
}

.ops-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.ops-intro h1 {
  margin-bottom: 8px;
}

.ops-section {
  margin-bottom: 28px;
}

.ops-create {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 16px;
  box-shadow: var(--shadow);
}

.inline-form {
  display: grid;
  gap: 12px;
}

.inline-form input,
.ops-item input {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 12px 14px;
}

.ops-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.ops-item + .ops-item,
.token-row + .token-row {
  border-top: 1px solid var(--line);
}

.ops-item > summary {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.ops-item > summary::-webkit-details-marker {
  display: none;
}

.ops-item > summary > span:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.ops-item > summary strong,
.ops-item > summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-item > summary small,
.token-row small {
  color: var(--ink-soft);
}

.disclosure {
  color: var(--raspberry-dark);
  font-size: 0.75rem;
  font-weight: 850;
}

.ops-item[open] > summary {
  background: var(--blush);
}

.ops-item-body {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 14px;
}

.ops-item-body form {
  display: grid;
  gap: 10px;
}

.danger-zone {
  border-top: 1px solid var(--danger-border);
  padding-top: 14px;
}

.danger-action {
  min-height: 50px;
  border: 1px solid var(--danger-border);
  border-radius: 14px;
  background: var(--danger-surface);
  color: var(--danger);
  padding: 11px 14px;
  font-weight: 850;
  cursor: pointer;
}

button.is-submitting,
.primary-action.is-submitting,
.secondary-action.is-submitting {
  opacity: 0.72;
  cursor: wait;
  transform: none;
}

button.is-submitting::after {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
}

button.is-submitting {
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.finish-workout.is-confirming {
  border-color: var(--danger);
  background: var(--danger-surface);
  color: var(--danger);
}

.rest-panel button:disabled {
  border-color: var(--line);
  color: var(--ink-soft);
  cursor: not-allowed;
  opacity: 0.55;
}

.rest-panel.is-paused {
  background: var(--paused-surface);
}

.token-row {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

.token-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.token-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.token-row form {
  margin: 0;
}

@media (hover: hover) {
  .primary-action:hover,
  .save-set:hover {
    box-shadow: var(--button-shadow);
    transform: translateY(-1px);
  }

  .secondary-action:hover,
  .finish-workout:hover,
  .danger-action:hover {
    background: var(--rose);
  }

  .bottom-nav a:hover,
  .session-exercise:hover,
  .timeline-row:hover {
    background: var(--rose);
  }

  .theme-option:hover .theme-option-card {
    border-color: var(--accent-text);
    transform: translateY(-1px);
  }

  .theme-mode-options label:hover > span {
    border-color: var(--accent-text);
    transform: translateY(-1px);
  }

  .account-settings-links a:hover {
    background: var(--accent-surface);
  }
}

@media (min-width: 520px) {
  .theme-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .conflict-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inline-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .inline-form .primary-action {
    width: auto;
    min-width: 170px;
  }
}

/* Readable type hierarchy across compact mobile surfaces */
.brand,
.primary-action,
.secondary-action,
.save-set,
.finish-workout,
.danger-action,
.dialog-close,
.exercise-copy strong,
.session-exercise span,
.set-count-control strong,
.metric-control > label:first-child,
.completed-sets h2,
.timeline-row strong,
.stats-grid strong,
.ops-item > summary strong,
.token-row strong {
  font-weight: 800;
}

.eyebrow {
  font-weight: 800;
  letter-spacing: 0.105em;
}

p,
li,
.field-help,
.helper-copy,
.empty-copy,
.page-intro p:last-child,
.composer-intro > p:last-child,
.previous-performance-hint {
  line-height: 1.55;
}

input,
select,
textarea {
  font-weight: 600;
  letter-spacing: 0;
}

input::placeholder,
textarea::placeholder {
  font-weight: 500;
}

.bottom-nav a,
.account-tools a,
.profile-link,
.text-action,
.field-group,
.activity-select label {
  font-weight: 700;
}

.exercise-copy small,
.timeline-row span,
.timeline-row small,
.previous-performance small,
.ops-item small,
.token-row small {
  font-weight: 600;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (min-width: 700px) {
  .shell {
    padding-right: 30px;
    padding-left: 30px;
  }

  .dashboard-hero {
    padding-top: 34px;
  }
}

@media (max-width: 370px) {
  .shell {
    padding-right: 13px;
    padding-left: 13px;
  }

  .metric-control {
    padding-right: 8px;
    padding-left: 8px;
  }

  .rest-panel {
    grid-template-columns: 1fr auto;
  }

  .rest-panel > button:last-child {
    grid-column: 1 / -1;
  }

  .gym-tag-dialog {
    width: calc(100% - 14px);
  }

  .gym-tag-dialog-card {
    border-radius: 23px;
    padding: 18px 14px;
  }

  .gym-tag-dialog-actions {
    grid-template-columns: 1fr;
  }

  .gym-tag-dialog-actions .primary-action {
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-theme-mode="system"] body,
  html[data-theme-mode="system"] .bottom-nav,
  html[data-theme-mode="system"] .exercise-list,
  html[data-theme-mode="system"] .summary-list,
  html[data-theme-mode="system"] .timeline,
  html[data-theme-mode="system"] .form-surface,
  html[data-theme-mode="system"] .theme-option-card {
    transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
  }

  .exercise-row,
  .timeline-row {
    animation: row-in 180ms var(--ease-out) both;
  }

  .exercise-row:nth-child(2) {
    animation-delay: 20ms;
  }

  .exercise-row:nth-child(3) {
    animation-delay: 40ms;
  }

  .gym-tag-dialog[open] .gym-tag-dialog-card {
    animation: dialog-in 140ms var(--ease-out) both;
  }

  .gym-tag-dialog[open]::backdrop {
    animation: backdrop-in 140ms ease-out both;
  }

  button.is-submitting::after {
    animation: control-spin 550ms linear infinite;
  }

  @keyframes row-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }

  @keyframes notice-in {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
  }

  @keyframes dialog-in {
    from {
      opacity: 0;
      transform: translateY(6px) scale(0.985);
    }
  }

  @keyframes backdrop-in {
    from {
      opacity: 0;
    }
  }

  @keyframes control-spin {
    to {
      transform: rotate(360deg);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Exercise management uses the existing surfaces and mobile shell. */
.library-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
}
.library-filter { flex: 1 1 120px; min-width: 0; }
.library-filter label { display: block; margin-bottom: 6px; }
.library-filters select {
  width: 100%;
  min-height: 48px;
  padding: 10px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.library-metrics { min-width: 0; margin: 0; padding: 0; border: 0; }
.library-metrics legend { margin-bottom: 8px; font-weight: 800; }
.scope-icon { font-size: 0.8em; white-space: nowrap; }
.library-archive { margin-top: 24px; }
.library-archive summary { cursor: pointer; }
.library-archive p { margin: 12px 0; }

/* Workout workspace: compact context, numbered exercises, then full-width controls. */
.workout-page .shell {
  width: min(100%, 600px);
  padding: max(16px, env(safe-area-inset-top)) 20px max(40px, env(safe-area-inset-bottom));
}

.workout-header {
  gap: 12px;
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.workout-header > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
  gap: 6px 12px;
}

.workout-header strong {
  font-size: 1.25rem;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.workout-header .session-gym-tag {
  flex-basis: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-soft);
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.workout-header form {
  flex-shrink: 0;
  margin: 0;
}

.finish-workout {
  max-width: 150px;
  min-height: 44px;
  border: 1px solid var(--accent-text);
  border-radius: 9px;
  background: transparent;
  color: var(--accent-text);
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.workout-shell .last-workout {
  margin: 0 0 18px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.last-workout h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
}

.history-overview > summary,
.history-exercise > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  list-style: none;
  cursor: pointer;
}

.history-heading,
.history-exercise summary > span:first-child {
  min-width: 0;
}

.workspace-context {
  display: block;
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.history-heading .workspace-context {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 5px;
}

.history-heading .workspace-context > * {
  white-space: nowrap;
}

.history-overview > summary::-webkit-details-marker,
.history-exercise > summary::-webkit-details-marker {
  display: none;
}

.workout-shell .disclosure-label,
.history-exercise .disclosure-label {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  color: var(--accent-text);
  font-size: 0.875rem;
  font-weight: 700;
}

.workout-shell .disclosure-label::after,
.workout-shell details[open] > summary .disclosure-label::after,
.history-exercise .disclosure-label::after,
.history-exercise[open] > summary .disclosure-label::after {
  content: none;
}

.disclosure-label img {
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
}

[open] > summary .disclosure-label img {
  transform: rotate(-90deg);
}

.history-exercise {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.summary-list > .history-exercise {
  margin-top: 0;
  padding: 14px 16px;
}

.summary-list > .history-exercise:first-child {
  border-top: 0;
}

.history-exercise summary strong,
.history-exercise summary small {
  display: block;
  overflow-wrap: anywhere;
}

.history-exercise summary small,
.history-set-list li > span,
.bar-legend {
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.5;
}

.history-set-list {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}

.history-set-list li {
  display: grid;
  gap: 4px;
}

.history-set-list strong {
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.bar-legend {
  margin: 0 0 12px;
}

.workout-shell .session-exercises {
  margin-bottom: 18px;
}

.workout-shell .session-exercises h2 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.workout-shell .session-exercises > .section-heading {
  margin-bottom: 12px;
}

.session-exercise-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.session-exercise {
  display: grid;
  min-width: 0;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  color: var(--ink);
  padding: 12px 0;
  text-decoration: none;
}

.workout-shell .session-exercise span {
  min-width: 0;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

.session-exercise-number {
  font-size: 1.375rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.session-exercise-copy {
  display: grid;
  gap: 4px;
  border-left: 1px solid var(--line);
  padding-left: 14px;
}

.session-exercise-copy strong {
  font-weight: 650;
  line-height: 1.35;
}

.workout-shell .session-exercise small {
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}

.session-exercise img {
  width: 20px;
  height: 20px;
}

.session-exercise.is-active {
  margin-bottom: 4px;
  border: 0;
  border-radius: 9px;
  background: var(--inverse-surface);
  color: var(--inverse-ink);
  padding: 10px 12px;
  box-shadow: none;
}

.session-exercise.is-active .session-exercise-copy {
  border-color: currentColor;
}

.workout-shell .session-exercise.is-active small {
  color: inherit;
}

.session-exercise.is-active img {
  filter: brightness(0) invert(1);
}

html[data-theme^="night_"] .session-exercise.is-active img {
  filter: brightness(0);
}

.workout-switcher {
  margin: 12px 0 0;
}

.workout-switcher > summary {
  min-height: 44px;
  justify-content: center;
  border: 1px solid var(--accent-text);
  border-radius: 9px;
  background: none;
  padding: 8px 12px;
  font-size: 1rem;
  font-weight: 650;
  box-shadow: none;
}

.workout-switcher[open] > summary {
  background: var(--rose);
}

.workout-shell .switcher-panel {
  gap: 0;
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 12px 0 0;
  box-shadow: none;
}

.workout-shell .switcher-panel form {
  margin: 0;
}

.add-session-exercise {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  color: var(--ink);
  padding: 14px 4px;
  text-align: left;
  cursor: pointer;
}

.add-session-exercise > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.add-session-exercise strong,
.add-session-exercise small {
  display: block;
}

.add-session-exercise small {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.add-session-exercise img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.active-exercise {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.active-exercise .exercise-title {
  margin-bottom: 12px;
}

.active-exercise .exercise-title h1 {
  font-size: clamp(1.5rem, 6.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-wrap: wrap;
}

.active-exercise .exercise-title p {
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 400;
}

.set-composer {
  display: grid;
  gap: 12px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.metric-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.metric-control,
.set-count-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  justify-items: stretch;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
}

.metric-control + .metric-control {
  border: 0;
}

.metric-control > label:first-child,
.set-count-control > label {
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 500;
}

.metric-stepper,
.workout-shell .compact-stepper {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  gap: 0;
  min-width: 0;
  min-height: 52px;
  border: 1px solid var(--control-border);
  border-radius: 12px;
  background: var(--surface);
}

.metric-value {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0 8px;
}

.metric-value input,
.workout-shell .compact-stepper input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  padding: 4px 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: textfield;
}

.metric-value > span {
  flex-shrink: 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

.metric-value input {
  width: 6ch;
  max-width: 100%;
}

.workout-shell .compact-stepper {
  width: 100%;
}

.metric-stepper button,
.workout-shell .compact-stepper button {
  display: grid;
  width: 100%;
  min-height: 50px;
  place-items: center;
  border: 0;
  border-radius: 10px 0 0 10px;
  background: var(--rose);
  padding: 0;
  cursor: pointer;
}

.metric-stepper button.is-primary,
.workout-shell .compact-stepper button:last-child {
  border-radius: 0 10px 10px 0;
  background: var(--accent);
}

.metric-stepper button img,
.compact-stepper button img {
  width: 24px;
  height: 24px;
}

.metric-stepper button.is-primary img,
.compact-stepper button:last-child img {
  filter: brightness(0) invert(1);
}

.workout-shell .save-set {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  background: var(--accent);
  padding: 10px 16px;
  font-size: 1.125rem;
  font-weight: 700;
  box-shadow: none;
}

.workout-shell .save-set:hover {
  background: var(--accent-hover);
}

.active-exercise .rest-tool {
  margin: 14px 0 26px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.rest-tool > summary {
  min-height: 48px;
  padding: 6px 0;
  font-size: 1rem;
}

.rest-tool > summary strong {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.workout-shell .completed-sets h2 {
  font-size: 1.375rem;
  line-height: 1.3;
}

.workout-shell .set-count-badge {
  flex-shrink: 0;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.workout-shell :is(a, button, summary):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (min-width: 480px) {
  .workout-page .shell {
    padding-right: 28px;
    padding-left: 28px;
  }
}

.exercise-description { overflow-wrap: anywhere; line-height: 1.55; }

/* Shared exercise discovery and account-specific details. */
.exercise-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 16px; }
.exercise-categories button { min-height: 44px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: .875rem; font-weight: 650; cursor: pointer; }
.exercise-categories button[aria-pressed="true"] { background: var(--accent-surface); border-color: var(--accent-text); color: var(--accent-text); }
.exercise-categories button:focus-visible, .picker-exercise-row button:focus-visible, .exercise-details-dialog button:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.picker-exercise-row { display: flex; align-items: stretch; gap: 8px; border-top: 1px solid var(--line); padding: 4px 0; }
.picker-exercise-info { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.picker-exercise-info > span:first-child { min-width: 0; }
.picker-exercise-info strong, .picker-exercise-info small { display: block; overflow-wrap: anywhere; }
.picker-exercise-info strong { font-size: .95rem; line-height: 1.4; }
.picker-exercise-info small { margin-top: 4px; color: var(--ink-soft); font-size: .8rem; line-height: 1.4; }
.picker-info-label { color: var(--ink-soft); font-size: .75rem; flex-shrink: 0; }
.picker-exercise-add { width: 44px; min-height: 44px; align-self: center; flex-shrink: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--accent-surface); cursor: pointer; }
.picker-exercise-add img { width: 20px; height: 20px; display: block; margin: auto; }
.picker-recent h3 { font-size: .95rem; margin: 8px 0 10px; }
.picker-status { color: var(--ink-soft); font-size: .875rem; margin: 8px 0 12px; }
.picker-create { display: inline-block; margin: 18px 0 4px; font-size: .875rem; }
.exercise-details-dialog { width: min(94vw, 540px); max-width: 540px; max-height: 90dvh; margin: auto; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: 0 16px 64px #0003; }
.exercise-details-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.exercise-details-dialog::backdrop { background: var(--overlay, #0007); }
.exercise-dialog-header { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.exercise-dialog-header h2 { margin: 0; flex: 1; font-size: 1.2rem; line-height: 1.4; overflow-wrap: anywhere; }
.exercise-dialog-header button { width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: var(--accent-surface); color: var(--ink); font-size: 1.7rem; cursor: pointer; flex-shrink: 0; }
.exercise-dialog-body { padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.exercise-dialog-body h3 { font-size: 1rem; margin: 20px 0 10px; }
.exercise-dialog-body .exercise-description { white-space: pre-line; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.65; }
.exercise-facts { display: grid; grid-template-columns: minmax(75px, .32fr) minmax(0, 1fr); gap: 10px 12px; font-size: .875rem; line-height: 1.5; margin: 0; }
.exercise-facts dt { color: var(--ink-soft); }
.exercise-facts dd { margin: 0; overflow-wrap: anywhere; }
.exercise-dialog-body form { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--line); }
.exercise-dialog-body .field-group { margin: 16px 0; }
.exercise-dialog-body input, .exercise-dialog-body textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--paper); color: var(--ink); font: inherit; }
.exercise-dialog-body input { min-height: 44px; }
.exercise-dialog-body .secondary-action { width: 100%; }
.exercise-dialog-footer { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); }
.exercise-dialog-footer > button { flex: 1 1 110px; min-width: 0; font-size: .875rem; padding: 12px 10px; }
.preference-feedback { font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.preference-feedback[role="alert"] { color: var(--raspberry-dark); }
.gym-place-list { display: grid; gap: 16px; }
.gym-place-card h2 { font-size: 1.1rem; margin: 0 0 8px; overflow-wrap: anywhere; }
.gym-place-card .primary-action { width: 100%; margin-top: 12px; }
@media (min-width: 600px) { .exercise-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); } }