:root {
  color-scheme: dark;
  --bg: #050607;
  --top: #0b0e12;
  --card: #13161b;
  --card-soft: #1b2027;
  --line: rgba(194, 207, 222, 0.1);
  --line-strong: rgba(194, 207, 222, 0.17);
  --brand-text: #cbd5df;
  --text: #cbd5df;
  --soft-text: #c1c9d3;
  --muted: #8b95a3;
  --blue: #355f86;
  --blue-dark: #172638;
  --font-ui: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-display: var(--font-ui);
  font-family: var(--font-ui);
}

/* Stage 4A: persistent workout session and flexible exercise flow. */
.exerciseNavigator {
  width: min(100%, 920px);
  margin: 0 auto 10px;
  border: 1px solid rgba(199, 207, 218, 0.14);
  background: rgba(12, 15, 19, 0.92);
}

.exerciseNavigator summary {
  min-height: 52px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  color: #d7dce3;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

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

.exerciseNavigator summary strong {
  color: #8fa9c4;
}

.exerciseNavigatorList {
  padding: 0 10px 10px;
  display: grid;
  gap: 6px;
}

.exerciseNavigatorList button {
  width: 100%;
  min-height: 48px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(199, 207, 218, 0.1);
  background: #11151a;
  color: #cbd1d9;
  text-align: left;
}

.exerciseNavigatorList button span {
  font-size: 14px;
  line-height: 1.25;
}

.exerciseNavigatorList button b {
  flex: 0 0 auto;
  color: #87919d;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.exerciseNavigatorList button.isActive {
  border-color: rgba(113, 153, 191, 0.48);
  background: #17212b;
  color: #edf0f4;
}

.exerciseNavigatorList button.isComplete b {
  color: #8fb09a;
}

.deferExerciseBtn {
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  min-height: 46px;
  font-size: 12px;
}

.restTimerChip {
  position: fixed;
  z-index: 60;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  min-width: 142px;
  min-height: 56px;
  padding: 8px 14px;
  border: 1px solid rgba(119, 158, 196, 0.5);
  background: rgba(14, 20, 27, 0.96);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
  color: #e7ebef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.restTimerChip span {
  color: #aab3bd;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.restTimerChip strong {
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}

.restOverlay {
  overflow-y: auto;
  padding: max(22px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
}

.restOverlay.setRestOverlay {
  background: rgba(3, 5, 7, 0.94);
}

.nextExercisePreview {
  width: min(100%, 420px);
  margin-top: 20px;
  display: grid;
  gap: 7px;
  text-align: center;
}

.nextExercisePreview small {
  color: #8fa9c4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.nextExercisePreview strong {
  color: #edf0f4;
  font-size: clamp(20px, 6vw, 28px);
  line-height: 1.15;
}

.nextExercisePreview span {
  color: #b7bec7;
  font-size: 15px;
}

.timerActions {
  width: min(100%, 420px);
  margin-top: 20px;
  display: grid;
  gap: 8px;
}

.timerActions .darkBtn {
  min-height: 50px;
}

.sessionExitBox .sessionExitActions {
  grid-template-columns: 1fr;
}

.sessionExitActions .blueBtn,
.sessionExitActions .darkBtn {
  width: 100%;
  min-height: 52px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 0%, rgba(74, 92, 111, 0.16), transparent 35%),
    linear-gradient(180deg, #101319 0%, #080a0d 45%, #050607 100%),
    var(--bg);
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(110, 132, 154, 0.08), transparent 48%),
    repeating-linear-gradient(104deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 24px);
  opacity: 0.25;
  mask-image: linear-gradient(180deg, #000 0%, transparent 74%);
}

button,
input,
label {
  font: inherit;
}

button,
.fileButton {
  border: 0;
  color: var(--text);
  cursor: pointer;
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.blueBtn.isInactive {
  opacity: 0.52;
  filter: grayscale(0.18);
}

main {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  margin: 0 auto;
  padding:
    calc(74px + env(safe-area-inset-top))
    16px
    calc(34px + env(safe-area-inset-bottom));
}

.brandStart {
  position: relative;
  min-height: calc(100dvh - 118px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: grid;
  align-content: center;
  gap: 34px;
  padding-bottom: 18px;
}

.brandStart header {
  position: relative;
  padding: 0 0 4px;
  text-align: center;
}

.brandStart header::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -34px;
  width: min(78vw, 330px);
  height: 210px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at center, rgba(69, 103, 142, 0.25), rgba(69, 103, 142, 0.08) 42%, transparent 72%);
  filter: blur(5px);
  pointer-events: none;
}

.brandLogo {
  position: relative;
  width: 94px;
  height: 94px;
  display: block;
  margin: 0 auto 24px;
  border: 1px solid rgba(190, 211, 235, 0.18);
  border-radius: 24px;
  object-fit: cover;
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.6),
    0 0 42px rgba(64, 96, 130, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.brandStart h1,
.brandWord {
  margin: 0;
  color: #d8dee7;
  font-family: var(--font-display);
  font-size: 58px;
  line-height: 0.92;
  font-weight: 640;
  letter-spacing: 0.068em;
  text-transform: uppercase;
  text-shadow:
    0 7px 18px rgba(0, 0, 0, 0.42);
}

.brandWord {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  position: relative;
  padding-bottom: 12px;
}

.brandWord::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(130, 160, 194, 0.76), transparent);
  box-shadow: 0 0 18px rgba(77, 118, 160, 0.18);
}

.brandStart p {
  margin: 16px 0 0;
  color: #b9c0ca;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.devBadge {
  width: max-content;
  max-width: 100%;
  margin: 18px auto 0;
  border: 1px solid rgba(92, 134, 178, 0.28);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(17, 27, 49, 0.54);
  color: #aeb8c8;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cardBadge {
  margin: 14px 0 0;
}

.startGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.startTile {
  min-height: 62px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  padding: 0 18px;
  background: rgba(31, 33, 37, 0.82);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, filter 160ms ease;
}

.startTile:active {
  transform: translateY(1px);
  filter: brightness(1.14);
}

.startTile strong {
  color: #d9dee6;
  font-size: 15px;
  font-family: var(--font-display);
  font-weight: 590;
  letter-spacing: 0.115em;
  text-transform: uppercase;
  text-align: center;
}

.startPrimary {
  grid-column: 1 / -1;
  min-height: 84px;
  border-color: rgba(126, 166, 210, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(180deg, #315f95, #1b3658);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 42px rgba(56, 104, 154, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.startPrimary strong {
  font-size: 18px;
  letter-spacing: 0.15em;
  font-weight: 660;
  color: #f0f4fa;
}

.startSecondary:hover,
.startCopies:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(42, 44, 49, 0.9);
}

.startCopies {
  grid-column: 1 / -1;
  padding: 0;
  display: block;
}

.startCopies summary {
  min-height: 62px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  place-items: center;
  align-content: center;
  cursor: pointer;
  list-style: none;
}

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

.startCopies div {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.toggleHint {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: #9ea6b2;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.11em;
}

.toggleChevron {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #c9ced6;
  font-size: 16px;
  line-height: 1;
  transition: transform 160ms ease, border-color 160ms ease;
}

details[open] .toggleChevron {
  transform: rotate(180deg);
  border-color: rgba(92, 134, 178, 0.42);
}

.startCopies .darkBtn,
.startCopies .fileButton {
  min-height: 54px;
  border-radius: 15px;
  font-size: 13px;
  letter-spacing: 0.095em;
  font-weight: 520;
}

@keyframes brandReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.brandLogo,
.brandWord,
.brandStart header > p,
.startGrid {
  animation: brandReveal 520ms ease-out both;
}

.brandLogo {
  animation-delay: 40ms;
}

.brandWord {
  animation-delay: 110ms;
}

.brandStart header > p {
  animation-delay: 170ms;
}

.startGrid {
  animation-delay: 250ms;
}

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

.screenCard {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 1.5px solid rgba(190, 211, 235, 0.1);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(24, 28, 35, 0.96), rgba(12, 14, 18, 0.98));
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.54),
    0 0 34px rgba(45, 95, 152, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.screenCard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%),
    radial-gradient(circle at 50% 0%, rgba(64, 103, 148, 0.12), transparent 46%);
  opacity: 0.8;
}

.screenCard > * {
  position: relative;
  z-index: 1;
}

.screenCard + .screenCard {
  margin-top: 22px;
}

.menuCard {
  padding: 34px 24px;
}

.menuCard h1,
.exerciseCard h1,
.simpleCard h1 {
  margin: 0;
  color: #e9edf3;
  font-family: var(--font-display);
  font-size: clamp(26px, 7.2vw, 34px);
  line-height: 1.12;
  letter-spacing: 0.02em;
  font-weight: 610;
  text-shadow: 0 5px 14px rgba(0, 0, 0, 0.34);
}

.chooseCard h1 {
  color: #e9edf3;
  font-family: var(--font-display);
  font-size: clamp(23px, 6.35vw, 30px);
  font-weight: 610;
  letter-spacing: 0.045em;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-transform: uppercase;
  text-shadow: 0 5px 14px rgba(0, 0, 0, 0.38);
}

.infoBox {
  margin: 22px 0 30px;
  border: 1px solid rgba(190, 211, 235, 0.09);
  border-radius: 18px;
  padding: 17px 18px;
  background:
    linear-gradient(180deg, rgba(21, 25, 33, 0.92), rgba(14, 16, 21, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.infoBox p {
  margin: 0 0 10px;
  color: #c9ced6;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.28;
}

.infoBox p:last-child {
  margin-bottom: 0;
}

.infoBox strong {
  color: #e5e9f0;
  font-weight: 600;
}

.infoBox span {
  color: #aeb6c2;
}

.menuButtons {
  display: grid;
  gap: 16px;
}

.blueBtn,
.darkBtn,
.copiesMenu summary,
.fileButton {
  width: 100%;
  min-height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  padding: 0 18px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-display);
  letter-spacing: 0.075em;
  font-size: 20px;
  font-weight: 620;
  transition: background 160ms ease, border-color 160ms ease, filter 160ms ease, transform 160ms ease;
}

.blueBtn:active,
.darkBtn:active,
.copiesMenu summary:active,
.fileButton:active {
  transform: translateY(1px);
  filter: brightness(1.12);
}

.blueBtn {
  border: 1px solid rgba(126, 166, 210, 0.44);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 34%),
    linear-gradient(180deg, #254f80, #1b3658);
  color: #e3e9f2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.36),
    0 0 22px rgba(56, 104, 154, 0.14);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.36);
}

.menuButtons .blueBtn,
.menuButtons .darkBtn,
.menuButtons .copiesMenu summary {
  font-size: 18px;
  font-weight: 560;
  letter-spacing: 0.065em;
}

.menuButtons .blueBtn {
  color: #e8edf5;
  font-weight: 610;
}

.darkBtn,
.copiesMenu summary,
.fileButton {
  border: 1px solid rgba(190, 211, 235, 0.095);
  background:
    linear-gradient(180deg, rgba(31, 35, 43, 0.82), rgba(19, 21, 26, 0.84));
  color: #d4dae3;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 14px 30px rgba(0, 0, 0, 0.24);
}

.darkBtn:hover,
.copiesMenu summary:hover,
.fileButton:hover {
  border-color: rgba(190, 211, 235, 0.16);
  background:
    linear-gradient(180deg, rgba(39, 43, 52, 0.86), rgba(24, 26, 32, 0.88));
}

.dangerBtn {
  color: #dfb4b4;
  border-color: rgba(210, 82, 82, 0.32);
  background: rgba(70, 28, 28, 0.45);
}

.copiesMenu {
  border: 0;
  border-radius: 20px;
}

.copiesMenu summary {
  cursor: pointer;
  list-style: none;
  grid-template-columns: 1fr auto;
}

.copiesMenu summary::after {
  content: none;
}

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

.copiesMenu div {
  display: grid;
  gap: 12px;
  padding-top: 12px;
}

.fileButton input {
  display: none;
}

.exerciseCard {
  padding: 26px 24px 28px;
}

.exerciseStatus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(190, 211, 235, 0.09);
  border-radius: 999px;
  padding: 8px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.exerciseStatus span,
.exerciseStatus strong {
  color: #c9ced6;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.exerciseStatus strong {
  color: #f1f3f6;
}

.metaLine {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 560;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metricGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 28px 0 22px;
}

.metricGrid div {
  min-height: 88px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 20px;
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 17px 18px;
  background:
    linear-gradient(180deg, rgba(30, 34, 42, 0.72), rgba(18, 20, 25, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 12px 24px rgba(0, 0, 0, 0.18);
}

.metricGrid span {
  color: #98a1af;
  font-size: 13px;
  letter-spacing: 0.055em;
  font-weight: 540;
}

.metricGrid strong {
  color: #dfe7f2;
  font-size: 25px;
  line-height: 1;
  font-weight: 640;
}

.noteBox {
  border: 1px solid rgba(76, 119, 169, 0.44);
  border-radius: 20px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(18, 32, 56, 0.74), rgba(12, 20, 34, 0.72));
  color: #dce6f4;
  font-size: 19px;
  line-height: 1.36;
  font-weight: 520;
}

.previousBox {
  margin-top: 22px;
  border: 1px solid rgba(190, 211, 235, 0.09);
  border-radius: 22px;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(28, 31, 38, 0.72), rgba(18, 20, 25, 0.72));
  overflow: hidden;
}

.previousBox summary {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}

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

.previousBox summary span,
.previousBox summary b {
  display: block;
}

.previousBox summary span {
  color: #e0e5ec;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 590;
}

.previousBox summary b {
  color: #9fa7b4;
  font-size: 13px;
  font-weight: 520;
  text-align: right;
}

.previousBox > p {
  padding-left: 20px;
  padding-right: 20px;
}

.previousBox > p:last-child {
  padding-bottom: 18px;
}

.previousBox h2,
.restCard h2,
.finishBox h2 {
  margin: 0 0 18px;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 620;
}

.previousBox p {
  margin: 0 0 13px;
  color: #d4dae3;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 480;
}

.slimBtn {
  min-height: 52px;
  border-radius: 16px;
  margin: -4px 0 18px;
  color: #b8c0cc;
  font-size: 15px;
  font-weight: 540;
  letter-spacing: 0.07em;
}

.previousBox p:first-of-type {
  color: var(--muted);
}

.formCard {
  padding: 24px;
}

.inputGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.inputGrid label {
  display: grid;
  gap: 12px;
  color: #b9c0ca;
  font-size: 17px;
  font-weight: 560;
}

input {
  width: 100%;
  min-height: 68px;
  border: 1px solid rgba(190, 211, 235, 0.11);
  border-radius: 18px;
  padding: 0 18px;
  background:
    linear-gradient(180deg, rgba(7, 9, 13, 0.9), rgba(3, 4, 6, 0.92));
  color: #f1f3f6;
  font-size: 24px;
  font-weight: 620;
  outline: none;
}

input:focus {
  border-color: rgba(92, 134, 178, 0.58);
  box-shadow: 0 0 0 3px rgba(49, 95, 149, 0.12);
}

.rirLabel {
  margin: 28px 0 14px;
  color: #b9c0ca;
  font-size: 17px;
  font-weight: 560;
}

.rirButtons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.rirButtons button {
  min-height: 64px;
  border: 1px solid rgba(190, 211, 235, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(31, 35, 43, 0.82), rgba(19, 21, 26, 0.84));
  color: #dce2eb;
  font-size: 22px;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.rirButtons .selected {
  border-color: rgba(126, 166, 210, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%),
    linear-gradient(180deg, #263f5e, #17283d);
  color: #eef3fa;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 18px rgba(49, 95, 149, 0.12);
}

.saveMain {
  margin-top: 32px;
  min-height: 72px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(180deg, #2b5d8e, #1b3658);
}

.restCard {
  padding: 24px;
}

.restCard h2 {
  font-size: 27px;
  color: #e6ebf2;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.015em;
}

.restCard h3 {
  margin: 0 0 18px;
  color: #e6ebf2;
  font-size: 22px;
  font-family: var(--font-display);
  font-weight: 590;
  letter-spacing: 0.02em;
}

.savedList {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
}

.savedList div {
  border: 1px solid rgba(190, 211, 235, 0.09);
  border-radius: 18px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(28, 31, 38, 0.72), rgba(18, 20, 25, 0.72));
  color: #d7dde5;
  font-size: 18px;
  font-weight: 540;
}

.savedList p,
.finishBox p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  font-weight: 520;
}

.finishBox {
  margin: 20px 0 22px;
  border: 1px solid rgba(76, 119, 169, 0.44);
  border-radius: 22px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(18, 32, 56, 0.74), rgba(12, 20, 34, 0.72));
}

.finishBox .blueBtn {
  margin-top: 24px;
}

.restCard > .darkBtn + .darkBtn,
.simpleCard > .darkBtn {
  margin-top: 14px;
}

.simpleCard {
  padding: 28px 24px;
}

.statsScope {
  margin: -8px 0 20px;
  color: #9fa7b4;
  font-size: 14px;
  font-weight: 520;
  letter-spacing: 0.015em;
}

.archiveList {
  display: grid;
  gap: 14px;
  margin: 22px 0;
}

.archiveWeek {
  border: 1.5px solid rgba(190, 211, 235, 0.095);
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(28, 32, 40, 0.78), rgba(17, 19, 24, 0.78));
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.archiveWeek summary {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
}

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

.archiveWeek summary strong,
.archiveWeek summary b {
  display: block;
}

.archiveWeek summary strong {
  color: #e0e5ec;
  font-size: 18px;
  font-weight: 620;
  letter-spacing: 0.01em;
}

.archiveWeek summary b {
  margin-top: 6px;
  color: #9fa7b4;
  font-size: 14px;
  font-weight: 520;
}

.archiveWeek summary i {
  color: #b6becb;
  font-style: normal;
  font-size: 24px;
  transition: transform 160ms ease;
}

.weekWorkouts {
  display: grid;
  gap: 12px;
  padding: 0 14px 16px;
}

.weekWorkout {
  border: 1px solid rgba(190, 211, 235, 0.08);
  border-radius: 16px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(15, 18, 24, 0.74), rgba(8, 10, 14, 0.7));
}

.weekWorkoutHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.weekWorkoutHead strong {
  color: #dfe4eb;
  font-size: 16px;
  font-weight: 620;
}

.weekWorkoutHead span {
  color: #9fa7b4;
  font-size: 13px;
  font-weight: 520;
  text-align: right;
}

.weekExercises {
  display: grid;
  gap: 10px;
}

.weekExercise {
  display: grid;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid rgba(190, 211, 235, 0.065);
}

.weekExercise:first-child {
  padding-top: 0;
  border-top: 0;
}

.weekExercise strong {
  color: #cfd6df;
  font-size: 15px;
  font-weight: 590;
}

.weekExercise span {
  color: #9fa7b4;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
}

.statsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 22px 0;
}

