/* Shared layout, component styles, theme variants and motion. */
:root {
  font-family: Arial, Helvetica, sans-serif;
  background: #0e1013;
  color: #f6f6f6;
  --lime: #b9ff19;
}
* {
  box-sizing: border-box;
}
body,
h1 {
  margin: 0;
}
main {
  max-width: 920px;
  margin: auto;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}
header {
  justify-content: space-between;
  margin-bottom: 26px;
}
.count-row,
.time-content,
.timer-heading,
h1,
header {
  display: flex;
  align-items: center;
}
h1 {
  font-size: 29px;
}
.accent,
strong {
  color: var(--lime);
}
button {
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  color: inherit;
  background: #22252b;
  touch-action: manipulation;
  min-height: 48px;
  border-radius: 18px;
}
button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
button:active {
  transform: scale(0.97);
}
button:disabled {
  opacity: 0.35;
  cursor: default;
}
.text-button {
  background: none;
  color: #a4a9b3;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 8px;
}
.card {
  background: linear-gradient(130deg, #1a1d22, #111417);
  border: 1px solid #252930;
  padding: 24px;
  margin-bottom: 18px;
}
h2 {
  letter-spacing: 3px;
  color: #a4a9b3;
  margin: 0;
  font-weight: 600;
}
.count-row {
  justify-content: space-between;
  margin: 24px 0;
}
.square {
  width: 64px;
  font-size: 30px;
  flex-shrink: 0;
}
.primary {
  background: var(--lime);
  color: #101400;
  box-shadow: 0 0 30px #b9ff1910;
}
#count {
  font-size: 84px;
  font-weight: 700;
  line-height: 1;
}
.hint {
  text-align: center;
  font-size: 12px;
  color: #a4a9b3;
  margin: 0;
  line-height: 1.5;
}
.timer-heading {
  justify-content: space-between;
}
#duration {
  color: #a4a9b3;
  font-size: 13px;
}
.dial {
  width: min(100%, 260px);
  aspect-ratio: 1;
  position: relative;
  margin: 25px auto;
}
.dial svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
circle {
  fill: none;
  stroke-width: 8;
}
.track {
  stroke: #22262c;
}
#progress {
  stroke: var(--lime);
  stroke-linecap: round;
  stroke-dasharray: 628.319;
  stroke-dashoffset: 628.319;
}
.time-content {
  position: absolute;
  inset: 0;
  flex-direction: column;
  justify-content: center;
}
#time {
  font-size: 64px;
  letter-spacing: -3px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#status {
  font-size: 12px;
  letter-spacing: 3px;
  color: #a4a9b3;
  margin-top: 15px;
}
.done #status,
.done #time {
  color: var(--lime);
}
#toggle {
  flex: 1;
  font-size: 21px;
}
.presets {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.presets button {
  flex: 1;
  border-radius: 12px;
  font-size: 15px;
}
.presets button[aria-pressed="true"] {
  background: var(--lime);
  color: #101400;
}
#toast {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: #30353c;
  padding: 10px 15px;
  border-radius: 15px;
  white-space: nowrap;
  font-size: 13px;
  box-shadow: 0 5px 30px #0008;
}
#undo {
  color: var(--lime);
  background: none;
  margin-left: 12px;
  text-decoration: underline;
}
@media (min-width: 700px) {
  main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  header {
    grid-column: 1/-1;
    margin-bottom: 0;
  }
  .counter {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .count-row {
    margin: 40px 0;
  }
  .card {
    margin-bottom: 0;
  }
}
@media (max-height: 750px) and (max-width: 699px) {
  main {
    padding-top: 16px;
  }
  header {
    margin-bottom: 16px;
  }
  .card {
    padding: 20px;
  }
  .dial {
    width: 210px;
    margin: 18px auto;
  }
  .count-row {
    margin: 18px 0;
  }
  #count {
    font-size: 72px;
  }
}
:root {
  color-scheme: light;
  background: #f4f4f4;
  color: #202020;
  --lime: #dedede;
}
main {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100svh;
  padding: 20px 16px max(20px, env(safe-area-inset-bottom));
}
header {
  margin: 0;
  gap: 16px;
}
h1 {
  font-size: 24px;
}
.accent,
strong {
  color: inherit;
}
.text-button {
  background: #fff;
  border: 1px solid #bbb;
  color: #222;
  font-size: 13px;
  letter-spacing: 0;
  padding: 12px 16px;
  min-height: 48px;
  border-radius: 10px;
}
.card {
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: none;
  border-radius: 14px;
  padding: 20px;
  margin: 0;
}
.timer {
  order: 1;
}
.counter {
  order: 2;
  margin-top: auto;
  display: block;
}
h2 {
  color: #666;
  font-size: 12px;
  letter-spacing: 1px;
}
.primary {
  background: #292929;
  color: #fff;
}
button {
  background: #eee;
  color: #222;
  border-radius: 10px;
}
.dial {
  width: 180px;
  margin: 16px auto;
}
.track {
  stroke: #eee;
}
#progress {
  stroke: #777;
}
#time {
  font-size: 48px;
  color: #222;
  letter-spacing: -2px;
}
#status {
  color: #555;
  letter-spacing: 1px;
}
.done #status,
.done #time {
  color: #222;
}
.square {
  width: 72px;
  height: 64px;
}
.count-row {
  margin: 22px 0;
}
#count {
  font-size: 72px;
}
.hint {
  color: #666;
}
.timer-heading #duration {
  color: #555;
}
#toast,
.presets button[aria-pressed="true"] {
  background: #292929;
  color: #fff;
}
@media (max-height: 750px) {
  main {
    gap: 12px;
    padding-top: 12px;
  }
  .card {
    padding: 16px;
  }
  .dial {
    width: 145px;
    margin: 10px auto;
  }
  .count-row {
    margin: 16px 0;
  }
  #count {
    font-size: 64px;
  }
}
@media (orientation: landscape) and (min-width: 600px) {
  main {
    max-width: 960px;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 12px;
    padding: 12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }
  header {
    grid-column: 1/-1;
    margin: 0;
  }
  h1 {
    font-size: 22px;
  }
  .text-button {
    min-height: 44px;
    padding: 10px 14px;
  }
  .card {
    padding: 14px;
    margin: 0;
    min-width: 0;
  }
  .timer {
    grid-column: 1;
    grid-row: 2;
  }
  .counter {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .dial {
    width: 112px;
    margin: 8px auto;
  }
  #time {
    font-size: 36px;
  }
  #status {
    font-size: 10px;
    margin-top: 7px;
    letter-spacing: 1px;
  }
  #toggle {
    font-size: 18px;
    min-height: 48px;
  }
  .presets {
    gap: 6px;
    margin-top: 8px;
  }
  .presets button {
    min-height: 44px;
    font-size: 13px;
  }
  .count-row {
    margin: 24px 0;
    gap: 12px;
  }
  .count-row .square {
    width: 64px;
    height: 64px;
  }
  #count {
    font-size: 72px;
  }
  .hint {
    font-size: 11px;
  }
}
#duration {
  display: none;
}
.rest-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}
.rest-controls #toggle {
  width: 100%;
  height: 48px;
  min-height: 48px;
  font-size: 18px;
}
.rest-controls .chevron {
  margin-left: 5px;
  color: #666;
}
#rest-choice[aria-expanded="true"] .chevron,
.rest-controls details[open] .chevron {
  transform: rotate(180deg);
}
.rest-controls .presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.reset-secondary {
  width: 100%;
  margin-top: 8px;
  min-height: 44px;
  background: #fff;
  border: 1px solid #ccc;
  font-size: 13px;
}
.counter {
  margin-top: 0;
}
.rest-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 220px;
  max-width: calc(100vw - 64px);
  padding: 12px;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 12px;
  box-shadow: 0 8px 24px #0002;
  z-index: 5;
}
.rest-controls .rest-menu .presets {
  margin: 0;
}
@media (orientation: portrait) {
  main {
    min-height: 0;
  }
  .counter {
    margin-top: 0;
  }
}
@media (orientation: landscape) and (min-width: 600px) {
  main {
    grid-template-rows: auto auto;
    align-content: start;
  }
  .counter {
    margin: 0;
  }
}
.rest-picker {
  position: relative;
  min-width: 0;
}
#rest-choice {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 48px;
  font-size: 15px;
  font-weight: 600;
  background: #eee;
  color: #222;
}
#rest-choice .chevron {
  margin-left: 5px;
  color: #666;
}
.rest-menu[hidden] {
  display: none !important;
}
.rest-controls .rest-menu .presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rest-controls {
  position: relative;
  z-index: 2;
}
:root {
  color-scheme: dark;
  color: #fff;
  background: #121726;
  --lime: #c5b5ff;
  --lime: #fff;
}
body {
  background: transparent;
  min-height: 100svh;
}
#wallpaper {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 10% 10%, #68539a, transparent 55%),
    radial-gradient(ellipse at 90% 70%, #225e64, transparent 60%), #151b30;
  background-size: cover;
  background-position: 50%;
}
#wallpaper:after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 24, 0.46);
}
.card {
  background: rgba(24, 30, 46, 0.7);
  border: 1px solid hsla(0, 0%, 100%, 0.22);
  border-radius: 28px;
  box-shadow:
    inset 0 1px #ffffff12,
    0 10px 30px #0002;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
h1 {
  letter-spacing: -1px;
}
.accent,
strong {
  color: #d4c7ff;
}
#status,
.hint,
h2 {
  color: #d1d6e3;
  text-shadow: 0 1px 4px #0009;
}
#time,
.done #time {
  color: #fff;
}
.done #status {
  color: #d4c7ff;
}
.track {
  stroke: #ffffff16;
}
#progress {
  stroke: #c5b5ff;
}
.text-button {
  border: 1px solid #ffffff28;
  background: #ffffff14;
  color: #fff;
  border-radius: 18px;
}
button {
  background: #ffffff16;
  color: #fff;
  border-radius: 20px;
  transition:
    transform 0.12s,
    background 0.12s;
}
button:active {
  transform: scale(0.95);
}
.primary {
  background: #c5b5ff;
  color: #241641;
  box-shadow: none;
}
#plus {
  border-radius: 24px;
  font-size: 38px;
}
#minus {
  border-radius: 50%;
  background: #ffffff12;
}
#rest-choice,
.rest-controls #toggle {
  border-radius: 18px;
}
#rest-choice {
  background: #ffffff18;
  color: #fff;
}
#rest-choice .chevron {
  color: #ddd;
}
#count {
  font-weight: 750;
  letter-spacing: -3px;
}
.rest-menu {
  background: #252b40;
  border: 1px solid #ffffff30;
  border-radius: 22px;
  box-shadow: 0 12px 36px #0006;
}
.presets button[aria-pressed="true"] {
  background: #c5b5ff;
  color: #241641;
}
.reset-secondary {
  background: transparent;
  border-color: #ffffff30;
  color: #fff;
  border-radius: 15px;
}
button:focus-visible {
  outline-color: #d4c7ff;
}
.appearance {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 4px 0;
}
.appearance button {
  font-size: 13px;
  min-height: 44px;
  padding: 10px 16px;
  background: #ffffff12;
  border: 1px solid #ffffff20;
}
.appearance p {
  flex-basis: 100%;
  text-align: center;
  font-size: 12px;
  color: #d1d6e3;
  margin: 0;
}
.appearance p:empty {
  display: none;
}
[hidden] {
  display: none !important;
}
#toast {
  background: #252b40;
  border: 1px solid #ffffff30;
  box-shadow: 0 8px 25px #0005;
}
#undo {
  color: #d4c7ff;
}
@media (orientation: landscape) and (min-width: 600px) {
  .appearance,
  .settings-entry {
    grid-column: 1/-1;
    grid-row: 3;
  }
  .card {
    border-radius: 22px;
  }
}
#wallpaper:after {
  background: rgba(0, 0, 0, 0.3);
}
.card {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid hsla(0, 0%, 100%, 0.34);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow:
    inset 0 1px #ffffff20,
    0 8px 26px #0002;
}
#count,
#status,
#time,
.accent,
.done #status,
.hint,
h2,
strong {
  color: #fff;
}
#count,
#time {
  text-shadow: 0 2px 10px #0005;
}
.track {
  stroke: #ffffff25;
}
#progress {
  stroke: #fff;
}
.presets button[aria-pressed="true"],
.primary {
  background: #f4f4f4;
  color: #181818;
}
#minus,
#rest-choice,
.appearance button,
.text-button {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
}
.appearance button,
.text-button {
  border-color: #ffffff40;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
#toast,
.rest-menu {
  background: rgba(25, 25, 25, 0.96);
  border-color: #ffffff40;
}
.appearance p {
  color: #fff;
  text-shadow: 0 1px 4px #000;
}
button:focus-visible {
  outline-color: #fff;
}
.rest-menu {
  background: hsla(0, 0%, 6%, 0.42);
  border: 1px solid hsla(0, 0%, 100%, 0.34);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px #ffffff20,
    0 10px 30px #0003;
}
.rest-menu .presets button {
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  border: 1px solid #ffffff16;
  border-radius: 16px;
}
.rest-menu .presets button[aria-pressed="true"] {
  background: #f4f4f4;
  color: #181818;
  border-color: transparent;
}
.rest-menu .reset-secondary {
  background: rgba(0, 0, 0, 0.18);
  border-color: #ffffff30;
  color: #fff;
}
.rest-menu {
  background: #f2f2f2;
  color: #171717;
  border: 1px solid #fff;
  box-shadow: 0 12px 32px #0005;
}
.rest-menu .presets button {
  background: #dedede;
  color: #202020;
  border: 1px solid transparent;
}
.rest-menu .presets button[aria-pressed="true"] {
  background: #252525;
  color: #fff;
  border-color: #252525;
}
.rest-menu .reset-secondary {
  background: #f2f2f2;
  border-color: #aaa;
  color: #222;
}
.rest-menu button:focus-visible {
  outline-color: #222;
}
#minus,
.theme-switch {
  border-radius: 24px;
}
.theme-switch {
  display: flex;
  gap: 3px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid #ffffff30;
  padding: 3px;
  flex-basis: 100%;
  max-width: 220px;
  margin: 0 calc(50% - 110px);
}
.appearance .theme-switch button {
  min-height: 38px;
  border: 0;
  background: transparent;
  padding: 8px 14px;
  font-size: 12px;
}
.appearance .theme-switch button[aria-pressed="true"] {
  background: #f4f4f4;
  color: #191919;
}
body.expressive {
  color-scheme: light;
  background: #f7f3ff;
  color: #281c3c;
}
.expressive #wallpaper {
  visibility: hidden;
}
.expressive .card {
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 30px;
}
.expressive .card,
.expressive .timer {
  background: #eee5fc;
}
.expressive .counter {
  background: #e3eee6;
}
.expressive #status,
.expressive .hint,
.expressive h2 {
  color: #584a68;
  text-shadow: none;
}
.expressive #count,
.expressive #time {
  color: #281c3c;
  text-shadow: none;
}
.expressive .accent,
.expressive strong {
  color: #6750a4;
}
.expressive #progress {
  stroke: #7954b3;
}
.expressive .track {
  stroke: #d9c9ee;
}
.expressive .primary {
  background: #6750a4;
  color: #fff;
}
.expressive #minus {
  background: #cbded0;
  color: #254b35;
}
.expressive #plus {
  background: #256744;
  color: #fff;
}
.expressive #rest-choice {
  background: #dbcaee;
  color: #332345;
}
.expressive #rest-choice .chevron {
  color: #584a68;
}
.expressive .text-button {
  color: #332345;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.expressive .appearance .theme-switch,
.expressive .text-button {
  background: #e7dcf5;
  border: 0;
}
.expressive .appearance .theme-switch button {
  color: #584a68;
}
.expressive .appearance .theme-switch button[aria-pressed="true"] {
  background: #6750a4;
  color: #fff;
}
.expressive .appearance #photo-choice,
.expressive .appearance #photo-remove {
  display: none;
}
.expressive .appearance p {
  color: #584a68;
  text-shadow: none;
}
.expressive button:focus-visible {
  outline-color: #6750a4;
}
.settings-entry {
  order: 3;
  display: flex;
  justify-content: flex-end;
}
.settings-entry button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: #0004;
  color: #fff;
  border: 1px solid #ffffff35;
  font-size: 24px;
}
#settings-dialog {
  width: calc(min(360px, 100vw - 32px));
  max-height: calc(100svh - 32px);
  overflow: auto;
  border: 1px solid #ddd;
  border-radius: 24px;
  background: #f2f2f2;
  color: #222;
  padding: 20px;
  box-shadow: 0 18px 60px #0005;
}
#settings-dialog::backdrop {
  background: #0006;
}
.settings-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.settings-heading h2 {
  font-size: 18px;
  letter-spacing: 0;
  text-shadow: none;
  color: #222;
}
.settings-heading button {
  background: #e1e1e1;
  color: #222;
  width: 44px;
  height: 44px;
  font-size: 18px;
}
.settings-heading + .appearance {
  padding: 0;
  gap: 10px;
}
#settings-dialog .theme-switch {
  margin: 0;
  flex-basis: 100%;
  background: #dedede;
  border: 0;
}
#settings-dialog .theme-switch button {
  flex: 1;
  color: #444;
  background: none;
}
#settings-dialog .appearance > button {
  background: #dedede;
  border: 0;
  color: #222;
  flex: 1;
  white-space: nowrap;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#settings-dialog .appearance p {
  color: #444;
  text-shadow: none;
}
.expressive .settings-entry button {
  background: #e7dcf5;
  color: #332345;
  border: 0;
}
#settings-open svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
  stroke: none;
}
#settings-open {
  display: grid;
  place-items: center;
}
#settings-dialog .theme-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: none;
  border-radius: 20px;
  padding: 5px;
  gap: 5px;
}
#settings-dialog .theme-switch button {
  min-height: 48px;
  white-space: normal;
  line-height: 1.25;
  border-radius: 16px;
}
body[data-theme="precision"] {
  font-family: Manrope, system-ui, sans-serif;
}
body[data-theme="bold"],
body[data-theme="soft"] {
  font-family: Outfit, system-ui, sans-serif;
}
body[data-theme="precision"] #count,
body[data-theme="precision"] #time {
  font-weight: 400;
}
body[data-theme="precision"] .card {
  border-radius: 24px;
  background: #00000016;
}
body[data-theme="precision"] circle {
  stroke-width: 3;
}
body[data-theme="precision"] #rest-choice,
body[data-theme="precision"] #toggle {
  border-radius: 14px;
  font-size: 16px;
}
body[data-theme="precision"] h2 {
  font-size: 10px;
  letter-spacing: 2px;
}
body[data-theme="bold"] #time {
  font-weight: 750;
}
body[data-theme="bold"] #count {
  font-weight: 800;
}
body[data-theme="bold"] .card {
  border-radius: 32px;
  background: #00000038;
}
body[data-theme="bold"] #rest-choice,
body[data-theme="bold"] #toggle {
  border-radius: 24px;
}
body:not(.expressive) #toggle {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: #171717;
}
body:not(.expressive) #toggle:before {
  content: "";
  position: absolute;
  inset: 1.5%;
  background: #f4f4f4;
  border-radius: inherit;
  z-index: -1;
}
body[data-theme="sport"] {
  font-family:
    Barlow Condensed,
    system-ui,
    sans-serif;
  background: #f5f0e7;
  color: #24231f;
}
body[data-theme="sport"] .timer {
  background: #e7e1d7;
  border-radius: 36px 36px 16px;
}
body[data-theme="sport"] .counter {
  background: #ff7139;
  border-radius: 16px 36px 36px;
}
body[data-theme="sport"] h1 {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -1px;
}
body[data-theme="sport"] #time {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -2px;
}
body[data-theme="sport"] #count {
  font-size: 96px;
  font-weight: 900;
  letter-spacing: -2px;
}
body[data-theme="sport"] h2 {
  font-size: 13px;
  letter-spacing: 1.8px;
}
body[data-theme="sport"] .hint {
  font-family: system-ui, sans-serif;
  font-size: 10px;
}
body[data-theme="sport"] #status {
  font-size: 13px;
}
body[data-theme="sport"] #plus,
body[data-theme="sport"] .primary {
  background: #24231f;
  color: #fff;
}
body[data-theme="sport"] #minus {
  background: #ffffff55;
  color: #24231f;
}
body[data-theme="sport"] #rest-choice,
body[data-theme="sport"] #settings-open,
body[data-theme="sport"] .text-button {
  background: #d4cbbb;
  color: #24231f;
}
body[data-theme="sport"] #progress {
  stroke: #24231f;
}
body[data-theme="sport"] .track {
  stroke: #bfb7a9;
}
body[data-theme="sport"] #count,
body[data-theme="sport"] #status,
body[data-theme="sport"] #time,
body[data-theme="sport"] .accent,
body[data-theme="sport"] .hint,
body[data-theme="sport"] h2,
body[data-theme="sport"] strong {
  color: #24231f;
}
body[data-theme="sport"] .text-button {
  font-size: 16px;
}
body[data-theme="soft"] {
  background: #f3f6fb;
  color: #173356;
}
body[data-theme="soft"] .timer {
  background: #e2ebf7;
  border-radius: 36px 36px 16px;
}
body[data-theme="soft"] .counter {
  background: #e5edb8;
  border-radius: 16px 36px 36px;
}
body[data-theme="soft"] #count,
body[data-theme="soft"] #time {
  color: #173356;
  font-weight: 600;
}
body[data-theme="soft"] #plus,
body[data-theme="soft"] .primary {
  background: #254d7b;
  color: #fff;
}
body[data-theme="soft"] #minus {
  background: #cad691;
  color: #173356;
}
body[data-theme="soft"] #rest-choice,
body[data-theme="soft"] #settings-open,
body[data-theme="soft"] .text-button {
  background: #cbdcf0;
  color: #173356;
}
body[data-theme="soft"] #progress {
  stroke: #254d7b;
}
body[data-theme="soft"] .track {
  stroke: #b2c9e3;
}
body[data-theme="soft"] #status,
body[data-theme="soft"] .hint,
body[data-theme="soft"] h2 {
  color: #173356;
}
body[data-theme="soft"] .accent,
body[data-theme="soft"] strong {
  color: #254d7b;
}
.expressive #rest-choice,
.expressive #toggle {
  border-radius: 28px;
}
.rest-controls {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#rest-choice,
#toggle {
  height: 48px;
  min-height: 48px;
}
.expressive .dial {
  background: #00000006;
  border-radius: 44% 56% 53% 47%/48% 44% 56% 52%;
}
#settings-dialog {
  font-family: system-ui, sans-serif;
}
#settings-dialog .theme-switch button[aria-pressed="true"] {
  background: #252525;
  color: #fff;
}
@media (orientation: landscape) and (min-width: 600px) {
  body[data-theme="sport"] #time {
    font-size: 44px;
  }
  body[data-theme="sport"] #count {
    font-size: 80px;
  }
  body[data-theme="sport"] h1 {
    font-size: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}