.statsGrid div {
  border: 1.5px solid rgba(190, 211, 235, 0.09);
  border-radius: 18px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(28, 32, 40, 0.78), rgba(17, 19, 24, 0.78));
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.statsGrid span {
  color: var(--muted);
  font-size: 16px;
  font-weight: 560;
}

.statsGrid strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  color: #e1e6ee;
  font-weight: 620;
}

.chart {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
}

.chart div {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(190, 211, 235, 0.075);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(21, 24, 31, 0.62), rgba(12, 14, 18, 0.62));
}

.chart span,
.chart strong {
  color: #d7dde5;
  font-weight: 620;
}

.chart i {
  height: 12px;
  border-radius: 999px;
  background: rgba(190, 211, 235, 0.08);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32);
}

.chart b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1d385b, #315f95);
  box-shadow: 0 0 14px rgba(49, 95, 149, 0.16);
}

.toast {
  margin-bottom: 14px;
  border: 1.5px solid rgba(76, 119, 169, 0.42);
  border-radius: 18px;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(18, 32, 56, 0.86), rgba(12, 20, 34, 0.86));
  color: #e5eaf2;
  font-size: 15px;
  font-weight: 560;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.restOverlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 28px;
  padding:
    calc(28px + env(safe-area-inset-top))
    28px
    calc(28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 42%, rgba(47, 95, 152, 0.2), transparent 38%),
    rgba(2, 3, 5, 0.88);
  backdrop-filter: blur(10px);
}