.dial {
  isolation: isolate;
}
.dial:before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff14, transparent 72%);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
.dial.resting:before {
  animation: rest-breathe 4s ease-in-out infinite;
}
.expressive .dial:before {
  background: radial-gradient(circle, #6750a41c, transparent 72%);
}
body[data-theme="sport"] .dial:before {
  background: radial-gradient(circle, #ff713930, transparent 72%);
}
body[data-theme="soft"] .dial:before {
  background: radial-gradient(circle, #254d7b22, transparent 72%);
}
.dial.done #status {
  font-weight: 750;
  animation: ready-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.dial.done svg {
  animation: ready-ring 0.8s ease-out both;
}
.dial.done:before {
  animation: ready-glow 1.2s ease-out both;
}
.dial.paused:before {
  opacity: 0;
}
@keyframes ready-pop {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.9);
  }
  65% {
    opacity: 1;
    transform: translateY(0) scale(1.08);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ready-ring {
  0% {
    opacity: 0.5;
  }
  45% {
    opacity: 1;
    filter: drop-shadow(0 0 5px #ffffff55);
  }
  to {
    opacity: 1;
    filter: none;
  }
}
@keyframes ready-glow {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(1.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dial.done #status,
  .dial.done svg,
  .dial.done:before,
  .dial.resting:before {
    animation: none;
  }
  .dial.resting:before {
    opacity: 0.4;
  }
}
.dial.resting:before {
  animation: none;
  opacity: 0;
}
.dial.resting.second-pulse:before {
  inset: 3%;
  z-index: 0;
  background: radial-gradient(circle, transparent 32%, #ffffff26 65%, transparent 76%);
}
.time-content {
  z-index: 1;
}
.expressive .dial.resting.second-pulse:before {
  background: radial-gradient(circle, transparent 32%, #6750a42e 65%, transparent 76%);
}
body[data-theme="sport"] .dial.resting.second-pulse:before {
  background: radial-gradient(circle, transparent 32%, #ff713942 65%, transparent 76%);
}
body[data-theme="soft"] .dial.resting.second-pulse:before {
  background: radial-gradient(circle, transparent 32%, #254d7b30 65%, transparent 76%);
}
@keyframes second-light {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  18% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(1.04);
  }
}
#toast,
body[data-theme="soft"] #toast,
body[data-theme="sport"] #toast {
  display: flex;
  justify-content: center;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  z-index: 10;
}
#undo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 44px;
  min-width: 100px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #292929;
  color: #fff;
  border: 1px solid #ffffff38;
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 3px 10px #0002;
}
#undo svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-theme="sport"] #undo {
  background: #d5cdbc;
  color: #24231f;
  border-color: transparent;
}
body[data-theme="soft"] #undo {
  background: #cdddf0;
  color: #173356;
  border-color: transparent;
}
.rest-menu {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body[data-theme="precision"] .rest-menu {
  background: #f1f2f3;
  border: 1px solid #d2d5d8;
  border-radius: 18px;
  box-shadow: 0 8px 24px #0003;
}
body[data-theme="precision"] .rest-menu button {
  border-radius: 10px;
  font-weight: 600;
}
body[data-theme="bold"] .rest-menu {
  background: #ededee;
  border: 1px solid #d4d4d6;
  border-radius: 28px;
  box-shadow: 0 10px 28px #0004;
}
body[data-theme="bold"] .rest-menu button {
  border-radius: 20px;
  font-weight: 700;
}
body[data-theme="bold"] .presets button,
body[data-theme="precision"] .presets button {
  background: #dcdde0;
  color: #222;
}
body[data-theme="bold"] .presets button[aria-pressed="true"],
body[data-theme="precision"] .presets button[aria-pressed="true"] {
  background: #252525;
  color: #fff;
}
body[data-theme="bold"] .reset-secondary,
body[data-theme="precision"] .reset-secondary {
  background: transparent;
  color: #222;
  border: 1px solid #aeb0b4;
}
body[data-theme="sport"] .rest-menu {
  background: #f5f0e7;
  border: 1px solid #d4cbbb;
  border-radius: 28px 28px 12px;
  box-shadow: 0 8px 24px #24231f30;
}
body[data-theme="sport"] .presets button {
  background: #d4cbbb;
  color: #24231f;
  border-radius: 18px;
  font-weight: 700;
}
body[data-theme="sport"] .presets button[aria-pressed="true"] {
  background: #24231f;
  color: #fff;
}
body[data-theme="sport"] .reset-secondary {
  background: transparent;
  color: #24231f;
  border: 1px solid #bfb7a9;
  border-radius: 18px;
}
body[data-theme="soft"] .rest-menu {
  background: #f3f6fb;
  border: 1px solid #b2c9e3;
  border-radius: 28px;
  box-shadow: 0 8px 24px #17335626;
}
body[data-theme="soft"] .presets button {
  background: #cbdcf0;
  color: #173356;
  border-radius: 22px;
  font-weight: 600;
}
body[data-theme="soft"] .presets button[aria-pressed="true"] {
  background: #254d7b;
  color: #fff;
}
body[data-theme="soft"] .reset-secondary {
  background: transparent;
  color: #173356;
  border: 1px solid #b2c9e3;
  border-radius: 22px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-actions .settings-entry {
  display: flex;
  order: 0;
  margin: 0;
  padding: 0;
}
#keep-awake,
.header-actions #settings-open {
  flex-shrink: 0;
}
.header-actions #new {
  white-space: nowrap;
}
#settings-dialog {
  font-family: inherit;
  background: var(--settings-bg);
  color: var(--settings-ink);
  border: 1px solid var(--settings-border);
  border-radius: var(--settings-radius);
  box-shadow: 0 12px 40px #0003;
}
body[data-theme="precision"] {
  --settings-bg: #f1f2f3;
  --settings-border: #d2d5d8;
  --settings-radius: 18px;
  --settings-button-radius: 10px;
}
body[data-theme="bold"],
body[data-theme="precision"] {
  --settings-ink: #222;
  --settings-muted: #dcdde0;
  --settings-active: #252525;
  --settings-on-active: #fff;
}
body[data-theme="bold"] {
  --settings-bg: #ededee;
  --settings-border: #d4d4d6;
  --settings-radius: 28px;
  --settings-button-radius: 20px;
}
body[data-theme="sport"] {
  --settings-bg: #f5f0e7;
  --settings-ink: #24231f;
  --settings-border: #d4cbbb;
  --settings-muted: #d4cbbb;
  --settings-active: #24231f;
  --settings-on-active: #fff;
  --settings-radius: 28px 28px 12px 28px;
  --settings-button-radius: 18px;
}
body[data-theme="soft"] {
  --settings-bg: #f3f6fb;
  --settings-ink: #173356;
  --settings-border: #b2c9e3;
  --settings-muted: #cbdcf0;
  --settings-active: #254d7b;
  --settings-on-active: #fff;
  --settings-radius: 28px;
  --settings-button-radius: 22px;
}
#settings-dialog .settings-heading h2 {
  color: var(--settings-ink);
  letter-spacing: 0.04em;
  font-family: inherit;
}
#settings-dialog .settings-heading button {
  color: var(--settings-ink);
}
#settings-dialog .settings-heading button,
#settings-dialog .theme-switch {
  background: var(--settings-muted);
  border-radius: var(--settings-button-radius);
}
#settings-dialog .theme-switch button {
  color: var(--settings-ink);
  border-radius: var(--settings-button-radius);
  font-family: inherit;
}
#settings-dialog .theme-switch button[aria-pressed="true"] {
  background: var(--settings-active);
  color: var(--settings-on-active);
}
#settings-dialog .appearance > button {
  background: var(--settings-muted);
  color: var(--settings-ink);
  border-radius: var(--settings-button-radius);
  font-family: inherit;
}
#settings-dialog .appearance p {
  color: var(--settings-ink);
}
#settings-dialog button:focus-visible {
  outline: 2px solid var(--settings-active);
  outline-offset: 3px;
}
.dial.resting.second-pulse:before {
  animation: second-light 0.65s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .dial.resting.second-pulse:before {
    animation: none;
    opacity: 0;
  }
}
@media (orientation: landscape) and (min-width: 600px) {
  .counter {
    display: grid;
    justify-content: normal;
    grid-template-rows: auto 1fr auto;
  }
  .counter > h2 {
    align-self: start;
  }
  .counter .count-row {
    align-self: center;
  }
  .counter-actions {
    grid-column: 2;
    grid-row: 3;
  }
}
.counter-actions {
  order: 3;
  justify-content: flex-end;
  gap: 10px;
}
.counter-actions #new {
  font-size: 13px;
  min-height: 44px;
  padding: 10px 16px;
}
body[data-theme="midnight"] {
  font-family:
    Space Grotesk,
    system-ui,
    sans-serif;
  background: #17141f;
  color: #f8f0fb;
  color-scheme: dark;
  --settings-bg: #262130;
  --settings-ink: #f8f0fb;
  --settings-border: #4f425c;
  --settings-muted: #3d3249;
  --settings-active: #f2b1d9;
  --settings-on-active: #352039;
  --settings-radius: 30px;
  --settings-button-radius: 22px;
}
body[data-theme="midnight"] .card {
  border: 0;
  box-shadow: none;
}
body[data-theme="midnight"] .timer {
  background: #30263d;
  border-radius: 38px 38px 18px;
}
body[data-theme="midnight"] .counter {
  background: #24423d;
  border-radius: 18px 38px 38px;
}
body[data-theme="midnight"] h1 {
  font-family: Sora, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -1.5px;
}
body[data-theme="midnight"] #count,
body[data-theme="midnight"] #time {
  font-family: Sora, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -3px;
  color: #f8f0fb;
  text-shadow: none;
}
body[data-theme="midnight"] h2 {
  color: #e3d5ed;
  font-weight: 600;
  letter-spacing: 1.2px;
  font-size: 11px;
  text-shadow: none;
}
body[data-theme="midnight"] #status,
body[data-theme="midnight"] .hint {
  color: #dfd5e5;
  text-shadow: none;
}
body[data-theme="midnight"] .counter .hint,
body[data-theme="midnight"] .counter h2 {
  color: #d3eee5;
}
body[data-theme="midnight"] .primary {
  background: #f2b1d9;
  color: #352039;
  font-weight: 700;
}
body[data-theme="midnight"] #plus {
  background: #a9e8d0;
  color: #153c30;
  border-radius: 22px;
}
body[data-theme="midnight"] #minus {
  background: #385a50;
  color: #d3eee5;
  border-radius: 22px;
}
body[data-theme="midnight"] #rest-choice,
body[data-theme="midnight"] #settings-open,
body[data-theme="midnight"] .text-button {
  background: #493752;
  color: #f8e5f3;
  border: 0;
}
body[data-theme="midnight"] #rest-choice .chevron {
  color: #f2b1d9;
}
body[data-theme="midnight"] #progress {
  stroke: #f2b1d9;
}
body[data-theme="midnight"] .track {
  stroke: #64506e;
}
body[data-theme="midnight"] .dial {
  background: #f2b1d908;
}
body[data-theme="midnight"] .dial.resting.second-pulse:before {
  background: radial-gradient(circle, transparent 32%, #f2b1d94a 65%, transparent 76%);
}
body[data-theme="midnight"] .accent,
body[data-theme="midnight"] strong {
  color: inherit;
}
body[data-theme="midnight"] .rest-menu {
  background: #262130;
  border: 1px solid #4f425c;
  border-radius: 28px;
  box-shadow: 0 10px 28px #0005;
}
body[data-theme="midnight"] .presets button {
  background: #493752;
  color: #f8e5f3;
  border-radius: 22px;
}
body[data-theme="midnight"] .presets button[aria-pressed="true"] {
  background: #f2b1d9;
  color: #352039;
}
body[data-theme="midnight"] .reset-secondary {
  background: transparent;
  color: #f8e5f3;
  border: 1px solid #8d749b;
  border-radius: 22px;
}
body[data-theme="midnight"] #toast {
  background: transparent;
  border: 0;
}
body[data-theme="midnight"] #undo {
  background: #493752;
  color: #f8e5f3;
  border: 1px solid #705982;
}
body[data-theme="midnight"] button:focus-visible {
  outline-color: #f2b1d9;
}
#settings-dialog .theme-switch button[data-theme="midnight"] {
  grid-column: 1/-1;
}
.session-settings {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--settings-border);
}
.awake-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  color: var(--settings-ink);
  font-size: 14px;
  cursor: pointer;
}
.option-detail {
  display: block;
  font-size: 12px;
  margin-top: 3px;
  opacity: 0.75;
}
#keep-awake {
  width: 24px;
  height: 24px;
  accent-color: var(--settings-active);
  cursor: pointer;
}
#wake-status {
  font-size: 12px;
  line-height: 1.4;
  color: var(--settings-ink);
  margin: 8px 0 0;
}
#wake-status:empty {
  display: none;
}

/* Optional sessions access stays beside the existing secondary actions. */
.counter-actions #sessions-open {
  font-size: 13px;
  min-height: 44px;
  padding: 10px 16px;
  white-space: nowrap;
}
#sessions-dialog {
  font-family: inherit;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  overflow: auto;
  padding: 20px;
  background: var(--settings-bg);
  color: var(--settings-ink);
  border: 1px solid var(--settings-border);
  border-radius: var(--settings-radius);
  box-shadow: 0 12px 40px #0003;
}
#sessions-dialog::backdrop {
  background: #0006;
}
#sessions-dialog h2 {
  color: var(--settings-ink);
  letter-spacing: 0.04em;
}
#sessions-close {
  background: var(--settings-muted);
  color: var(--settings-ink);
  border-radius: var(--settings-button-radius);
}
#sessions-dialog button:focus-visible {
  outline-color: var(--settings-active);
}
.sessions-empty {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
/* Session details appear only after a session has been selected. */
#session-context {
  margin-top: 12px;
}
#session-exercise {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}
#session-plan {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
}
#set-editor {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #ffffff30;
}
#logged-set-title {
  margin: 0 0 8px;
  font-size: 12px;
}
.session-outline {
  font-size: 13px;
  line-height: 1.6;
  padding-left: 20px;
  margin: 16px 0;
}
#start-pecs,
#session-end,
#session-free {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  margin-top: 10px;
  border-radius: var(--settings-button-radius);
  background: var(--settings-active);
  color: var(--settings-on-active);
}
#session-free {
  background: var(--settings-muted);
  color: var(--settings-ink);
}
#session-message {
  font-size: 13px;
  line-height: 1.4;
  margin: 12px 0 0;
}
#session-message:empty {
  display: none;
}
body.expressive #set-editor {
  border-color: #0002;
}
@media (orientation: landscape) and (min-width: 600px) {
  .counter:has(#session-context:not([hidden])) {
    grid-template-rows: auto 1fr auto auto;
  }
  .counter:has(#session-context:not([hidden])) .count-row {
    margin: 12px 0;
  }
  #session-exercise {
    font-size: 16px;
  }
}