.restClock {
  position: relative;
  width: min(72vw, 330px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #050607 58%, rgba(20, 24, 32, 0.92) 59%);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.6),
    0 0 50px rgba(45, 95, 152, 0.18);
}

.restClock svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.clockTrack,
.clockProgress {
  fill: none;
  stroke-width: 10;
}

.clockTrack {
  stroke: rgba(255, 255, 255, 0.08);
}

.clockProgress {
  stroke: #315f95;
  stroke-linecap: round;
  filter: drop-shadow(0 0 10px rgba(49, 95, 149, 0.35));
  transition: stroke-dashoffset 900ms linear;
}

.clockTime {
  color: #f1f3f6;
  font-size: clamp(62px, 17vw, 92px);
  line-height: 1;
  font-weight: 760;
  letter-spacing: -0.04em;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.56);
}

.restOverlay p {
  margin: 0;
  color: #c9ced6;
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.confirmOverlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding:
    calc(24px + env(safe-area-inset-top))
    24px
    calc(24px + env(safe-area-inset-bottom));
  background: rgba(2, 3, 5, 0.76);
  backdrop-filter: blur(9px);
}

.confirmBox {
  width: min(100%, 392px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(20, 24, 32, 0.98), rgba(12, 13, 16, 0.98));
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.62);
}

.confirmBox p {
  margin: 0 0 10px;
  color: #8f9cad;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.confirmBox h2 {
  margin: 0 0 12px;
  color: #f1f3f6;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
}

.confirmBox span {
  display: block;
  color: #c9ced6;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 520;
}

.confirmBox div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

.confirmBox .darkBtn {
  min-height: 56px;
  border-radius: 16px;
  font-size: 13px;
  letter-spacing: 0.085em;
  font-weight: 540;
}

/* Premium visual pass: jeden spokojny, stalowy język dla całej aplikacji. */
.brandStart header::before {
  top: -26px;
  height: 190px;
  background:
    radial-gradient(ellipse at center, rgba(88, 108, 130, 0.18), rgba(32, 42, 55, 0.08) 44%, transparent 74%);
  filter: blur(7px);
}

.brandLogo {
  width: 104px;
  height: 104px;
  border-radius: 23px;
  border-color: rgba(206, 219, 232, 0.2);
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.58),
    0 0 30px rgba(88, 114, 138, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.brandStart h1,
.brandWord {
  color: #ccd5df;
  font-size: 56px;
  font-weight: 580;
  letter-spacing: 0.072em;
  text-shadow:
    0 9px 22px rgba(0, 0, 0, 0.56),
    0 1px 0 rgba(255, 255, 255, 0.04);
}

.brandWord::after {
  left: 15%;
  right: 15%;
  background: linear-gradient(90deg, transparent, rgba(132, 153, 174, 0.5), transparent);
  box-shadow: none;
}

.brandStart p {
  color: #a9b2be;
  font-size: 12px;
  font-weight: 560;
  letter-spacing: 0.15em;
}

.screenCard,
.exerciseCard,
.formCard,
.restCard,
.simpleCard,
.menuCard {
  border-color: rgba(202, 216, 230, 0.11);
  background:
    linear-gradient(180deg, rgba(21, 25, 31, 0.96), rgba(9, 11, 14, 0.98));
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.screenCard::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent 24%),
    radial-gradient(circle at 50% 0%, rgba(86, 110, 134, 0.1), transparent 50%);
  opacity: 0.72;
}

.menuCard h1,
.exerciseCard h1,
.simpleCard h1,
.chooseCard h1 {
  color: #d8e0e9;
  font-weight: 560;
  letter-spacing: 0.045em;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.48);
}

.chooseCard h1 {
  font-size: 27px;
  white-space: nowrap;
}

.metaLine,
.statsScope,
.infoBox span {
  color: #8994a2;
}