/* Compact last-set summary and a thumb-accessible edit sheet. */
#set-editor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#logged-set-title {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}
#edit-set {
  min-height: 44px;
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 14px;
  background: #ffffff20;
  color: inherit;
  flex-shrink: 0;
}
body.expressive #edit-set {
  background: #00000010;
}
#set-edit-dialog {
  position: fixed;
  inset: auto 0 0;
  margin: 0 auto;
  width: min(480px, 100%);
  max-height: 90svh;
  overflow: auto;
  padding: 24px 24px max(24px, env(safe-area-inset-bottom));
  font-family: inherit;
  color: var(--settings-ink);
  background: var(--settings-bg);
  border: 1px solid var(--settings-border);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -8px 40px #0003;
}
#set-edit-dialog::backdrop {
  background: #0005;
}
#set-edit-title {
  color: var(--settings-ink);
  font-size: 20px;
  letter-spacing: 0;
  text-shadow: none;
  margin-bottom: 24px;
}
.edit-field {
  margin-top: 20px;
}
.edit-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
}
.edit-stepper {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
}
.edit-stepper button {
  height: 48px;
  border-radius: 16px;
  background: var(--settings-muted);
  color: var(--settings-ink);
  font-size: 26px;
}
.edit-stepper input {
  width: 100%;
  height: 52px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--settings-border);
  background: var(--settings-muted);
  color: var(--settings-ink);
  font: inherit;
  font-size: 24px;
  text-align: center;
}
#weight-step-hint {
  font-size: 11px;
  margin: 8px 0 0;
  opacity: 0.7;
}
#set-edit-done {
  width: 100%;
  min-height: 48px;
  border-radius: var(--settings-button-radius);
  margin-top: 24px;
  background: var(--settings-active);
  color: var(--settings-on-active);
}
#set-edit-dialog :focus-visible {
  outline: 2px solid var(--settings-active);
  outline-offset: 3px;
}
@media (orientation: landscape) and (max-height: 500px) {
  #set-edit-dialog {
    padding-top: 16px;
  }
  #set-edit-title {
    margin-bottom: 12px;
  }
  .edit-field {
    margin-top: 12px;
  }
  #set-edit-done {
    margin-top: 16px;
  }
}

/* Session hierarchy: exercise, upcoming set, completed count, last-set edit. */
.counter.session-mode #session-context {
  margin-top: 0;
}
#session-exercise {
  font-size: 19px;
  letter-spacing: 0;
  font-weight: 700;
  line-height: 1.2;
}
@media (orientation: landscape) and (min-width: 600px) {
  .counter.session-mode {
    grid-template-rows: auto 1fr auto auto;
  }
  .counter.session-mode #session-exercise {
    font-size: 16px;
  }
}

/* Previous/next navigation is limited to logged sets of the exercise. */
.set-edit-nav {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.set-edit-nav #set-edit-title {
  text-align: center;
  margin: 0;
}
.set-edit-nav button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  font-size: 32px;
  line-height: 1;
  border-radius: 14px;
  background: var(--settings-muted);
  color: var(--settings-ink);
}
.set-edit-nav button:disabled {
  opacity: 0.25;
}
@media (orientation: landscape) and (max-height: 500px) {
  .set-edit-nav {
    margin-bottom: 12px;
  }
}
/* Exercise and upcoming set share the top row of the session card. */
.counter.session-mode #session-context {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.counter.session-mode #session-exercise {
  flex: 1;
  min-width: 0;
}
.counter.session-mode #session-plan {
  margin: 0;
  flex: 0 1 52%;
  text-align: right;
  font-size: 12px;
  line-height: 1.4;
}