.infoBox,
.previousBox,
.archiveWeek,
.statsGrid div,
.chart div,
.savedList div,
.metricGrid div {
  border-color: rgba(202, 216, 230, 0.095);
  background:
    linear-gradient(180deg, rgba(26, 31, 38, 0.78), rgba(14, 17, 22, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 14px 30px rgba(0, 0, 0, 0.2);
}

.infoBox {
  padding: 15px 17px;
}

.infoBox p {
  color: #b8c1cc;
  font-size: 15px;
  font-weight: 450;
}

.infoBox strong {
  color: #d4dce6;
  font-weight: 560;
}

.blueBtn,
.startPrimary,
.saveMain {
  border-color: rgba(139, 169, 198, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), transparent 38%),
    linear-gradient(180deg, #3a6389, #203a55);
  color: #e7edf4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 16px 36px rgba(0, 0, 0, 0.38),
    0 0 20px rgba(67, 103, 137, 0.12);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
}

.startPrimary strong,
.blueBtn,
.darkBtn,
.copiesMenu summary,
.fileButton,
.startTile strong {
  font-weight: 560;
}

.menuButtons .blueBtn,
.menuButtons .darkBtn,
.menuButtons .copiesMenu summary,
.startTile strong {
  color: #cfd7e1;
}

.menuButtons .blueBtn,
.startPrimary strong {
  color: #e8edf4;
}

.darkBtn,
.copiesMenu summary,
.fileButton,
.startTile {
  border-color: rgba(202, 216, 230, 0.105);
  background:
    linear-gradient(180deg, rgba(30, 35, 42, 0.82), rgba(15, 18, 23, 0.88));
  color: #cdd5df;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 13px 29px rgba(0, 0, 0, 0.25);
}

.darkBtn:hover,
.copiesMenu summary:hover,
.fileButton:hover,
.startSecondary:hover,
.startCopies:hover {
  border-color: rgba(202, 216, 230, 0.18);
  background:
    linear-gradient(180deg, rgba(38, 43, 51, 0.86), rgba(20, 24, 30, 0.9));
}

.dangerBtn {
  color: #d2a6a6;
  border-color: rgba(165, 78, 78, 0.28);
  background:
    linear-gradient(180deg, rgba(72, 34, 35, 0.52), rgba(43, 22, 24, 0.58));
}

.exerciseStatus,
.toggleChevron {
  border-color: rgba(202, 216, 230, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014));
}

.exerciseStatus span,
.exerciseStatus strong {
  color: #aab4c0;
  font-weight: 560;
}

.exerciseStatus strong {
  color: #d8e0e9;
}

.metricGrid span,
.inputGrid label,
.rirLabel,
.previousBox summary b,
.archiveMeta,
.weekWorkoutHead span {
  color: #9aa5b2;
  font-weight: 480;
}

.metricGrid strong,
.restCard h2,
.restCard h3,
.previousBox summary span,
.previousBox h2,
.finishBox h2 {
  color: #d8e0e9;
  font-weight: 560;
}

.noteBox,
.finishBox {
  border-color: rgba(91, 126, 160, 0.32);
  background:
    linear-gradient(180deg, rgba(22, 36, 51, 0.76), rgba(13, 22, 33, 0.78));
  color: #ccd8e5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 34px rgba(0, 0, 0, 0.22);
}

input {
  border-color: rgba(202, 216, 230, 0.12);
  background:
    linear-gradient(180deg, rgba(8, 10, 13, 0.95), rgba(4, 5, 7, 0.98));
  color: #dfe6ef;
  font-weight: 560;
}

input:focus {
  border-color: rgba(128, 158, 188, 0.48);
  box-shadow: 0 0 0 3px rgba(67, 103, 137, 0.12);
}

.rirButtons button {
  border-color: rgba(202, 216, 230, 0.1);
  background:
    linear-gradient(180deg, rgba(30, 35, 42, 0.82), rgba(15, 18, 23, 0.9));
  color: #d1d9e3;
  font-weight: 560;
}

.rirButtons .selected {
  border-color: rgba(139, 169, 198, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 38%),
    linear-gradient(180deg, #334e6a, #1d3147);
  color: #e3eaf2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 14px rgba(67, 103, 137, 0.1);
}

.savedList div,
.previousBox p,
.weekExercise,
.archiveWeek,
.statsGrid div p,
.chart div span {
  color: #c7d0da;
}

.statsGrid div strong,
.archiveWeek summary strong,
.weekWorkoutHead strong,
.chart div strong {
  color: #d9e1ea;
  font-weight: 560;
}

.restOverlay {
  background:
    radial-gradient(circle at 50% 34%, rgba(59, 87, 113, 0.18), transparent 38%),
    rgba(3, 4, 6, 0.9);
}

.restClock {
  box-shadow:
    0 0 0 1px rgba(202, 216, 230, 0.08),
    0 24px 68px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.clockTrack {
  stroke: rgba(202, 216, 230, 0.09);
}

.clockProgress {
  stroke: #5d86ad;
  filter: drop-shadow(0 0 8px rgba(93, 134, 173, 0.18));
}

.clockTime {
  color: #dfe6ef;
  letter-spacing: 0;
  font-weight: 620;
}

.restOverlay p {
  color: #aeb8c4;
  font-weight: 560;
}

.confirmOverlay {
  background: rgba(2, 3, 5, 0.8);
}

.confirmBox,
.toast {
  border-color: rgba(202, 216, 230, 0.12);
  background:
    linear-gradient(180deg, rgba(22, 26, 33, 0.98), rgba(10, 12, 16, 0.98));
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.62);
}

.confirmBox h2 {
  color: #dfe6ef;
  font-weight: 620;
}

.confirmBox span {
  color: #b8c1cc;
}

/* Work screens: spokojniejsze narzędzie treningowe, bez pokazowego efektu startu. */
.exerciseCard.screenCard,
.formCard.screenCard,
.restCard.screenCard,
.simpleCard.screenCard {
  border-width: 1px;
  border-color: rgba(190, 205, 220, 0.085);
  background: rgba(13, 16, 20, 0.94);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.exerciseCard.screenCard::before,
.formCard.screenCard::before,
.restCard.screenCard::before,
.simpleCard.screenCard::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 18%);
  opacity: 0.55;
}

.screenCard + .formCard,
.screenCard + .restCard {
  margin-top: 14px;
}

.exerciseCard {
  padding: 23px 22px 24px;
}

.formCard,
.restCard,
.simpleCard {
  padding: 22px;
}

.exerciseCard h1,
.simpleCard h1 {
  color: #d5dde6;
  font-size: clamp(24px, 6.4vw, 31px);
  font-weight: 540;
  letter-spacing: 0.018em;
  text-shadow: none;
}

.exerciseStatus {
  margin-bottom: 15px;
  border: 0;
  border-bottom: 1px solid rgba(190, 205, 220, 0.08);
  border-radius: 0;
  padding: 0 0 12px;
  background: transparent;
  box-shadow: none;
}

.exerciseStatus span,
.exerciseStatus strong {
  color: #98a4b1;
  font-size: 10px;
  font-weight: 560;
  letter-spacing: 0.075em;
}

.exerciseStatus strong {
  color: #c5ced8;
}

.metaLine {
  margin-bottom: 15px;
  color: #808b99;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.055em;
}

.metricGrid {
  gap: 10px;
  margin: 21px 0 16px;
}

.metricGrid div {
  min-height: 70px;
  border-width: 1px;
  border-color: rgba(190, 205, 220, 0.075);
  border-radius: 13px;
  gap: 7px;
  padding: 13px 14px;
  background: rgba(20, 24, 30, 0.72);
  box-shadow: none;
}

.metricGrid span {
  color: #858f9c;
  font-size: 11px;
  font-weight: 520;
  letter-spacing: 0.075em;
}

.metricGrid strong {
  color: #d8e0e9;
  font-size: 21px;
  font-weight: 570;
}

.noteBox {
  border: 0;
  border-left: 3px solid rgba(92, 129, 164, 0.7);
  border-radius: 12px;
  padding: 13px 14px;
  background: rgba(21, 33, 45, 0.58);
  color: #bfccd8;
  font-size: 16px;
  line-height: 1.36;
  font-weight: 430;
  box-shadow: none;
}

.previousBox {
  margin-top: 16px;
  border-width: 1px;
  border-color: rgba(190, 205, 220, 0.075);
  border-radius: 15px;
  background: rgba(20, 24, 30, 0.62);
  box-shadow: none;
}

.previousBox summary {
  min-height: 58px;
  padding: 14px 16px;
}

.previousBox summary span {
  color: #cfd7df;
  font-size: 16px;
  font-weight: 540;
}

.previousBox summary b {
  color: #7f8a97;
  font-size: 12px;
  font-weight: 460;
}

.previousBox p {
  margin-bottom: 10px;
  color: #b9c3ce;
  font-size: 15px;
  font-weight: 430;
}

.formCard {
  background: rgba(10, 12, 15, 0.94);
}

.inputGrid {
  gap: 12px;
}

.inputGrid label,
.rirLabel {
  color: #98a4b1;
  font-size: 14px;
  font-weight: 470;
}

.inputGrid label {
  gap: 9px;
}

input {
  min-height: 58px;
  border-radius: 12px;
  border-color: rgba(190, 205, 220, 0.105);
  padding: 0 14px;
  background: #07090c;
  color: #dbe3ec;
  font-size: 22px;
  font-weight: 520;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

input:focus {
  border-color: rgba(105, 139, 170, 0.54);
  box-shadow:
    0 0 0 2px rgba(75, 108, 140, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.rirLabel {
  margin: 21px 0 11px;
}

.rirButtons {
  gap: 9px;
}

.rirButtons button {
  min-height: 56px;
  border-radius: 12px;
  border-color: rgba(190, 205, 220, 0.085);
  background: rgba(22, 26, 32, 0.82);
  color: #ccd5df;
  font-size: 20px;
  font-weight: 560;
  box-shadow: none;
}

.rirButtons .selected {
  border-color: rgba(112, 148, 181, 0.42);
  background: rgba(43, 68, 92, 0.88);
  color: #e0e7ef;
  box-shadow: none;
}

.saveMain {
  margin-top: 24px;
  min-height: 66px;
}

.restCard h2 {
  font-size: 24px;
  font-weight: 540;
}

.restCard h3 {
  margin-bottom: 14px;
  font-size: 19px;
  font-weight: 530;
}

.savedList {
  gap: 10px;
}

.savedList div {
  border-radius: 12px;
  padding: 13px 14px;
  background: rgba(22, 26, 32, 0.74);
  box-shadow: none;
  color: #cbd4de;
  font-size: 15px;
  font-weight: 500;
}

.finishBox {
  border-width: 1px;
  border-color: rgba(92, 129, 164, 0.26);
  border-radius: 16px;
  padding: 17px;
  background: rgba(21, 33, 45, 0.58);
  box-shadow: none;
}

.finishBox h2 {
  font-size: 22px;
  font-weight: 540;
}

.finishBox p,
.savedList p {
  color: #8f9aa7;
  font-size: 15px;
  font-weight: 430;
}

.archiveList,
.statsGrid,
.chart {
  gap: 10px;
  margin-top: 18px;
}

.archiveWeek,
.weekWorkout,
.statsGrid div,
.chart div {
  border-width: 1px;
  border-color: rgba(190, 205, 220, 0.075);
  background: rgba(19, 23, 29, 0.72);
  box-shadow: none;
}

.archiveWeek {
  border-radius: 15px;
}

.archiveWeek summary {
  min-height: 64px;
  padding: 15px 16px;
}

.archiveWeek summary strong {
  color: #d1d9e2;
  font-size: 16px;
  font-weight: 540;
}

.archiveWeek summary b {
  color: #87929f;
  font-size: 12px;
  font-weight: 450;
}

.archiveWeek summary i {
  color: #9aa5b2;
  font-size: 20px;
}

.weekWorkouts {
  gap: 9px;
  padding: 0 12px 13px;
}

.weekWorkout {
  border-radius: 12px;
  padding: 12px;
}

.weekWorkoutHead strong {
  color: #cdd6df;
  font-size: 14px;
  font-weight: 540;
}

.weekWorkoutHead span,
.weekExercise span {
  color: #858f9c;
  font-size: 12px;
  font-weight: 420;
}

.weekExercises {
  gap: 8px;
}

.weekExercise {
  gap: 4px;
  padding-top: 8px;
  border-top-color: rgba(190, 205, 220, 0.055);
}

.weekExercise strong {
  color: #bac4cf;
  font-size: 13px;
  font-weight: 500;
}

.statsScope {
  color: #858f9c;
  font-size: 12px;
  font-weight: 430;
}

.statsGrid div {
  border-radius: 13px;
  padding: 15px 16px;
}

.statsGrid span {
  color: #8893a0;
  font-size: 13px;
  font-weight: 460;
}

.statsGrid strong {
  color: #d5dde6;
  font-size: 23px;
  font-weight: 560;
}

.chart div {
  border-radius: 12px;
  padding: 12px;
}

.chart span,
.chart strong {
  color: #c2ccd6;
  font-size: 13px;
  font-weight: 500;
}

.chart i {
  height: 8px;
  background: rgba(190, 205, 220, 0.075);
  box-shadow: none;
}

.chart b {
  background: linear-gradient(90deg, #2b465f, #5d86ad);
  box-shadow: none;
}

.blueBtn,
.darkBtn,
.copiesMenu summary,
.fileButton {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 10px 24px rgba(0, 0, 0, 0.22);
}

/* Work screens refinement: flatter, quieter, more technical. */
.exerciseCard.screenCard,
.formCard.screenCard,
.restCard.screenCard,
.simpleCard.screenCard {
  border-color: rgba(190, 205, 220, 0.065);
  border-radius: 19px;
  background: rgba(10, 13, 17, 0.96);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

.exerciseCard.screenCard::before,
.formCard.screenCard::before,
.restCard.screenCard::before,
.simpleCard.screenCard::before {
  opacity: 0.18;
}

.exerciseCard,
.formCard,
.restCard,
.simpleCard {
  padding: 20px;
}

.exerciseCard h1,
.simpleCard h1 {
  color: #d0d9e2;
  font-size: clamp(23px, 6vw, 30px);
  font-weight: 520;
  letter-spacing: 0.012em;
}

.exerciseStatus {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom-color: rgba(190, 205, 220, 0.065);
}

.exerciseStatus span,
.exerciseStatus strong {
  color: #8b96a3;
  font-size: 10px;
}

.exerciseStatus strong {
  color: #bcc7d2;
}

.metaLine {
  color: #788390;
  font-size: 12px;
}

.metricGrid {
  gap: 8px;
  margin: 18px 0 14px;
}

.metricGrid div {
  min-height: 62px;
  border-color: rgba(190, 205, 220, 0.055);
  border-radius: 10px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.028);
}

.metricGrid span {
  color: #7d8794;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.075em;
}

.metricGrid strong {
  color: #d4dde6;
  font-size: 20px;
  font-weight: 540;
}

.noteBox {
  border-left-width: 2px;
  border-left-color: rgba(91, 126, 160, 0.72);
  border-radius: 9px;
  padding: 11px 12px;
  background: rgba(42, 57, 70, 0.28);
  color: #b7c3cf;
  font-size: 15px;
  font-weight: 410;
}

.previousBox {
  margin-top: 14px;
  border-color: rgba(190, 205, 220, 0.055);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.024);
}

.previousBox summary {
  min-height: 52px;
  padding: 12px 14px;
}

.previousBox summary span {
  color: #c4ced8;
  font-size: 15px;
  font-weight: 500;
}

.previousBox summary b,
.previousBox p:first-of-type {
  color: #77828f;
}

.previousBox p {
  color: #afb9c5;
  font-size: 14px;
}

.inputGrid {
  gap: 10px;
}

.inputGrid label,
.rirLabel {
  color: #8c97a4;
  font-size: 13px;
  font-weight: 440;
}

input {
  min-height: 54px;
  border-radius: 10px;
  border-color: rgba(190, 205, 220, 0.085);
  background: rgba(3, 5, 7, 0.72);
  color: #d8e0e9;
  font-size: 21px;
  font-weight: 500;
}

input:focus {
  border-color: rgba(103, 133, 161, 0.46);
  box-shadow: 0 0 0 2px rgba(80, 112, 143, 0.1);
}

.rirButtons {
  gap: 8px;
}

.rirButtons button {
  min-height: 52px;
  border-radius: 10px;
  border-color: rgba(190, 205, 220, 0.065);
  background: rgba(255, 255, 255, 0.032);
  color: #c2ccd6;
  font-size: 19px;
  font-weight: 520;
}

.rirButtons .selected {
  border-color: rgba(104, 140, 173, 0.38);
  background: rgba(47, 74, 97, 0.72);
  color: #dce5ee;
}

.formCard .saveMain,
.finishBox .blueBtn {
  min-height: 62px;
  border-color: rgba(116, 148, 178, 0.3);
  background: #294760;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 22px rgba(0, 0, 0, 0.24);
}

.restCard h2 {
  font-size: 22px;
}

.restCard h3 {
  font-size: 18px;
}

.savedList div,
.finishBox,
.archiveWeek,
.weekWorkout,
.statsGrid div,
.chart div {
  border-color: rgba(190, 205, 220, 0.055);
  background: rgba(255, 255, 255, 0.026);
  box-shadow: none;
}

.savedList div {
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
}

.archiveWeek {
  border-radius: 12px;
}

.archiveWeek summary {
  min-height: 58px;
  padding: 13px 14px;
}

.archiveWeek summary strong,
.weekWorkoutHead strong {
  color: #c7d1db;
  font-weight: 500;
}

.archiveWeek summary b,
.weekWorkoutHead span,
.weekExercise span {
  color: #7f8a96;
  font-weight: 410;
}

.weekWorkout {
  border-radius: 10px;
}

.weekExercise strong {
  color: #b7c2cd;
  font-weight: 470;
}

.statsGrid div {
  border-radius: 11px;
  padding: 13px 14px;
}

.statsGrid span,
.chart span,
.chart strong {
  color: #87929f;
  font-weight: 440;
}

.statsGrid strong {
  color: #d0d9e2;
  font-size: 22px;
  font-weight: 520;
}

.chart div {
  border-radius: 10px;
}

.chart i {
  height: 7px;
}

.chart b {
  background: #5d86ad;
}

@media (max-width: 390px) {
  main {
    padding-left: 12px;
    padding-right: 12px;
  }

  .screenCard {
    border-radius: 24px;
  }

  .menuCard h1,
  .exerciseCard h1,
  .simpleCard h1 {
    font-size: 27px;
  }

  .metricGrid,
  .inputGrid {
    gap: 12px;
  }

  .blueBtn,
  .darkBtn,
  .copiesMenu summary,
  .fileButton {
    font-size: 18px;
  }

  .chooseCard h1 {
    font-size: clamp(22px, 6vw, 27px);
    letter-spacing: 0.01em;
  }

  .brandStart h1,
  .brandWord {
    font-size: 47px;
    letter-spacing: 0.056em;
  }

  .exerciseStatus span,
  .exerciseStatus strong {
    font-size: 10px;
  }

  .previousBox summary {
    align-items: flex-start;
    display: grid;
  }

  .previousBox summary b {
    text-align: left;
  }

  .weekWorkoutHead {
    display: grid;
  }

  .weekWorkoutHead span {
    text-align: left;
  }
}

@media (min-width: 440px) {
  .brandStart h1,
  .brandWord {
    font-size: 60px;
  }
}

@media (max-width: 390px) {
  .exerciseCard,
  .formCard,
  .restCard,
  .simpleCard {
    padding: 20px;
  }

  .exerciseCard.screenCard,
  .formCard.screenCard,
  .restCard.screenCard,
  .simpleCard.screenCard {
    border-radius: 18px;
  }

  .exerciseCard h1,
  .simpleCard h1 {
    font-size: 24px;
  }

  .metricGrid div {
    min-height: 66px;
    padding: 12px;
  }

  .metricGrid strong {
    font-size: 20px;
  }

  .noteBox {
    font-size: 15px;
  }

  input {
    min-height: 56px;
    font-size: 21px;
  }

  .rirButtons button {
    min-height: 54px;
  }
}

/* Arkadiusz system identity across all working screens. */
.workMain {
  padding-top: calc(30px + env(safe-area-inset-top));
}

.systemHeader {
  width: 100%;
  min-height: 58px;
  margin-bottom: 18px;
  padding: 0 2px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(190, 205, 220, 0.1);
}

.systemIdentity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.systemMark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(150, 172, 194, 0.2);
  border-radius: 8px;
  background: rgba(24, 30, 37, 0.82);
  color: #cbd5df;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 650;
  line-height: 1;
  transform: skewX(-4deg);
}

.systemName {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.systemName strong {
  color: #cbd5df;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 580;
  letter-spacing: 0.1em;
}

.systemName small {
  color: #778390;
  font-size: 8px;
  font-weight: 560;
  letter-spacing: 0.105em;
  white-space: nowrap;
}

.systemContext {
  flex: 0 0 auto;
  color: #8f9aa7;
  font-size: 10px;
  font-weight: 560;
  letter-spacing: 0.07em;
  text-align: right;
  white-space: nowrap;
}

.workMain .exerciseCard.screenCard,
.workMain .formCard.screenCard,
.workMain .restCard.screenCard,
.workMain .simpleCard.screenCard {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.workMain .exerciseCard.screenCard::before,
.workMain .formCard.screenCard::before,
.workMain .restCard.screenCard::before,
.workMain .simpleCard.screenCard::before {
  content: none;
}

.workMain .exerciseCard,
.workMain .formCard,
.workMain .restCard,
.workMain .simpleCard {
  padding: 4px 2px 22px;
}

.workMain .formCard,
.workMain .restCard {
  margin-top: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(190, 205, 220, 0.075);
}

.workMain .exerciseCard h1,
.workMain .simpleCard h1 {
  color: #d4dce5;
  font-weight: 540;
}

.workMain .metricGrid div {
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
}

.workMain .noteBox {
  background: rgba(42, 57, 70, 0.2);
}

.workMain .previousBox {
  border: 0;
  border-top: 1px solid rgba(190, 205, 220, 0.07);
  border-bottom: 1px solid rgba(190, 205, 220, 0.07);
  border-radius: 0;
  background: transparent;
}

.workMain .inputGrid input {
  border-color: rgba(190, 205, 220, 0.09);
  background: rgba(0, 0, 0, 0.24);
}

.workMain .rirButtons button {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.035);
}

.workMain .rirButtons .selected {
  border-color: rgba(104, 140, 173, 0.3);
  background: rgba(47, 74, 97, 0.66);
}

.workMain .savedList div {
  border: 0;
  border-bottom: 1px solid rgba(190, 205, 220, 0.06);
  border-radius: 0;
  background: transparent;
}

.workMain .finishBox {
  border: 0;
  border-left: 2px solid rgba(91, 126, 160, 0.58);
  border-radius: 7px;
  background: rgba(42, 57, 70, 0.2);
}

.workMain .archiveList {
  gap: 0;
}

.workMain .archiveWeek {
  border: 0;
  border-bottom: 1px solid rgba(190, 205, 220, 0.075);
  border-radius: 0;
  background: transparent;
}

.workMain .weekWorkouts {
  padding-left: 4px;
  padding-right: 4px;
}

.workMain .weekWorkout {
  border: 0;
  border-left: 1px solid rgba(190, 205, 220, 0.08);
  border-radius: 0;
  padding-left: 14px;
  background: transparent;
}

.workMain .statsGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(190, 205, 220, 0.075);
  border-bottom: 1px solid rgba(190, 205, 220, 0.075);
}

.workMain .statsGrid div {
  min-width: 0;
  border: 0;
  border-right: 1px solid rgba(190, 205, 220, 0.065);
  border-radius: 0;
  padding: 15px 9px;
  background: transparent;
}

.workMain .statsGrid div:last-child {
  border-right: 0;
}

.workMain .statsGrid span {
  display: block;
  min-height: 30px;
  font-size: 10px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

.workMain .statsGrid strong {
  margin-top: 5px;
  font-size: clamp(17px, 5vw, 22px);
  overflow-wrap: anywhere;
}

.workMain .chart {
  gap: 0;
}

.workMain .chart div {
  border: 0;
  border-bottom: 1px solid rgba(190, 205, 220, 0.06);
  border-radius: 0;
  padding: 14px 2px;
  background: transparent;
}

.workMain .chart b {
  background: #557c9f;
}

@media (max-width: 390px) {
  .workMain {
    padding-top: calc(22px + env(safe-area-inset-top));
  }

  .systemHeader {
    margin-bottom: 15px;
  }

  .systemName small {
    font-size: 7px;
    letter-spacing: 0.08em;
  }

  .systemContext {
    font-size: 9px;
    letter-spacing: 0.045em;
  }

  .workMain .exerciseCard,
  .workMain .formCard,
  .workMain .restCard,
  .workMain .simpleCard {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Stage 1: previous exercise snapshot and completed workout summary. */
.workMain .previousBox {
  margin-top: 15px;
}

.workMain .previousBox summary {
  align-items: center;
}

.previousHeading {
  min-width: 0;
  display: grid !important;
  gap: 4px;
}

.previousHeading small {
  color: #74808d;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.previousHeading strong {
  color: #c1cbd5;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.workMain .previousBox summary b {
  flex: 0 0 auto;
  color: #7e8995;
  font-size: 11px;
  font-weight: 450;
  white-space: nowrap;
}

.previousDetails {
  padding: 2px 14px 10px;
}

.previousDetails p {
  min-height: 36px;
  margin: 0;
  padding: 8px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(190, 205, 220, 0.055);
}

.previousDetails p span {
  color: #77828f;
  font-size: 11px;
  font-weight: 460;
}

.previousDetails p strong {
  color: #b8c2cd;
  font-size: 13px;
  font-weight: 500;
}

.previousDetails p b {
  color: #87929e;
  font-size: 11px;
  font-weight: 460;
}

.workoutSummary {
  padding-top: 10px !important;
}

.summaryEyebrow {
  margin: 0 0 9px;
  color: #82909d;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.13em;
}

.workoutSummary h1 {
  margin-bottom: 25px;
}

.summaryMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(190, 205, 220, 0.075);
  border-bottom: 1px solid rgba(190, 205, 220, 0.075);
}

.summaryMetrics div {
  min-width: 0;
  padding: 17px 9px;
  border-right: 1px solid rgba(190, 205, 220, 0.065);
}

.summaryMetrics div:last-child {
  border-right: 0;
}

.summaryMetrics strong,
.summaryMetrics span {
  display: block;
}

.summaryMetrics strong {
  color: #d3dce5;
  font-size: clamp(20px, 6vw, 27px);
  line-height: 1;
  font-weight: 540;
  overflow-wrap: anywhere;
}

.summaryMetrics span {
  min-height: 26px;
  margin-top: 8px;
  color: #77838f;
  font-size: 9px;
  line-height: 1.35;
  font-weight: 560;
  letter-spacing: 0.07em;
}

.summaryComparison {
  margin: 22px 0 25px;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(190, 205, 220, 0.075);
}

.summaryComparison > span {
  color: #77838f;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
}

.summaryResult {
  margin: 8px 0 14px;
  color: #c6d0da;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 570;
  letter-spacing: 0.055em;
}

.summaryResultPROGRES {
  color: #789dbd;
}

.summaryResultREGRES {
  color: #b18b8b;
}

.summaryResultUTRZYMANIE,
.summaryResultPIERWSZYZAPIS {
  color: #aeb9c4;
}

.summaryComparisonNumbers {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.summaryComparisonNumbers strong {
  color: #d1dae3;
  font-size: 22px;
  font-weight: 540;
}

.summaryComparisonNumbers span {
  color: #85919e;
  font-size: 13px;
  font-weight: 500;
}

.summaryComparisonText {
  margin: 7px 0 0;
  color: #7f8b97;
  font-size: 13px;
  line-height: 1.4;
}

.summaryActions {
  display: grid;
  gap: 10px;
}

.summaryActions .blueBtn,
.summaryActions .darkBtn {
  min-height: 58px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 540;
  letter-spacing: 0.07em;
}

@media (max-width: 390px) {
  .workMain .previousBox summary {
    display: flex;
    align-items: center;
  }

  .previousHeading strong {
    font-size: 13px;
  }

  .workMain .previousBox summary b {
    font-size: 10px;
  }

  .summaryMetrics div {
    padding-left: 7px;
    padding-right: 7px;
  }
}

/* Start screen hierarchy correction: brand first, tools second. */
.brandStart {
  gap: 42px;
}

.brandLogo {
  width: 128px;
  height: 128px;
  margin-bottom: 31px;
}

.brandStart p {
  margin-top: 22px;
}

.startGrid {
  gap: 12px;
}

.startTile {
  min-height: 52px;
}

.startPrimary {
  min-height: 71px;
}

.startSecondary,
.startCopies {
  background:
    linear-gradient(180deg, rgba(26, 30, 36, 0.78), rgba(12, 15, 19, 0.9));
}

.startCopies summary {
  min-height: 52px;
}

@media (max-width: 390px) {
  .brandStart {
    gap: 36px;
  }

  .brandLogo {
    width: 120px;
    height: 120px;
    margin-bottom: 28px;
  }

  .brandStart p {
    margin-top: 20px;
  }
}

/* Start screen data tools: compact and deliberately secondary. */
.startCopies > summary > strong {
  color: #aeb8c3;
  font-size: 13px;
  font-weight: 520;
  letter-spacing: 0.095em;
}

.startCopies > summary .tileIcon {
  opacity: 0.68;
}

.startCopies > div {
  gap: 0;
  padding: 2px 14px 12px;
}

.startCopies .darkBtn,
.startCopies .fileButton {
  min-height: 42px;
  border: 0;
  border-top: 1px solid rgba(190, 205, 220, 0.065);
  border-radius: 0;
  padding: 0 10px;
  background: transparent;
  box-shadow: none;
  color: #a8b2bd;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.075em;
}

.startCopies .darkBtn:hover,
.startCopies .fileButton:hover {
  border-color: rgba(190, 205, 220, 0.085);
  background: rgba(255, 255, 255, 0.025);
}

.startCopies .dangerBtn {
  border-left: 2px solid rgba(163, 76, 76, 0.42);
  background: transparent;
  color: #b98c8c;
}

/* Stage 2: one official Arkadiusz mark across the application. */
.brandMenuIcon {
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 5px;
  object-fit: cover;
}

.startPrimary .brandMenuIcon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.startPrimary {
  gap: 7px;
}

.startSecondary {
  gap: 5px;
}

.startCopies > summary .brandMenuIcon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  opacity: 0.82;
}

.systemMark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: block;
  border: 0;
  border-radius: 8px;
  background: transparent;
  object-fit: cover;
  transform: none;
}

.workMain::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 51%;
  z-index: 0;
  width: min(68vw, 310px);
  aspect-ratio: 1;
  border-radius: 22%;
  background: url("./apple-touch-icon.png") center / contain no-repeat;
  opacity: 0.04;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.workMain > * {
  position: relative;
  z-index: 1;
}

/* Stage 3: shared typography and color for the primary brand language. */
.brandWord,
.brandStart p,
.startTile strong,
.startPrimary strong,
.startCopies > summary > strong,
.startCopies .darkBtn:not(.dangerBtn),
.startCopies .fileButton {
  color: var(--brand-text);
}

.brandMenuIcon {
  width: 19px;
  height: 19px;
  opacity: 0.56;
}

.startPrimary .brandMenuIcon {
  width: 25px;
  height: 25px;
}

.startCopies > summary .brandMenuIcon {
  width: 19px;
  height: 19px;
  opacity: 0.56;
}

.startPrimary {
  border-color: rgba(126, 157, 186, 0.23);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 38%),
    linear-gradient(180deg, #2c4b66, #1b2d3e);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 28px rgba(0, 0, 0, 0.3);
}

.brandLogo {
  top: -5px;
}

.startCopies .toggleHint {
  min-width: 18px;
  color: rgba(203, 213, 223, 0.48);
}

.startCopies .toggleChevron {
  width: 18px;
  height: 18px;
  border-color: rgba(255, 255, 255, 0.07);
  color: rgba(203, 213, 223, 0.48);
  font-size: 12px;
}

.startCopies[open] .toggleChevron {
  border-color: rgba(126, 157, 186, 0.18);
}

/* Choose workout: CHARAKTER + PROGRES. */
.chooseCard {
  padding: 30px 22px 24px;
}

.chooseCard .cyclePanel {
  margin: 22px 0 24px;
  padding: 18px 2px 16px;
  border-top: 1px solid rgba(203, 213, 223, 0.09);
  border-bottom: 1px solid rgba(203, 213, 223, 0.09);
}

.cycleHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  color: #8d98a5;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.cycleHeading b {
  color: #aeb8c3;
  font-size: 9px;
  font-weight: 600;
}

.cyclePanel > strong {
  display: block;
  color: var(--brand-text);
  font-size: 30px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.035em;
}

.cyclePanel > strong small {
  color: #808b98;
  font-size: 15px;
  font-weight: 500;
}

.cycleDetails {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 10px;
  margin-top: 15px;
}

.cycleDetails span {
  color: #737e8a;
  font-size: 9px;
  line-height: 1.35;
  font-weight: 550;
  letter-spacing: 0.09em;
}

.cycleDetails b {
  display: block;
  margin-top: 3px;
  color: #abb5c0;
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.035em;
}

.workoutModules {
  display: grid;
  gap: 15px;
}

.workoutModule {
  position: relative;
  width: 100%;
  min-height: 96px;
  border: 1px solid rgba(203, 213, 223, 0.075);
  border-left: 2px solid transparent;
  border-radius: 10px;
  padding: 15px 16px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 14px;
  background: rgba(14, 17, 21, 0.72);
  color: var(--brand-text);
  text-align: left;
  box-shadow: none;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.workoutModule:active {
  transform: translateY(1px);
}

.workoutModule img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  object-fit: cover;
  opacity: 0.32;
}

.workoutModuleCopy {
  min-width: 0;
  display: grid;
  padding-right: 58px;
}

.workoutModuleCopy small {
  color: #7f8995;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.13em;
}

.workoutModuleCopy strong {
  margin-top: 2px;
  color: #c3ccd6;
  font-size: 21px;
  line-height: 1.05;
  font-weight: 620;
  letter-spacing: 0.06em;
}

.workoutModuleCopy > span {
  margin-top: 7px;
  color: #8f99a5;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 450;
  letter-spacing: 0.01em;
}

.workoutModuleCopy i {
  padding: 0 3px;
  color: #66717d;
  font-style: normal;
}

.workoutModule.isNext {
  border-color: rgba(91, 126, 157, 0.22);
  border-left-color: #547a9b;
  background: rgba(31, 48, 63, 0.58);
}

.workoutModule.isNext img {
  opacity: 0.55;
}

.workoutModule.isNext .workoutModuleCopy strong {
  color: #d0d9e2;
}

.nextBadge {
  position: absolute;
  top: 14px;
  right: 14px;
  color: #86a4be;
  font-size: 7.2px;
  font-weight: 650;
  letter-spacing: 0.12em;
}

.chooseUtilities {
  gap: 9px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(203, 213, 223, 0.07);
}

.chooseUtilities .darkBtn,
.chooseUtilities .copiesMenu summary {
  min-height: 48px;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: 0.065em;
  background:
    linear-gradient(180deg, rgba(25, 29, 35, 0.78), rgba(11, 14, 18, 0.9));
}

/* Archive hierarchy: week -> workout -> exercise -> sets. */
.archiveWeek > summary,
.archiveWorkout > summary,
.archiveExercise > summary {
  cursor: pointer;
  list-style: none;
}

.archiveWeek > summary::-webkit-details-marker,
.archiveWorkout > summary::-webkit-details-marker,
.archiveExercise > summary::-webkit-details-marker {
  display: none;
}

.archiveWeek > summary > .archiveToggle,
.archiveWorkout > summary > .archiveToggle,
.archiveExercise > summary > .archiveToggle {
  flex: 0 0 auto;
  color: #7f8a96;
  font-style: normal;
  transform: none !important;
  font-size: 0;
}

.archiveWeek > summary > .archiveToggle::before,
.archiveWorkout > summary > .archiveToggle::before,
.archiveExercise > summary > .archiveToggle::before {
  content: "▼";
  color: #7f8a96;
  font-size: 10px;
  line-height: 1;
}

.archiveWeek[open] > summary > .archiveToggle::before,
.archiveWorkout[open] > summary > .archiveToggle::before,
.archiveExercise[open] > summary > .archiveToggle::before {
  content: "▲";
}

.archiveWeek[open] > summary > .archiveToggle,
.archiveWorkout[open] > summary > .archiveToggle,
.archiveExercise[open] > summary > .archiveToggle,
.archiveWeek[open] .archiveToggle {
  transform: none !important;
}

.workMain .archiveWeek > summary {
  min-height: 64px;
  padding: 16px 8px;
}

.workMain .weekWorkouts {
  gap: 8px;
  padding: 0 4px 14px;
}

.workMain .archiveWorkout {
  overflow: hidden;
  border: 1px solid rgba(190, 205, 220, 0.065);
  border-left: 2px solid rgba(91, 126, 157, 0.24);
  border-radius: 8px;
  padding: 0;
  background: rgba(18, 22, 27, 0.58);
}

.archiveWorkout > .weekWorkoutHead {
  min-height: 58px;
  margin: 0;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.archiveWorkout > .weekWorkoutHead span {
  text-align: left;
}

.archiveWorkout > .weekWorkoutHead strong,
.archiveWorkout > .weekWorkoutHead b {
  display: block;
}

.archiveWorkout > .weekWorkoutHead strong {
  color: #c5cfd9;
  font-size: 14px;
  font-weight: 530;
}

.archiveWorkout > .weekWorkoutHead b {
  margin-top: 5px;
  color: #7f8a96;
  font-size: 11px;
  font-weight: 430;
}

.archiveWorkout > .weekWorkoutHead i {
  font-size: 16px;
}

.archiveWorkout > .weekExercises {
  gap: 0;
  padding: 0 12px 12px;
}

.workMain .archiveExercise {
  display: block;
  border: 0;
  border-top: 1px solid rgba(190, 205, 220, 0.055);
  padding: 0;
  background: transparent;
}

.archiveExercise > summary {
  min-height: 48px;
  padding: 11px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.archiveExercise > summary span,
.archiveExercise > summary strong,
.archiveExercise > summary b {
  display: block;
}

.archiveExercise > summary strong {
  color: #b7c2cd;
  font-size: 13px;
  font-weight: 500;
}

.archiveExercise > summary b {
  margin-top: 4px;
  color: #727d89;
  font-size: 10px;
  font-weight: 430;
}

.archiveExercise > summary i {
  font-size: 14px;
}

.archiveSets {
  padding: 0 2px 10px 10px;
  border-left: 1px solid rgba(91, 126, 157, 0.2);
}

.archiveSet {
  min-height: 37px;
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(190, 205, 220, 0.04);
}

.archiveSet:first-child {
  border-top: 0;
}

.archiveSet span {
  color: #6f7a86;
  font-size: 9px;
  font-weight: 550;
  letter-spacing: 0.07em;
}

.archiveSet strong {
  color: #aeb9c4;
  font-size: 12px;
  font-weight: 480;
}

.archiveSet b {
  color: #77838f;
  font-size: 10px;
  font-weight: 450;
}

/* Statistics stage 1: clearer hierarchy and honest progress bars. */
.statsCard .statsScope {
  margin: 18px 0 20px;
}

.workMain .statsCard .statsGrid strong {
  margin-top: 7px;
  font-size: clamp(22px, 6.3vw, 28px);
  line-height: 1.05;
  font-weight: 570;
}

.statsCard .chart strong {
  color: #929daa;
  font-size: 12px;
  font-weight: 470;
}

.statsCard .chart b[style="width:0%"] {
  background: transparent;
  box-shadow: none;
}

.statsCard .devStatsButton {
  min-height: 44px;
  margin-top: 2px;
  border-style: dashed;
  color: #8f9ba7;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.workoutModule.isNext {
  border-color: rgba(91, 126, 157, 0.19);
  border-left-color: #4d708d;
  background: rgba(28, 43, 56, 0.5);
}

.systemHeader .systemMark {
  width: 37px;
  height: 37px;
  flex-basis: 37px;
}

/* Workout lower section: quiet status, guidance and save confirmation. */
.workMain .restCard .restStatus {
  margin-bottom: 18px;
  color: #8995a1;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 470;
  letter-spacing: 0.01em;
}

.workMain .restCard .restStatus span {
  color: #aab5c0;
  font-weight: 540;
}

.workMain .restCard .restStatus.isReady {
  color: #87939f;
}

.workMain .savedList .emptySavedSets {
  display: grid;
  gap: 6px;
  border: 0;
  padding: 2px 0 8px;
  background: transparent;
}

.emptySavedSets p {
  color: #8b96a2;
  font-size: 14px;
  font-weight: 460;
}

.emptySavedSets small {
  color: #697580;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 430;
}

.workMain .restCard .emergencyBtn {
  border-color: rgba(190, 205, 220, 0.045);
  background: rgba(10, 12, 15, 0.54);
  color: #737e89;
  box-shadow: none;
}

.setFeedback {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 80;
  width: min(calc(100% - 32px), 360px);
  transform: translateX(-50%);
  border: 1px solid rgba(110, 143, 172, 0.2);
  border-left: 2px solid rgba(91, 126, 157, 0.68);
  border-radius: 9px;
  padding: 11px 13px;
  display: grid;
  gap: 3px;
  background: rgba(14, 18, 23, 0.96);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

.setFeedback strong {
  color: #c4ced8;
  font-size: 13px;
  font-weight: 560;
}

.setFeedback span {
  color: #87939f;
  font-size: 11px;
  font-weight: 450;
}

/* Compact workout flow: less scrolling without compressing the exercise brief. */
.workMain .exerciseCard {
  padding-bottom: 18px;
}

.workMain .exerciseCard .previousBox {
  margin-top: 13px;
}

.workMain .exerciseCard .previousBox summary {
  min-height: 54px;
  padding: 12px 14px;
}

.workMain .formCard,
.workMain .restCard {
  padding-top: 17px;
  padding-bottom: 17px;
}

.workMain .formCard .inputGrid {
  gap: 8px;
}

.workMain .formCard .inputGrid label {
  gap: 7px;
}

.workMain .formCard .rirLabel {
  margin: 16px 0 9px;
}

.workMain .formCard .rirButtons {
  gap: 7px;
}

.workMain .formCard .saveMain {
  margin-top: 18px;
}

.workMain .restCard .restStatus {
  margin-bottom: 14px;
}

.workMain .restCard h3 {
  margin-bottom: 11px;
}

.workMain .restCard .savedList {
  gap: 8px;
  margin-bottom: 17px;
}

.workMain .restCard .savedList > div:not(.emptySavedSets) {
  padding: 10px 12px;
}

.workMain .restCard .finishBox {
  margin: 15px 0 14px;
  padding: 14px;
}

.workMain .restCard .finishBox h2 {
  margin-bottom: 13px;
}

.workMain .restCard .finishBox .blueBtn {
  min-height: 56px;
  margin-top: 17px;
}

.workMain .restCard > .emergencyBtn,
.workMain .restCard > [data-view="dashboard"] {
  min-height: 52px;
}

.workMain .restCard > .darkBtn + .darkBtn {
  margin-top: 8px;
}

/* Collapsible workout history: less scrolling without smaller controls. */
.workMain .previousBox summary {
  gap: 10px;
}

.workMain .previousBox .previousHeading {
  min-width: 0;
  display: block !important;
  overflow: hidden;
  color: #aeb9c4;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 520;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detailsChevron {
  flex: 0 0 auto;
  color: #71808d;
  font-style: normal;
  font-size: 10px;
  line-height: 1;
}

.detailsChevron::before {
  content: "\25BC";
}

details[open] > summary .detailsChevron::before {
  content: "\25B2";
}

.previousDate {
  padding: 7px 0 8px;
  color: #707d89;
  font-size: 11px;
  font-weight: 450;
}

.savedSetsBox {
  margin: 0 0 17px;
}

.savedSetsBox > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 12px;
  cursor: pointer;
  list-style: none;
}

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

.savedSetsBox > summary > span {
  color: #aeb8c3;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 560;
  letter-spacing: 0.045em;
}

.savedSetsBox .savedLatest {
  grid-column: 1 / -1;
}

.savedSetsBox[open] .savedLatest {
  display: none;
}

.workMain .savedSetsBox .savedLatest > div,
.workMain .savedSetsBox .savedListFull > div {
  border: 1px solid rgba(190, 211, 235, 0.07);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(16, 19, 24, 0.66);
  color: #b9c3cd;
  font-size: 14px;
  font-weight: 500;
}

.workMain .savedSetsBox .savedListFull {
  gap: 8px;
  margin: 10px 0 0;
}

.workMain .restCard .finishBox {
  margin: 10px 0 12px;
  border: 0;
  border-top: 1px solid rgba(190, 205, 220, 0.06);
  border-radius: 0;
  padding: 11px 0 0;
  background: transparent;
}

.workMain .restCard .finishBox h2 {
  margin-bottom: 0;
}

.workMain .restCard .finishBox h2 span {
  color: #819bb2;
}

.workMain .restCard .finishBox .blueBtn {
  margin-top: 10px;
}

.workMain .restCard .nextExerciseBtn {
  min-height: 56px;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.2;
  border-color: rgba(126, 166, 210, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), transparent 38%),
    linear-gradient(180deg, #254f80 0%, #21466f 48%, #1b3658 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 28px rgba(0, 0, 0, 0.3);
}

.workMain .exerciseCard + .restCard {
  margin-top: 6px;
  padding-top: 12px;
}

.workMain .restCard > .savedSetsBox:first-child,
.workMain .restCard > h3:first-child {
  margin-top: 0;
}

@media (max-width: 390px) {
  .workMain::before {
    width: min(72vw, 270px);
    opacity: 0.035;
  }

  .chooseCard {
    padding: 28px 17px 21px;
  }

  .workoutModule {
    min-height: 92px;
    padding-left: 14px;
    padding-right: 14px;
    grid-template-columns: 34px 1fr;
    gap: 12px;
  }

  .workoutModule img {
    width: 34px;
    height: 34px;
  }

  .workoutModuleCopy {
    padding-right: 52px;
  }
}