/* Completed sets in the heading; the next set below the counter. */
.counter.session-mode #session-count-caption {
  margin: 0;
  flex: 0 1 48%;
  text-align: right;
  font-size: 12px;
  line-height: 1.4;
}
.counter.session-mode #session-plan {
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
}
.counter.session-mode #session-count-caption {
  font-weight: 700;
}

/* The completed label belongs to the central count; next-set info stays in the heading. */
.count-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.counter.session-mode #session-count-caption {
  flex: none;
  margin: 8px 0 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.counter.session-mode #session-plan {
  margin: 0;
  flex: 0 1 52%;
  text-align: right;
  font-size: 12px;
  line-height: 1.4;
}
@media (orientation: landscape) and (min-width: 600px) {
  .counter.session-mode {
    grid-template-rows: auto 1fr auto;
  }
}

/* Review earlier exercises without moving the live workout counter. */
#session-exercise-list {
  margin: 16px 0;
}
.session-review-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--settings-border);
}
.session-review-item > div {
  min-width: 0;
  flex: 1;
}
.session-review-item strong {
  display: block;
  color: var(--settings-ink);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}
.session-review-item span {
  display: block;
  font-size: 12px;
  opacity: 0.75;
  margin-top: 4px;
}
.session-review-item button {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--settings-button-radius);
  background: var(--settings-muted);
  color: var(--settings-ink);
  font-size: 13px;
  flex-shrink: 0;
}
#edit-exercise-name {
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  margin: -12px 0 20px;
  opacity: 0.75;
}

/* Session templates stay compact; their exercise lists are optional. */
.session-template {
  padding: 16px 0;
  border-bottom: 1px solid var(--settings-border);
}
.session-template:last-child {
  border-bottom: 0;
}
.template-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.template-heading h3 {
  font-size: 18px;
  margin: 0;
  font-weight: 700;
}
.template-heading #start-pecs,
.template-heading #start-back,
.template-heading #start-legs {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 10px 18px;
  border-radius: var(--settings-button-radius);
  background: var(--settings-active);
  color: var(--settings-on-active);
  font-size: 13px;
}
.session-template > p {
  font-size: 12px;
  line-height: 1.4;
  margin: 8px 0;
  opacity: 0.75;
}
.session-template summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 13px;
  cursor: pointer;
  gap: 8px;
}
.session-template summary:before {
  content: "›";
  font-size: 20px;
}
.session-template details[open] summary:before {
  transform: rotate(90deg);
}
.session-template .session-outline {
  margin: 0 0 8px;
}
/* Stronger timer heading across all appearance variants. */
body .timer-heading h2 {
  font-weight: 700;
}

/* Timer and exercise headings share one title hierarchy. */
body .timer-heading h2 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}
@media (orientation: landscape) and (min-width: 600px) {
  body .timer-heading h2 {
    font-size: 16px;
  }
}
/* History is behind Sessions, keeping the workout screen unchanged. */

#history-dialog {
  font: inherit;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  overflow: auto;
  padding: 20px;
  background: var(--settings-bg);
  color: var(--settings-ink);
  border: 1px solid var(--settings-border);
  border-radius: var(--settings-radius);
  box-shadow: 0 12px 40px #0003;
}
#history-dialog::backdrop {
  background: #0006;
}
#history-dialog h2 {
  color: var(--settings-ink);
  letter-spacing: 0;
}
#history-close {
  color: var(--settings-ink);
  background: var(--settings-muted);
  border-radius: var(--settings-button-radius);
}
.history-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border-radius: 20px;
  background: var(--settings-muted);
}
.history-tabs button {
  min-height: 44px;
  border-radius: 16px;
  background: transparent;
  color: var(--settings-ink);
  font-size: 14px;
}
.history-tabs button[aria-pressed="true"] {
  background: var(--settings-active);
  color: var(--settings-on-active);
}
#backup-status {
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.75;
  margin: 12px 0 18px;
}
#history-totals {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
}
.history-session {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 14px;
  margin: 10px 0;
  border-radius: var(--settings-button-radius);
  color: var(--settings-ink);
  background: var(--settings-muted);
}
.history-session strong {
  font-size: 17px;
  color: inherit;
}
.history-session span {
  font-size: 12px;
  opacity: 0.75;
}
#history-progress > label {
  font-size: 12px;
  display: block;
  margin-bottom: 6px;
}
#history-exercise {
  width: 100%;
  min-height: 44px;
  font: inherit;
  font-size: 14px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--settings-border);
  color: var(--settings-ink);
  background: var(--settings-muted);
}
#exercise-comparison {
  padding: 14px 0;
  font-size: 13px;
  line-height: 1.5;
}
.exercise-history-row {
  padding: 12px 0;
  border-top: 1px solid var(--settings-border);
  font-size: 12px;
}
.exercise-history-row strong {
  color: var(--settings-ink);
}
.exercise-history-row p {
  margin: 6px 0 0;
  line-height: 1.6;
}
#history-export,
#history-back {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--settings-button-radius);
  background: var(--settings-muted);
  color: var(--settings-ink);
  font-size: 13px;
}
#history-export {
  margin-top: 18px;
  width: 100%;
}
.history-exercise-detail {
  padding: 12px 0;
  border-bottom: 1px solid var(--settings-border);
}
.history-exercise-detail h4 {
  margin: 0 0 8px;
  font-size: 15px;
}
.history-exercise-detail p {
  font-size: 13px;
  margin: 5px 0;
}
#history-detail-content h3 {
  font-size: 18px;
  line-height: 1.4;
}
.history-empty {
  font-size: 14px;
  line-height: 1.5;
}

/* Separate appearance controls from the three workout actions. */
.counter-actions {
  justify-content: space-between;
  gap: 12px;
}
.counter-actions .settings-entry {
  flex: 0 0 44px;
}
.workout-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.counter-actions #history-open {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .counter-actions {
    gap: 8px;
  }
  .workout-actions {
    gap: 6px;
    flex: 1;
  }
  .counter-actions #history-open,
  .counter-actions #sessions-open,
  .counter-actions #new {
    font-size: 12px;
    padding: 10px;
  }
}
@media (max-width: 360px) {
  .workout-actions {
    flex-wrap: wrap;
  }
  .counter-actions #new {
    white-space: normal;
  }
}
/* Workout recap: compact overview, expandable exercise details. */
.history-tabs {
  grid-template-columns: 1.2fr 1fr 1fr;
}
.history-tabs button {
  font-size: 12px;
  padding: 8px;
}
.summary-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.65;
  margin: 20px 0 8px;
}
#history-detail-content h3 {
  font-size: 25px;
  line-height: 1.15;
  margin: 0 0 20px;
}
.summary-hero {
  padding: 24px;
  border-radius: 24px;
  background: var(--settings-active);
  color: var(--settings-on-active);
}
.summary-hero > span {
  font-size: 10px;
  letter-spacing: 0.13em;
  font-weight: 700;
}
.summary-hero > strong {
  display: block;
  font-size: clamp(32px, 9vw, 46px);
  line-height: 1.15;
  margin: 10px 0;
  letter-spacing: -0.04em;
}
.summary-hero p {
  font-size: 14px;
  margin: 8px 0 0;
  line-height: 1.45;
}
.summary-delta {
  padding-top: 12px;
  border-top: 1px solid currentColor;
}
.summary-note {
  font-size: 11px;
  opacity: 0.7;
  line-height: 1.5;
  margin: 12px 0 20px;
}
.summary-rest {
  padding: 18px;
  border-radius: 20px;
  background: var(--settings-muted);
  margin-bottom: 24px;
}
.summary-rest h4 {
  margin: 0 0 8px;
  font-size: 16px;
}
.summary-rest p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 10px;
}
.summary-rest small {
  display: block;
  font-size: 11px;
  line-height: 1.45;
  opacity: 0.7;
}
.summary-exercise {
  background: var(--settings-muted);
  padding: 16px;
  border-radius: 18px;
  margin: 10px 0;
}
.summary-exercise summary {
  cursor: pointer;
}
.summary-exercise summary strong {
  font-size: 15px;
}
.summary-exercise summary span {
  display: block;
  font-size: 12px;
  opacity: 0.7;
  margin: 6px 0 0 18px;
}
.summary-exercise p {
  font-size: 13px;
  line-height: 1.5;
}
.summary-comparison {
  font-weight: 600;
}
#history-demo {
  background: var(--settings-muted);
  color: var(--settings-ink);
  padding: 14px;
  min-height: 44px;
  width: 100%;
  border-radius: 16px;
  margin-bottom: 18px;
  font-size: 13px;
}
#history-dialog #history-title {
  font-size: 22px;
  font-weight: 700;
}
.summary-exercise summary .summary-comparison {
  opacity: 1;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 10px;
}
/* Stats is a full page; the workout is the primary visual. */
#history-dialog {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  box-sizing: border-box;
}
#history-dialog > * {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
#history-dialog .settings-heading {
  position: sticky;
  top: -20px;
  z-index: 2;
  background: var(--settings-bg);
  padding: 12px 0;
}
#history-detail-content h3 {
  font-size: 36px;
  margin-bottom: 18px;
}
.workout-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 8px;
  margin-bottom: 24px;
}
.workout-strip > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.workout-strip strong {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.workout-strip span {
  font-size: 12px;
  opacity: 0.65;
}
.workout-legend {
  display: flex;
  gap: 16px;
  font-size: 11px;
  margin: 0 0 14px;
}
.legend-previous {
  opacity: 0.45;
}
.workout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}
.workout-card {
  background: var(--settings-muted);
  border-radius: 24px;
  padding: 20px;
  min-width: 0;
}
.workout-card-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  min-height: 42px;
}
.workout-card-heading h4 {
  font-size: 17px;
  line-height: 1.2;
  margin: 0;
  max-width: 70%;
}
.workout-badge {
  border-radius: 20px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
  background: var(--settings-bg);
  white-space: nowrap;
}
.set-graph {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 12px 0 0;
}
.set-column {
  flex: 1;
  min-width: 34px;
  text-align: center;
}
.set-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 4px;
  height: 92px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--settings-border);
}
.set-bar {
  width: 22px;
  border-radius: 6px 6px 0 0;
  position: relative;
  min-height: 2px;
}
.set-bar.today {
  background: var(--settings-active);
  color: var(--settings-on-active);
}
.set-bar.previous {
  background: var(--settings-ink);
  opacity: 0.16;
  width: 12px;
}
.set-bar.today span {
  position: absolute;
  top: 7px;
  width: 100%;
  left: 0;
  font-size: 11px;
  font-weight: 700;
}
.set-column > strong {
  display: block;
  font-size: 16px;
}
.set-column > small {
  font-size: 10px;
  opacity: 0.5;
}
.workout-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 10px;
  opacity: 0.65;
  margin-top: 14px;
}
.workout-values {
  margin-top: 14px;
  font-size: 12px;
}
.workout-values summary {
  cursor: pointer;
  opacity: 0.7;
}
.workout-values p {
  line-height: 1.5;
}
.workout-notes {
  margin: 24px 0;
  opacity: 0.7;
}
#history-export {
  font-size: 11px;
  opacity: 0.65;
}
@media (max-width: 420px) {
  .workout-card {
    padding: 16px;
  }
  .workout-card-heading h4 {
    font-size: 16px;
  }
  .workout-strip strong {
    font-size: 22px;
  }
}
.set-graph {
  padding-top: 32px;
}
.set-column {
  min-width: 48px;
}
.set-bar.today .bar-reps-label {
  top: -30px;
  color: var(--settings-ink);
  line-height: 1.05;
}
.bar-reps-label strong {
  display: block;
  font-size: 13px;
}
.bar-reps-label small {
  display: block;
  font-size: 9px;
  font-weight: 500;
  opacity: 0.65;
  margin-top: 2px;
}
.set-column > strong {
  font-size: 14px;
  white-space: nowrap;
}
.load-basis-label {
  display: block;
  font-size: 9px;
  opacity: 0.65;
  margin: 2px 0;
}
.workout-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.workout-legend > span {
  position: relative;
  padding-left: 18px;
  opacity: 1;
}
.workout-legend > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.legend-today::before {
  background: var(--settings-active);
}
.legend-previous::before {
  background: color-mix(in srgb, var(--settings-ink) 23%, transparent);
}
.workout-legend strong,
.workout-legend small {
  display: block;
}
.workout-legend strong {
  font-size: 12px;
}
.workout-legend small {
  font-size: 10px;
  opacity: 0.65;
  margin-top: 4px;
}
.chart-axis-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  opacity: 0.6;
  margin: 10px 0 0;
}
.set-bars {
  gap: 8px;
}
.set-bar.previous {
  width: 22px;
  opacity: 1;
  background: color-mix(in srgb, var(--settings-ink) 23%, transparent);
}
.set-bar.previous .bar-reps-label {
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  line-height: 1.05;
  color: var(--settings-ink);
  opacity: 0.6;
}
.set-comparison-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 16px;
  font-size: 13px;
}
.set-comparison-table th:first-child {
  width: 26px;
}
.set-comparison-table th,
.set-comparison-table td {
  padding: 10px 5px;
  text-align: center;
  border-bottom: 1px solid var(--settings-border);
}
.set-comparison-table thead strong {
  font-size: 11px;
  display: block;
}
.set-comparison-table thead small {
  font-size: 10px;
  font-weight: 400;
  display: block;
  margin-top: 5px;
  opacity: 0.65;
}
.set-comparison-table td strong,
.set-comparison-table td span {
  display: block;
}
.set-comparison-table td span {
  font-size: 11px;
  margin-top: 4px;
}
.set-comparison-table .previous-cell {
  opacity: 0.7;
}
.set-comparison-table .current-cell {
  background: var(--settings-bg);
}
.comparison-load-note {
  display: block;
  margin-top: 10px;
  opacity: 0.65;
}
.set-column {
  min-width: 62px;
}
.set-bars {
  gap: 6px;
}
.set-bar,
.set-bar.previous {
  width: 28px;
  flex: 0 0 28px;
}
.set-bar.missing {
  height: 0;
  min-height: 0;
  background: transparent;
}
.set-weights {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 5px;
}
.set-weights > span {
  display: flex;
  flex: 0 0 28px;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.set-weights strong {
  font-size: 12px;
  line-height: 1.15;
}
.set-weights small {
  font-size: 9px;
  opacity: 0.65;
}
.weight-previous {
  opacity: 0.6;
}
.weight-current {
  color: var(--settings-active);
}
.stats-empty-state {
  padding: 36px 18px;
  text-align: center;
  max-width: 430px;
  margin: 12px auto;
}
.stats-empty-symbol {
  display: block;
  font-size: 56px;
  color: var(--settings-active);
  margin-bottom: 20px;
}
.stats-empty-state h3 {
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 12px;
}
.stats-empty-state p {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.7;
  margin: 0 0 24px;
}
.stats-empty-action {
  background: var(--settings-active);
  color: var(--settings-on-active);
  min-height: 48px;
  border-radius: var(--settings-button-radius);
  padding: 12px 24px;
  font-size: 14px;
}
.workout-baseline {
  padding: 12px 16px;
  margin: 0 0 18px;
  border-radius: 16px;
  background: var(--settings-muted);
  font-size: 12px;
  line-height: 1.5;
}
.set-bar.unrecorded {
  background: transparent;
  min-height: 0;
}
/* Stats follows each theme's shape and type vocabulary. */
body[data-theme="precision"] #history-dialog {
  --stats-card-bg: #e8eaed;
}
body[data-theme="precision"] .workout-card {
  background: var(--stats-card-bg);
  border: 1px solid #cbd0d6;
  border-radius: 16px;
  padding: 20px;
}
body[data-theme="precision"] .workout-card-heading h4 {
  font-size: 15px;
  font-weight: 600;
}
body[data-theme="precision"] #history-detail-content h3 {
  font-weight: 500;
  letter-spacing: -0.05em;
}
body[data-theme="precision"] .workout-strip strong {
  font-weight: 500;
}
body[data-theme="precision"] .workout-badge {
  border-radius: 6px;
  border: 1px solid #cbd0d6;
  font-weight: 600;
}
body[data-theme="precision"] .set-bar {
  border-radius: 3px 3px 0 0;
}
body[data-theme="precision"] .history-tabs {
  border-radius: 12px;
}
body[data-theme="precision"] .history-tabs button {
  border-radius: 8px;
}
body[data-theme="bold"] .workout-card {
  background: #dfe1e4;
  border-radius: 32px;
  padding: 22px;
}
body[data-theme="bold"] .workout-card-heading h4 {
  font-size: 20px;
  font-weight: 750;
}
body[data-theme="bold"] #history-detail-content h3 {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.04em;
}
body[data-theme="bold"] .workout-strip strong {
  font-size: 28px;
  font-weight: 800;
}
body[data-theme="bold"] .workout-badge {
  background: #252525;
  color: #fff;
  font-weight: 700;
}
body[data-theme="bold"] .set-bar {
  border-radius: 12px 12px 0 0;
}
body[data-theme="bold"] .history-tabs,
body[data-theme="bold"] .history-tabs button {
  border-radius: 28px;
}
body[data-theme="sport"] .workout-card {
  background: #e7e1d7;
  border-radius: 14px 34px 34px;
  padding: 20px;
}
body[data-theme="sport"] .workout-card:nth-child(even) {
  border-radius: 34px 34px 14px;
}
body[data-theme="sport"] #history-detail-content h3 {
  font-size: 48px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
}
body[data-theme="sport"] .workout-card-heading h4 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}
body[data-theme="sport"] .workout-badge {
  background: #ff7139;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}
body[data-theme="sport"] .workout-strip strong {
  font-size: 32px;
  font-weight: 800;
}
body[data-theme="sport"] .workout-strip span {
  font-size: 14px;
}
body[data-theme="sport"] .set-bar {
  border-radius: 5px 5px 0 0;
}
body[data-theme="sport"] .bar-reps-label strong {
  font-size: 16px;
}
body[data-theme="sport"] .weight-current strong {
  font-size: 16px;
}
body[data-theme="sport"] .history-tabs {
  border-radius: 20px 20px 8px;
}
body[data-theme="soft"] .workout-card {
  background: #e2ebf7;
  border-radius: 34px 34px 14px;
  padding: 20px;
}
body[data-theme="soft"] .workout-card:nth-child(even) {
  background: #e5edb8;
  border-radius: 14px 34px 34px;
}
body[data-theme="soft"] .workout-card-heading h4 {
  font-weight: 600;
  font-size: 19px;
}
body[data-theme="soft"] #history-detail-content h3 {
  font-weight: 600;
  letter-spacing: -0.03em;
}
body[data-theme="soft"] .workout-badge {
  color: #173356;
  background: #f3f6fb;
  border-radius: 20px;
}
body[data-theme="soft"] .set-bar {
  border-radius: 14px 14px 0 0;
}
body[data-theme="soft"] .history-tabs,
body[data-theme="soft"] .history-tabs button {
  border-radius: 28px;
}
body[data-theme="midnight"] .workout-card {
  background: #30263d;
  border-radius: 16px 34px 34px;
  padding: 20px;
}
body[data-theme="midnight"] .workout-card:nth-child(even) {
  background: #24423d;
  border-radius: 34px 34px 16px;
}
body[data-theme="midnight"] .workout-card-heading h4 {
  font-size: 18px;
  font-weight: 700;
}
body[data-theme="midnight"] #history-detail-content h3,
body[data-theme="midnight"] .workout-strip strong {
  font-family: Sora, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.05em;
}
body[data-theme="midnight"] .workout-badge {
  background: #f2b1d9;
  color: #352039;
  border-radius: 12px 20px 20px;
}
body[data-theme="midnight"] .workout-badge strong {
  color: inherit;
}
body[data-theme="midnight"] .set-bar {
  border-radius: 10px 10px 0 0;
}
body[data-theme="midnight"] .history-tabs {
  border-radius: 26px 26px 12px;
}
/* Compact styles retain clear labels and equal chart columns on narrow phones. */
@media (max-width: 420px) {
  body[data-theme="bold"] .workout-card {
    padding: 18px;
  }
  body[data-theme="bold"] .workout-card-heading h4 {
    font-size: 18px;
  }
  body[data-theme="bold"] .workout-strip strong {
    font-size: 24px;
  }
  body[data-theme="soft"] .workout-card-heading h4 {
    font-size: 17px;
  }
}
/* The light Glass stats surface must not inherit white workout labels. */
#history-dialog strong {
  color: inherit;
}