:root {
  color-scheme: dark;
  --bg: #070a0f;
  --bg-soft: #0d1117;
  --panel: rgba(17, 22, 28, 0.92);
  --panel-strong: rgba(24, 29, 36, 0.96);
  --ink: #f4f1ea;
  --muted: #8e96a3;
  --faint: #59616d;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --accent: #f4ba22;
  --accent-strong: #ffd35b;
  --accent-dark: #15100a;
  --green: #86e85f;
  --danger: #e04a43;
  --red-panel: rgba(92, 20, 18, 0.34);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 11rem),
    radial-gradient(circle at 76% 0%, rgba(244, 186, 34, 0.18), transparent 16rem),
    radial-gradient(circle at 0% 15%, rgba(120, 130, 145, 0.1), transparent 18rem),
    var(--bg);
  color: var(--ink);
  font-family: Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
}

h1,
h2,
p {
  margin: 0;
}

h1,
h2,
strong {
  letter-spacing: 0;
}

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

.app-screen {
  display: none;
  animation: screenIn 180ms ease;
}

.app-screen.is-active {
  display: block;
}

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

.hero-card {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(3, 5, 8, 0.3), rgba(3, 5, 8, 0.94)),
    radial-gradient(circle at 76% 14%, rgba(244, 186, 34, 0.18), transparent 11rem),
    linear-gradient(135deg, #151b22, #07090d 62%);
  box-shadow: var(--shadow);
  padding: 18px 16px;
}

.hero-card::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 34px;
  width: 230px;
  height: 250px;
  background: url("/static/assets/newlogo.webp?v=1") center / contain no-repeat;
  opacity: 0.16;
  filter: grayscale(1) contrast(1.35);
  pointer-events: none;
}

.hero-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.brand-logo {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  object-fit: contain;
  background: transparent;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.36);
}

.menu-button,
.ghost-icon,
.back-button,
.icon-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
  font-weight: 900;
}

.menu-button {
  width: 48px;
  font-size: 22px;
}

.menu-popover {
  position: absolute;
  top: 64px;
  right: 0;
  z-index: 20;
  min-width: 158px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(14, 17, 22, 0.98);
  box-shadow: var(--shadow);
  padding: 6px;
}

.menu-popover button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-weight: 900;
  text-align: left;
}

.eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.danger {
  color: var(--danger);
}

.hero-card h1 {
  position: relative;
  z-index: 1;
  max-width: 330px;
  margin-bottom: 22px;
  font-size: 28px;
  line-height: 1.18;
}

.level-card,
.metric-panel,
.exercise-section,
.counter-panel,
.calendar-section,
.history-section,
.board-section,
.menu-profile,
.menu-list,
.sos-section,
.support-menu {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(31, 38, 47, 0.7), rgba(10, 14, 19, 0.62));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

.home-header {
  position: relative;
  padding: 6px 2px 18px;
}

.home-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-brand .brand-logo {
  width: 46px;
  height: 46px;
  border-radius: 13px;
}

.home-brand .eyebrow {
  margin-bottom: 3px;
}

.home-header h1 {
  font-size: 25px;
  line-height: 1.1;
}

.home-profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.home-profile-row > span {
  white-space: nowrap;
}

.home-profile-row > span strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.plan-section,
.home-log-section {
  margin-top: 12px;
}

.home-section-head,
.home-progress-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 10px;
}

.home-section-head .eyebrow,
.home-progress-head .eyebrow {
  margin-bottom: 4px;
  color: #76b9ff;
}

.home-section-head h2,
.home-progress-head h2 {
  font-size: 19px;
}

.home-section-head > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.workout-plan-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin-inline: -14px;
  padding: 0 14px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.workout-plan-rail::-webkit-scrollbar {
  display: none;
}

.workout-plan-card {
  position: relative;
  flex: 0 0 min(84vw, 390px);
  min-height: 328px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(6, 10, 15, 0.95) 0%, rgba(8, 12, 17, 0.7) 53%, rgba(8, 12, 17, 0.14) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.28)),
    var(--plan-image) right center / auto 100% no-repeat;
  box-shadow: var(--shadow);
  padding: 22px;
  scroll-snap-align: center;
}

.workout-plan-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 44%);
  pointer-events: none;
}

.workout-plan-card.cyan { border-color: rgba(76, 212, 235, 0.46); }
.workout-plan-card.coral { border-color: rgba(255, 115, 99, 0.48); }
.workout-plan-card.violet { border-color: rgba(178, 115, 255, 0.5); }

.workout-plan-card-copy,
.workout-plan-sequence,
.workout-plan-meta,
.workout-plan-card .workout-plan-open {
  position: relative;
  z-index: 1;
}

.workout-plan-sequence {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(225, 233, 246, 0.74);
  font-size: 11px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.workout-plan-sequence i {
  width: 3px;
  height: 3px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #6ea2ff;
  box-shadow: 0 0 7px rgba(46, 124, 255, 0.66);
}

.workout-plan-card-copy p {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.workout-plan-card-copy h3 {
  max-width: 230px;
  margin: 11px 0;
  font-size: 31px;
  line-height: 1.08;
}

.workout-plan-card-copy span {
  display: block;
  max-width: 220px;
  color: rgba(244, 241, 234, 0.8);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.workout-plan-meta {
  display: flex;
  gap: 14px;
  color: rgba(244, 241, 234, 0.82);
  font-size: 13px;
  font-weight: 900;
}

.workout-plan-card .workout-plan-open {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: #11161d;
  padding: 0 18px;
  font-size: 16px;
  font-weight: 900;
}

.plan-arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  overflow: hidden;
  border: 1px solid rgba(130, 174, 244, 0.32);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 48%),
    rgba(12, 22, 37, 0.72);
  color: #dceaff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    0 5px 12px rgba(0, 0, 0, 0.25);
  will-change: transform;
}

.plan-arrow::before {
  content: "";
  position: absolute;
  inset: 1px 5px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent);
}

.plan-arrow .lucide {
  width: 17px;
  height: 17px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.home-progress-card {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(41, 51, 63, 0.7), rgba(10, 14, 19, 0.58));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  padding: 16px;
}

.home-progress-head {
  margin: 0 0 15px;
}

.home-progress-head > strong {
  color: var(--accent);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.home-progress-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.home-progress-stats span {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.home-progress-stats strong {
  color: var(--ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.home-progress-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  margin: 16px 0 9px;
}

.home-progress-bar div {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1680f5, #75c7ff);
  transition: width 180ms ease;
}

.plan-detail-screen {
  padding-bottom: 82px;
}

.plan-detail-header {
  position: sticky;
  top: 0;
  z-index: 12;
  min-height: 58px;
  margin-inline: -14px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 10, 15, 0.86);
  backdrop-filter: blur(18px);
  padding: 0 14px;
}

.plan-detail-header h1 {
  max-width: 220px;
  overflow: hidden;
  font-size: 18px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-detail-header > span {
  width: 44px;
}

.plan-detail-hero {
  position: relative;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  overflow: hidden;
  margin: 0 -14px;
  background:
    linear-gradient(0deg, rgba(6, 9, 13, 0.98) 0%, rgba(6, 9, 13, 0.16) 68%),
    linear-gradient(90deg, rgba(6, 9, 13, 0.44), transparent 70%),
    var(--plan-image) center / cover no-repeat;
  padding: 24px 22px;
}

.plan-detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.08), transparent 50%);
  pointer-events: none;
}

.plan-detail-hero.cyan { box-shadow: inset 0 -80px 100px rgba(9, 167, 203, 0.16); }
.plan-detail-hero.coral { box-shadow: inset 0 -80px 100px rgba(238, 80, 67, 0.16); }
.plan-detail-hero.violet { box-shadow: inset 0 -80px 100px rgba(140, 75, 226, 0.2); }

.plan-detail-hero p,
.plan-detail-hero h2,
.plan-detail-hero span {
  position: relative;
  z-index: 1;
}

.plan-detail-hero p {
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 900;
}

.plan-detail-hero h2 {
  max-width: 270px;
  margin: 10px 0 7px;
  font-size: 32px;
  line-height: 1.1;
}

.plan-detail-hero span {
  color: rgba(244, 241, 234, 0.86);
  font-size: 14px;
  font-weight: 900;
}

.plan-detail-body {
  display: grid;
  gap: 28px;
  padding: 20px 0 28px;
}

.plan-detail-intro {
  color: rgba(244, 241, 234, 0.82);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.55;
}

.plan-detail-tags {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: -14px;
  scrollbar-width: none;
}

.plan-detail-tags::-webkit-scrollbar {
  display: none;
}

.plan-detail-tags span {
  flex: 0 0 auto;
  border: 1px solid rgba(118, 185, 255, 0.34);
  border-radius: 999px;
  background: rgba(72, 151, 245, 0.13);
  color: #8dccff;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 900;
}

.plan-workout-section {
  margin-top: -2px;
}

.plan-workout-group + .plan-workout-group {
  margin-top: 22px;
}

.plan-workout-group h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.plan-workout-row {
  width: 100%;
  min-height: 82px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 8px 0;
  text-align: left;
}

.plan-workout-row img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
}

.plan-workout-row strong,
.plan-workout-row small {
  display: block;
}

.plan-workout-row strong {
  font-size: 15px;
  line-height: 1.3;
}

.plan-workout-row small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.plan-workout-row.is-selectable {
  border-radius: 10px;
}

.plan-workout-row.is-selectable:active {
  background: rgba(64, 166, 255, 0.12);
}

.plan-workout-row .plan-arrow {
  width: 34px;
  height: 34px;
  border-color: rgba(74, 146, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 48%),
    rgba(29, 45, 68, 0.62);
  color: #45aaff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 5px 14px rgba(0, 0, 0, 0.22);
}

.plan-detail-body section > h2 {
  margin-bottom: 12px;
  font-size: 20px;
}

.plan-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.plan-info-grid article {
  min-height: 88px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  padding: 12px;
}

.plan-info-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(23, 126, 245, 0.18);
  color: #45aaff;
  font-size: 12px;
  font-weight: 900;
}

.plan-info-grid strong,
.plan-info-grid small {
  display: block;
}

.plan-info-grid strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-info-grid small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.plan-benefit-list {
  display: grid;
  gap: 14px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  padding: 18px 18px 18px 48px;
}

.plan-benefit-list li {
  color: rgba(244, 241, 234, 0.9);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.plan-benefit-list li::marker {
  color: #36b6ff;
  font-size: 20px;
}

.plan-schedule {
  position: relative;
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  padding: 10px 20px 10px 48px;
}

.plan-schedule::before {
  content: "";
  position: absolute;
  top: 36px;
  bottom: 36px;
  left: 29px;
  width: 2px;
  background: rgba(23, 126, 245, 0.5);
}

.plan-schedule article {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: 18px 0 18px 20px;
}

.plan-schedule article:last-child {
  border-bottom: 0;
}

.plan-schedule article::before {
  content: "";
  position: absolute;
  top: 24px;
  left: -26px;
  width: 12px;
  height: 12px;
  border: 3px solid #126bdb;
  border-radius: 999px;
  background: #0d1b2d;
}

.plan-schedule strong {
  color: #45aaff;
  font-size: 21px;
}

.plan-schedule h3 {
  margin: 9px 0 5px;
  font-size: 16px;
}

.plan-schedule p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.plan-detail-cta {
  position: fixed;
  left: 50%;
  bottom: max(76px, calc(env(safe-area-inset-bottom) + 68px));
  z-index: 20;
  width: min(calc(100% - 28px), 532px);
  transform: translateX(-50%);
}

.plan-detail-cta button {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(100deg, #16c5e8, #1262ff);
  color: #f7fbff;
  box-shadow: 0 14px 32px rgba(8, 100, 255, 0.34);
  font-size: 18px;
  font-weight: 900;
}

.plan-detail-cta .plan-arrow {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(7, 34, 87, 0.34);
  color: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 5px 12px rgba(3, 31, 92, 0.3);
}

.exercise-step-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: end center;
  background: rgba(1, 3, 7, 0.76);
  backdrop-filter: blur(12px);
  padding: 0;
}

.exercise-step-dialog {
  width: min(100%, 560px);
  max-height: min(92dvh, 820px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px 20px 0 0;
  background: rgba(20, 24, 31, 0.98);
  box-shadow: var(--sc-shadow-lg);
}

.exercise-step-handle {
  width: 48px;
  height: 6px;
  justify-self: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  margin: 14px 0 4px;
}

.exercise-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--sc-border);
  padding: 10px 20px 14px;
}

.exercise-step-head h2 {
  min-width: 0;
  overflow: hidden;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-step-head button {
  flex: 0 0 auto;
  min-height: 44px;
  border: 1px solid var(--sc-border);
  border-radius: 12px;
  background: var(--sc-surface-strong);
  color: var(--sc-text-secondary);
  font-size: 14px;
  font-weight: 900;
}

.exercise-step-image {
  width: 100%;
  aspect-ratio: 1.45;
  display: block;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  object-fit: cover;
}

.exercise-step-tabs {
  width: fit-content;
  display: flex;
  gap: 3px;
  margin: 16px auto 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px;
}

.exercise-step-tabs span {
  border-radius: 999px;
  color: var(--faint);
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 900;
}

.exercise-step-tabs .is-active {
  background: #1262ff;
  color: #f7fbff;
}

.exercise-step-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 12px 20px 28px;
}

.exercise-step-scroll::-webkit-scrollbar { display: none; }

.exercise-step-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}

.exercise-step-meta span,
.exercise-step-scroll h3 {
  color: #298dfb;
  font-size: 16px;
  font-weight: 900;
}

.exercise-step-meta strong {
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}

.exercise-step-scroll section + section {
  margin-top: 24px;
}

.exercise-step-scroll h3 {
  margin-bottom: 12px;
}

.exercise-step-scroll p {
  color: rgba(244, 241, 234, 0.88);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
}

.exercise-focus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exercise-focus-chips span {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(244, 241, 234, 0.92);
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 900;
}

.exercise-focus-chips span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #1262ff;
  margin-right: 7px;
}

.exercise-muscle-map-section,
.exercise-detail-muscles,
.library-detail-muscles {
  margin-top: 22px;
  border-top: 1px solid var(--sc-border);
  padding-top: 18px;
}

.exercise-muscle-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.exercise-muscle-map-head :is(h3, h4) {
  margin: 0;
}

.muscle-map-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sc-text-tertiary);
  font-size: 11px;
  font-weight: 800;
}

.muscle-map-legend span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  margin-right: 5px;
}

.muscle-map-legend .is-primary::before { background: #2e7cff; box-shadow: 0 0 8px rgba(46, 124, 255, 0.56); }
.muscle-map-legend .is-secondary::before { background: #45c3d8; }

.exercise-muscle-map {
  min-height: 246px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(27, 33, 43, 0.82), rgba(11, 14, 19, 0.72));
  padding: 16px 12px 12px;
}

.exercise-muscle-map.is-loading::after {
  content: "근육 지도를 불러오는 중";
  grid-column: 1 / -1;
  place-self: center;
  color: var(--sc-text-tertiary);
  font-size: 12px;
  font-weight: 800;
}

.muscle-map-figure {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0;
}

.muscle-map-svg {
  width: min(100%, 122px);
  height: 214px;
  overflow: visible;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.32));
}

.muscle-map-svg path {
  fill: #343b47;
  stroke: rgba(7, 10, 14, 0.8);
  stroke-width: 0.9;
  transition: fill 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.muscle-map-svg .is-primary path {
  fill: #2e7cff;
  filter: drop-shadow(0 0 5px rgba(46, 124, 255, 0.5));
}

.muscle-map-svg .is-secondary path { fill: #45c3d8; }
.muscle-map-svg .is-inactive path { opacity: 0.68; }
.muscle-map-svg .is-distribution.color-1 path { fill: #5278b8; filter: drop-shadow(0 0 4px rgba(82, 120, 184, 0.34)); }
.muscle-map-svg .is-distribution.color-2 path { fill: #4f8f98; filter: drop-shadow(0 0 4px rgba(79, 143, 152, 0.32)); }
.muscle-map-svg .is-distribution.color-3 path { fill: #786da8; filter: drop-shadow(0 0 4px rgba(120, 109, 168, 0.32)); }
.muscle-map-svg .is-distribution.color-4 path { fill: #b28a52; filter: drop-shadow(0 0 4px rgba(178, 138, 82, 0.3)); }
.muscle-map-svg .is-distribution.color-5 path { fill: #668c72; filter: drop-shadow(0 0 4px rgba(102, 140, 114, 0.3)); }

.muscle-map-figure figcaption {
  color: var(--sc-text-tertiary);
  font-size: 11px;
  font-weight: 800;
}

.muscle-map-unavailable {
  grid-column: 1 / -1;
  place-self: center;
  margin: 0;
  color: var(--sc-text-tertiary);
  font-size: 12px;
}

.exercise-detail-muscles,
.library-detail-muscles { margin-top: 6px; }

.exercise-detail-muscles .exercise-muscle-map,
.library-detail-muscles .exercise-muscle-map { min-height: 224px; }

.exercise-detail-muscles .muscle-map-svg,
.library-detail-muscles .muscle-map-svg { height: 192px; }

@media (max-width: 370px) {
  .exercise-muscle-map { min-height: 222px; padding-inline: 8px; }
  .muscle-map-svg { height: 190px; }
}

.exercise-step-footer {
  display: grid;
  grid-template-columns: 44px 52px 44px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border-top: 1px solid var(--line);
  background: rgba(20, 24, 31, 0.98);
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.24);
  padding: 12px 20px max(14px, env(safe-area-inset-bottom));
}

.exercise-step-footer > button:not(:last-child) {
  width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 32px;
}

.exercise-step-footer > button:disabled {
  color: rgba(255, 255, 255, 0.18);
}

.exercise-step-footer > strong {
  text-align: center;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.exercise-step-footer > button:last-child {
  min-height: 54px;
  border: 0;
  border-radius: 12px;
  background: var(--sc-primary);
  color: #f7fbff;
  font-size: 17px;
  font-weight: 900;
}

.level-card {
  position: relative;
  z-index: 1;
  padding: 16px;
  backdrop-filter: blur(10px);
}

.user-badge,
.board-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.level-badge {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border: 1px solid rgba(244, 186, 34, 0.56);
  border-radius: 7px;
  background: linear-gradient(135deg, #3a2a07, #11151a 68%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 18px rgba(0, 0, 0, 0.28);
  color: var(--accent-strong);
  font-weight: 900;
}

.level-badge-number {
  padding: 0 7px;
  font-size: 13px;
  line-height: 1;
}

.level-badge.iron,
.level-badge.rookie {
  border-color: rgba(150, 157, 168, 0.48);
  background: linear-gradient(135deg, #444b55, #15191f 70%);
  color: #d7dce4;
}

.level-badge.bronze,
.level-badge.strong {
  border-color: rgba(183, 108, 45, 0.72);
  background: linear-gradient(135deg, #b76c2d, #4a2610 58%, #11151a);
  color: #ffddbf;
}

.level-badge.silver,
.level-badge.elite {
  border-color: rgba(225, 231, 239, 0.76);
  background: linear-gradient(135deg, #e7edf5, #7e8793 52%, #11151a);
  color: #080b10;
}

.level-badge.gold {
  border-color: rgba(244, 186, 34, 0.86);
  background: linear-gradient(135deg, #ffe17a, #c98a05 55%, #171104);
  color: #130d03;
}

.level-badge.red-gold {
  border-color: rgba(255, 89, 72, 0.82);
  background: linear-gradient(135deg, #ffcc4d, #b51f1b 52%, #0c0d11);
  color: #fff2c9;
}

.level-badge.platinum {
  border-color: rgba(224, 245, 255, 0.92);
  background: linear-gradient(135deg, #ffffff, #a8d8ea 48%, #161a22);
  color: #071014;
}

.level-badge.diamond {
  border-color: rgba(100, 222, 255, 0.92);
  background: linear-gradient(135deg, #bff7ff, #1d8fb3 50%, #06141d);
  color: #ebfdff;
}

.level-badge.black-diamond {
  border-color: rgba(244, 186, 34, 0.92);
  background: linear-gradient(135deg, #0a0b0e, #252b35 44%, #f4ba22 100%);
  color: #ffd35b;
}

.level-badge.crimson {
  position: relative;
  min-width: 28px;
  height: 26px;
  border: 2px solid rgba(255, 72, 72, 0.96);
  border-radius: 4px 11px 4px 11px;
  background:
    linear-gradient(135deg, transparent 0 14%, rgba(255, 255, 255, 0.18) 15% 20%, transparent 21%),
    radial-gradient(circle at 78% 18%, rgba(255, 120, 120, 0.55), transparent 22%),
    linear-gradient(135deg, #ff2626, #651010 48%, #07080b 100%);
  color: #fff1f1;
  box-shadow: 0 0 0 1px rgba(255, 72, 72, 0.22), 0 0 18px rgba(255, 30, 30, 0.36);
}

.level-badge.crown {
  position: relative;
  min-width: 30px;
  height: 27px;
  border: 2px solid rgba(255, 226, 96, 1);
  border-radius: 5px 5px 11px 11px;
  background:
    linear-gradient(180deg, #fff0a3 0 22%, #e6a900 23% 58%, #2b1600 100%);
  color: #120b02;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 226, 96, 0.24), 0 0 22px rgba(255, 185, 30, 0.35);
}

.level-badge.crown::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 4px;
  right: 4px;
  height: 10px;
  background:
    linear-gradient(135deg, transparent 0 22%, #ffe96d 23% 44%, transparent 45%),
    linear-gradient(45deg, transparent 0 30%, #fff3a7 31% 54%, transparent 55%),
    linear-gradient(225deg, transparent 0 22%, #ffe96d 23% 44%, transparent 45%);
  background-size: 33% 100%, 34% 100%, 33% 100%;
  background-position: left, center, right;
  background-repeat: no-repeat;
}

.level-badge.champion,
.level-badge.legendary {
  position: relative;
  min-width: 34px;
  height: 30px;
  border: 2px solid rgba(255, 246, 180, 1);
  border-radius: 999px 999px 8px 8px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 14%),
    linear-gradient(135deg, #fff6b6, #ffbf16 32%, #c22116 62%, #050505 100%);
  color: #fff9d3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28), 0 0 0 2px rgba(255, 190, 40, 0.22), 0 0 26px rgba(255, 52, 28, 0.35);
  transform: scale(1.08);
}

.level-badge.champion::before,
.level-badge.legendary::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: inherit;
  pointer-events: none;
}

.nickname-text {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.level-row h2 {
  font-size: 34px;
  line-height: 1;
}

.level-stat {
  display: grid;
  gap: 3px;
  text-align: right;
}

.level-stat strong {
  font-size: 20px;
}

.level-stat span,
.level-copy,
.section-copy {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.level-progress,
.progress-track {
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.level-progress {
  height: 9px;
  margin: 14px 0 10px;
}

.level-progress div,
.progress-track div {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8d5a00, var(--accent), #ffe088);
  transition: width 180ms ease;
}

.primary-cta,
.confirm-button,
.count-button {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffd45f, #e4aa16);
  color: var(--accent-dark);
  font-size: 17px;
  font-weight: 900;
}

.primary-cta {
  position: relative;
  z-index: 1;
  margin-top: 16px;
}

.metric-panel,
.exercise-section,
.counter-panel,
.calendar-section,
.history-section,
.board-section,
.menu-profile,
.menu-list,
.sos-section,
.support-menu {
  margin-top: 14px;
}

.section-head,
.panel-head,
.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-head {
  padding: 16px 16px 10px;
}

.section-head h2,
.panel-head h2 {
  font-size: 18px;
}

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

.metric-grid article {
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  padding: 12px;
}

.metric-grid span,
.compare-list span,
.today-routine small,
label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.metric-grid strong {
  color: var(--ink);
  font-size: 22px;
}

.compare-list {
  display: grid;
  gap: 10px;
  padding: 0 16px 16px;
}

.compare-list p {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.compare-list p:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.compare-list strong {
  color: var(--accent);
}

.today-routine {
  display: grid;
  gap: 8px;
  padding: 0 12px 14px;
}

.today-item,
.history-item,
.board-post {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.today-item {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
}

.today-thumb {
  width: 54px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.today-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.today-item strong {
  display: block;
  margin-bottom: 3px;
}

.today-check {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--green);
  color: #071006;
  font-weight: 900;
}

.mini-button,
.ghost-icon,
.back-button {
  padding: 0 12px;
}

.mini-button {
  min-height: 38px;
  border: 1px solid rgba(244, 186, 34, 0.38);
  border-radius: 10px;
  background: rgba(244, 186, 34, 0.12);
  color: var(--accent);
  font-weight: 900;
}

.exercise-tools {
  display: flex;
  gap: 8px;
}

.add-exercise-button,
.edit-exercise-button {
  width: 46px;
  min-height: 46px;
  border: 1px solid rgba(244, 186, 34, 0.56);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(244, 186, 34, 0.24), rgba(244, 186, 34, 0.08));
  color: var(--accent);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.edit-exercise-button {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
}

.edit-exercise-button.is-active {
  border-color: rgba(224, 74, 67, 0.72);
  background: rgba(224, 74, 67, 0.16);
  color: #ffb2ad;
}

.exercise-edit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 12px 10px;
  border: 1px solid rgba(224, 74, 67, 0.34);
  border-radius: 12px;
  background: rgba(224, 74, 67, 0.08);
  padding: 9px 10px;
}

.exercise-edit-bar span {
  color: #ffb2ad;
  font-size: 12px;
  font-weight: 900;
}

.delete-selected-exercises {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: var(--danger);
  color: #fff4f2;
  padding: 0 12px;
  font-weight: 900;
}

.delete-selected-exercises:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: var(--faint);
  cursor: not-allowed;
}

.screen-header {
  min-height: 56px;
  margin-bottom: 12px;
}

.screen-header h1 {
  font-size: 19px;
}

.app-screen[data-screen="record"] {
  scroll-margin-top: 12px;
  padding-bottom: 24px;
}

body:has(.app-screen[data-screen="record"].is-active) .app-shell {
  padding-bottom: max(136px, calc(env(safe-area-inset-bottom) + 112px));
}

html:has(.app-screen[data-screen="record"].is-active),
body:has(.app-screen[data-screen="record"].is-active) {
  overflow-x: hidden;
  scrollbar-width: none;
}

html:has(.app-screen[data-screen="record"].is-active)::-webkit-scrollbar,
body:has(.app-screen[data-screen="record"].is-active)::-webkit-scrollbar {
  display: none;
}

[data-screen="record"] .screen-header {
  margin-bottom: 8px;
}

[data-screen="record"] .screen-header h1 {
  min-width: 0;
  overflow: hidden;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-screen="record"] .record-reset-button {
  width: auto;
  min-width: 64px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--sc-text-secondary);
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

[data-screen="record"] .exercise-section {
  margin-top: 0;
  border: 0;
  border-bottom: 1px solid var(--sc-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

[data-screen="record"] .exercise-section .section-head {
  padding: 8px 0 12px;
}

[data-screen="record"] .exercise-section .section-copy {
  margin-top: 3px;
  font-size: 12px;
}

[data-screen="record"] .exercise-tools button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-color: var(--sc-metal-control-border);
  border-radius: 12px;
  background: var(--sc-metal-control-bg);
  color: var(--sc-text-secondary);
  box-shadow: var(--sc-metal-control-shadow);
  line-height: 0;
}

[data-screen="record"] .exercise-tools button .lucide {
  display: block;
  transform: translateY(1px);
}

[data-screen="record"] .exercise-tools button:active {
  transform: translateY(1px) scale(0.97);
  background: var(--sc-metal-control-bg-pressed);
  box-shadow: var(--sc-metal-control-shadow-pressed);
}

[data-screen="record"] .exercise-tools .add-exercise-button {
  border-color: rgba(93, 156, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 44%),
    linear-gradient(145deg, rgba(35, 75, 137, 0.88), rgba(13, 30, 54, 0.96) 72%);
  color: var(--sc-primary-strong);
}

[data-screen="record"] .exercise-tools .toggle-exercise-grid-button svg {
  transition: transform 180ms var(--sc-ease);
}

[data-screen="record"] .exercise-tools .toggle-exercise-grid-button.is-expanded svg {
  transform: translateY(1px) rotate(180deg);
}

.back-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 30px;
  line-height: 0;
}

.exercise-grid {
  width: 100%;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin-right: 0;
  padding: 0 8px 14px 0;
  scroll-padding-inline: 0 8px;
}

.exercise-grid[hidden] {
  display: none;
}

.exercise-grid.is-expanded {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow-x: visible;
  scroll-snap-type: none;
  padding: 0 0 10px;
}

.exercise-grid::-webkit-scrollbar {
  display: none;
}

.exercise-card {
  position: relative;
  flex: 0 0 154px;
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: minmax(36px, auto) auto;
  align-items: center;
  column-gap: 10px;
  scroll-snap-align: start;
  border: 1px solid var(--sc-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--sc-text);
  padding: 10px;
  text-align: left;
}

.exercise-grid.is-expanded .exercise-card {
  flex: initial;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(32px, auto) auto;
  align-items: start;
  gap: 5px;
  padding: 7px;
  scroll-snap-align: none;
}

.recommend-badge {
  position: absolute;
  top: 6px;
  right: auto;
  left: 6px;
  z-index: 2;
  border: 1px solid rgba(93, 156, 255, 0.52);
  border-radius: 999px;
  background: rgba(8, 18, 33, 0.9);
  color: #b9d3ff;
  padding: 3px 4px;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.exercise-check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.46);
}

.exercise-check.is-checked {
  border-color: var(--danger);
  background: var(--danger);
}

.exercise-check.is-checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.exercise-card[aria-pressed="true"] {
  border-color: rgba(93, 156, 255, 0.86);
  background: rgba(46, 124, 255, 0.14);
  box-shadow: var(--sc-glow);
}

.exercise-art {
  width: 58px;
  aspect-ratio: 1;
  grid-column: 1;
  grid-row: 1 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.exercise-grid.is-expanded .exercise-art {
  width: 100%;
  aspect-ratio: 4 / 3;
  grid-row: 1;
}

.exercise-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exercise-art.is-empty {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(93, 156, 255, 0.42);
  color: var(--sc-primary-strong);
  font-size: 20px;
  font-weight: 900;
}

.exercise-card strong {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  align-self: end;
  font-size: 13px;
  line-height: 1.3;
  text-overflow: ellipsis;
  word-break: keep-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.exercise-grid.is-expanded .exercise-card strong {
  align-self: start;
  font-size: 12px;
}

.exercise-card small {
  min-width: 0;
  overflow: hidden;
  align-self: start;
  color: var(--sc-text-tertiary);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-grid.is-expanded .exercise-card small {
  align-self: end;
  font-size: 10px;
}

.exercise-detail-card {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--sc-border);
  border-radius: 0;
  background: transparent;
  padding: 20px 0 0;
  box-shadow: none;
}

.exercise-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.exercise-detail-toggle {
  min-height: 40px;
  border: 1px solid var(--sc-border-strong);
  border-radius: 12px;
  background: var(--sc-metal-control-bg);
  color: var(--sc-primary-strong);
  box-shadow: var(--sc-metal-control-shadow);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.exercise-detail-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
}

.exercise-detail-head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.exercise-detail-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.exercise-detail-images img,
.exercise-detail-placeholder {
  width: 100%;
  aspect-ratio: 1.25;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  object-fit: cover;
}

.exercise-detail-placeholder {
  display: grid;
  place-items: center;
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.exercise-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.exercise-detail-meta div {
  border: 0;
  border-bottom: 1px solid var(--sc-border);
  border-radius: 0;
  background: transparent;
  padding: 9px 0;
}

.exercise-detail-toggle:hover,
.exercise-detail-toggle:focus-visible {
  background: var(--sc-metal-control-bg-hover);
}

.exercise-detail-toggle:active {
  background: var(--sc-metal-control-bg-pressed);
  box-shadow: var(--sc-metal-control-shadow-pressed);
  transform: translateY(1px) scale(0.98);
}

.exercise-detail-meta dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.exercise-detail-meta dd {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.exercise-detail-instructions {
  display: grid;
  gap: 7px;
  margin: 0;
  border-top: 1px solid var(--sc-border);
  padding-top: 14px;
  padding-left: 18px;
  color: var(--sc-text-tertiary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.counter-panel {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 16px 0 0;
}

[data-screen="record"] .counter-panel > .selected-date-banner { order: 1; }
[data-screen="record"] .counter-panel > .panel-head { order: 2; }
[data-screen="record"] .counter-panel > .last-record { order: 3; }
[data-screen="record"] .counter-panel > .workout-form { order: 4; }
[data-screen="record"] .counter-panel > .rest-timer { order: 5; }
[data-screen="record"] .counter-panel > .record-actions { order: 6; }
[data-screen="record"] .counter-panel > .planned-record { order: 7; }
[data-screen="record"] .counter-panel > .record-compare { order: 8; }
[data-screen="record"] .counter-panel > .set-table-wrap { order: 9; }
[data-screen="record"] .counter-panel > .exercise-detail-card { order: 12; }

[data-screen="record"] .counter-panel .panel-head {
  margin: 2px 0 0;
}

[data-screen="record"] .counter-panel .panel-head h2 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.selected-date-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-weight: 900;
}

.selected-date-banner span {
  color: var(--muted);
  font-size: 12px;
}

.selected-date-banner strong {
  flex: 0 0 auto;
  min-width: 10ch;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.selected-date-banner.is-past {
  border-color: rgba(244, 186, 34, 0.36);
}

.last-record {
  margin-top: 12px;
  border: 0;
  border-left: 3px solid rgba(93, 156, 255, 0.7);
  border-radius: 0 8px 8px 0;
  background: rgba(46, 124, 255, 0.07);
  padding: 10px 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.workout-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  width: 100%;
  min-width: 0;
}

.date-field {
  width: 100%;
  min-width: 0;
}

.date-field input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  inline-size: 100%;
  box-sizing: border-box;
  padding-right: 14px;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.date-field input::-webkit-datetime-edit {
  padding: 0;
}

.date-field input::-webkit-calendar-picker-indicator {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
}

label {
  display: grid;
  gap: 7px;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
  outline: none;
}

input {
  min-height: 48px;
  padding: 0 12px;
}

textarea {
  min-height: 96px;
  resize: vertical;
  padding: 12px;
}

input:focus,
textarea:focus {
  border-color: rgba(244, 186, 34, 0.72);
  box-shadow: 0 0 0 3px rgba(244, 186, 34, 0.13);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

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

.field-grid.three > label:nth-child(3) {
  grid-column: 1 / -1;
}

.input-stepper {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 4px;
}

.input-stepper input {
  min-width: 0;
  min-height: 48px;
  padding: 0 4px;
  font-size: 19px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.stepper-button {
  min-height: 48px;
  border: 1px solid var(--sc-border-strong);
  border-radius: 12px;
  background: var(--sc-surface-strong);
  color: var(--sc-primary-strong);
  font-size: 20px;
  font-weight: 900;
}

.planned-record,
.record-compare {
  margin-top: 14px;
  text-align: center;
  font-weight: 900;
}

.record-compare {
  display: none;
  color: var(--danger);
}

.record-compare.is-visible {
  display: block;
}

.record-compare.is-cleared {
  color: var(--green);
}

.set-table-wrap,
.record-table {
  width: 100%;
}

.set-table-wrap {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.set-table,
.record-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.set-table th,
.set-table td,
.record-table th,
.record-table td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 6px;
  text-align: center;
  white-space: nowrap;
}

.set-table th,
.record-table th {
  color: var(--muted);
  font-size: 12px;
}

.set-table td,
.record-table td {
  font-size: 14px;
  font-weight: 900;
}

.set-table th:last-child,
.set-table td:last-child,
.record-table th:last-child,
.record-table td:last-child {
  border-right: 0;
}

.set-table tr:last-child td,
.record-table tbody tr:last-child td,
.record-table tfoot tr:last-child td {
  border-bottom: 0;
}

.record-table {
  margin-top: 10px;
  font-size: 12px;
}

.record-table tfoot td {
  color: var(--accent);
}

.record-title {
  color: var(--ink);
}

.record-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.record-chips .record-chip {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.record-chips .record-chip.is-current {
  border-color: #2e7cff;
  background: rgba(46, 124, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(46, 124, 255, 0.38), 0 0 16px rgba(46, 124, 255, 0.2);
  color: #f5f7fb;
}

.record-chips .record-chip.is-complete {
  border-color: #2e7cff;
  background: #2e7cff;
  box-shadow: 0 6px 16px rgba(46, 124, 255, 0.28);
  color: #ffffff;
}

.record-chip-burst {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 2;
}

.record-chip-burst i {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #69a5ff;
  box-shadow: 0 0 7px rgba(46, 124, 255, 0.9);
}

.empty-row td,
.empty-state {
  color: var(--muted);
  font-weight: 800;
}

.action-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  margin-top: 16px;
}

.secondary-button {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
  font-size: 17px;
  font-weight: 900;
}

.confirm-button {
  margin-top: 10px;
}

.confirm-button:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: var(--faint);
  cursor: not-allowed;
}

.calendar-section {
  overflow: hidden;
  padding-bottom: 14px;
}

.calendar-nav {
  padding-bottom: 16px;
}

.icon-button {
  width: 44px;
  font-size: 26px;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  padding: 0 14px;
}

.calendar-weekdays {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.day-cell {
  position: relative;
  min-height: 68px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font-weight: 900;
  padding: 7px 3px 6px;
}

.day-cell-breakdown {
  display: grid;
  gap: 2px;
  margin-top: 4px;
}

.day-cell-breakdown small {
  color: var(--accent);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.08;
  white-space: nowrap;
}

.day-volume-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 14px;
}

.day-volume-breakdown span {
  border: 1px solid rgba(244, 186, 34, 0.28);
  border-radius: 999px;
  background: rgba(244, 186, 34, 0.1);
  color: var(--accent);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 900;
}

.day-cell.is-empty {
  pointer-events: none;
}

.day-cell.is-today {
  border-color: var(--line-strong);
}

.day-cell.is-selected {
  background: var(--accent);
  color: #171008;
}

.day-cell.has-workout::after,
.day-cell.has-sos::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 5px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--accent);
}

.day-cell.has-workout.has-volume::after,
.day-cell.has-workout:has(small)::after {
  content: none;
}

.day-cell.has-sos::before {
  top: 7px;
  right: 7px;
  left: auto;
  bottom: auto;
  width: 7px;
  height: 7px;
  transform: none;
  background: var(--danger);
}

.calendar-day-detail,
.calendar-excuses,
.history-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.day-detail-head,
.day-log-top,
.history-title,
.history-meta,
.board-post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.day-detail-head,
.day-log-item,
.calendar-excuse-item,
.history-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  padding: 12px;
}

.day-detail-head span,
.history-meta,
.board-post-meta > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.day-log-item p,
.history-item p,
.calendar-excuse-item p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.delete-button {
  width: 36px;
  min-height: 36px;
  border: 1px solid rgba(224, 74, 67, 0.4);
  border-radius: 10px;
  background: rgba(224, 74, 67, 0.1);
  color: var(--danger);
  font-size: 20px;
  font-weight: 900;
}

.day-sos-reason,
.calendar-excuse-item {
  border: 1px solid rgba(224, 74, 67, 0.45);
  border-radius: 12px;
  background: var(--red-panel);
  color: #ffb2ad;
  padding: 12px;
  font-weight: 900;
}

.day-add-button,
.history-day-button,
.calendar-excuse-item,
.menu-list button {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  font-weight: 900;
  text-align: left;
}

.day-add-button {
  text-align: center;
  color: var(--accent);
}

#monthSummary {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.board-form {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.board-author {
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  padding: 7px 10px;
  font-weight: 900;
}

.board-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0 14px 12px;
}

.board-tabs button {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.board-tabs .is-active {
  color: var(--accent);
  background: rgba(244, 186, 34, 0.1);
}

.board-list {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.board-post {
  padding: 12px;
}

.board-post p {
  margin-top: 10px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.board-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.board-action-button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
}

.board-action-button.is-liked {
  border-color: rgba(244, 186, 34, 0.64);
  background: rgba(244, 186, 34, 0.14);
  color: var(--accent);
}

.board-action-button.report {
  margin-left: auto;
  border-color: rgba(224, 74, 67, 0.34);
  color: #ffaaa5;
}

.board-comments {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.board-comment {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  padding: 8px;
}

.board-comment .board-author {
  padding: 3px 6px;
  transform: scale(0.9);
  transform-origin: left center;
}

.board-comment span {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  word-break: break-word;
}

.board-comment button {
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: rgba(224, 74, 67, 0.12);
  color: #ffaaa5;
  font-size: 11px;
  font-weight: 900;
  padding: 0 8px;
}

.board-comment-form {
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 8px;
  margin-top: 10px;
}

.board-comment-form input {
  min-height: 40px;
  border-radius: 10px;
}

.board-comment-form button {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: rgba(244, 186, 34, 0.16);
  color: var(--accent);
  font-weight: 900;
}

.menu-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.avatar-frame {
  width: 74px;
  height: 74px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-list {
  display: grid;
  padding: 8px;
}

.menu-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background: transparent;
  padding: 0 12px;
}

.menu-list button + button {
  border-top: 1px solid var(--line);
}

.menu-list span {
  color: var(--muted);
  font-size: 12px;
}

.sos-section {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-color: rgba(224, 74, 67, 0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(224, 74, 67, 0.2), transparent 12rem),
    linear-gradient(180deg, rgba(34, 18, 19, 0.82), rgba(11, 14, 18, 0.94));
}

.sos-orbit {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  justify-self: center;
  border: 1px solid rgba(224, 74, 67, 0.6);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(224, 74, 67, 0.2), transparent 62%);
  color: #ff6960;
  font-size: 36px;
  font-weight: 900;
}

.sos-copy {
  margin-top: 5px;
  color: #f0a4a0;
  font-size: 13px;
  font-weight: 800;
}

.sos-button {
  min-height: 56px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #ef5b53, #b3201b);
  color: #fff4f2;
  font-size: 17px;
  font-weight: 900;
}

.support-menu {
  display: grid;
  overflow: hidden;
}

.account-panel {
  display: grid;
  gap: 8px;
  margin: 0 8px 10px;
  padding: 16px;
  border: 1px solid rgba(67, 160, 255, 0.28);
  border-radius: 10px;
  background: rgba(47, 112, 173, 0.12);
}

.account-panel h2 {
  font-size: 16px;
}

.account-panel p:not(.eyebrow) {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.account-email {
  color: var(--accent) !important;
}

.account-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.account-actions .ghost-button,
.account-actions .confirm-button {
  min-height: 42px;
  padding: 8px;
  font-size: 13px;
}

.authenticated-account-panel {
  border-color: rgba(64, 198, 156, 0.34);
  background: rgba(35, 123, 93, 0.12);
}

.support-menu button {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 10px 16px;
  text-align: left;
}

.support-menu button + button {
  border-top: 1px solid var(--line);
}

.support-menu button > span,
.support-menu strong,
.support-menu small {
  display: block;
}

.support-menu small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.support-menu b {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 28px;
  font-weight: 400;
}

.support-menu .version-value {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.reminder-section {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  padding: 14px;
}

.reminder-section.is-blocked {
  display: none;
}

.reminder-button {
  min-height: 44px;
  border: 1px solid rgba(244, 186, 34, 0.38);
  border-radius: 10px;
  background: rgba(244, 186, 34, 0.12);
  color: var(--accent);
  font-weight: 900;
  padding: 0 14px;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 50;
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  transform: translateX(-50%);
  border-top: 1px solid var(--line);
  background: rgba(5, 7, 10, 0.92);
  backdrop-filter: blur(18px);
  padding: 8px 10px max(8px, env(safe-area-inset-bottom));
}

.bottom-nav button {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.bottom-nav button.is-active {
  color: var(--accent);
  background: rgba(244, 186, 34, 0.12);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 88px));
  z-index: 210;
  width: min(calc(100% - 28px), 520px);
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(18, 22, 28, 0.96);
  color: var(--ink);
  box-shadow: var(--shadow);
  padding: 13px 14px;
  font-weight: 900;
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.exercise-library-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: end center;
  background: rgba(1, 3, 7, 0.76);
  backdrop-filter: blur(12px);
  padding: 0;
}

.rest-complete-alert {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(46, 124, 255, 0.18), rgba(4, 7, 11, 0.42) 48%, rgba(4, 7, 11, 0.1) 72%);
  backdrop-filter: blur(3px);
}

.rest-complete-alert[hidden] { display: none; }

.rest-complete-alert-panel {
  position: relative;
  width: min(310px, calc(100vw - 48px));
  padding: 28px 24px 26px;
  overflow: hidden;
  border: 1px solid rgba(91, 156, 255, 0.42);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(25, 34, 48, 0.98), rgba(9, 13, 20, 0.98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58), 0 0 42px rgba(46, 124, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-align: center;
}

.rest-complete-alert-panel::before {
  content: "";
  position: absolute;
  inset: 0 12% auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6da6ff, transparent);
  box-shadow: 0 0 18px rgba(82, 146, 255, 0.8);
}

.rest-complete-alert-panel small {
  display: block;
  margin-bottom: 7px;
  color: #77aaff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.rest-complete-alert-panel strong {
  display: block;
  color: #f7f9ff;
  font-size: 36px;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow: 0 4px 18px rgba(46, 124, 255, 0.35);
}

.rest-complete-alert-panel p {
  margin: 9px 0 0;
  color: #b9c3d3;
  font-size: 14px;
  font-weight: 700;
}

.rest-complete-alert-glow {
  position: absolute;
  width: 210px;
  aspect-ratio: 1;
  border: 2px solid rgba(87, 151, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 44px rgba(46, 124, 255, 0.35), inset 0 0 34px rgba(46, 124, 255, 0.14);
}

.rest-complete-alert.is-visible { opacity: 1; }

.season-moment {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  background: rgba(3, 6, 11, 0.84);
  backdrop-filter: blur(14px);
}

.season-moment[hidden] { display: none; }

.season-moment-frame {
  position: absolute;
  width: min(350px, calc(100vw - 34px));
  aspect-ratio: 1;
  border: 1px solid rgba(74, 137, 238, 0.28);
  transform: rotate(45deg);
  pointer-events: none;
}

.season-moment-frame-inner {
  width: min(270px, calc(100vw - 96px));
  border-color: rgba(112, 166, 255, 0.18);
}

.season-moment-panel {
  position: relative;
  width: min(330px, calc(100vw - 40px));
  overflow: hidden;
  padding: 30px 24px 22px;
  border: 1px solid rgba(89, 151, 255, 0.4);
  border-radius: 16px;
  background: rgba(13, 18, 27, 0.97);
  box-shadow: 0 28px 84px rgba(0, 0, 0, 0.68), 0 0 44px rgba(46, 124, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-align: center;
}

.season-moment-panel::before {
  content: "";
  position: absolute;
  inset: 0 14% auto;
  height: 2px;
  background: #5f9cff;
  box-shadow: 0 0 20px rgba(68, 137, 255, 0.9);
}

.season-moment-sweep {
  position: absolute;
  inset: -20% auto -20% 48%;
  width: 22%;
  transform: skewX(-14deg);
  background: rgba(112, 167, 255, 0.09);
  pointer-events: none;
}

.season-moment-bars {
  height: 32px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 5px;
  margin-bottom: 15px;
}

.season-moment-bars i {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: #4f8df5;
  box-shadow: 0 0 10px rgba(66, 135, 250, 0.52);
  transform-origin: center bottom;
}

.season-moment-bars i:nth-child(2),
.season-moment-bars i:nth-child(6) { height: 22px; }
.season-moment-bars i:nth-child(3),
.season-moment-bars i:nth-child(5) { height: 27px; }
.season-moment-bars i:nth-child(4) { height: 32px; background: #f5f7fb; }

.season-moment-kicker {
  margin: 0 0 7px;
  color: #6ea6ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.season-moment-panel h2 {
  margin: 0;
  color: #f5f7fb;
  font-size: clamp(24px, 7vw, 29px);
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.season-moment-panel > p:not(.season-moment-kicker) {
  margin: 10px 0 22px;
  color: #aeb8c8;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

.season-moment-button {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(104, 159, 247, 0.42);
  border-radius: 12px;
  background: #1a2638;
  color: #f5f7fb;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.24);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.season-moment-button:active { transform: scale(0.98); background: #22324a; }
.season-moment-button:focus-visible { outline: 2px solid #74a9ff; outline-offset: 3px; }
body.season-moment-open { overflow: hidden; overscroll-behavior: none; }

@media (prefers-reduced-motion: reduce) {
  .season-moment * { animation: none !important; transition: none !important; }
}

body:has(.exercise-library-modal:not([hidden])),
body:has(.exercise-step-modal:not([hidden])) {
  overflow: hidden;
  overscroll-behavior: none;
}

.exercise-library-dialog {
  width: min(100%, 580px);
  height: min(82dvh, 820px);
  max-height: min(92dvh, 820px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--sc-border-strong);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: rgba(20, 24, 31, 0.98);
  box-shadow: var(--sc-shadow-lg);
}

.library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--sc-border);
  background: rgba(20, 24, 31, 0.98);
  padding: 18px 20px 14px;
}

.library-head h2 {
  font-size: 20px;
}

.library-close {
  flex: 0 0 auto;
  width: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sc-border-strong);
  border-radius: 12px;
  background: var(--sc-surface-strong);
  color: var(--sc-text);
  font-weight: 900;
  line-height: 1;
}

.library-close .lucide {
  width: 22px;
  height: 22px;
}

.exercise-library-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  scrollbar-width: none;
}

.exercise-library-scroll::-webkit-scrollbar {
  display: none;
}

.library-search {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(20, 24, 31, 0.96);
  padding: 14px 20px 12px;
  backdrop-filter: blur(18px);
}

.library-filter-block {
  padding: 0 20px 12px;
}

.library-filter-block p,
.library-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.library-count {
  padding: 2px 20px 10px;
}

.library-filter-block p {
  margin-bottom: 7px;
}

.library-filter-row {
  width: 100%;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 38px 4px 0;
  scroll-padding-right: 38px;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 0 calc(100% - 30px), transparent 100%);
}

.library-filter-row::-webkit-scrollbar { display: none; }

.library-filter-chip {
  flex: 0 0 auto;
  min-height: 40px;
  border: 1px solid var(--sc-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
}

.library-filter-chip.is-active {
  border-color: rgba(93, 156, 255, 0.7);
  background: rgba(46, 124, 255, 0.16);
  color: #c4daff;
}

.exercise-library-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0 20px;
}

.library-exercise-card {
  min-height: 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--sc-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  padding: 8px;
  text-align: left;
}

.library-exercise-card.is-added {
  border-color: rgba(134, 232, 95, 0.78);
  background: rgba(134, 232, 95, 0.14);
  transform: scale(0.985);
}

.library-exercise-card .exercise-art {
  width: 62px;
}

.library-exercise-card strong,
.library-exercise-card small {
  display: block;
}

.library-exercise-card strong {
  font-size: 13px;
  line-height: 1.25;
  word-break: keep-all;
}

.library-exercise-card small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.72);
  padding: 18px;
}

.profile-dialog {
  width: min(100%, 420px);
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #10151b;
  box-shadow: var(--shadow);
  padding: 18px;
}

.profile-dialog p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.profile-error {
  min-height: 18px;
  color: var(--danger) !important;
}

.complaint-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.complaint-actions > button {
  height: 50px;
  min-height: 50px;
  margin: 0;
  align-self: stretch;
}

.auth-dialog label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.auth-dialog input:not([type="checkbox"]) {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  padding: 0 12px;
}

.terms-check {
  grid-template-columns: auto 1fr;
  align-items: start;
  line-height: 1.45;
}

.terms-check input {
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.auth-conflict-summary {
  display: grid;
  gap: 8px;
}

.auth-conflict-summary div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.auth-conflict-summary span {
  color: var(--muted);
  font-size: 13px;
}

.support-modal {
  place-items: end center;
  padding: 12px 12px max(12px, env(safe-area-inset-bottom));
}

.support-dialog {
  width: min(100%, 540px);
  max-height: min(90vh, 780px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: #0b0f14;
  box-shadow: var(--shadow);
}

.support-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 16px;
}

.faq-list,
.privacy-content {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

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

.faq-list summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details p {
  margin: -2px 16px 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.privacy-content {
  padding: 4px 18px 22px;
}

.privacy-content h3 {
  margin: 20px 0 7px;
  font-size: 15px;
}

.privacy-content p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
}

.privacy-content .policy-date {
  margin-top: 16px;
  color: var(--accent);
  font-size: 12px;
}

.next-recommendation-dialog {
  position: relative;
  text-align: center;
}

.next-recommendation-dialog .eyebrow {
  margin-bottom: -2px;
}

.next-recommendation-name {
  display: block;
  border: 1px solid rgba(244, 186, 34, 0.4);
  border-radius: 8px;
  background: rgba(244, 186, 34, 0.1);
  color: var(--accent-strong);
  padding: 14px;
  font-size: 22px;
}

#nextRecommendationModal .complaint-actions > button,
#routineResumeModal .complaint-actions > button {
  height: 52px;
  min-height: 52px;
  margin: 0;
}

.routine-skip-button {
  display: block;
  position: absolute;
  right: 6px;
  bottom: -34px;
  min-width: 40px;
  min-height: 26px;
  margin: 0;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: var(--sc-text-tertiary, #707887);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.routine-skip-button:hover,
.routine-skip-button:focus-visible {
  color: var(--sc-text-secondary, #a6adba);
}

.routine-skip-button:active {
  transform: scale(0.96);
}

.routine-skip-button[hidden] {
  display: none;
}

.ghost-button {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-weight: 900;
}

@media (max-width: 390px) {
  .app-shell {
    padding-inline: 10px;
  }

  .hero-card h1 {
    font-size: 25px;
  }

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

  .input-stepper {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

}

@media (max-height: 650px) {
  body:has(.app-screen[data-screen="record"].is-active) .bottom-nav {
    display: none;
  }

  body:has(.app-screen[data-screen="record"].is-active) .app-shell {
    padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px));
  }
}

/* ========================================================================
   SetCounter Design System v1.0
   Premium training surfaces. This layer intentionally preserves app markup.
   ======================================================================== */

:root {
  color-scheme: dark;
  --sc-bg: #080a0e;
  --sc-bg-elevated: #0d1016;
  --sc-surface: rgba(20, 24, 31, 0.9);
  --sc-surface-strong: #171b22;
  --sc-glass: rgba(24, 29, 37, 0.76);
  --sc-glass-strong: rgba(28, 34, 43, 0.9);
  --sc-primary: #2e7cff;
  --sc-primary-strong: #5d9cff;
  --sc-secondary: #4bc7dc;
  --sc-danger: #f05b64;
  --sc-success: #66c987;
  --sc-warning: #f4b75d;
  --sc-purple: #9a78ff;
  --sc-red: #ef646d;
  --sc-text: #f5f7fb;
  --sc-text-secondary: #a6adba;
  --sc-text-tertiary: #6e7684;
  --sc-disabled: #4c535f;
  --sc-border: rgba(211, 223, 241, 0.1);
  --sc-border-strong: rgba(211, 223, 241, 0.18);
  --sc-radius-control: 14px;
  --sc-radius-card: 18px;
  --sc-radius-modal: 24px;
  --sc-radius-sheet: 28px;
  --sc-shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.2);
  --sc-shadow-md: 0 14px 32px rgba(0, 0, 0, 0.3);
  --sc-shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.5);
  --sc-glow: 0 0 0 1px rgba(73, 137, 255, 0.2), 0 14px 30px rgba(29, 95, 220, 0.2);
  --sc-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --sc-metal-control-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 44%),
    linear-gradient(145deg, #1c2430, #10151d 72%);
  --sc-metal-control-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 44%),
    linear-gradient(145deg, #222d3c, #121923 72%);
  --sc-metal-control-bg-pressed: linear-gradient(180deg, #10151d, #1b2636);
  --sc-metal-control-border: rgba(146, 169, 204, 0.26);
  --sc-metal-control-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.32),
    0 6px 13px rgba(0, 0, 0, 0.28);
  --sc-metal-control-shadow-pressed:
    inset 0 3px 7px rgba(0, 0, 0, 0.44),
    0 2px 5px rgba(0, 0, 0, 0.2);
  --bg: var(--sc-bg);
  --bg-soft: var(--sc-bg-elevated);
  --panel: var(--sc-surface);
  --panel-strong: var(--sc-surface-strong);
  --ink: var(--sc-text);
  --muted: var(--sc-text-secondary);
  --faint: var(--sc-text-tertiary);
  --line: var(--sc-border);
  --line-strong: var(--sc-border-strong);
  --accent: var(--sc-primary-strong);
  --accent-strong: #8bb6ff;
  --accent-dark: #f7faff;
  --green: var(--sc-success);
  --danger: var(--sc-danger);
  --shadow: var(--sc-shadow-lg);
  --radius: var(--sc-radius-card);
}

html {
  background: var(--sc-bg);
}

body {
  background: var(--sc-bg);
  color: var(--sc-text);
  font-family: Inter, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* App launch */
.app-launch-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  min-height: 0;
  padding: 0 24px;
  overflow: hidden;
  background: #080a0e;
  color: #f5f7fb;
}

.app-launch-splash-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 22px;
  width: min(340px, calc(100vw - 48px));
  transform: translate(-50%, -50%);
}

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

.app-launch-wordmark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  white-space: nowrap;
  perspective: 600px;
}

.app-launch-word {
  display: inline-flex;
  align-items: baseline;
  letter-spacing: 0;
}

.app-launch-word i {
  display: inline-block;
  font-size: 34px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity, filter;
}

.app-launch-word-set i {
  color: #f5f7fb;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.52);
}

.app-launch-word-counter i {
  color: #5f9cff;
  text-shadow: 0 0 20px rgba(46, 124, 255, 0.24), 0 8px 22px rgba(0, 0, 0, 0.52);
}

.app-launch-progress {
  width: min(248px, 68vw);
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(112, 120, 135, 0.2);
  opacity: 0;
}

.app-launch-progress i {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: inherit;
  background: #2e7cff;
  box-shadow: 0 0 12px rgba(46, 124, 255, 0.55);
  animation: app-launch-progress 0.86s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes app-launch-progress {
  from { transform: translateX(-130%); }
  to { transform: translateX(340%); }
}

@media (max-width: 360px) {
  .app-launch-word i {
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-launch-progress i {
    animation: none;
  }

  .app-launch-word i,
  .app-launch-progress {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

body::before {
  display: none;
}

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

button {
  position: relative;
  overflow: hidden;
  border: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--sc-ease), background-color 160ms var(--sc-ease), border-color 160ms var(--sc-ease), box-shadow 160ms var(--sc-ease), color 160ms var(--sc-ease), opacity 160ms var(--sc-ease);
}

button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  transition: opacity 160ms var(--sc-ease), transform 200ms var(--sc-ease);
}

button:not(:disabled):hover {
  transform: translateY(-1px);
}

button:not(:disabled):active {
  transform: translateY(1px) scale(0.985);
}

button:not(:disabled):active::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(18);
  transition-duration: 0ms;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--sc-primary-strong);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

h1,
h2,
h3,
strong {
  color: var(--sc-text);
  letter-spacing: 0;
}

h1 { font-size: 28px; font-weight: 800; line-height: 1.16; }
h2 { font-size: 20px; font-weight: 750; line-height: 1.25; }
h3 { font-size: 17px; font-weight: 750; line-height: 1.3; }

.eyebrow {
  color: var(--sc-primary-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.eyebrow.danger { color: var(--sc-danger); }
.section-copy,
.level-copy,
.plan-detail-intro,
.sos-copy,
.reminder-copy { color: var(--sc-text-secondary); line-height: 1.55; }

.app-shell {
  width: min(100%, 620px);
  padding: max(24px, env(safe-area-inset-top)) 20px max(112px, calc(env(safe-area-inset-bottom) + 96px));
}

.app-screen {
  animation: sc-screen-in 200ms var(--sc-ease);
}

@keyframes sc-screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Shared surfaces */
.hero-card,
.level-card,
.metric-panel,
.calendar-section,
.history-section,
.board-section,
.menu-profile,
.menu-list,
.sos-section,
.support-menu,
.account-panel,
.home-progress-card,
.workout-plan-card,
.calendar-muscle-detail,
.calendar-day-detail,
.calendar-excuses,
.history-day,
.board-post,
.plan-info-grid > *,
.plan-schedule,
.auth-conflict-summary div {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-card);
  background: var(--sc-surface);
  box-shadow: var(--sc-shadow-sm);
}

.metric-panel,
.calendar-section,
.history-section,
.board-section,
.menu-profile,
.menu-list,
.sos-section,
.support-menu,
.account-panel,
.calendar-day-detail,
.calendar-excuses {
  padding: 0;
}

.home-header,
.screen-header {
  min-height: 52px;
}

.screen-header {
  margin: 0 -4px 20px;
  padding: 0 4px;
}

.home-brand h1,
.screen-header h1 { font-size: 26px; font-weight: 800; }

.brand-logo,
.avatar-frame {
  box-shadow: 0 0 0 1px var(--sc-border), var(--sc-shadow-sm);
}

.menu-button,
.back-button,
.icon-button,
.ghost-icon,
.library-close,
.exercise-step-head button,
.exercise-step-footer > button:not(:last-child) {
  display: inline-grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  border: 1px solid var(--sc-metal-control-border);
  border-radius: 14px;
  background: var(--sc-metal-control-bg);
  color: var(--sc-text);
  box-shadow: var(--sc-metal-control-shadow);
  line-height: 0;
  transition: transform 140ms var(--sc-ease), border-color 160ms var(--sc-ease), background 160ms var(--sc-ease), box-shadow 160ms var(--sc-ease), color 160ms var(--sc-ease);
}

.menu-button .lucide,
.back-button .lucide,
.icon-button .lucide,
.library-close .lucide,
.add-exercise-button .lucide,
.edit-exercise-button .lucide,
.toggle-exercise-grid-button .lucide,
.exercise-step-footer .lucide {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.back-button .lucide,
.icon-button .lucide,
.library-close .lucide {
  display: block;
  transform: translateY(1px);
}

.add-exercise-button,
.edit-exercise-button {
  display: inline-grid;
  place-items: center;
}

.menu-button:hover,
.back-button:hover,
.icon-button:hover,
.ghost-icon:hover,
.library-close:hover,
.exercise-step-head button:hover,
.exercise-step-footer > button:not(:last-child):hover {
  border-color: var(--sc-border-strong);
  background: var(--sc-metal-control-bg-hover);
}

.menu-button:active,
.back-button:active,
.icon-button:active,
.ghost-icon:active,
.library-close:active,
.exercise-step-head button:active,
.exercise-step-footer > button:not(:last-child):active {
  transform: translateY(1px) scale(0.97);
  background: var(--sc-metal-control-bg-pressed);
  box-shadow: var(--sc-metal-control-shadow-pressed);
}

.exercise-step-footer > button:not(:last-child):disabled {
  border-color: rgba(146, 169, 204, 0.1);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  color: var(--sc-text-tertiary);
  opacity: 0.58;
  transform: none;
}

.menu-popover {
  border: 1px solid var(--sc-border-strong);
  border-radius: 16px;
  background: var(--sc-glass-strong);
  box-shadow: var(--sc-shadow-md);
  backdrop-filter: blur(20px);
  padding: 6px;
}

.menu-popover button,
.menu-list button,
.support-menu button {
  min-height: 54px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--sc-text);
}

.menu-popover button:hover,
.menu-list button:hover,
.support-menu button:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Buttons */
.primary-cta,
.confirm-button,
.count-button,
.plan-detail-cta button,
.sos-button {
  min-height: 56px;
  border: 1px solid rgba(133, 181, 255, 0.52);
  border-radius: var(--sc-radius-control);
  background: var(--sc-primary);
  color: #f8fbff;
  box-shadow: 0 8px 22px rgba(18, 89, 207, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  font-size: 16px;
  font-weight: 800;
}

.primary-cta:hover,
.confirm-button:hover,
.count-button:hover,
.plan-detail-cta button:hover {
  background: var(--sc-primary-strong);
  box-shadow: var(--sc-glow), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.sos-button {
  border-color: rgba(255, 142, 148, 0.45);
  background: #bf3e49;
  box-shadow: 0 8px 22px rgba(183, 42, 54, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.secondary-button,
.ghost-button,
.mini-button,
.reminder-button,
.board-action-button,
.day-add-button,
.history-day-button {
  min-height: 46px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-control);
  background: rgba(255, 255, 255, 0.045);
  color: var(--sc-text);
  font-weight: 750;
}

.secondary-button:hover,
.ghost-button:hover,
.mini-button:hover,
.reminder-button:hover,
.board-action-button:hover,
.day-add-button:hover,
.history-day-button:hover {
  border-color: rgba(111, 163, 255, 0.45);
  background: rgba(61, 126, 246, 0.12);
  color: #dceaff;
}

.delete-button,
.delete-selected-exercises {
  border-color: rgba(240, 91, 100, 0.35);
  background: rgba(240, 91, 100, 0.1);
  color: #ff9da4;
}

.confirm-button:disabled,
.primary-cta:disabled,
.count-button:disabled {
  border-color: transparent;
  background: var(--sc-disabled);
  box-shadow: none;
  color: #a8afba;
}

/* Explicit button variants for every existing and future app surface. */
.danger-button {
  min-height: 48px;
  border: 1px solid rgba(240, 91, 100, 0.42);
  border-radius: var(--sc-radius-control);
  background: rgba(240, 91, 100, 0.13);
  color: #ffadb3;
  font-weight: 800;
}

.danger-button:hover {
  border-color: rgba(255, 142, 149, 0.64);
  background: rgba(240, 91, 100, 0.22);
}

.floating-button {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(96px, calc(env(safe-area-inset-bottom) + 88px));
  z-index: 45;
  display: inline-grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid rgba(133, 181, 255, 0.52);
  border-radius: 18px;
  background: var(--sc-primary);
  box-shadow: var(--sc-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #f8fbff;
}

button.is-loading,
button[aria-busy="true"] {
  color: transparent !important;
  pointer-events: none;
}

button.is-loading::before,
button[aria-busy="true"]::before {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.34);
  border-top-color: #fff;
  border-radius: 50%;
  content: "";
  animation: sc-spin 650ms linear infinite;
}

/* Inputs */
input,
textarea,
select,
.auth-dialog input:not([type="checkbox"]),
.board-comment-form input {
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-control);
  background: rgba(255, 255, 255, 0.045);
  color: var(--sc-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition: border-color 160ms var(--sc-ease), background-color 160ms var(--sc-ease), box-shadow 160ms var(--sc-ease);
}

input::placeholder,
textarea::placeholder { color: var(--sc-text-tertiary); }

input:hover,
textarea:hover,
select:hover { border-color: var(--sc-border-strong); }

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(93, 156, 255, 0.86);
  background: rgba(70, 128, 231, 0.07);
  box-shadow: 0 0 0 4px rgba(51, 123, 247, 0.14);
}

.input-stepper { gap: 4px; }

.input-stepper input {
  border-radius: var(--sc-radius-control);
  color: var(--sc-text);
  font-variant-numeric: tabular-nums;
}

.stepper-button {
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--sc-metal-control-border);
  border-radius: var(--sc-radius-control);
  background: var(--sc-metal-control-bg);
  color: var(--sc-primary-strong);
  box-shadow: var(--sc-metal-control-shadow);
  touch-action: manipulation;
  user-select: none;
  line-height: 0;
  transition: border-color 150ms var(--sc-ease), background 150ms var(--sc-ease), box-shadow 150ms var(--sc-ease), color 150ms var(--sc-ease);
}

.stepper-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px 7px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
}

.stepper-button .lucide {
  display: block;
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 2.6;
  fill: none;
  transform: translateY(1px);
  filter: drop-shadow(0 1px 3px rgba(24, 102, 228, 0.42));
}

.stepper-button:hover {
  border-color: rgba(93, 156, 255, 0.55);
  background: var(--sc-metal-control-bg-hover);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18), inset 0 -2px rgba(0, 0, 0, 0.3), 0 7px 16px rgba(0, 0, 0, 0.3), 0 0 14px rgba(46, 124, 255, 0.1);
}

.stepper-button:active,
.stepper-button.is-holding {
  border-color: rgba(93, 156, 255, 0.62);
  background: var(--sc-metal-control-bg-pressed);
  box-shadow: var(--sc-metal-control-shadow-pressed), 0 0 12px rgba(46, 124, 255, 0.13);
  transform: translateY(1px) scale(0.97);
}

[data-screen="record"] .input-stepper input {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  font-size: 22px;
}

[data-screen="record"] .input-stepper input:hover,
[data-screen="record"] .input-stepper input:focus {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* Workout, plan and statistics cards */
.workout-plan-rail { gap: 16px; }

.workout-plan-card {
  min-height: 280px;
  border-color: var(--sc-border);
  background-color: var(--sc-surface-strong);
  box-shadow: var(--sc-shadow-md);
}

.workout-plan-card::after,
.hero-card::after { opacity: 0.5; }

.workout-plan-card:hover {
  border-color: rgba(115, 166, 255, 0.38);
  box-shadow: var(--sc-glow);
}

.workout-plan-card.cyan { border-color: rgba(75, 199, 220, 0.32); }
.workout-plan-card.coral { border-color: rgba(240, 91, 100, 0.32); }
.workout-plan-card.violet { border-color: rgba(154, 120, 255, 0.34); }

.workout-plan-card-copy h3,
.plan-detail-hero h1 { font-size: 26px; font-weight: 800; }

.home-progress-card {
  padding: 20px;
  background: var(--sc-glass);
  backdrop-filter: blur(20px);
}

.home-progress-stats strong,
.metric-grid strong,
.plan-info-grid strong {
  color: var(--sc-text);
  font-variant-numeric: tabular-nums;
}

.home-progress-bar,
.level-progress { background: rgba(255, 255, 255, 0.075); }

.level-progress div {
  background: var(--sc-primary);
  box-shadow: 0 0 16px rgba(46, 124, 255, 0.45);
}

.metric-grid { gap: 12px; padding: 0 16px 16px; }

.metric-grid article {
  min-height: 94px;
  border-color: var(--sc-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  padding: 16px;
}

.library-exercise-card {
  border-color: var(--sc-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.library-exercise-card:hover {
  border-color: rgba(93, 156, 255, 0.4);
  background: rgba(46, 124, 255, 0.09);
}

.library-exercise-card.is-added {
  border-color: rgba(93, 156, 255, 0.72);
  background: rgba(46, 124, 255, 0.14);
  box-shadow: var(--sc-glow);
}

.set-table-wrap {
  border-color: var(--sc-border);
  border-radius: var(--sc-radius-card);
  background: rgba(255, 255, 255, 0.032);
}

.set-table th,
.set-table td,
.record-table th,
.record-table td { border-color: var(--sc-border); }

.set-table th,
.record-table th { color: var(--sc-text-tertiary); }

.set-table td,
.record-table td { font-variant-numeric: tabular-nums; }

/* Calendar, board and menu */
.calendar-grid { gap: 8px; }

.calendar-day {
  border-radius: 14px;
  transition: transform 140ms var(--sc-ease), background-color 160ms var(--sc-ease), box-shadow 160ms var(--sc-ease);
}

.calendar-day:hover { background: rgba(46, 124, 255, 0.12); }
.calendar-day.is-selected { background: var(--sc-primary); box-shadow: var(--sc-glow); }

.board-tabs {
  border: 1px solid var(--sc-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  padding: 4px;
}

.board-tabs button { border-radius: 10px; color: var(--sc-text-secondary); }
.board-tabs button.is-active { background: rgba(46, 124, 255, 0.2); color: #e8f1ff; }

.board-post,
.history-day { padding: 16px; }

.menu-profile,
.account-panel { padding: 20px; }

.menu-list,
.support-menu { padding: 6px; }

.menu-list button,
.support-menu button {
  padding: 0 12px;
  text-align: left;
}

.library-exercise-add {
  min-width: 0;
  min-height: 64px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
}

.library-exercise-add:active { background: rgba(255, 255, 255, 0.035); }

.library-exercise-detail-button {
  min-width: 66px;
  min-height: 48px;
  border: 1px solid rgba(111, 164, 255, 0.24);
  border-radius: 10px;
  background: var(--sc-metal-control-bg);
  color: #a9c8ff;
  box-shadow: var(--sc-metal-control-shadow);
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.library-exercise-detail-button:hover,
.library-exercise-detail-button:focus-visible {
  border-color: rgba(111, 164, 255, 0.5);
  background: var(--sc-metal-control-bg-hover);
  color: #d7e6ff;
}

.library-exercise-detail-button:active {
  background: var(--sc-metal-control-bg-pressed);
  box-shadow: var(--sc-metal-control-shadow-pressed);
  transform: translateY(1px) scale(0.98);
}

.library-exercise-detail-button[aria-expanded="true"] {
  border-color: rgba(111, 164, 255, 0.56);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 44%),
    linear-gradient(145deg, rgba(35, 75, 137, 0.72), rgba(13, 30, 54, 0.9) 72%);
  color: #d7e6ff;
}

.library-exercise-detail {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 4px 0 0;
  border-top: 1px solid var(--sc-border);
  padding: 14px 4px 6px;
}

.library-exercise-detail[hidden] { display: none; }

.library-detail-loading {
  margin: 8px 0;
  color: var(--sc-text-secondary);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.library-detail-title strong,
.library-detail-title small { display: block; }

.library-detail-title strong {
  color: var(--sc-text);
  font-size: 16px;
  line-height: 1.3;
}

.library-detail-title small {
  margin-top: 3px;
  color: var(--sc-text-tertiary);
  font-size: 10px;
  font-weight: 700;
}

.library-detail-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.library-detail-images img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  border: 1px solid var(--sc-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  object-fit: cover;
}

.library-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  margin: 12px 0 0;
}

.library-detail-meta div {
  min-width: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  padding: 9px 0;
}

.library-detail-meta dt {
  color: var(--sc-text-tertiary);
  font-size: 10px;
  font-weight: 800;
}

.library-detail-meta dd {
  margin: 3px 0 0;
  color: var(--sc-text-secondary);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
  word-break: keep-all;
}

.library-detail-instructions { margin-top: 14px; }

.library-detail-instructions h4 {
  color: var(--sc-text);
  font-size: 13px;
}

.library-detail-instructions ol {
  display: grid;
  gap: 8px;
  margin: 9px 0 0;
  padding-left: 20px;
}

.library-detail-instructions li {
  color: var(--sc-text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.58;
  word-break: keep-all;
}

.library-empty-state {
  min-height: 220px;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 32px 20px;
  text-align: center;
}

.library-empty-state strong {
  color: var(--sc-text);
  font-size: 16px;
}

.library-empty-state span {
  max-width: 280px;
  margin-top: 7px;
  color: var(--sc-text-tertiary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
}

.library-load-more {
  min-height: 48px;
  border: 1px solid var(--sc-border-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--sc-text-secondary);
  font-size: 12px;
  font-weight: 900;
}

.sos-section {
  border-color: rgba(240, 91, 100, 0.28);
  background: rgba(102, 27, 35, 0.2);
  padding: 20px;
}

.sos-orbit {
  border-color: rgba(240, 91, 100, 0.52);
  color: #ff8b92;
  box-shadow: 0 0 32px rgba(240, 91, 100, 0.14);
}

/* Navigation and feedback */
.bottom-nav {
  width: min(100%, 620px);
  border: 1px solid var(--sc-border);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: rgba(12, 15, 20, 0.84);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(24px) saturate(135%);
  padding: 9px 12px max(9px, env(safe-area-inset-bottom));
}

.bottom-nav button {
  display: grid;
  grid-template-rows: 22px auto;
  align-content: center;
  justify-items: center;
  gap: 3px;
  min-height: 52px;
  border-radius: 14px;
  color: var(--sc-text-tertiary);
  font-size: 12px;
  font-weight: 750;
}

.bottom-nav .lucide {
  width: 20px;
  height: 20px;
  stroke-width: 2.15;
}

.bottom-nav button span { line-height: 1; }

.bottom-nav button:hover { background: rgba(255, 255, 255, 0.05); color: var(--sc-text-secondary); }
.bottom-nav button.is-active { background: rgba(46, 124, 255, 0.18); color: #b9d3ff; box-shadow: inset 0 0 0 1px rgba(111, 164, 255, 0.12); }

.toast {
  border-color: rgba(127, 173, 255, 0.32);
  border-radius: 16px;
  background: rgba(27, 33, 43, 0.9);
  box-shadow: var(--sc-shadow-md);
  backdrop-filter: blur(20px);
  padding: 14px 16px;
}

/* Home premium visual pass: scoped to the existing home structure. */
[data-screen="home"] {
  color: var(--sc-text);
}

[data-screen="home"] .home-header {
  padding: 4px 2px 16px;
}

[data-screen="home"] .home-brand {
  min-width: 0;
}

[data-screen="home"] .home-section-head .eyebrow,
[data-screen="home"] .home-progress-head .eyebrow {
  color: #78aaff;
  letter-spacing: 0;
}

[data-screen="home"] .home-header h1 {
  position: relative;
  overflow: hidden;
  color: #78aaff;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  perspective: 500px;
  text-shadow: 0 0 22px rgba(46, 124, 255, 0.16);
}

[data-screen="home"] .home-brand-letters {
  display: inline-flex;
  gap: 0.28em;
  color: transparent;
  background: linear-gradient(108deg, #5f98ff 8%, #a9c9ff 44%, #6ca3ff 62%, #3f7fe9 100%);
  background-size: 220% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
}

[data-screen="home"] .home-brand-word {
  display: inline-flex;
}

[data-screen="home"] .home-brand-word i {
  display: inline-block;
  color: inherit;
  font: inherit;
  font-style: normal;
  transform-origin: 50% 100%;
}

@media (prefers-reduced-motion: reduce) {
  [data-screen="home"] .home-brand-letters { background-position: 38% 50%; }
}

[data-screen="home"] .menu-button {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    #141922;
  color: #e9edf5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 8px 20px rgba(0, 0, 0, 0.3);
}

[data-screen="home"] .menu-button:active {
  transform: translateY(1px) scale(0.97);
  border-color: rgba(93, 156, 255, 0.52);
  background: rgba(46, 124, 255, 0.14);
}

[data-screen="home"] .home-profile-row {
  min-height: 38px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

[data-screen="home"] .user-badge {
  min-width: 0;
  gap: 8px;
  color: var(--sc-text);
}

[data-screen="home"] .home-level-profile-button {
  min-height: 44px;
  margin: -3px 0;
  padding: 3px 8px 3px 3px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  transition: background 160ms ease, transform 160ms ease;
}

[data-screen="home"] .home-level-profile-button:active {
  transform: scale(0.98);
  background: rgba(46, 124, 255, 0.1);
}

[data-screen="home"] .home-level-profile-button:focus-visible {
  outline: 2px solid var(--sc-primary);
  outline-offset: 2px;
}

[data-screen="home"] .level-badge {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 5px 14px rgba(0, 0, 0, 0.28);
}

[data-screen="home"] .nickname-text {
  overflow: hidden;
  color: var(--sc-text);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-screen="home"] .home-profile-row > span {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--sc-text-tertiary);
  padding: 7px 9px;
  font-variant-numeric: tabular-nums;
}

[data-screen="home"] .home-profile-row > span strong {
  color: var(--sc-text);
}

[data-screen="home"] .plan-section,
[data-screen="home"] .home-log-section {
  margin-top: 16px;
}

.record-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.rest-timer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  overflow: hidden;
  padding: 10px 0 0;
}

.rest-timer-progress {
  display: grid;
  grid-template-columns: repeat(30, minmax(2px, 1fr));
  gap: 3px;
  width: 100%;
  height: 26px;
  align-items: stretch;
  transform-origin: center;
}

.rest-timer-progress i {
  display: block;
  min-width: 0;
  border-radius: 3px;
  background: #252d39;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: background-color 180ms var(--sc-ease), box-shadow 180ms var(--sc-ease), opacity 180ms var(--sc-ease);
}

.rest-timer-progress i.is-remaining {
  background: #66758b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.rest-timer.is-running .rest-timer-progress i.is-remaining {
  background: #2e7cff;
  box-shadow: 0 0 7px rgba(46, 124, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.rest-timer-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 0;
}

.rest-duration-stepper {
  display: flex;
  align-items: center;
  width: 124px;
  height: 40px;
  overflow: hidden;
  border: 1px solid rgba(126, 143, 171, 0.24);
  border-radius: 9px;
  background: rgba(13, 18, 26, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.rest-duration-stepper output {
  flex: 1;
  min-width: 0;
  padding-left: 9px;
  color: #f5f7fb;
  font-size: 12.5px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.rest-duration-buttons {
  display: grid;
  align-self: stretch;
  width: 24px;
  border-left: 1px solid rgba(126, 143, 171, 0.18);
}

.rest-duration-buttons button {
  display: grid;
  min-width: 24px;
  min-height: 19px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(9, 13, 19, 0.14));
  color: #a8b7cb;
  padding: 0;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.025);
  transition: background 140ms var(--sc-ease), color 140ms var(--sc-ease), transform 140ms var(--sc-ease);
}

.rest-duration-buttons button:hover,
.rest-duration-buttons button:focus-visible {
  background: rgba(93, 156, 255, 0.13);
  color: #c5d8f7;
}

.rest-duration-buttons button:active {
  background: rgba(8, 12, 18, 0.72);
  color: #7faaff;
  transform: scale(0.93);
}

.rest-duration-buttons button + button {
  border-top: 1px solid rgba(126, 143, 171, 0.18);
}

.rest-duration-buttons svg {
  width: 10px;
  height: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rest-timer-controls .rest-timer-toggle {
  display: grid;
  width: 48px;
  min-width: 48px;
  min-height: 40px;
  place-items: center;
  border: 1px solid rgba(126, 143, 171, 0.24);
  border-radius: 9px;
  background: rgba(13, 18, 26, 0.76);
  color: #dce6f4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 0;
  transition: transform 140ms var(--sc-ease), filter 160ms var(--sc-ease);
}

.rest-timer-controls .rest-timer-toggle[hidden] {
  display: none;
}

.rest-timer-toggle svg {
  width: 20px;
  height: 20px;
}

.rest-timer-toggle .rest-timer-pause-icon,
.rest-timer-toggle.is-pause-action .rest-timer-play-icon {
  display: none;
}

.rest-timer-toggle.is-pause-action .rest-timer-pause-icon {
  display: block;
}

.rest-timer-controls button:active {
  transform: scale(0.96);
  filter: brightness(0.9);
}

.rest-timer.is-finished .rest-timer-progress i {
  background: rgba(102, 201, 135, 0.26);
  box-shadow: none;
}

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

.record-actions .action-row,
.record-actions .confirm-button {
  margin-top: 0;
}

.record-actions .action-row > button {
  height: 56px;
  min-height: 56px;
}

.record-actions .confirm-button:not(.is-target-complete):not(:disabled) {
  border-color: var(--sc-border);
  background: rgba(255, 255, 255, 0.045);
  color: var(--sc-text);
  box-shadow: none;
}

.record-actions .confirm-button:not(.is-target-complete):not(:disabled):hover {
  border-color: rgba(111, 163, 255, 0.45);
  background: rgba(61, 126, 246, 0.12);
  box-shadow: none;
}

[data-screen="home"] .home-section-head,
[data-screen="home"] .home-progress-head {
  align-items: flex-end;
  margin-bottom: 12px;
}

[data-screen="home"] .home-section-head h2,
[data-screen="home"] .home-progress-head h2 {
  color: var(--sc-text);
  font-size: 20px;
  font-weight: 820;
  line-height: 1.24;
}

[data-screen="home"] .home-section-head > span {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--sc-text-secondary);
  padding: 6px 8px;
}

[data-screen="home"] .workout-plan-rail {
  gap: 12px;
  margin-inline: -14px;
  padding: 0 14px 12px;
  scroll-padding-inline: 14px;
  overscroll-behavior-inline: contain;
}

[data-screen="home"] .workout-plan-card {
  flex-basis: min(86vw, 382px);
  min-height: 310px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background-color: #11161d;
  background-image:
    linear-gradient(90deg, rgba(5, 8, 13, 0.94) 0%, rgba(6, 10, 16, 0.76) 48%, rgba(7, 11, 16, 0.14) 100%),
    linear-gradient(180deg, rgba(8, 11, 16, 0.04) 34%, rgba(7, 10, 15, 0.96) 100%),
    var(--plan-image);
  background-position: center, center, center;
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.44),
    0 18px 36px rgba(0, 0, 0, 0.34);
  padding: 20px;
  scroll-snap-align: start;
  transition:
    transform 160ms var(--sc-ease),
    border-color 180ms var(--sc-ease),
    box-shadow 180ms var(--sc-ease);
}

[data-screen="home"] .workout-plan-card::after {
  opacity: 1;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), transparent 36%),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.22));
}

[data-screen="home"] .workout-plan-card.cyan,
[data-screen="home"] .workout-plan-card.coral,
[data-screen="home"] .workout-plan-card.violet {
  border-color: rgba(133, 170, 225, 0.23);
}

[data-screen="home"] .workout-plan-card:hover,
[data-screen="home"] .workout-plan-card:focus-visible {
  border-color: rgba(80, 143, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 38px rgba(0, 0, 0, 0.38),
    0 0 22px rgba(46, 124, 255, 0.18);
}

[data-screen="home"] .workout-plan-card:active {
  transform: scale(0.985);
  border-color: rgba(83, 148, 255, 0.82);
}

[data-screen="home"] .workout-plan-card-copy {
  max-width: 74%;
}

[data-screen="home"] .workout-plan-card-copy p {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border: 1px solid rgba(111, 164, 255, 0.34);
  border-radius: 6px;
  background: rgba(21, 69, 147, 0.38);
  color: #c6d9ff;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 850;
}

[data-screen="home"] .workout-plan-card-copy h3 {
  display: block;
  max-width: 100%;
  overflow: hidden;
  margin: 12px 0 9px;
  color: #fff;
  font-size: 24px;
  font-weight: 850;
  line-height: 1.12;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

[data-screen="home"] .workout-plan-card-copy span {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  color: rgba(235, 240, 248, 0.76);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

[data-screen="home"] .workout-plan-sequence {
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  background: rgba(7, 11, 17, 0.68);
  backdrop-filter: blur(10px);
  padding: 7px 9px;
}

[data-screen="home"] .workout-plan-meta {
  gap: 8px;
  margin: auto 0 12px;
  color: #e4eaf4;
  font-variant-numeric: tabular-nums;
}

[data-screen="home"] .workout-plan-meta span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(9, 13, 19, 0.68);
  backdrop-filter: blur(10px);
  padding: 0 9px;
  font-size: 12px;
}

[data-screen="home"] .workout-plan-card .workout-plan-open {
  min-height: 50px;
  border: 1px solid rgba(117, 169, 255, 0.58);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 48%),
    #2e7cff;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 20px rgba(11, 61, 151, 0.36);
  font-size: 15px;
  transition: transform 140ms var(--sc-ease), filter 160ms var(--sc-ease), box-shadow 160ms var(--sc-ease);
}

[data-screen="home"] .workout-plan-card .workout-plan-open .plan-arrow {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  background: rgba(5, 22, 54, 0.58);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

[data-screen="home"] .workout-plan-card .workout-plan-open:active {
  transform: translateY(1px) scale(0.99);
  filter: brightness(0.94);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

[data-screen="home"] .home-progress-card {
  margin-top: 16px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 40%),
    #12171f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 14px 30px rgba(0, 0, 0, 0.26);
  padding: 18px;
}

[data-screen="home"] .home-progress-head > strong {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(80, 143, 255, 0.3);
  border-radius: 7px;
  background: rgba(46, 124, 255, 0.12);
  color: #91b8ff;
  padding: 0 9px;
}

[data-screen="home"] .home-progress-stats {
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

[data-screen="home"] .home-progress-stats span {
  position: relative;
  min-width: 0;
  min-height: 66px;
  align-content: center;
  gap: 5px;
  padding: 10px 12px;
  color: var(--sc-text-tertiary);
  font-size: 11px;
  font-weight: 700;
}

[data-screen="home"] .home-progress-stats span + span::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

[data-screen="home"] .home-progress-stats strong {
  overflow: hidden;
  color: var(--sc-text);
  font-size: clamp(15px, 4.2vw, 18px);
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

[data-screen="home"] .home-progress-bar {
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  background: #090c11;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.65);
  margin: 16px 0 10px;
}

[data-screen="home"] .home-progress-bar div {
  background: linear-gradient(90deg, #2e7cff, #5ba8ff);
  box-shadow: 0 0 14px rgba(46, 124, 255, 0.62);
}

[data-screen="home"] .level-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0;
  font-variant-numeric: tabular-nums;
}

[data-screen="home"] .level-copy span {
  color: #6fa8ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

[data-screen="home"] .level-copy strong {
  color: var(--sc-text-primary);
  font-size: 13px;
  font-weight: 750;
  text-align: right;
}

[data-screen="home"] .home-log-section {
  margin-bottom: 12px;
}

[data-screen="home"] .home-log-section .mini-button {
  min-width: 94px;
  min-height: 48px;
  border: 1px solid rgba(107, 161, 255, 0.5);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 48%),
    rgba(46, 124, 255, 0.18);
  color: #c9dcff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 20px rgba(0, 0, 0, 0.2);
}

[data-screen="home"] .home-log-section .mini-button:active {
  transform: translateY(1px) scale(0.98);
  background: rgba(46, 124, 255, 0.26);
}

[data-screen="home"] .today-routine {
  gap: 8px;
  padding: 0 0 14px;
}

[data-screen="home"] .today-item {
  grid-template-columns: 62px minmax(0, 1fr) 30px;
  min-height: 80px;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 45%),
    #12171f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 8px;
}

[data-screen="home"] .today-thumb {
  width: 62px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: #0c1016;
}

[data-screen="home"] .today-thumb img {
  object-position: center 32%;
}

[data-screen="home"] .today-item strong {
  overflow: hidden;
  color: var(--sc-text);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-screen="home"] .today-item small {
  color: var(--sc-text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

[data-screen="home"] .today-check {
  width: 28px;
  height: 28px;
  background: rgba(46, 124, 255, 0.18);
  color: #8db6ff;
  box-shadow: inset 0 0 0 1px rgba(91, 156, 255, 0.28);
}

[data-screen="home"] .today-routine > p {
  min-height: 84px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(121, 141, 174, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--sc-text-tertiary);
  padding: 20px;
  text-align: center;
}

body:has([data-screen="home"].is-active) .app-shell {
  padding-bottom: max(118px, calc(env(safe-area-inset-bottom) + 102px));
}

body:has([data-screen="home"].is-active) .bottom-nav {
  width: min(100%, 620px);
  gap: 2px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px 8px 0 0;
  background: rgba(8, 11, 16, 0.94);
  box-shadow:
    0 -14px 32px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(24px) saturate(135%);
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
}

body:has([data-screen="home"].is-active) .bottom-nav button {
  position: relative;
  min-height: 54px;
  gap: 4px;
  border-radius: 8px;
  color: #687181;
  font-size: 11px;
  font-weight: 750;
  transition: color 160ms var(--sc-ease), background-color 160ms var(--sc-ease), transform 140ms var(--sc-ease);
}

body:has([data-screen="home"].is-active) .bottom-nav button::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transform: translateX(-50%);
}

body:has([data-screen="home"].is-active) .bottom-nav button:hover {
  background: rgba(255, 255, 255, 0.035);
  color: var(--sc-text-secondary);
}

body:has([data-screen="home"].is-active) .bottom-nav button.is-active {
  background: rgba(46, 124, 255, 0.1);
  color: #79aaff;
  box-shadow: inset 0 0 0 1px rgba(85, 150, 255, 0.12);
}

body:has([data-screen="home"].is-active) .bottom-nav button.is-active::before {
  background: #2e7cff;
  box-shadow: 0 0 12px rgba(46, 124, 255, 0.7);
}

body:has([data-screen="home"].is-active) .bottom-nav button:active {
  transform: scale(0.96);
}

@media (max-width: 380px) {
  [data-screen="home"] .home-header h1 { font-size: 32px; }
  [data-screen="home"] .home-profile-row { gap: 8px; }
  [data-screen="home"] .home-profile-row > span { padding-inline: 7px; font-size: 11px; }
  [data-screen="home"] .workout-plan-card { flex-basis: calc(100vw - 46px); min-height: 304px; padding: 18px; }
  [data-screen="home"] .workout-plan-card-copy h3 { font-size: 22px; }
  [data-screen="home"] .home-progress-card { padding: 16px; }
  [data-screen="home"] .home-progress-stats span { padding-inline: 9px; }
}

/* Calendar premium visual pass: existing data and interaction structure only. */
[data-screen="calendar"] {
  color: var(--sc-text);
}

[data-screen="calendar"] > .screen-header {
  min-height: 58px;
  margin-bottom: 14px;
}

[data-screen="calendar"] > .screen-header h1 {
  color: var(--sc-text);
  font-size: 20px;
  font-weight: 850;
  letter-spacing: 0;
}

[data-screen="calendar"] > .screen-header .back-button,
[data-screen="calendar"] > .screen-header .ghost-icon {
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--sc-metal-control-border);
  border-radius: 12px;
  background: var(--sc-metal-control-bg);
  box-shadow: var(--sc-metal-control-shadow);
  color: var(--sc-text);
  line-height: 1;
  transition: transform 140ms var(--sc-ease), border-color 160ms var(--sc-ease), background-color 160ms var(--sc-ease);
}

[data-screen="calendar"] > .screen-header .ghost-icon {
  border-color: rgba(240, 91, 100, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 52%),
    rgba(106, 26, 36, 0.22);
  color: #ff9aa1;
  font-size: 13px;
  font-weight: 850;
}

[data-screen="calendar"] > .screen-header .back-button .lucide {
  display: block;
  transform: translateY(1px);
}

[data-screen="calendar"] > .screen-header .back-button:active,
[data-screen="calendar"] > .screen-header .ghost-icon:active {
  transform: translateY(1px) scale(0.96);
}

[data-screen="calendar"] > .screen-header .back-button:focus-visible,
[data-screen="calendar"] > .screen-header .ghost-icon:focus-visible {
  border-color: rgba(83, 148, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(46, 124, 255, 0.16);
}

[data-screen="calendar"] .calendar-section,
[data-screen="calendar"] .history-section {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.048), transparent 38%),
    #11161e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 34px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

[data-screen="calendar"] .calendar-section {
  padding-bottom: 12px;
}

[data-screen="calendar"] .calendar-nav {
  min-height: 70px;
  margin: 0;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

[data-screen="calendar"] .calendar-nav h2 {
  color: var(--sc-text);
  font-size: 18px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

[data-screen="calendar"] .calendar-nav .icon-button {
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--sc-metal-control-border);
  border-radius: 12px;
  background: var(--sc-metal-control-bg);
  color: #dbe3ef;
  box-shadow: var(--sc-metal-control-shadow);
  line-height: 0;
  transition: transform 140ms var(--sc-ease), border-color 160ms var(--sc-ease), color 160ms var(--sc-ease);
}

[data-screen="calendar"] .calendar-nav .icon-button .lucide {
  display: block;
  transform: translateY(1px);
}

[data-screen="calendar"] .calendar-nav .icon-button:hover,
[data-screen="calendar"] .calendar-nav .icon-button:focus-visible {
  border-color: rgba(79, 143, 255, 0.58);
  color: #84afff;
}

[data-screen="calendar"] .calendar-nav .icon-button:active {
  transform: translateY(1px) scale(0.97);
  background: var(--sc-metal-control-bg-pressed);
  box-shadow: var(--sc-metal-control-shadow-pressed);
}

[data-screen="calendar"] .calendar-weekdays,
[data-screen="calendar"] .calendar-grid {
  gap: 4px;
  padding-inline: 12px;
}

[data-screen="calendar"] .calendar-weekdays {
  margin: 0;
  padding-top: 12px;
  padding-bottom: 8px;
  color: #7d8797;
  font-size: 11px;
  font-weight: 750;
}

[data-screen="calendar"] .calendar-weekdays span:first-child {
  color: #c87880;
}

[data-screen="calendar"] .calendar-weekdays span:last-child {
  color: #789bd4;
}

[data-screen="calendar"] .day-cell {
  min-width: 0;
  min-height: 66px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
  color: #dce2ec;
  padding: 7px 2px 8px;
  font-variant-numeric: tabular-nums;
  transition: transform 140ms var(--sc-ease), border-color 160ms var(--sc-ease), background-color 160ms var(--sc-ease), box-shadow 160ms var(--sc-ease);
}

[data-screen="calendar"] .day-cell:not(.is-empty):hover {
  border-color: rgba(113, 143, 190, 0.24);
  background: rgba(255, 255, 255, 0.045);
}

[data-screen="calendar"] .day-cell:not(.is-empty):active {
  transform: scale(0.94);
}

[data-screen="calendar"] .day-cell:focus-visible {
  border-color: rgba(88, 150, 255, 0.75);
  box-shadow: 0 0 0 2px rgba(46, 124, 255, 0.18);
}

[data-screen="calendar"] .day-cell > strong {
  display: block;
  color: inherit;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.1;
}

[data-screen="calendar"] .day-cell.is-today {
  border-color: rgba(75, 139, 250, 0.62);
  background: rgba(46, 124, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(46, 124, 255, 0.08);
}

[data-screen="calendar"] .day-cell.is-selected {
  border-color: rgba(116, 170, 255, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 42%),
    #2e7cff;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 7px 18px rgba(22, 85, 195, 0.34),
    0 0 16px rgba(46, 124, 255, 0.2);
}

[data-screen="calendar"] .day-cell-breakdown {
  min-width: 0;
  gap: 3px;
  margin-top: 5px;
}

[data-screen="calendar"] .day-cell-breakdown small {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #78aaff;
  font-size: 7px;
  font-weight: 800;
  line-height: 1.35;
  padding-block: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

[data-screen="calendar"] .day-cell.is-selected .day-cell-breakdown small {
  color: rgba(255, 255, 255, 0.88);
}

[data-screen="calendar"] .day-cell-breakdown small:nth-child(3) {
  width: max-content;
  max-width: 100%;
  margin: 1px auto 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 4px;
  color: var(--sc-text-secondary);
}

[data-screen="calendar"] .day-cell.has-workout::after,
[data-screen="calendar"] .day-cell.has-workout.has-volume::after,
[data-screen="calendar"] .day-cell.has-workout:has(small)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 14px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #2e7cff;
  box-shadow: 0 0 7px rgba(46, 124, 255, 0.5);
}

[data-screen="calendar"] .day-cell.is-selected.has-workout::after {
  background: #fff;
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.5);
}

[data-screen="calendar"] .day-cell.has-sos::before,
[data-screen="calendar"] .day-cell[title*="SOS:"]::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  left: auto;
  bottom: auto;
  width: 7px;
  height: 7px;
  transform: none;
  border: 1px solid rgba(255, 213, 216, 0.55);
  border-radius: 999px;
  background: #f05b64;
  box-shadow: 0 0 8px rgba(240, 91, 100, 0.42);
}

[data-screen="calendar"] .calendar-muscle-detail,
[data-screen="calendar"] .calendar-day-detail,
[data-screen="calendar"] .calendar-excuses {
  gap: 10px;
  padding: 14px 12px 0;
}

[data-screen="calendar"] .calendar-muscle-detail {
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

[data-screen="calendar"] .calendar-muscle-detail:empty {
  display: none;
}

[data-screen="calendar"] .calendar-day-detail {
  margin-top: 2px;
}

[data-screen="calendar"] .day-detail-head {
  min-height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 44%),
    #191e27;
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-screen="calendar"] .day-detail-head strong {
  color: var(--sc-text);
  font-size: 17px;
  font-weight: 850;
}

[data-screen="calendar"] .day-detail-head span {
  border: 1px solid rgba(82, 145, 255, 0.26);
  border-radius: 6px;
  background: rgba(46, 124, 255, 0.1);
  color: #8fb7ff;
  padding: 6px 8px;
  font-variant-numeric: tabular-nums;
}

[data-screen="calendar"] .day-volume-breakdown {
  gap: 6px;
  padding: 0;
}

[data-screen="calendar"] .day-volume-breakdown span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(76, 134, 232, 0.25);
  border-radius: 6px;
  background: rgba(46, 124, 255, 0.09);
  color: #7facff;
  padding: 0 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

[data-screen="calendar"] .day-log-item {
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent 42%),
    #151a22;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  padding: 10px 12px;
}

[data-screen="calendar"] .day-workout-list {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #151a22;
}

[data-screen="calendar"] .day-log-item:last-child {
  border-bottom: 0;
}

[data-screen="calendar"] .day-log-top {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 11px;
}

[data-screen="calendar"] .day-log-thumb {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: #0c1016;
  object-fit: cover;
}

[data-screen="calendar"] .day-log-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

[data-screen="calendar"] .day-log-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--sc-text);
  font-size: 15px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-screen="calendar"] .day-log-copy span {
  color: var(--sc-text-secondary);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

[data-screen="calendar"] .delete-button {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 116, 126, 0.82);
  box-shadow: none;
  transition: color 150ms ease, transform 140ms var(--sc-ease);
}

[data-screen="calendar"] .delete-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-screen="calendar"] .delete-button:hover,
[data-screen="calendar"] .delete-button:focus-visible {
  background: transparent;
  color: #ff8d95;
}

[data-screen="calendar"] .delete-button:focus-visible {
  outline: 2px solid rgba(240, 91, 100, 0.34);
  outline-offset: -7px;
  border-radius: 10px;
}

[data-screen="calendar"] .delete-button:active {
  transform: scale(0.9);
  background: transparent;
  color: #ff6671;
  box-shadow: none;
}

[data-screen="calendar"] .day-log-sets {
  margin: 7px 0 0 69px;
}

[data-screen="calendar"] .day-log-sets summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #7facff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
  user-select: none;
}

[data-screen="calendar"] .day-log-sets summary::-webkit-details-marker {
  display: none;
}

[data-screen="calendar"] .day-log-sets summary svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms var(--sc-ease);
}

[data-screen="calendar"] .day-log-sets[open] summary svg {
  transform: rotate(180deg);
}

[data-screen="calendar"] .record-table {
  overflow: hidden;
  margin-top: 2px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: rgba(5, 8, 12, 0.25);
  table-layout: fixed;
}

[data-screen="calendar"] .record-table th,
[data-screen="calendar"] .record-table td {
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.055);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  padding: 9px 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

[data-screen="calendar"] .record-table th {
  background: rgba(255, 255, 255, 0.028);
  color: #737d8d;
  font-size: 10px;
  font-weight: 750;
}

[data-screen="calendar"] .record-table td {
  color: #dce3ed;
  font-size: 12px;
  font-weight: 800;
}

[data-screen="calendar"] .record-table tfoot td {
  background: rgba(46, 124, 255, 0.055);
  color: #70a3ff;
}

[data-screen="calendar"] .day-muscle-summary {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(46, 124, 255, 0.08), transparent 42%),
    #151a22;
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

[data-screen="calendar"] .day-muscle-summary-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

[data-screen="calendar"] .day-muscle-summary-head span {
  color: #70a3ff;
  font-size: 9px;
  font-weight: 850;
}

[data-screen="calendar"] .day-muscle-summary-head h3 {
  margin: 3px 0 0;
  color: var(--sc-text);
  font-size: 17px;
  font-weight: 850;
}

[data-screen="calendar"] .day-muscle-summary-head small {
  color: var(--sc-text-muted);
  font-size: 10px;
}

[data-screen="calendar"] .day-muscle-summary .exercise-muscle-map {
  min-height: 238px;
  padding: 6px 0 0;
  background: transparent;
}

[data-screen="calendar"] .day-muscle-summary .muscle-map-svg {
  max-height: 220px;
}

[data-screen="calendar"] .day-muscle-chart {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding-top: 2px;
}

[data-screen="calendar"] .day-muscle-pie {
  position: relative;
  z-index: 1;
  width: 92px;
  overflow: hidden;
  border-radius: 50%;
  filter: drop-shadow(0 11px 12px rgba(0, 0, 0, 0.38));
}

[data-screen="calendar"] .day-muscle-pie-shell {
  position: relative;
  width: 92px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  perspective: 420px;
}

[data-screen="calendar"] .day-muscle-pie-shell::before {
  content: "";
  position: absolute;
  inset: 8px 4px -8px;
  border-radius: 50%;
  background: rgba(14, 35, 70, 0.72);
  filter: blur(8px);
  transform: scaleY(0.72);
}

[data-screen="calendar"] .day-muscle-pie-depth {
  fill: #080c14;
  stroke: rgba(122, 170, 255, 0.22);
  stroke-width: 2px;
}

[data-screen="calendar"] .day-muscle-sector {
  transform-box: fill-box;
  transform-origin: center;
}

[data-screen="calendar"] .day-muscle-pie-rim {
  fill: none;
  stroke: rgba(221, 234, 255, 0.5);
  stroke-width: 1.2px;
  pointer-events: none;
}

[data-screen="calendar"] .day-muscle-pie-label {
  fill: #fff;
  font-size: 9px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.76);
  stroke-width: 2px;
  text-anchor: middle;
  dominant-baseline: central;
}

[data-screen="calendar"] .day-muscle-list {
  min-width: 0;
  display: grid;
  gap: 8px;
}

[data-screen="calendar"] .day-muscle-list > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  color: var(--sc-text-secondary);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

[data-screen="calendar"] .day-muscle-list i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

[data-screen="calendar"] .day-muscle-key.color-1 { background: #5278b8; box-shadow: 0 0 7px rgba(82, 120, 184, 0.34); }
[data-screen="calendar"] .day-muscle-key.color-2 { background: #4f8f98; box-shadow: 0 0 7px rgba(79, 143, 152, 0.32); }
[data-screen="calendar"] .day-muscle-key.color-3 { background: #786da8; box-shadow: 0 0 7px rgba(120, 109, 168, 0.32); }
[data-screen="calendar"] .day-muscle-key.color-4 { background: #b28a52; box-shadow: 0 0 7px rgba(178, 138, 82, 0.3); }
[data-screen="calendar"] .day-muscle-key.color-5 { background: #668c72; box-shadow: 0 0 7px rgba(102, 140, 114, 0.3); }

[data-screen="calendar"] .day-muscle-list strong {
  overflow: hidden;
  color: #dce3ed;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 374px) {
  [data-screen="calendar"] .day-log-top {
    grid-template-columns: 52px minmax(0, 1fr) 48px;
    gap: 9px;
  }

  [data-screen="calendar"] .day-log-thumb {
    width: 52px;
    height: 52px;
  }

  [data-screen="calendar"] .day-log-sets {
    margin-left: 61px;
  }

  [data-screen="calendar"] .day-muscle-chart {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
  }

  [data-screen="calendar"] .day-muscle-pie {
    width: 82px;
  }

  [data-screen="calendar"] .day-muscle-pie-shell {
    width: 82px;
  }
}

[data-screen="calendar"] .day-sos-reason {
  border: 1px solid rgba(240, 91, 100, 0.3);
  border-left: 3px solid #f05b64;
  border-radius: 8px;
  background: rgba(90, 22, 31, 0.2);
  color: #f5a2a8;
  padding: 12px;
  font-size: 12px;
}

[data-screen="calendar"] .day-add-button {
  min-height: 54px;
  border: 1px solid rgba(116, 170, 255, 0.56);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 48%),
    #2e7cff;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 9px 22px rgba(12, 65, 157, 0.32);
  font-size: 14px;
  font-weight: 850;
  text-align: center;
  transition: transform 140ms var(--sc-ease), filter 160ms var(--sc-ease), box-shadow 160ms var(--sc-ease);
}

[data-screen="calendar"] .day-add-button:hover,
[data-screen="calendar"] .day-add-button:focus-visible {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 10px 24px rgba(12, 65, 157, 0.38),
    0 0 18px rgba(46, 124, 255, 0.16);
}

[data-screen="calendar"] .day-add-button:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.94);
}

[data-screen="calendar"] .empty-state {
  min-height: 76px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(120, 142, 176, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.022);
  color: var(--sc-text-tertiary);
  padding: 16px;
  line-height: 1.55;
  text-align: center;
}

[data-screen="calendar"] .calendar-excuses {
  margin-top: 2px;
  padding-bottom: 2px;
}

[data-screen="calendar"] .calendar-excuses h3 {
  color: var(--sc-text);
  font-size: 15px;
  font-weight: 820;
}

[data-screen="calendar"] .calendar-excuse-item {
  position: relative;
  min-height: 64px;
  border: 1px solid rgba(240, 91, 100, 0.22);
  border-left: 3px solid #f05b64;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(240, 91, 100, 0.08), transparent 46%),
    #151920;
  color: var(--sc-text);
  padding: 11px 38px 11px 12px;
  transition: transform 140ms var(--sc-ease), border-color 160ms var(--sc-ease), background-color 160ms var(--sc-ease);
}

[data-screen="calendar"] .calendar-excuse-item::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #c06d75;
  font-size: 22px;
}

[data-screen="calendar"] .calendar-excuse-item strong {
  color: #d8a3a8;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

[data-screen="calendar"] .calendar-excuse-item p {
  margin-top: 4px;
  color: #eef1f6;
  font-size: 13px;
}

[data-screen="calendar"] .calendar-excuse-item:hover,
[data-screen="calendar"] .calendar-excuse-item:focus-visible {
  border-color: rgba(240, 91, 100, 0.46);
  background-color: rgba(240, 91, 100, 0.07);
}

[data-screen="calendar"] .calendar-excuse-item:active {
  transform: scale(0.985);
}

[data-screen="calendar"] .history-section {
  margin-top: 14px;
  overflow: hidden;
  padding-bottom: 8px;
}

[data-screen="calendar"] .history-section > .section-head {
  min-height: 66px;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  padding: 12px 14px;
}

[data-screen="calendar"] .history-section > .section-head h2 {
  color: var(--sc-text);
  font-size: 18px;
  font-weight: 850;
}

[data-screen="calendar"] #monthSummary {
  border: 1px solid rgba(83, 145, 248, 0.19);
  border-radius: 7px;
  background: rgba(46, 124, 255, 0.07);
  color: #9ebdf2;
  padding: 7px 9px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

[data-screen="calendar"] .history-list {
  gap: 7px;
  padding: 10px 12px 12px;
}

[data-screen="calendar"] .history-item {
  position: relative;
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--sc-text);
  padding: 11px 12px;
  transition: transform 140ms var(--sc-ease), border-color 160ms var(--sc-ease), background-color 160ms var(--sc-ease);
}

[data-screen="calendar"] .history-item > span:first-child {
  min-width: 0;
}

[data-screen="calendar"] .history-title {
  display: block;
  color: var(--sc-text);
  font-size: 14px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

[data-screen="calendar"] .history-meta {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: var(--sc-text-tertiary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

[data-screen="calendar"] .history-open {
  min-width: 56px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(91, 151, 255, 0.18);
  border-radius: 10px;
  background: rgba(46, 124, 255, 0.08);
  color: #8cb4ff;
  font-size: 10px;
  font-weight: 800;
}

[data-screen="calendar"] .history-open::after {
  content: "›";
  color: #79a8ff;
  font-size: 22px;
  line-height: 1;
}

[data-screen="calendar"] .history-item:hover,
[data-screen="calendar"] .history-item:focus-visible {
  border-color: rgba(86, 148, 255, 0.38);
  background: rgba(46, 124, 255, 0.055);
}

[data-screen="calendar"] .history-item:active {
  transform: scale(0.988);
}

body:has([data-screen="calendar"].is-active) .app-shell {
  padding-bottom: max(118px, calc(env(safe-area-inset-bottom) + 102px));
}

body:has([data-screen="calendar"].is-active) .bottom-nav {
  width: min(100%, 620px);
  gap: 2px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px 8px 0 0;
  background: rgba(8, 11, 16, 0.94);
  box-shadow:
    0 -14px 32px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(24px) saturate(135%);
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
}

body:has([data-screen="calendar"].is-active) .bottom-nav button {
  position: relative;
  min-height: 54px;
  gap: 4px;
  border-radius: 8px;
  color: #687181;
  font-size: 11px;
  font-weight: 750;
  transition: color 160ms var(--sc-ease), background-color 160ms var(--sc-ease), transform 140ms var(--sc-ease);
}

body:has([data-screen="calendar"].is-active) .bottom-nav button::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transform: translateX(-50%);
}

body:has([data-screen="calendar"].is-active) .bottom-nav button.is-active {
  background: rgba(46, 124, 255, 0.1);
  color: #79aaff;
  box-shadow: inset 0 0 0 1px rgba(85, 150, 255, 0.12);
}

body:has([data-screen="calendar"].is-active) .bottom-nav button.is-active::before {
  background: #2e7cff;
  box-shadow: 0 0 12px rgba(46, 124, 255, 0.7);
}

body:has([data-screen="calendar"].is-active) .bottom-nav button:active {
  transform: scale(0.96);
}

@media (max-width: 380px) {
  [data-screen="calendar"] .calendar-weekdays,
  [data-screen="calendar"] .calendar-grid { gap: 3px; padding-inline: 10px; }
  [data-screen="calendar"] .day-cell { min-height: 64px; padding-inline: 1px; }
  [data-screen="calendar"] .day-cell-breakdown small { font-size: 6.5px; }
  [data-screen="calendar"] .calendar-muscle-detail,
  [data-screen="calendar"] .calendar-day-detail,
  [data-screen="calendar"] .calendar-excuses { padding-inline: 10px; }
  [data-screen="calendar"] .day-log-item { padding: 10px; }
  [data-screen="calendar"] .record-table th,
  [data-screen="calendar"] .record-table td { padding-inline: 2px; }
  [data-screen="calendar"] #monthSummary { padding-inline: 7px; font-size: 10px; }
}

/* Board community redesign: scoped to the community screen and report sheet. */
[data-screen="board"] {
  color: var(--sc-text);
}

[data-screen="board"] .sr-only,
.board-report-modal .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

[data-screen="board"] > .screen-header {
  min-height: 58px;
  margin-bottom: 14px;
}

[data-screen="board"] > .screen-header h1 {
  color: var(--sc-text);
  font-size: 20px;
  font-weight: 850;
}

[data-screen="board"] > .screen-header .back-button {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid var(--sc-metal-control-border);
  border-radius: 12px;
  background: var(--sc-metal-control-bg);
  color: var(--sc-text);
  box-shadow: var(--sc-metal-control-shadow);
  transition: transform 140ms var(--sc-ease), border-color 160ms var(--sc-ease);
}

[data-screen="board"] > .screen-header .back-button:active {
  transform: translateY(1px) scale(0.96);
}

[data-screen="board"] > .screen-header .back-button:focus-visible {
  border-color: rgba(83, 148, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(46, 124, 255, 0.16);
}

[data-screen="board"] .board-section {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

[data-screen="board"] .board-intro {
  margin: 18px 2px 11px;
  padding: 0;
}

[data-screen="board"] .board-intro .eyebrow {
  margin-bottom: 5px;
  color: #78aaff;
}

[data-screen="board"] .board-intro h2 {
  color: var(--sc-text);
  font-size: 20px;
  font-weight: 850;
}

[data-screen="board"] .board-form {
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 38%),
    #12171f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 16px 34px rgba(0, 0, 0, 0.26);
  padding: 14px;
}

[data-screen="board"] .board-composer-author {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

[data-screen="board"] .board-composer-author > span {
  flex: 0 1 auto;
  color: var(--sc-text-tertiary);
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}

[data-screen="board"] .board-author {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 6px 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

[data-screen="board"] .board-author .nickname-text {
  min-width: 0;
  overflow: hidden;
  color: var(--sc-text);
  font-size: 13px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-screen="board"] .board-author .level-badge {
  flex: 0 0 auto;
}

[data-screen="board"] .board-workout-proof {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(84, 147, 255, 0.2);
  border-left: 3px solid #2e7cff;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(46, 124, 255, 0.09), transparent 56%),
    rgba(255, 255, 255, 0.018);
  padding: 11px 12px;
}

[data-screen="board"] .board-workout-proof[hidden] {
  display: none;
}

[data-screen="board"] .board-workout-proof > div:first-child {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

[data-screen="board"] .board-workout-proof > div:first-child span {
  color: #82adff;
  font-size: 10px;
  font-weight: 800;
}

[data-screen="board"] .board-workout-proof > div:first-child strong {
  min-width: 0;
  overflow: hidden;
  color: var(--sc-text);
  font-size: 13px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-screen="board"] .board-workout-proof > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

[data-screen="board"] .board-workout-proof > div:last-child span {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(83, 146, 255, 0.18);
  border-radius: 6px;
  background: rgba(46, 124, 255, 0.07);
  color: #a9c5f7;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

[data-screen="board"] .board-compose-field {
  position: relative;
  display: block;
}

[data-screen="board"] .board-compose-field textarea {
  width: 100%;
  min-height: 116px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: #0d1117;
  color: var(--sc-text);
  padding: 13px 13px 32px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.28);
  transition: border-color 160ms var(--sc-ease), box-shadow 160ms var(--sc-ease), background-color 160ms var(--sc-ease);
}

[data-screen="board"] .board-compose-field textarea:focus {
  border-color: rgba(82, 146, 255, 0.78);
  background: #0f141c;
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, 0.28),
    0 0 0 3px rgba(46, 124, 255, 0.14);
}

[data-screen="board"] .board-char-count,
.board-report-modal .board-char-count {
  color: var(--sc-text-tertiary);
  font-size: 10px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

[data-screen="board"] .board-compose-field > .board-char-count {
  position: absolute;
  right: 11px;
  bottom: 10px;
}

[data-screen="board"] .board-char-count.is-limit,
.board-report-modal .board-char-count.is-limit,
[data-screen="board"] .board-comment-counter.is-limit {
  color: #f08a91;
}

[data-screen="board"] .board-compose-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, 132px);
  align-items: center;
  gap: 12px;
}

[data-screen="board"] .board-policy-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 32px;
  padding: 2px 2px 0;
  color: var(--sc-text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

[data-screen="board"] .board-policy-consent input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--sc-primary);
}

[data-screen="board"] .board-policy-consent a {
  color: #8db5ff;
  text-underline-offset: 2px;
}

[data-screen="board"] .board-policy-agree {
  margin-inline-start: 4px;
}

[data-screen="board"] .board-policy-consent:focus-within {
  color: var(--sc-text-primary);
}

[data-screen="board"] .board-compose-actions > span {
  color: var(--sc-text-tertiary);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

[data-screen="board"] .board-compose-actions .confirm-button {
  min-height: 50px;
  margin: 0;
  border: 1px solid rgba(116, 170, 255, 0.56);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 48%),
    #2e7cff;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 8px 20px rgba(12, 65, 157, 0.3);
  font-size: 14px;
  font-weight: 850;
  transition: transform 140ms var(--sc-ease), filter 160ms var(--sc-ease), box-shadow 160ms var(--sc-ease);
}

[data-screen="board"] .board-compose-actions .confirm-button:active {
  transform: translateY(1px) scale(0.98);
}

[data-screen="board"] .board-compose-actions .confirm-button:disabled {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  color: #5f6876;
  box-shadow: none;
}

[data-screen="board"] .board-tabs {
  gap: 4px;
  margin: 16px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: #10151c;
  padding: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.32);
}

[data-screen="board"] .board-tabs button {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sc-text-tertiary);
  font-size: 13px;
  font-weight: 800;
  transition: transform 140ms var(--sc-ease), color 160ms var(--sc-ease), background-color 160ms var(--sc-ease), box-shadow 160ms var(--sc-ease);
}

[data-screen="board"] .board-tabs button.is-active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 56%),
    rgba(46, 124, 255, 0.18);
  color: #b9d2ff;
  box-shadow: inset 0 0 0 1px rgba(93, 154, 255, 0.25);
}

[data-screen="board"] .board-tabs button:active {
  transform: scale(0.97);
}

[data-screen="board"] .board-tabs button:disabled {
  opacity: 0.58;
}

[data-screen="board"] .board-list {
  gap: 10px;
  padding: 0 0 16px;
}

[data-screen="board"] .board-post {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 38%),
    #12171f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 12px 28px rgba(0, 0, 0, 0.22);
  padding: 14px;
}

[data-screen="board"] .board-post-meta {
  align-items: center;
}

[data-screen="board"] .board-post-meta > span {
  flex: 0 0 auto;
  color: var(--sc-text-tertiary);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

[data-screen="board"] .board-post .board-post-content {
  overflow-wrap: anywhere;
  margin-top: 14px;
  color: #eef2f8;
  font-size: 15px;
  font-weight: 630;
  line-height: 1.58;
  white-space: pre-wrap;
  word-break: break-word;
}

[data-screen="board"] .board-actions {
  min-height: 58px;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  padding: 5px 0;
}

[data-screen="board"] .board-action-button {
  min-width: 54px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #788291;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: transform 140ms var(--sc-ease), color 160ms var(--sc-ease), background-color 160ms var(--sc-ease);
}

[data-screen="board"] .board-action-button .lucide {
  width: 18px;
  height: 18px;
}

[data-screen="board"] .board-action-button:hover,
[data-screen="board"] .board-action-button:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  color: var(--sc-text-secondary);
}

[data-screen="board"] .board-action-button:active {
  transform: scale(0.94);
}

[data-screen="board"] .board-action-button.is-liked {
  background: rgba(46, 124, 255, 0.1);
  color: #6fa1ff;
  box-shadow: inset 0 0 0 1px rgba(82, 145, 255, 0.16);
}

[data-screen="board"] .board-action-button.is-liked .lucide {
  fill: currentColor;
}

[data-screen="board"] .board-action-button.is-loading,
[data-screen="board"] .board-action-button:disabled {
  opacity: 0.55;
  pointer-events: none;
}

[data-screen="board"] .board-action-button.report {
  color: #9a747b;
}

[data-screen="board"] .board-action-button.block {
  margin-left: auto;
  color: #8993a3;
}

[data-screen="board"] .board-action-button.report:hover,
[data-screen="board"] .board-action-button.report:focus-visible {
  background: rgba(240, 91, 100, 0.07);
  color: #e58b92;
}

[data-screen="board"] .board-comments {
  display: grid;
  gap: 0;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: rgba(5, 8, 12, 0.22);
}

[data-screen="board"] .board-comments[hidden] {
  display: none;
}

[data-screen="board"] .board-comment {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(78px, auto) minmax(0, 1fr) 96px;
  gap: 9px;
  align-items: start;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 11px;
}

[data-screen="board"] .board-comment + .board-comment {
  border-top: 1px solid rgba(255, 255, 255, 0.065);
}

[data-screen="board"] .board-comment .board-author {
  max-width: 116px;
  padding: 4px 6px;
  transform: none;
}

[data-screen="board"] .board-comment .board-author .nickname-text {
  font-size: 11px;
}

[data-screen="board"] .board-comment-body {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding-top: 5px;
}

[data-screen="board"] .board-comment-body span {
  overflow-wrap: anywhere;
  color: #dce2eb;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  word-break: break-word;
}

[data-screen="board"] .board-comment-body small {
  color: #646e7e;
  font-size: 9px;
  font-weight: 700;
}

[data-screen="board"] .board-comment-actions {
  display: grid;
  grid-template-columns: repeat(2, 48px);
  justify-content: end;
}

[data-screen="board"] .board-comment-actions .board-comment-report:last-child {
  grid-column: 2;
}

[data-screen="board"] .board-comment .board-comment-report,
[data-screen="board"] .board-comment .board-comment-block {
  width: 48px;
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8b6970;
  padding: 0;
}

[data-screen="board"] .board-comment .board-comment-block {
  color: #7f8998;
}

[data-screen="board"] .board-comment-report .lucide {
  width: 16px;
  height: 16px;
}

[data-screen="board"] .board-comment-form {
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 8px;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
  padding: 10px;
}

[data-screen="board"] .board-comment-form label {
  position: relative;
  min-width: 0;
}

[data-screen="board"] .board-comment-form input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: #0c1016;
  color: var(--sc-text);
  padding: 0 64px 0 11px;
  font-size: 12px;
}

[data-screen="board"] .board-comment-form input:focus {
  border-color: rgba(82, 146, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(46, 124, 255, 0.12);
}

[data-screen="board"] .board-comment-counter {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  color: #606a79;
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

[data-screen="board"] .board-comment-form button {
  min-height: 48px;
  border: 1px solid rgba(91, 151, 255, 0.3);
  border-radius: 10px;
  background: rgba(46, 124, 255, 0.14);
  color: #9fc0ff;
  font-size: 12px;
  font-weight: 820;
}

[data-screen="board"] .board-comment-form button:disabled {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  color: #555e6b;
}

[data-screen="board"] .board-post-skeleton {
  min-height: 164px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background:
    linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.055) 42%, transparent 64%) 0 0 / 220% 100%,
    #12171f;
  animation: board-skeleton 1.15s ease-in-out infinite;
}

[data-screen="board"] .board-empty-state {
  min-height: 196px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed rgba(116, 139, 175, 0.26);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.022);
  color: var(--sc-text-tertiary);
  padding: 22px;
  text-align: center;
}

[data-screen="board"] .board-empty-state .lucide {
  width: 28px;
  height: 28px;
  color: #648bcf;
}

[data-screen="board"] .board-empty-state strong {
  color: var(--sc-text);
  font-size: 15px;
}

[data-screen="board"] .board-empty-state p {
  margin: 0;
  color: var(--sc-text-tertiary);
  font-size: 12px;
}

[data-screen="board"] .board-empty-state button {
  min-height: 48px;
  margin-top: 5px;
  border: 1px solid rgba(84, 147, 255, 0.3);
  border-radius: 12px;
  background: rgba(46, 124, 255, 0.12);
  color: #a9c7ff;
  padding: 0 15px;
  font-weight: 800;
}

html:has(.board-report-modal:not([hidden])),
body:has(.board-report-modal:not([hidden])) {
  overflow: hidden;
}

.board-report-modal {
  place-items: end center;
  background: rgba(1, 3, 7, 0.76);
  backdrop-filter: blur(12px);
  padding: 0;
}

.board-report-dialog {
  width: min(100%, 520px);
  max-height: min(88vh, 720px);
  overflow-y: auto;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 38%),
    rgba(18, 23, 31, 0.98);
  box-shadow:
    0 -20px 52px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
  padding: 20px 20px max(20px, env(safe-area-inset-bottom));
  animation: sc-sheet-in 220ms var(--sc-ease);
}

.board-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.board-report-head .eyebrow {
  color: #e37e86;
}

.board-report-head h2 {
  margin-top: 4px;
  color: var(--sc-text);
  font-size: 20px;
  font-weight: 850;
}

.board-report-dialog > p {
  color: var(--sc-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.board-report-reasons {
  display: grid;
  gap: 7px;
  border: 0;
  padding: 0;
}

.board-report-reasons legend {
  margin-bottom: 7px;
  color: var(--sc-text-tertiary);
  font-size: 11px;
  font-weight: 800;
}

.board-report-reasons label {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--sc-text-secondary);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 750;
}

.board-report-reasons label:has(input:checked) {
  border-color: rgba(240, 91, 100, 0.38);
  background: rgba(240, 91, 100, 0.075);
  color: #f1c0c4;
}

.board-report-reasons input {
  width: 18px;
  height: 18px;
  accent-color: #f05b64;
}

.board-report-reasons input:focus {
  box-shadow: none;
}

.board-report-reasons label:has(input:focus-visible) {
  outline: 2px solid rgba(240, 91, 100, 0.34);
  outline-offset: 2px;
}

.board-report-other {
  position: relative;
  display: grid;
  gap: 7px;
  color: var(--sc-text-secondary);
  font-size: 11px;
  font-weight: 750;
}

.board-report-other[hidden] {
  display: none;
}

.board-report-other textarea {
  min-height: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: #0c1016;
  color: var(--sc-text);
  padding: 12px 12px 28px;
  resize: vertical;
}

.board-report-other .board-char-count {
  position: absolute;
  right: 10px;
  bottom: 9px;
}

.board-report-dialog .complaint-actions button {
  min-height: 50px;
  margin: 0;
}

.board-report-dialog .profile-error {
  margin: 0;
}

body:has([data-screen="board"].is-active) .app-shell {
  padding-bottom: max(118px, calc(env(safe-area-inset-bottom) + 102px));
}

body:has([data-screen="board"].is-active) .bottom-nav {
  width: min(100%, 620px);
  gap: 2px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px 8px 0 0;
  background: rgba(8, 11, 16, 0.94);
  box-shadow:
    0 -14px 32px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(24px) saturate(135%);
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
}

body:has([data-screen="board"].is-active) .bottom-nav button {
  position: relative;
  min-height: 54px;
  gap: 4px;
  border-radius: 8px;
  color: #687181;
  font-size: 11px;
  font-weight: 750;
  transition: color 160ms var(--sc-ease), background-color 160ms var(--sc-ease), transform 140ms var(--sc-ease);
}

body:has([data-screen="board"].is-active) .bottom-nav button::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transform: translateX(-50%);
}

body:has([data-screen="board"].is-active) .bottom-nav button.is-active {
  background: rgba(46, 124, 255, 0.1);
  color: #79aaff;
  box-shadow: inset 0 0 0 1px rgba(85, 150, 255, 0.12);
}

body:has([data-screen="board"].is-active) .bottom-nav button.is-active::before {
  background: #2e7cff;
  box-shadow: 0 0 12px rgba(46, 124, 255, 0.7);
}

body:has([data-screen="board"].is-active) .bottom-nav button:active {
  transform: scale(0.96);
}

@keyframes board-skeleton {
  from { background-position: 180% 0, 0 0; }
  to { background-position: -80% 0, 0 0; }
}

@media (max-width: 380px) {
  [data-screen="board"] .board-form { padding: 12px; }
  [data-screen="board"] .board-compose-actions { grid-template-columns: minmax(0, 1fr) 108px; gap: 8px; }
  [data-screen="board"] .board-post { padding: 12px; }
  [data-screen="board"] .board-comment { grid-template-columns: minmax(70px, auto) minmax(0, 1fr) 48px; gap: 6px; padding-inline: 8px; }
  [data-screen="board"] .board-comment .board-author { max-width: 96px; }
  [data-screen="board"] .board-comment-form { grid-template-columns: minmax(0, 1fr) 64px; padding: 8px; }
  [data-screen="board"] .board-comment-form input { padding-right: 58px; }
  .board-report-dialog { padding-inline: 16px; }
}

/* Modal and Bottom Sheet */
.profile-modal {
  background: rgba(1, 3, 7, 0.7);
  backdrop-filter: blur(10px);
  animation: sc-backdrop-in 180ms var(--sc-ease);
}

.profile-dialog,
.support-dialog {
  border: 1px solid var(--sc-border-strong);
  background: var(--sc-glass-strong);
  box-shadow: var(--sc-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(28px) saturate(130%);
}

.profile-dialog {
  width: min(100%, 440px);
  border-radius: var(--sc-radius-modal);
  padding: 24px;
  animation: sc-modal-in 200ms var(--sc-ease);
}

.support-dialog {
  border-radius: var(--sc-radius-sheet) var(--sc-radius-sheet) 20px 20px;
  animation: sc-sheet-in 220ms var(--sc-ease);
}

.support-dialog { width: min(100%, 580px); }

.exercise-step-handle {
  width: 40px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
  margin: 10px auto 4px;
}

.support-dialog-head { border-color: var(--sc-border); padding: 20px 20px 14px; }

.faq-list summary {
  min-height: 68px;
  color: var(--sc-text);
  font-weight: 700;
}

.faq-list details { border-color: var(--sc-border); }

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

@keyframes sc-modal-in {
  from { opacity: 0; transform: scale(0.975) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes sc-sheet-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

@media (max-width: 390px) {
  .app-shell { padding-left: 16px; padding-right: 16px; }
  .home-brand h1, .screen-header h1 { font-size: 24px; }
  .profile-dialog { padding: 20px; }
}

/* Menu athlete hub */
body.has-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

[data-screen="menu"] {
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

[data-screen="menu"].is-active ~ .bottom-nav button {
  min-height: 54px;
}

/* Level-up ceremony */
.level-up-screen {
  min-height: calc(100dvh - max(32px, env(safe-area-inset-top)) - max(32px, env(safe-area-inset-bottom)));
}

.level-up-stage {
  display: flex;
  min-height: inherit;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 10px 24px;
  text-align: center;
}

.level-up-kicker {
  margin-bottom: 8px;
  color: var(--sc-primary, #2e7cff);
  font-size: 12px;
  font-weight: 900;
}

.level-up-stage h1 {
  max-width: 320px;
  font-size: clamp(28px, 8vw, 36px);
  line-height: 1.15;
}

.level-up-copy {
  max-width: 310px;
  margin-top: 12px;
  color: var(--sc-text-secondary, #a6adba);
  font-size: 15px;
  line-height: 1.55;
}

.level-up-emblem {
  position: relative;
  display: grid;
  width: 164px;
  height: 164px;
  place-content: center;
  margin: 34px 0 28px;
  overflow: hidden;
  border: 1px solid rgba(92, 148, 255, 0.5);
  border-radius: 50%;
  background: #111824;
  box-shadow: inset 0 0 0 8px rgba(46, 124, 255, 0.06), 0 20px 52px rgba(0, 0, 0, 0.42), 0 0 32px rgba(46, 124, 255, 0.18);
}

.level-up-orbit {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 50%;
}

.level-up-sheen {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 45%;
  width: 32px;
  background: rgba(180, 210, 255, 0.34);
  filter: blur(9px);
  transform: skewX(-16deg);
}

.level-up-emblem small {
  position: relative;
  z-index: 1;
  color: #8fb6ff;
  font-size: 11px;
  font-weight: 900;
}

.level-up-emblem strong {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  color: #f5f7fb;
  font-size: 64px;
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  text-shadow: 0 0 24px rgba(89, 147, 255, 0.36);
}

.level-up-progress {
  width: min(100%, 330px);
}

.level-up-progress-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
  color: var(--sc-text-secondary, #a6adba);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.level-up-progress-meta span:last-child {
  color: #8fb6ff;
}

.level-up-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.level-up-progress-track span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #2e7cff;
  box-shadow: 0 0 18px rgba(46, 124, 255, 0.5);
  transform: scaleX(0);
  transform-origin: left center;
}

.level-up-result {
  display: flex;
  width: min(100%, 330px);
  min-height: 70px;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  border: 1px solid rgba(102, 201, 135, 0.26);
  border-radius: 12px;
  background: rgba(17, 28, 24, 0.78);
  padding: 14px 16px;
  text-align: left;
  opacity: 0;
}

.level-up-result.is-visible {
  opacity: 1;
}

.level-up-result .lucide {
  width: 28px;
  color: var(--sc-success, #66c987);
}

.level-up-result span {
  display: grid;
  gap: 3px;
}

.level-up-result small {
  color: var(--sc-success, #66c987);
  font-size: 10px;
  font-weight: 900;
}

.level-up-result strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.level-up-continue {
  display: flex;
  width: min(100%, 330px);
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  border: 0;
  border-radius: 12px;
  background: #2e7cff;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(46, 124, 255, 0.25);
  opacity: 0;
  transition: filter 150ms ease, transform 150ms ease;
}

.level-up-continue.is-ready {
  opacity: 1;
}

.level-up-continue:active:not(:disabled) {
  filter: brightness(1.1);
  transform: scale(0.98);
}

.level-up-continue:disabled {
  pointer-events: none;
}

.level-up-continue .lucide {
  width: 20px;
}

body:has([data-screen="level-up"].is-active) .bottom-nav {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body:has([data-screen="level-up"].is-active) .app-shell {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: reduce) {
  .level-up-emblem,
  .level-up-result,
  .level-up-continue {
    transform: none !important;
    transition: none !important;
  }
}

[data-screen="menu"] .menu-screen-header {
  min-height: 64px;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  margin-bottom: 12px;
}

[data-screen="menu"] .menu-screen-header h1 {
  font-size: 21px;
  letter-spacing: 0;
}

[data-screen="menu"] .menu-profile-hero,
[data-screen="menu"] .weekly-goal-panel,
[data-screen="menu"] .account-panel,
[data-screen="menu"] .menu-list,
[data-screen="menu"] .sos-section,
[data-screen="menu"] .support-menu {
  border: 1px solid var(--sc-border);
  box-shadow: var(--sc-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

[data-screen="menu"] .menu-profile-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 18px;
  overflow: hidden;
  margin-top: 0;
  padding: 20px;
  border-color: rgba(93, 156, 255, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(46, 124, 255, 0.15), transparent 48%),
    linear-gradient(180deg, rgba(28, 34, 45, 0.96), rgba(15, 19, 26, 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.065);
}

[data-screen="menu"] .menu-profile-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 118px;
  height: 100%;
  opacity: 0.17;
  background: repeating-linear-gradient(125deg, transparent 0 13px, rgba(255, 255, 255, 0.1) 14px 15px);
  pointer-events: none;
}

[data-screen="menu"] .menu-profile-topline {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

[data-screen="menu"] .avatar-frame {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  padding: 7px;
  border: 1px solid rgba(118, 164, 236, 0.32);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.32);
}

[data-screen="menu"] .avatar-frame img {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  object-fit: cover;
}

[data-screen="menu"] .menu-profile-copy,
[data-screen="menu"] .menu-athlete-copy,
[data-screen="menu"] .menu-row-copy {
  min-width: 0;
}

[data-screen="menu"] .menu-section-kicker {
  margin: 0 0 5px;
  color: #74a7ff;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0;
}

[data-screen="menu"] .menu-section-kicker.is-warning {
  color: var(--sc-warning);
}

[data-screen="menu"] .user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

[data-screen="menu"] .user-badge .level-badge {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 6px 16px rgba(0, 0, 0, 0.28);
}

[data-screen="menu"] .menu-athlete-copy {
  display: grid;
  gap: 1px;
}

[data-screen="menu"] .menu-athlete-copy small {
  color: var(--sc-muted);
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

[data-screen="menu"] .nickname-text {
  overflow: hidden;
  color: var(--sc-text);
  font-size: clamp(20px, 7vw, 28px);
  font-weight: 900;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-screen="menu"] .menu-volume {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-screen="menu"] .menu-volume > span {
  color: var(--sc-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

[data-screen="menu"] .menu-volume strong {
  max-width: 68%;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: clamp(24px, 8vw, 34px);
  font-weight: 900;
  line-height: 0.95;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

[data-screen="menu"] .menu-volume strong small {
  margin-left: 4px;
  color: var(--sc-muted);
  font-size: 12px;
  font-weight: 750;
}

[data-screen="menu"] .menu-profile-action {
  min-height: 48px;
  display: grid;
  grid-template-columns: 20px auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--sc-text);
  text-align: left;
  transition: transform 160ms var(--sc-ease), border-color 160ms var(--sc-ease), background 160ms var(--sc-ease);
}

[data-screen="menu"] .menu-profile-action .lucide { width: 18px; height: 18px; color: var(--sc-primary); }
[data-screen="menu"] .menu-profile-action span { font-size: 13px; font-weight: 800; }
[data-screen="menu"] .menu-profile-action small { overflow: hidden; color: var(--sc-muted); font-size: 11px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
[data-screen="menu"] .menu-profile-action:not(:disabled):active { transform: scale(0.985); background: rgba(46, 124, 255, 0.12); }
[data-screen="menu"] .menu-profile-action:disabled { opacity: 0.6; cursor: not-allowed; }

[data-screen="menu"] .weekly-goal-panel {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(22, 28, 38, 0.96), rgba(13, 17, 23, 0.98));
}

[data-screen="menu"] .weekly-goal-panel[hidden] {
  display: none;
}

[data-screen="menu"] .weekly-goal-heading,
[data-screen="menu"] .weekly-goal-status > span {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

[data-screen="menu"] .weekly-goal-heading h2 {
  margin: 0;
  color: var(--sc-text);
  font-size: 18px;
}

[data-screen="menu"] .weekly-goal-heading > strong {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(46, 124, 255, 0.24);
  border-radius: 9px;
  background: rgba(46, 124, 255, 0.1);
  color: #83afff;
  font-size: 12px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

[data-screen="menu"] .weekly-goal-status {
  display: grid;
  gap: 9px;
}

[data-screen="menu"] .weekly-goal-status strong {
  min-width: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

[data-screen="menu"] .weekly-goal-status small {
  color: var(--sc-text-secondary);
  font-size: 12px;
  font-weight: 750;
}

[data-screen="menu"] .weekly-goal-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

[data-screen="menu"] .weekly-goal-track i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
  background: var(--sc-primary);
  box-shadow: 0 0 10px rgba(46, 124, 255, 0.28);
  transition: transform 180ms var(--sc-ease);
}

[data-screen="menu"] .weekly-goal-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

[data-screen="menu"] .weekly-goal-label {
  grid-column: 1 / -1;
  color: var(--sc-muted);
  font-size: 11px;
  font-weight: 750;
}

[data-screen="menu"] .weekly-goal-stepper {
  display: grid;
  grid-template-columns: 44px minmax(48px, 1fr) 44px;
  min-height: 46px;
  gap: 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

[data-screen="menu"] .weekly-goal-stepper button,
[data-screen="menu"] .weekly-goal-stepper output {
  display: grid;
  min-height: 46px;
  place-items: center;
  border-radius: 11px;
  color: var(--sc-text);
  font-size: 15px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

[data-screen="menu"] .weekly-goal-stepper button {
  border: 1px solid var(--sc-metal-control-border);
  background: var(--sc-metal-control-bg);
  color: #78a8ff;
  box-shadow: var(--sc-metal-control-shadow);
  line-height: 0;
  transition: transform 140ms var(--sc-ease), background 140ms var(--sc-ease), box-shadow 140ms var(--sc-ease);
}

[data-screen="menu"] .weekly-goal-stepper button svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.5;
  transform: translateY(1px);
}

[data-screen="menu"] .weekly-goal-stepper button:not(:disabled):hover {
  background: var(--sc-metal-control-bg-hover);
}

[data-screen="menu"] .weekly-goal-stepper button:not(:disabled):active {
  background: var(--sc-metal-control-bg-pressed);
  box-shadow: var(--sc-metal-control-shadow-pressed);
  transform: translateY(1px) scale(0.97);
}

[data-screen="menu"] .weekly-goal-stepper button:disabled {
  color: #465061;
  border-color: rgba(146, 169, 204, 0.1);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
}

[data-screen="menu"] .weekly-goal-stepper output {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

[data-screen="menu"] .weekly-goal-save {
  min-width: 66px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(46, 124, 255, 0.34);
  border-radius: 11px;
  background: rgba(46, 124, 255, 0.16);
  color: #9fc0ff;
  font-size: 13px;
  font-weight: 850;
}

[data-screen="menu"] .weekly-goal-save:disabled {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--sc-muted);
}

[data-screen="menu"] .weekly-goal-help {
  margin: 0;
  color: var(--sc-muted);
  font-size: 11px;
  line-height: 1.55;
}

[data-screen="menu"] .menu-hub-section,
[data-screen="menu"] .account-panel,
[data-screen="menu"] .sos-section {
  margin-top: 24px;
}

[data-screen="menu"] .menu-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 0 2px 10px;
}

[data-screen="menu"] .menu-section-heading h2 {
  margin: 0;
  color: var(--sc-text);
  font-size: 18px;
  line-height: 1.2;
}

[data-screen="menu"] .menu-list,
[data-screen="menu"] .support-menu {
  overflow: hidden;
  padding: 0;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(25, 30, 39, 0.92), rgba(16, 20, 27, 0.96));
}

[data-screen="menu"] .menu-list button,
[data-screen="menu"] .support-menu button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sc-text);
  text-align: left;
  transition: background 160ms var(--sc-ease), transform 160ms var(--sc-ease);
}

[data-screen="menu"] .menu-list button + button,
[data-screen="menu"] .support-menu button + button {
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

[data-screen="menu"] .support-menu > .menu-language-row {
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

[data-screen="menu"] .menu-list button:active,
[data-screen="menu"] .support-menu button:active {
  transform: scale(0.993);
  background: rgba(46, 124, 255, 0.1);
}

[data-screen="menu"] .menu-row-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(98, 149, 226, 0.18);
  border-radius: 11px;
  background: rgba(46, 124, 255, 0.1);
  color: #70a5ff;
}

[data-screen="menu"] .menu-row-icon.is-warning {
  border-color: rgba(244, 183, 93, 0.22);
  background: rgba(244, 183, 93, 0.1);
  color: var(--sc-warning);
}

[data-screen="menu"] .menu-row-icon .lucide { width: 19px; height: 19px; }
[data-screen="menu"] .menu-row-copy { display: grid; gap: 4px; }
[data-screen="menu"] .menu-row-copy strong { color: var(--sc-text); font-size: 14px; font-weight: 850; line-height: 1.2; }
[data-screen="menu"] .menu-row-copy small { color: var(--sc-muted); font-size: 11px; line-height: 1.35; }
[data-screen="menu"] .menu-chevron { width: 18px; height: 18px; color: #596273; }

[data-screen="menu"] .setting-switch {
  position: relative;
  width: 42px;
  height: 24px;
  border: 1px solid rgba(140, 154, 176, 0.25);
  border-radius: 999px;
  background: #252b35;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.36);
  transition: 170ms var(--sc-ease);
}

[data-screen="menu"] .setting-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #939cab;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: 170ms var(--sc-ease);
}

[data-screen="menu"] #hapticToggleButton.is-active .setting-switch {
  border-color: rgba(91, 151, 255, 0.62);
  background: linear-gradient(145deg, #347fe9, #205bbb);
  box-shadow: 0 0 14px rgba(46, 124, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-screen="menu"] #hapticToggleButton.is-active .setting-switch i {
  transform: translateX(18px);
  background: #f5f8ff;
}

[data-screen="menu"] .account-panel {
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(22, 28, 38, 0.96), rgba(13, 17, 23, 0.98));
}

[data-screen="menu"] .account-panel-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

[data-screen="menu"] .account-panel h2 {
  margin: 0;
  color: var(--sc-text);
  font-size: 17px;
  line-height: 1.25;
}

[data-screen="menu"] .account-panel > p:not(.account-email) {
  margin: 0;
  color: var(--sc-text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

[data-screen="menu"] .account-email {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  padding: 7px 10px;
  border: 1px solid rgba(102, 201, 135, 0.22);
  border-radius: 9px;
  background: rgba(102, 201, 135, 0.08);
  color: #9ce2b3;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

[data-screen="menu"] .authenticated-account-panel {
  border-color: rgba(102, 201, 135, 0.28);
  background: linear-gradient(155deg, rgba(22, 43, 34, 0.7), rgba(13, 20, 20, 0.98));
}

[data-screen="menu"] .authenticated-account-panel .menu-row-icon {
  border-color: rgba(102, 201, 135, 0.22);
  background: rgba(102, 201, 135, 0.09);
  color: var(--sc-success);
}

[data-screen="menu"] .account-actions {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 9px;
  margin-top: 2px;
}

[data-screen="menu"] .account-actions button {
  height: 48px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
[data-screen="menu"] #authenticatedAccountActions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-screen="menu"] #logoutButton { color: var(--sc-text-secondary); }

.blocked-users-dialog {
  min-height: min(430px, 62dvh);
  grid-template-rows: auto auto minmax(0, 1fr);
  background:
    radial-gradient(circle at 84% 14%, rgba(46, 124, 255, 0.11), transparent 30%),
    linear-gradient(160deg, rgba(26, 33, 44, 0.98), rgba(13, 17, 24, 0.99));
}

.blocked-users-notice {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 16px 20px 0;
  padding: 14px;
  border: 1px solid rgba(105, 157, 255, 0.16);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(46, 124, 255, 0.09), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.blocked-users-notice-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(105, 157, 255, 0.26);
  border-radius: 10px;
  background: rgba(46, 124, 255, 0.12);
  color: #75a7ff;
}

.blocked-users-notice-icon svg { width: 20px; height: 20px; }
.blocked-users-notice strong { display: block; color: var(--sc-text-primary); font-size: 14px; }
.blocked-users-notice p { margin: 4px 0 0; color: var(--sc-text-secondary); font-size: 12px; line-height: 1.5; }

.blocked-users-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  padding: 16px 20px max(20px, env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}

.blocked-user-row {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.blocked-user-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
.blocked-user-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 91, 100, 0.2);
  border-radius: 10px;
  background: rgba(240, 91, 100, 0.08);
  color: #f3a0a6;
  font-weight: 900;
}
.blocked-user-identity > div { min-width: 0; display: grid; gap: 3px; }
.blocked-user-identity strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--sc-text-primary);
  font-size: 14px;
}
.blocked-user-identity span { color: var(--sc-text-muted); font-size: 11px; }

.blocked-user-row button {
  min-width: 84px;
  min-height: 44px;
  border: 1px solid rgba(240, 91, 100, 0.2);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(240, 91, 100, 0.12), rgba(240, 91, 100, 0.055));
  color: #f3a0a6;
  font-weight: 800;
  transition: transform 150ms ease, background 150ms ease;
}
.blocked-user-row button:active { transform: translateY(1px) scale(0.98); background: rgba(240, 91, 100, 0.17); }

.blocked-users-state {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 12px 30px;
  text-align: center;
}

.blocked-users-state-mark {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border: 1px solid rgba(102, 201, 135, 0.25);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(102, 201, 135, 0.16), rgba(102, 201, 135, 0.035) 62%, transparent 64%);
  color: var(--sc-success);
  box-shadow: 0 0 28px rgba(102, 201, 135, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.blocked-users-state-mark::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(102, 201, 135, 0.23);
  border-radius: inherit;
}

.blocked-users-state-mark svg { width: 34px; height: 34px; }
.blocked-users-state-label { margin-bottom: 6px; color: var(--sc-success); font-size: 10px; font-weight: 900; letter-spacing: 1.2px; }
.blocked-users-state strong { color: var(--sc-text-primary); font-size: 17px; line-height: 1.35; }
.blocked-users-state.is-loading .blocked-users-state-mark { color: #75a7ff; border-color: rgba(46, 124, 255, 0.26); animation: sc-blocked-pulse 1.25s ease-in-out infinite; }
.blocked-users-state.is-loading .blocked-users-state-label { color: #75a7ff; }
.blocked-users-state.is-error .blocked-users-state-mark { color: var(--sc-danger); border-color: rgba(240, 91, 100, 0.24); box-shadow: 0 0 28px rgba(240, 91, 100, 0.08); }
.blocked-users-state.is-error .blocked-users-state-label { color: #f3a0a6; }

@keyframes sc-blocked-pulse {
  50% { transform: scale(0.96); opacity: 0.72; }
}

@media (max-width: 380px) {
  .blocked-users-notice { margin-inline: 14px; }
  .blocked-users-list { padding-inline: 14px; }
}
[data-screen="menu"] .account-delete-button {
  border: 1px solid rgba(240, 91, 100, 0.2);
  background: rgba(240, 91, 100, 0.06);
  color: #e99aa0;
  font-weight: 800;
}
[data-screen="menu"] .account-delete-button:active { background: rgba(240, 91, 100, 0.13); }

[data-screen="menu"] .sos-section {
  gap: 14px;
  padding: 18px;
  border-color: rgba(244, 183, 93, 0.22);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(244, 183, 93, 0.07), transparent 52%),
    linear-gradient(180deg, rgba(27, 29, 31, 0.98), rgba(17, 19, 23, 0.98));
}

[data-screen="menu"] .sos-section-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

[data-screen="menu"] .sos-section h2 { margin: 0; color: var(--sc-text); font-size: 17px; }
[data-screen="menu"] .sos-copy { margin: 0; color: var(--sc-text-secondary); font-size: 12px; line-height: 1.55; }
[data-screen="menu"] .sos-date { max-width: 96px; padding: 7px 9px; border: 1px solid rgba(244, 183, 93, 0.2); border-radius: 9px; background: rgba(244, 183, 93, 0.07); color: #f4c77f; font-size: 11px; font-weight: 800; text-align: center; }

[data-screen="menu"] .sos-reason-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 1px 1px 5px;
  scrollbar-width: none;
}

[data-screen="menu"] .sos-reason-chips::-webkit-scrollbar { display: none; }
[data-screen="menu"] .sos-reason-chips button { min-width: max-content; min-height: 38px; padding: 0 13px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; background: rgba(255, 255, 255, 0.045); color: var(--sc-text-secondary); font-size: 12px; font-weight: 750; transition: 160ms var(--sc-ease); }
[data-screen="menu"] .sos-reason-chips button.is-selected { border-color: rgba(244, 183, 93, 0.48); background: rgba(244, 183, 93, 0.13); color: #ffe0aa; }

[data-screen="menu"] .sos-input-wrap { position: relative; display: grid; gap: 7px; }
[data-screen="menu"] .sos-input-wrap > span { color: var(--sc-text-secondary); font-size: 11px; font-weight: 800; }
[data-screen="menu"] .sos-input-wrap textarea { min-height: 104px; resize: vertical; padding: 13px 14px 28px; border: 1px solid var(--sc-border); border-radius: 12px; background: rgba(5, 8, 12, 0.65); color: var(--sc-text); font: inherit; font-size: 13px; line-height: 1.5; }
[data-screen="menu"] .sos-input-wrap textarea:focus { border-color: rgba(46, 124, 255, 0.7); outline: 3px solid rgba(46, 124, 255, 0.15); }
[data-screen="menu"] .sos-input-wrap small { position: absolute; right: 11px; bottom: 9px; color: var(--sc-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
[data-screen="menu"] .sos-status { padding: 10px 11px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; background: rgba(255, 255, 255, 0.025); color: var(--sc-muted); font-size: 11px; line-height: 1.45; }
[data-screen="menu"] .sos-status.has-record { border-color: rgba(102, 201, 135, 0.2); background: rgba(102, 201, 135, 0.07); color: #9bdcb0; }
[data-screen="menu"] .sos-button { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(244, 183, 93, 0.36); border-radius: 12px; background: linear-gradient(180deg, #e9aa4c, #c8822d); color: #171009; box-shadow: 0 10px 24px rgba(151, 91, 25, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.3); font-size: 14px; font-weight: 900; }
[data-screen="menu"] .sos-button .lucide { display: block; width: 18px; height: 18px; transform: translateY(1px); }
[data-screen="menu"] .sos-button:disabled { opacity: 0.45; box-shadow: none; }
[data-screen="menu"] .sos-button:not(:disabled):active { transform: translateY(1px) scale(0.99); }

[data-screen="menu"] .menu-version {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 20px 0 0;
  border: 0;
  background: transparent;
  color: var(--sc-muted);
  font-size: 11px;
}

[data-screen="menu"] .menu-version b { font-weight: 650; font-variant-numeric: tabular-nums; }

[data-screen="menu"] :is(button, textarea):focus-visible,
.menu-dialog :is(button, input, textarea):focus-visible,
.support-dialog :is(button, summary):focus-visible {
  outline: 3px solid rgba(46, 124, 255, 0.28);
  outline-offset: 2px;
}

/* Menu-linked dialogs */
.menu-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.menu-dialog-head h2 { margin: 0; color: var(--sc-text); font-size: 21px; }
.menu-dialog-head .eyebrow { margin-bottom: 5px; }
.menu-dialog { display: grid; gap: 16px; }
.menu-dialog > p { margin: 0; color: var(--sc-text-secondary); font-size: 13px; line-height: 1.55; }
.menu-dialog label { display: grid; gap: 8px; color: var(--sc-text-secondary); font-size: 12px; font-weight: 750; }
.menu-dialog :is(input, textarea),
.auth-dialog :is(input, textarea) { min-height: 50px; border: 1px solid var(--sc-border); border-radius: 11px; background: rgba(5, 8, 12, 0.68); color: var(--sc-text); font: inherit; padding: 0 13px; }
.menu-dialog textarea { min-height: 120px; padding-block: 12px 28px; resize: vertical; }
.menu-dialog .field-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--sc-muted); font-size: 10px; font-weight: 600; }
.menu-dialog .field-meta b { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.profile-gender-field { display: grid; gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
.profile-gender-field legend { margin-bottom: 8px; color: var(--sc-text-secondary); font-size: 12px; font-weight: 750; }
.profile-gender-field > small { color: var(--sc-muted); font-size: 10px; line-height: 1.45; }
.profile-gender-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-gender-options label { position: relative; display: block; }
.profile-gender-options input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; opacity: 0; pointer-events: none; }
.profile-gender-options span {
  min-height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sc-border);
  border-radius: 11px;
  background: rgba(5, 8, 12, 0.68);
  color: var(--sc-text-secondary);
  font-size: 14px;
  font-weight: 800;
  transition: border-color 160ms var(--sc-ease), background 160ms var(--sc-ease), color 160ms var(--sc-ease), box-shadow 160ms var(--sc-ease);
}
.profile-gender-options input:checked + span {
  border-color: rgba(46, 124, 255, 0.72);
  background: rgba(46, 124, 255, 0.14);
  color: #dce9ff;
  box-shadow: inset 0 0 0 1px rgba(46, 124, 255, 0.16), 0 8px 20px rgba(15, 67, 159, 0.14);
}
.profile-gender-options input:focus-visible + span { outline: 3px solid rgba(46, 124, 255, 0.28); outline-offset: 2px; }
.menu-dialog-note { padding: 10px 12px; border: 1px solid rgba(46, 124, 255, 0.16); border-radius: 10px; background: rgba(46, 124, 255, 0.07); color: #a9c8ff !important; font-size: 11px !important; }
.menu-dialog .confirm-button,
.menu-dialog .ghost-button,
.auth-dialog .confirm-button,
.auth-dialog .ghost-button { min-height: 50px; }
.auth-dialog .danger-button { min-height: 50px; }
.auth-dialog .terms-check { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
.auth-dialog .terms-check input { width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin-top: 1px; padding: 0; accent-color: var(--sc-primary); }
.auth-dialog .terms-check span { min-width: 0; }
.auth-dialog .terms-check a { color: #8db5ff; text-underline-offset: 2px; }
.delete-account-dialog { border-color: rgba(240, 91, 100, 0.2); }
.delete-account-dialog > p:not(.eyebrow):not(.profile-error) { color: var(--sc-text-secondary); line-height: 1.55; }

.support-modal { padding-inline: 10px; }
.support-dialog { max-height: min(86dvh, 760px); overflow: hidden; }
.support-dialog-head { min-height: 72px; }
.faq-list,
.privacy-content { overscroll-behavior: contain; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.faq-list summary { padding-inline: 18px; line-height: 1.35; }
.faq-list details p { color: var(--sc-text-secondary); line-height: 1.65; }
.privacy-content { padding-inline: 20px; }
.privacy-content h3 { margin: 22px 0 8px; color: var(--sc-text); font-size: 15px; }
.privacy-content p { color: var(--sc-text-secondary); line-height: 1.7; }

@media (max-width: 380px) {
  [data-screen="menu"] .menu-profile-hero,
  [data-screen="menu"] .account-panel,
  [data-screen="menu"] .sos-section { padding: 15px; }
  [data-screen="menu"] .avatar-frame { width: 56px; height: 56px; flex-basis: 56px; }
  [data-screen="menu"] .nickname-text { font-size: 20px; }
  [data-screen="menu"] .menu-volume strong { font-size: 25px; }
  [data-screen="menu"] .menu-list button,
  [data-screen="menu"] .support-menu button { grid-template-columns: 38px minmax(0, 1fr) 18px; gap: 9px; padding-inline: 11px; }
  [data-screen="menu"] .menu-row-icon { width: 36px; height: 36px; }
  [data-screen="menu"] .account-actions { grid-template-columns: minmax(0, 1fr); }
  [data-screen="menu"] .sos-section-head { grid-template-columns: 38px minmax(0, 1fr); }
  [data-screen="menu"] .sos-date { grid-column: 2; justify-self: start; max-width: 100%; }
  .menu-dialog { padding: 18px; }
}

/* SetCounter Motion System */
.motion-ready .app-screen {
  animation: none;
}

.motion-ready :is(button, [role="button"], .workout-plan-card, .today-item, .board-post) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform-origin: center;
}

.motion-ready :is(.level-progress, .progress-track, .home-progress-bar) > div {
  width: 100%;
  transform-origin: left center;
  will-change: transform;
}

.bottom-nav {
  isolation: isolate;
  overflow: hidden;
}

.bottom-nav button {
  position: relative;
  z-index: 1;
  background: transparent;
  box-shadow: none;
  transition: color 180ms ease;
}

.bottom-nav button.is-active {
  background: transparent;
  box-shadow: none;
}

body:has(:is(
  [data-screen="home"].is-active,
  [data-screen="calendar"].is-active,
  [data-screen="board"].is-active
)) .bottom-nav button::before {
  content: none;
}

body:has(:is(
  [data-screen="home"].is-active,
  [data-screen="calendar"].is-active,
  [data-screen="board"].is-active
)) .bottom-nav button.is-active {
  background: transparent;
  box-shadow: none;
}

.bottom-nav-indicator {
  position: absolute;
  z-index: 0;
  top: 9px;
  left: 0;
  height: 52px;
  width: 20%;
  border: 1px solid rgba(111, 164, 255, 0.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(46, 124, 255, 0.2), rgba(46, 124, 255, 0.12));
  box-shadow: 0 8px 24px rgba(16, 73, 170, 0.18), inset 0 1px rgba(255, 255, 255, 0.045);
  pointer-events: none;
  will-change: transform, width;
}

body.keyboard-open .bottom-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(105%);
  transition: opacity 160ms ease, transform 180ms ease;
}

body.keyboard-open :is(.profile-modal, .exercise-library-modal, .exercise-step-modal) {
  min-height: var(--visual-viewport-height, 100dvh);
  max-height: var(--visual-viewport-height, 100dvh);
}

body.keyboard-open :is(.profile-dialog, .exercise-library-dialog, .exercise-step-dialog, .support-dialog) {
  max-height: calc(var(--visual-viewport-height, 100dvh) - 12px);
}

/* Keep the athlete profile form inside the reduced iOS keyboard viewport. */
#profileModal {
  overflow: hidden;
}

#profileModal .profile-dialog {
  min-height: 0;
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 164, 230, 0.35) transparent;
}

#profileModal input:not([type="radio"]) {
  font-size: 16px;
}

body.keyboard-open #profileModal {
  place-items: start center;
  padding: 6px 10px;
}

body.keyboard-open #profileModal .profile-dialog {
  width: min(100%, 440px);
  max-height: calc(var(--visual-viewport-height, 100dvh) - 12px);
  padding: 18px;
}

body.keyboard-open #profileModal .menu-dialog-head {
  position: sticky;
  z-index: 2;
  top: -18px;
  margin: -18px -18px 0;
  padding: 16px 18px 10px;
  background: rgba(16, 21, 27, 0.98);
  backdrop-filter: blur(20px);
}

/* Keep authentication actions inside the visible keyboard viewport. */
.profile-modal:has(.auth-dialog) {
  overflow: hidden;
}

.auth-dialog {
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 164, 230, 0.35) transparent;
}

.auth-dialog input:not([type="checkbox"]) {
  font-size: 16px;
}

.auth-field-hint {
  margin-top: -7px;
  color: var(--sc-text-secondary) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

.auth-alert-modal {
  z-index: 180;
}

.auth-alert-dialog {
  width: min(100%, 340px);
  gap: 10px;
  padding: 22px;
}

.auth-alert-dialog h2 {
  font-size: 20px;
}

.auth-alert-dialog > p:not(.eyebrow) {
  color: var(--sc-text-primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}

.auth-alert-dialog .confirm-button {
  width: 100%;
  min-height: 50px;
  margin-top: 8px;
}

.auth-dialog .complaint-actions {
  position: sticky;
  z-index: 3;
  bottom: -24px;
  margin: 2px -24px -24px;
  padding: 12px 24px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(16, 21, 27, 0.98);
  box-shadow: 0 -14px 30px rgba(2, 5, 10, 0.42);
  backdrop-filter: blur(20px);
}

body.keyboard-open .profile-modal:has(.auth-dialog) {
  place-items: start center;
  padding: 6px 10px;
}

body.keyboard-open .auth-dialog {
  width: min(100%, 440px);
  max-height: calc(var(--visual-viewport-height, 100dvh) - 12px);
  padding: 18px;
}

body.keyboard-open .auth-dialog .complaint-actions {
  bottom: -18px;
  margin: 2px -18px -18px;
  padding: 10px 18px max(14px, env(safe-area-inset-bottom));
}

/* Athlete level history */
.level-history-modal {
  align-items: flex-end;
  padding: 24px 12px max(12px, env(safe-area-inset-bottom));
}

.level-history-dialog {
  width: min(100%, 520px);
  max-height: min(90dvh, 800px);
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px 18px 14px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 26%),
    #11161e;
  box-shadow: 0 -18px 52px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.level-history-summary {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(89, 148, 255, 0.18);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 0%, rgba(46, 124, 255, 0.16), transparent 42%),
    rgba(6, 10, 16, 0.68);
}

.level-history-athlete {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.level-history-athlete .level-badge {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
}

.level-history-athlete > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.level-history-athlete small {
  color: var(--sc-primary);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
}

.level-history-athlete strong {
  overflow: hidden;
  color: var(--sc-text);
  font-size: 21px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.level-history-xp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  color: var(--sc-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.level-history-xp-head strong {
  color: #f5f8ff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.level-history-xp-track {
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.level-history-xp-track span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2e7cff, #55a3ff);
  box-shadow: 0 0 16px rgba(46, 124, 255, 0.52);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.level-history-summary > p {
  margin: 8px 0 0;
  color: var(--sc-text-tertiary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.level-history-ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.level-history-ledger-card {
  --ledger-sheen-x: -180%;
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 72px;
  padding: 11px 12px;
  overflow: hidden;
  border: 1px solid rgba(101, 163, 255, 0.2);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(47, 101, 190, 0.13), transparent 62%),
    rgba(16, 22, 31, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 8px 22px rgba(0, 0, 0, 0.18);
}

.level-history-ledger-card::after {
  position: absolute;
  inset: -50% auto -50% -35%;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(133, 184, 255, 0.17), transparent);
  content: "";
  pointer-events: none;
  transform: translateX(var(--ledger-sheen-x)) skewX(-16deg);
}

.level-history-ledger-card.is-down {
  border-color: rgba(240, 91, 100, 0.18);
  background:
    linear-gradient(145deg, rgba(153, 48, 58, 0.11), transparent 62%),
    rgba(16, 22, 31, 0.88);
}

.level-history-ledger-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(46, 124, 255, 0.14);
  color: #69a6ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.level-history-ledger-card.is-down .level-history-ledger-icon {
  background: rgba(240, 91, 100, 0.12);
  color: #ff7b83;
}

.level-history-ledger-icon .lucide { width: 16px; height: 16px; }

.level-history-ledger-card > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.level-history-ledger-card small {
  color: var(--sc-text-tertiary);
  font-size: 10px;
  font-weight: 720;
}

.level-history-ledger-card strong {
  color: var(--sc-text);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.level-history-ledger-card strong b { font: inherit; }

.level-history-ledger-card > em {
  grid-column: 1 / -1;
  margin-top: -3px;
  color: #70abff;
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.level-history-ledger-card.is-down > em { color: #ff858d; }

.level-history-reasons {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(9, 13, 19, 0.64);
}

.level-history-reasons[hidden] { display: none; }

.level-history-reasons-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.level-history-reasons-head h3 {
  margin: 0;
  color: var(--sc-text-secondary);
  font-size: 12px;
  font-weight: 820;
}

.level-history-reasons-head span {
  color: var(--sc-text-tertiary);
  font-size: 9px;
}

.level-history-reason-list { display: grid; gap: 3px; }

.level-history-reason {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--sc-text-secondary);
  font-size: 11px;
}

.level-history-reason i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5799ff;
  box-shadow: 0 0 8px rgba(46, 124, 255, 0.64);
}

.level-history-reason.is-down i {
  background: #f06b74;
  box-shadow: 0 0 8px rgba(240, 91, 100, 0.46);
}

.level-history-reason span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.level-history-reason strong {
  color: var(--sc-text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.level-history-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 2px 10px;
}

.level-history-list-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 820;
}

.level-history-list-head span {
  color: var(--sc-text-tertiary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.level-history-list {
  display: grid;
  max-height: min(38dvh, 330px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.level-history-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.level-history-direction {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(46, 124, 255, 0.12);
  color: #67a5ff;
}

.level-history-item.is-down .level-history-direction {
  background: rgba(240, 91, 100, 0.11);
  color: var(--sc-danger);
}

.level-history-item.is-up .level-history-direction {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 16px rgba(46, 124, 255, 0.08);
}

.level-history-direction .lucide { width: 18px; height: 18px; }

.level-history-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.level-history-copy small,
.level-history-copy em {
  overflow: hidden;
  color: var(--sc-text-tertiary);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.level-history-copy strong {
  overflow: hidden;
  color: var(--sc-text);
  font-size: 13px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.level-history-level {
  display: flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.level-history-level small { color: var(--sc-text-tertiary); font-size: 10px; }
.level-history-level .lucide { width: 12px; height: 12px; color: var(--sc-text-tertiary); }
.level-history-level strong { color: #69a6ff; font-size: 13px; }
.level-history-item.is-down .level-history-level strong { color: #ff7b83; }
.level-history-item.is-up .level-history-level strong { color: #69a6ff; }

.level-history-empty {
  display: grid;
  place-items: center;
  min-height: 128px;
  padding: 20px;
  text-align: center;
}

.level-history-empty strong { color: var(--sc-text-secondary); font-size: 14px; }
.level-history-empty span { max-width: 260px; margin-top: 6px; color: var(--sc-text-tertiary); font-size: 11px; line-height: 1.5; }

@media (max-width: 374px) {
  .level-history-dialog { padding: 16px; }
  .level-history-summary { padding: 14px; }
  .level-history-athlete .level-badge { width: 56px; height: 56px; }
  .level-history-ledger-card { grid-template-columns: 26px minmax(0, 1fr); gap: 7px; padding: 10px; }
  .level-history-ledger-icon { width: 26px; height: 26px; }
  .level-history-item { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; }
  .level-history-direction { width: 30px; height: 30px; }
}

.motion-ready :is(.profile-modal, .exercise-library-modal, .exercise-step-modal) {
  will-change: opacity;
}

.motion-ready :is(.profile-dialog, .exercise-library-dialog, .exercise-step-dialog, .support-dialog, .board-report-dialog) {
  will-change: transform, opacity;
}

.has-gsap :is(.exercise-art, .exercise-detail-images) img:not(.is-motion-loaded),
.has-gsap img.exercise-step-image:not(.is-motion-loaded) {
  opacity: 0;
}

:is(.exercise-art, .exercise-detail-images) {
  background-color: rgba(255, 255, 255, 0.035);
}

.is-motion-loaded {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .app-screen,
  .bottom-nav-indicator,
  .toast,
  button,
  [role="button"] {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Rank system v2 */
.level-badge.iron,
.level-up-stage.iron,
.level-up-emblem.iron {
  --rank-hi: #d9dee7;
  --rank-mid: #747d8b;
  --rank-low: #252b34;
  --rank-deep: #0d1015;
  --rank-text: #f2f5fa;
  --rank-glow: rgba(173, 184, 201, 0.22);
}

.level-badge.bronze,
.level-up-stage.bronze,
.level-up-emblem.bronze {
  --rank-hi: #ffd19b;
  --rank-mid: #b86b38;
  --rank-low: #5b2b17;
  --rank-deep: #170b07;
  --rank-text: #fff1dd;
  --rank-glow: rgba(219, 116, 53, 0.34);
}

.level-badge.silver,
.level-up-stage.silver,
.level-up-emblem.silver {
  --rank-hi: #ffffff;
  --rank-mid: #b9c4d2;
  --rank-low: #5a6676;
  --rank-deep: #11161d;
  --rank-text: #ffffff;
  --rank-glow: rgba(210, 229, 255, 0.32);
}

.level-badge.gold,
.level-up-stage.gold,
.level-up-emblem.gold {
  --rank-hi: #fff3a5;
  --rank-mid: #f4bd35;
  --rank-low: #9e5b08;
  --rank-deep: #1c1003;
  --rank-text: #fff8d2;
  --rank-glow: rgba(255, 190, 48, 0.42);
}

.level-badge.red-gold,
.level-up-stage.red-gold,
.level-up-emblem.red-gold {
  --rank-hi: #ffe08b;
  --rank-mid: #ff7348;
  --rank-low: #941d23;
  --rank-deep: #190509;
  --rank-text: #fff4d8;
  --rank-glow: rgba(255, 75, 46, 0.42);
}

.level-badge.platinum,
.level-up-stage.platinum,
.level-up-emblem.platinum {
  --rank-hi: #ffffff;
  --rank-mid: #b9eff2;
  --rank-low: #568fa2;
  --rank-deep: #0b1920;
  --rank-text: #f4ffff;
  --rank-glow: rgba(152, 232, 241, 0.42);
}

.level-badge.diamond,
.level-up-stage.diamond,
.level-up-emblem.diamond {
  --rank-hi: #dbfbff;
  --rank-mid: #53d7ff;
  --rank-low: #1760b9;
  --rank-deep: #071329;
  --rank-text: #effdff;
  --rank-glow: rgba(67, 198, 255, 0.5);
}

.level-badge.black-diamond,
.level-up-stage.black-diamond,
.level-up-emblem.black-diamond {
  --rank-hi: #cfc6ff;
  --rank-mid: #6654a7;
  --rank-low: #25233d;
  --rank-deep: #07070d;
  --rank-text: #f5f1ff;
  --rank-glow: rgba(139, 112, 255, 0.46);
}

.level-badge.crimson,
.level-up-stage.crimson,
.level-up-emblem.crimson {
  --rank-hi: #ffb0ab;
  --rank-mid: #f33c49;
  --rank-low: #76101d;
  --rank-deep: #160308;
  --rank-text: #fff2f1;
  --rank-glow: rgba(255, 53, 69, 0.52);
}

.level-badge.crown,
.level-up-stage.crown,
.level-up-emblem.crown {
  --rank-hi: #fffbd0;
  --rank-mid: #ffd84d;
  --rank-low: #d27a0c;
  --rank-deep: #261102;
  --rank-text: #fffbe0;
  --rank-glow: rgba(255, 207, 55, 0.56);
}

.level-badge.champion,
.level-up-stage.champion,
.level-up-emblem.champion {
  --rank-hi: #fffbd8;
  --rank-mid: #ffca3a;
  --rank-low: #dc332d;
  --rank-deep: #180407;
  --rank-text: #fffce9;
  --rank-glow: rgba(255, 77, 47, 0.6);
}

.level-badge {
  --badge-clip: polygon(50% 0, 88% 12%, 100% 39%, 88% 78%, 50% 100%, 12% 78%, 0 39%, 12% 12%);
  position: relative;
  display: inline-grid;
  width: 34px;
  min-width: 34px;
  height: 36px;
  flex: 0 0 34px;
  place-items: center;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  isolation: isolate;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--rank-text);
  clip-path: none;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.38)) drop-shadow(0 0 6px var(--rank-glow));
  transform: none;
}

.level-badge::before,
.level-badge::after {
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: var(--badge-clip);
}

.level-badge::before {
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.48), transparent 25% 74%, rgba(0, 0, 0, 0.5)),
    linear-gradient(145deg, var(--rank-hi) 0 10%, var(--rank-mid) 34%, var(--rank-low) 68%, var(--rank-deep) 100%);
}

.level-badge::after {
  z-index: -1;
  inset: 4px 5px 5px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(6, 8, 13, 0.28), rgba(6, 8, 13, 0.82));
}

.level-badge-rim,
.level-badge-mark {
  position: absolute;
  z-index: 2;
  left: 50%;
  display: block;
  background: var(--rank-hi);
  box-shadow: 0 0 5px var(--rank-glow);
  transform: translateX(-50%);
}

.level-badge-rim {
  top: 5px;
  width: 9px;
  height: 2px;
  border-radius: 99px;
}

.level-badge-mark {
  bottom: 5px;
  width: 8px;
  height: 2px;
  opacity: 0.82;
}

.level-badge-number {
  position: relative;
  z-index: 3;
  padding: 0;
  color: var(--rank-text);
  font-size: 12px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 1px 3px #000, 0 0 8px var(--rank-glow);
}

.level-badge-pips {
  position: absolute;
  display: block;
  pointer-events: none;
}

.level-badge-pips {
  z-index: 4;
  bottom: 3px;
  left: 50%;
  display: flex;
  gap: 1px;
  transform: translateX(-50%);
}

.level-badge-pips i {
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--rank-hi);
  box-shadow: 0 0 4px var(--rank-glow);
  opacity: 0.16;
}

.level-badge.grade-1 .level-badge-pips i:nth-child(-n + 1),
.level-badge.grade-2 .level-badge-pips i:nth-child(-n + 2),
.level-badge.grade-3 .level-badge-pips i:nth-child(-n + 3),
.level-badge.grade-4 .level-badge-pips i:nth-child(-n + 4),
.level-badge.grade-5 .level-badge-pips i:nth-child(-n + 5) {
  opacity: 0.94;
}

.level-badge.form-origin-one {
  --badge-clip: inset(0 round 9px);
  width: 30px;
  min-width: 30px;
  height: 30px;
  flex-basis: 30px;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.32));
}

.level-badge.form-origin-one .level-badge-rim {
  top: 5px;
  width: 12px;
}

.level-badge.form-origin-one :is(.level-badge-mark, .level-badge-pips) {
  display: none;
}

.level-badge.form-origin-two {
  --badge-clip: polygon(50% 0, 94% 25%, 84% 80%, 50% 100%, 16% 80%, 6% 25%);
  width: 31px;
  min-width: 31px;
  height: 33px;
  flex-basis: 31px;
}

.level-badge.form-origin-two .level-badge-mark {
  width: 12px;
  transform: translateX(-50%) rotate(-12deg);
}

.level-badge.form-origin-two .level-badge-pips {
  display: none;
}

.level-badge.form-core {
  --badge-clip: polygon(50% 0, 88% 12%, 100% 39%, 86% 78%, 50% 100%, 14% 78%, 0 39%, 12% 12%);
}

.level-badge.form-forged {
  --badge-clip: polygon(50% 0, 94% 14%, 88% 36%, 100% 48%, 80% 82%, 50% 100%, 20% 82%, 0 48%, 12% 36%, 6% 14%);
}

.level-badge.form-forged .level-badge-rim {
  width: 16px;
  box-shadow: -6px 3px 0 color-mix(in srgb, var(--rank-mid) 72%, transparent), 6px 3px 0 color-mix(in srgb, var(--rank-mid) 72%, transparent);
}

.level-badge.form-vanguard {
  --badge-clip: polygon(50% 0, 92% 15%, 100% 55%, 72% 88%, 50% 100%, 28% 88%, 0 55%, 8% 15%);
}

.level-badge.form-ascendant,
.level-badge.form-paragon {
  --badge-clip: polygon(50% 0, 90% 11%, 100% 36%, 89% 78%, 50% 100%, 11% 78%, 0 36%, 10% 11%);
}

.level-badge.form-mythic {
  --badge-clip: polygon(50% 0, 79% 20%, 100% 50%, 78% 82%, 50% 100%, 22% 82%, 0 50%, 21% 20%);
}

.level-badge.form-mythic::after {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rank-hi) 42%, transparent);
}

.level-badge.form-sovereign {
  --badge-clip: polygon(50% 0, 91% 12%, 84% 34%, 100% 45%, 82% 82%, 50% 100%, 18% 82%, 0 45%, 16% 34%, 9% 12%);
}

.level-badge.form-immortal {
  --badge-clip: polygon(50% 0, 88% 9%, 100% 33%, 91% 73%, 69% 91%, 50% 100%, 31% 91%, 9% 73%, 0 33%, 12% 9%);
}

.level-badge.form-immortal .level-badge-rim {
  width: 20px;
  height: 3px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rank-glow) 60%, transparent), 0 0 8px var(--rank-glow);
}

.level-badge.form-final-form {
  --badge-clip: polygon(50% 0, 88% 8%, 100% 28%, 92% 52%, 100% 72%, 68% 92%, 50% 100%, 32% 92%, 0 72%, 8% 52%, 0 28%, 12% 8%);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 9px var(--rank-glow));
}

.level-badge:is(.crown, .champion)::after {
  inset: 6px 6px 5px;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.42), transparent 24%),
    linear-gradient(180deg, rgba(97, 26, 9, 0.2), rgba(10, 5, 3, 0.86));
}

[data-screen="home"] .level-badge,
[data-screen="menu"] .user-badge .level-badge,
[data-screen="board"] .board-author .level-badge {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[data-screen="menu"] .user-badge .level-badge {
  width: 42px;
  height: 45px;
  flex-basis: 42px;
}

[data-screen="menu"] .user-badge .level-badge-number {
  font-size: 14px;
}

[data-screen="board"] .board-author .level-badge {
  width: 28px;
  min-width: 28px;
  height: 30px;
  flex-basis: 28px;
}

[data-screen="board"] .board-author .level-badge-number {
  font-size: 10px;
}

.level-up-screen {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rank-glow, rgba(46, 124, 255, 0.2)) 55%, transparent), transparent 42%),
    linear-gradient(180deg, #0c1017 0%, #080a0e 72%);
}

.level-up-stage {
  position: relative;
  z-index: 1;
  padding: 28px 14px 22px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rank-glow) 58%, transparent), transparent 43%);
}

.level-up-ambient {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.level-up-ambient span {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 1px;
  height: 58%;
  opacity: 0.14;
  background: linear-gradient(180deg, transparent, #9dc1ff 36%, transparent 88%);
  transform-origin: 50% 20%;
}

.level-up-ambient span:nth-child(1) { transform: rotate(28deg); }
.level-up-ambient span:nth-child(2) { transform: rotate(90deg); }
.level-up-ambient span:nth-child(3) { transform: rotate(152deg); }

.level-up-kicker {
  margin-bottom: 9px;
  color: #8eb7ff;
  font-size: 11px;
  letter-spacing: 0;
}

.level-up-stage h1 {
  letter-spacing: 0;
  text-wrap: balance;
}

.level-up-emblem {
  --rank-hi: #d9dee7;
  --rank-mid: #747d8b;
  --rank-low: #252b34;
  --rank-deep: #0d1015;
  --rank-text: #f2f5fa;
  --rank-glow: rgba(173, 184, 201, 0.22);
  position: relative;
  display: grid;
  width: 220px;
  height: 228px;
  place-items: center;
  margin: 24px 0 20px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.level-up-burst {
  position: absolute;
  z-index: -3;
  width: 175px;
  height: 175px;
  border: 2px solid var(--rank-hi);
  border-radius: 50%;
  box-shadow: 0 0 28px var(--rank-glow), inset 0 0 26px var(--rank-glow);
  opacity: 0;
}

.level-up-orbit {
  position: absolute;
  z-index: -2;
  border: 1px solid color-mix(in srgb, var(--rank-hi) 46%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.level-up-orbit::before,
.level-up-orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rank-hi);
  box-shadow: 0 0 12px var(--rank-glow);
  transform: translateY(-50%);
}

.level-up-orbit::before { left: -3px; }
.level-up-orbit::after { right: -3px; }

.level-up-orbit-outer {
  width: 212px;
  height: 212px;
  border-style: dashed;
  opacity: 0.52;
}

.level-up-orbit-inner {
  width: 184px;
  height: 184px;
  opacity: 0.72;
}

.level-up-crest {
  position: relative;
  display: grid;
  width: 146px;
  height: 170px;
  place-content: center;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg, var(--rank-hi), var(--rank-mid) 29%, var(--rank-low) 66%, var(--rank-deep));
  clip-path: polygon(50% 0, 87% 10%, 100% 34%, 91% 76%, 50% 100%, 9% 76%, 0 34%, 13% 10%);
  filter: drop-shadow(0 18px 16px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 18px var(--rank-glow));
}

.level-up-crest::before,
.level-up-crest::after {
  content: "";
  position: absolute;
  pointer-events: none;
  clip-path: inherit;
}

.level-up-crest::before {
  z-index: -2;
  inset: 5px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.5), transparent 23% 72%, rgba(0, 0, 0, 0.58)),
    linear-gradient(160deg, var(--rank-mid), var(--rank-deep) 82%);
}

.level-up-crest::after {
  z-index: -1;
  inset: 12px 14px 15px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.2), transparent 35%),
    linear-gradient(180deg, rgba(8, 10, 16, 0.2), rgba(5, 7, 11, 0.88));
}

.level-up-sheen {
  z-index: 4;
  top: -25%;
  bottom: -25%;
  left: 42%;
  width: 26px;
  background: rgba(255, 255, 255, 0.48);
  filter: blur(8px);
}

.level-up-rank,
.level-up-emblem small,
.level-up-emblem strong,
.level-up-crest-mark {
  position: relative;
  z-index: 3;
}

.level-up-rank {
  margin-bottom: 5px;
  color: var(--rank-hi);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 10px var(--rank-glow);
}

.level-up-emblem small {
  color: color-mix(in srgb, var(--rank-text) 74%, transparent);
  font-size: 10px;
}

.level-up-emblem strong {
  margin-top: 2px;
  color: var(--rank-text);
  font-size: 62px;
  text-shadow: 0 2px 4px #000, 0 0 22px var(--rank-glow);
}

.level-up-crest-mark {
  width: 34px;
  height: 3px;
  margin: 8px auto 0;
  border-radius: 99px;
  background: var(--rank-hi);
  box-shadow: 0 0 12px var(--rank-glow);
}

.level-up-emblem.form-origin-one .level-up-crest {
  width: 128px;
  height: 128px;
  border-radius: 28px;
  clip-path: none;
}

.level-up-emblem.form-origin-one .level-up-crest::before,
.level-up-emblem.form-origin-one .level-up-crest::after {
  border-radius: 24px;
  clip-path: none;
}

.level-up-emblem.form-origin-one :is(.level-up-orbit-inner, .level-up-crest-mark) {
  display: none;
}

.level-up-emblem.form-origin-two .level-up-crest {
  width: 132px;
  height: 150px;
  clip-path: polygon(50% 0, 94% 25%, 84% 80%, 50% 100%, 16% 80%, 6% 25%);
}

.level-up-emblem.form-core .level-up-crest {
  clip-path: polygon(50% 0, 88% 12%, 100% 39%, 86% 78%, 50% 100%, 14% 78%, 0 39%, 12% 12%);
}

.level-up-emblem.form-forged .level-up-crest {
  clip-path: polygon(50% 0, 94% 14%, 88% 36%, 100% 48%, 80% 82%, 50% 100%, 20% 82%, 0 48%, 12% 36%, 6% 14%);
}

.level-up-emblem.form-vanguard .level-up-crest {
  clip-path: polygon(50% 0, 92% 15%, 100% 55%, 72% 88%, 50% 100%, 28% 88%, 0 55%, 8% 15%);
}

.level-up-emblem.form-ascendant .level-up-crest,
.level-up-emblem.form-paragon .level-up-crest {
  clip-path: polygon(50% 0, 90% 11%, 100% 36%, 89% 78%, 50% 100%, 11% 78%, 0 36%, 10% 11%);
}

.level-up-emblem.form-mythic .level-up-crest {
  clip-path: polygon(50% 0, 79% 20%, 100% 50%, 78% 82%, 50% 100%, 22% 82%, 0 50%, 21% 20%);
}

.level-up-emblem.form-sovereign .level-up-crest {
  clip-path: polygon(50% 0, 91% 12%, 84% 34%, 100% 45%, 82% 82%, 50% 100%, 18% 82%, 0 45%, 16% 34%, 9% 12%);
}

.level-up-emblem.form-immortal .level-up-crest {
  clip-path: polygon(50% 0, 88% 9%, 100% 33%, 91% 73%, 69% 91%, 50% 100%, 31% 91%, 9% 73%, 0 33%, 12% 9%);
}

.level-up-emblem.form-final-form .level-up-crest {
  width: 154px;
  height: 178px;
  clip-path: polygon(50% 0, 88% 8%, 100% 28%, 92% 52%, 100% 72%, 68% 92%, 50% 100%, 32% 92%, 0 72%, 8% 52%, 0 28%, 12% 8%);
}

.level-up-emblem.form-immortal .level-up-orbit-inner {
  border-width: 2px;
  box-shadow: 0 0 18px var(--rank-glow), inset 0 0 18px var(--rank-glow);
}

.level-up-emblem.grade-1 .level-up-crest-mark { width: 18px; }
.level-up-emblem.grade-2 .level-up-crest-mark { width: 24px; }
.level-up-emblem.grade-3 .level-up-crest-mark { width: 30px; }
.level-up-emblem.grade-4 .level-up-crest-mark { width: 36px; height: 4px; }
.level-up-emblem.grade-5 .level-up-crest-mark {
  width: 42px;
  height: 4px;
  box-shadow: -10px 5px 0 color-mix(in srgb, var(--rank-hi) 48%, transparent), 10px 5px 0 color-mix(in srgb, var(--rank-hi) 48%, transparent), 0 0 14px var(--rank-glow);
}

.level-up-particle {
  position: absolute;
  z-index: -1;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--rank-hi);
  box-shadow: 0 0 12px var(--rank-glow);
  opacity: 0;
}

.level-up-particle:nth-of-type(3n) {
  width: 3px;
  height: 9px;
}

.level-up-progress-track {
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.38);
}

.level-up-progress-track span {
  background: linear-gradient(90deg, var(--rank-low, #1c5fd1), var(--rank-hi, #79aaff));
  box-shadow: 0 0 20px var(--rank-glow, rgba(46, 124, 255, 0.5));
}

.level-up-progress-meta span:last-child {
  color: var(--rank-hi, #8fb6ff);
}

.level-up-result {
  border-color: color-mix(in srgb, var(--rank-hi, #66c987) 34%, transparent);
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--rank-glow, rgba(46, 124, 255, 0.2)) 56%, transparent), transparent 62%),
    rgba(17, 21, 28, 0.88);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 14px 30px rgba(0, 0, 0, 0.26);
}

.level-up-result .lucide,
.level-up-result small {
  color: var(--rank-hi, #66c987);
}

.level-up-continue {
  background: linear-gradient(180deg, #438bff, #2369e8);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.22), 0 14px 32px rgba(28, 94, 209, 0.35);
}

@media (max-height: 760px) {
  .level-up-stage { justify-content: flex-start; padding-top: 22px; }
  .level-up-copy { margin-top: 8px; }
  .level-up-emblem { width: 190px; height: 192px; margin: 14px 0 12px; }
  .level-up-crest { width: 124px; height: 146px; }
  .level-up-orbit-outer { width: 184px; height: 184px; }
  .level-up-orbit-inner { width: 158px; height: 158px; }
  .level-up-emblem strong { font-size: 52px; }
  .level-up-result { min-height: 62px; margin-top: 16px; padding-block: 10px; }
  .level-up-continue { min-height: 48px; margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .level-up-orbit,
  .level-up-particle,
  .level-up-burst,
  .level-up-ambient {
    animation: none !important;
    transform: none !important;
  }
}

/* Rank shield refinement: compact plated emblems without wings or stars */
.level-badge {
  --badge-clip: polygon(50% 0, 88% 12%, 96% 22%, 96% 72%, 50% 100%, 4% 72%, 4% 22%, 12% 12%);
  width: 34px;
  min-width: 34px;
  height: 38px;
  flex-basis: 34px;
}

.level-badge::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), transparent 18% 72%, rgba(0, 0, 0, 0.58)),
    linear-gradient(180deg, var(--rank-hi) 0 8%, var(--rank-mid) 28%, var(--rank-low) 70%, var(--rank-deep));
}

.level-badge::after {
  inset: 4px 5px 6px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--rank-mid) 74%, #111722), color-mix(in srgb, var(--rank-deep) 84%, #080b10));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rank-hi) 22%, transparent), inset 0 -4px 8px rgba(0, 0, 0, 0.32);
}

.level-badge-topcap,
.level-badge-corner {
  position: absolute;
  z-index: 4;
  display: block;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(145deg, var(--rank-hi), var(--rank-mid) 55%, var(--rank-low));
  box-shadow: 0 0 6px var(--rank-glow);
}

.level-badge-topcap {
  top: 0;
  left: 50%;
  width: 13px;
  height: 7px;
  clip-path: polygon(50% 0, 100% 72%, 78% 100%, 22% 100%, 0 72%);
  transform: translateX(-50%);
}

.level-badge-corner {
  top: 7px;
  width: 8px;
  height: 9px;
}

.level-badge-corner-left {
  left: 2px;
  clip-path: polygon(0 0, 100% 18%, 60% 100%, 12% 70%);
}

.level-badge-corner-right {
  right: 2px;
  clip-path: polygon(100% 0, 0 18%, 40% 100%, 88% 70%);
}

.level-badge.form-origin-one {
  --badge-clip: polygon(13% 0, 87% 0, 100% 14%, 100% 76%, 50% 100%, 0 76%, 0 14%);
  width: 30px;
  min-width: 30px;
  height: 32px;
  flex-basis: 30px;
}

.level-badge.form-origin-one::before,
.level-badge.form-origin-one::after {
  border-radius: 5px 5px 2px 2px;
}

.level-badge.form-origin-two {
  --badge-clip: polygon(50% 0, 90% 14%, 100% 26%, 94% 75%, 50% 100%, 6% 75%, 0 26%, 10% 14%);
  width: 31px;
  min-width: 31px;
  height: 35px;
  flex-basis: 31px;
}

.level-badge.form-core {
  --badge-clip: polygon(18% 0, 82% 0, 96% 14%, 96% 72%, 50% 100%, 4% 72%, 4% 14%);
}

.level-badge.form-forged {
  --badge-clip: polygon(14% 0, 86% 0, 100% 16%, 94% 73%, 50% 100%, 6% 73%, 0 16%);
}

.level-badge.form-forged::after {
  inset: 5px 6px 7px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rank-hi) 24%, transparent), inset 0 -5px 8px rgba(0, 0, 0, 0.38);
}

.level-badge.form-vanguard {
  --badge-clip: polygon(32% 0, 50% 10%, 68% 0, 91% 8%, 100% 20%, 94% 73%, 50% 100%, 6% 73%, 0 20%, 9% 8%);
}

.level-badge.form-vanguard .level-badge-topcap,
.level-badge.form-ascendant .level-badge-topcap,
.level-badge.form-paragon .level-badge-topcap,
.level-badge.form-mythic .level-badge-topcap,
.level-badge.form-sovereign .level-badge-topcap,
.level-badge.form-immortal .level-badge-topcap,
.level-badge.form-final-form .level-badge-topcap {
  opacity: 0.82;
}

.level-badge.form-ascendant,
.level-badge.form-paragon {
  --badge-clip: polygon(29% 0, 50% 11%, 71% 0, 93% 10%, 100% 22%, 95% 72%, 50% 100%, 5% 72%, 0 22%, 7% 10%);
}

.level-badge.form-ascendant .level-badge-corner,
.level-badge.form-paragon .level-badge-corner,
.level-badge.form-mythic .level-badge-corner,
.level-badge.form-sovereign .level-badge-corner,
.level-badge.form-immortal .level-badge-corner,
.level-badge.form-final-form .level-badge-corner {
  opacity: 0.72;
}

.level-badge.form-paragon::after {
  inset: 6px 7px 8px;
  box-shadow: inset 0 0 0 1px var(--rank-hi), inset 0 0 0 3px color-mix(in srgb, var(--rank-low) 72%, transparent);
}

.level-badge.form-mythic {
  --badge-clip: polygon(26% 0, 50% 12%, 74% 0, 96% 11%, 100% 25%, 92% 74%, 50% 100%, 8% 74%, 0 25%, 4% 11%);
}

.level-badge.form-mythic .level-badge-corner {
  width: 9px;
  height: 11px;
  opacity: 0.84;
}

.level-badge.form-sovereign {
  --badge-clip: polygon(23% 0, 50% 13%, 77% 0, 96% 9%, 100% 22%, 94% 75%, 50% 100%, 6% 75%, 0 22%, 4% 9%);
}

.level-badge.form-sovereign .level-badge-corner,
.level-badge.form-immortal .level-badge-corner {
  top: 5px;
  width: 10px;
  height: 13px;
  opacity: 0.94;
}

.level-badge.form-immortal {
  --badge-clip: polygon(20% 0, 50% 14%, 80% 0, 100% 12%, 96% 76%, 50% 100%, 4% 76%, 0 12%);
}

.level-badge.form-immortal::after {
  box-shadow: inset 0 0 0 1px var(--rank-hi), inset 0 0 0 3px var(--rank-low), inset 0 -5px 10px rgba(0, 0, 0, 0.42);
}

.level-badge.form-final-form {
  --badge-clip: polygon(18% 3%, 34% 3%, 50% 14%, 66% 3%, 82% 3%, 100% 16%, 95% 76%, 50% 100%, 5% 76%, 0 16%);
}

.level-badge.form-final-form .level-badge-topcap {
  top: -1px;
  width: 17px;
  height: 9px;
  opacity: 1;
}

.level-badge.form-final-form .level-badge-corner {
  top: 4px;
  width: 11px;
  height: 14px;
  opacity: 1;
}

.level-badge.form-final-form::after {
  inset: 6px 7px 8px;
  box-shadow: inset 0 0 0 1px var(--rank-hi), inset 0 0 0 3px var(--rank-low), 0 0 8px var(--rank-glow);
}

.level-up-topcap,
.level-up-corner {
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(145deg, var(--rank-hi), var(--rank-mid) 55%, var(--rank-low));
  filter: drop-shadow(0 0 9px var(--rank-glow));
}

.level-up-topcap {
  top: 23px;
  left: 50%;
  width: 54px;
  height: 27px;
  clip-path: polygon(50% 0, 100% 72%, 78% 100%, 22% 100%, 0 72%);
  transform: translateX(-50%);
}

.level-up-corner {
  top: 58px;
  width: 31px;
  height: 43px;
}

.level-up-corner-left {
  left: 34px;
  clip-path: polygon(0 0, 100% 15%, 56% 100%, 8% 70%);
}

.level-up-corner-right {
  right: 34px;
  clip-path: polygon(100% 0, 0 15%, 44% 100%, 92% 70%);
}

.level-up-emblem .level-up-crest {
  width: 146px;
  height: 170px;
  border-radius: 0;
  clip-path: polygon(30% 0, 50% 10%, 70% 0, 94% 11%, 100% 23%, 94% 73%, 50% 100%, 6% 73%, 0 23%, 6% 11%);
}

.level-up-emblem .level-up-crest::before,
.level-up-emblem .level-up-crest::after {
  border-radius: 0;
  clip-path: inherit;
}

.level-up-emblem.form-origin-one .level-up-crest {
  width: 128px;
  height: 142px;
  border-radius: 0;
  clip-path: polygon(14% 0, 86% 0, 100% 14%, 100% 75%, 50% 100%, 0 75%, 0 14%);
}

.level-up-emblem.form-origin-one .level-up-crest::before,
.level-up-emblem.form-origin-one .level-up-crest::after {
  border-radius: 0;
  clip-path: inherit;
}

.level-up-emblem.form-origin-two .level-up-crest {
  width: 132px;
  height: 150px;
  clip-path: polygon(50% 0, 90% 14%, 100% 26%, 94% 75%, 50% 100%, 6% 75%, 0 26%, 10% 14%);
}

.level-up-emblem:is(.form-vanguard, .form-ascendant, .form-paragon, .form-mythic, .form-sovereign, .form-immortal, .form-final-form) .level-up-topcap {
  opacity: 0.86;
}

.level-up-emblem:is(.form-ascendant, .form-paragon, .form-mythic, .form-sovereign, .form-immortal, .form-final-form) .level-up-corner {
  opacity: 0.76;
}

.level-up-emblem:is(.form-sovereign, .form-immortal, .form-final-form) .level-up-corner {
  opacity: 1;
  transform: scale(1.08);
}

.level-up-emblem.form-final-form .level-up-topcap {
  top: 16px;
  width: 66px;
  height: 33px;
  opacity: 1;
}

.level-up-emblem.form-final-form .level-up-corner {
  top: 50px;
  opacity: 1;
  transform: scale(1.16);
}

/* Image rank badges: restored 11 original level ranges */
.level-badge {
  --rank-level-color: #fff7ef;
  position: relative;
  display: inline-grid;
  width: 38px;
  min-width: 38px;
  height: 42px;
  flex: 0 0 38px;
  place-items: center;
  overflow: visible;
  isolation: isolate;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 5px var(--rank-glow));
}

.level-badge:is(.iron, .bronze, .silver, .gold, .red-gold, .platinum, .diamond, .black-diamond, .crimson, .crown, .champion) {
  width: 38px;
  min-width: 38px;
  height: 42px;
  flex-basis: 38px;
  overflow: visible;
  clip-path: none;
  transform: none;
}

.level-badge::before,
.level-badge::after {
  content: none;
  display: none;
}

.level-badge-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.level-badge-number {
  position: absolute;
  z-index: 2;
  top: 48%;
  left: 50%;
  padding: 0;
  color: var(--rank-level-color);
  font-size: 11px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.96), 0 0 6px rgba(0, 0, 0, 0.62);
  transform: translate(-50%, -50%);
}

.level-badge.iron,
.level-up-stage.iron,
.level-up-emblem.iron {
  --rank-hi: #f0b17d;
  --rank-glow: rgba(187, 94, 42, 0.38);
  --rank-level-color: #fff1e4;
}

.level-badge.bronze,
.level-up-stage.bronze,
.level-up-emblem.bronze {
  --rank-hi: #f7fbff;
  --rank-glow: rgba(218, 230, 244, 0.34);
  --rank-level-color: #202936;
}

.level-badge.silver,
.level-up-stage.silver,
.level-up-emblem.silver {
  --rank-hi: #ffd1cc;
  --rank-glow: rgba(218, 104, 103, 0.4);
  --rank-level-color: #fff7f5;
}

.level-badge.gold,
.level-up-stage.gold,
.level-up-emblem.gold {
  --rank-hi: #ffffff;
  --rank-glow: rgba(218, 230, 244, 0.38);
  --rank-level-color: #1d2734;
}

.level-badge.red-gold,
.level-up-stage.red-gold,
.level-up-emblem.red-gold {
  --rank-hi: #fff0a1;
  --rank-glow: rgba(255, 191, 47, 0.44);
  --rank-level-color: #442600;
}

.level-badge.platinum,
.level-up-stage.platinum,
.level-up-emblem.platinum {
  --rank-hi: #e9fbff;
  --rank-glow: rgba(84, 184, 255, 0.46);
  --rank-level-color: #07497b;
}

.level-badge.diamond,
.level-up-stage.diamond,
.level-up-emblem.diamond {
  --rank-hi: #fff4a6;
  --rank-glow: rgba(55, 156, 255, 0.5);
  --rank-level-color: #ffffff;
}

.level-badge.black-diamond,
.level-up-stage.black-diamond,
.level-up-emblem.black-diamond {
  --rank-hi: #fff1a6;
  --rank-glow: rgba(156, 91, 255, 0.52);
  --rank-level-color: #ffffff;
}

.level-badge.crimson,
.level-up-stage.crimson,
.level-up-emblem.crimson {
  --rank-hi: #fff0a2;
  --rank-glow: rgba(255, 55, 70, 0.52);
  --rank-level-color: #ffffff;
}

.level-badge.crown,
.level-up-stage.crown,
.level-up-emblem.crown {
  --rank-hi: #ffe775;
  --rank-glow: rgba(255, 194, 42, 0.54);
  --rank-level-color: #ffffff;
}

.level-badge.champion,
.level-up-stage.champion,
.level-up-emblem.champion {
  --rank-hi: #fff1a6;
  --rank-glow: rgba(255, 205, 63, 0.62);
  --rank-level-color: #ffffff;
}

[data-screen="menu"] .user-badge .level-badge {
  width: 48px;
  min-width: 48px;
  height: 54px;
  flex-basis: 48px;
}

[data-screen="menu"] .user-badge .level-badge-number {
  font-size: 15px;
}

[data-screen="board"] .board-author .level-badge {
  width: 36px;
  min-width: 36px;
  height: 40px;
  flex-basis: 36px;
}

[data-screen="board"] .board-author .level-badge-number {
  font-size: 11px;
}

.level-up-crest,
.level-up-emblem .level-up-crest {
  position: relative;
  display: grid;
  width: 176px;
  height: 196px;
  place-content: center;
  overflow: visible;
  isolation: isolate;
  border-radius: 0;
  background: transparent;
  clip-path: none;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.52)) drop-shadow(0 0 18px var(--rank-glow));
}

.level-up-crest::before,
.level-up-crest::after,
.level-up-emblem .level-up-crest::before,
.level-up-emblem .level-up-crest::after {
  content: none;
  display: none;
}

.level-up-badge-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.level-up-rank,
.level-up-emblem small,
.level-up-emblem strong {
  top: -10px;
  z-index: 3;
  line-height: 1;
}

.level-up-rank {
  margin-bottom: 4px;
  color: var(--rank-hi);
  font-size: 10px;
}

.level-up-emblem small {
  color: rgba(255, 255, 255, 0.72);
}

.level-up-emblem strong {
  margin-top: 1px;
  color: var(--rank-level-color);
  font-size: 56px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.98), 0 0 18px rgba(0, 0, 0, 0.52);
}

.level-up-crest-mark {
  display: none;
}

.level-up-sheen {
  z-index: 4;
  pointer-events: none;
}

.level-badge.champion .level-badge-number,
.level-up-emblem.champion strong {
  color: transparent;
  background: linear-gradient(90deg, #ffffff 0%, #63ecff 18%, #9d7cff 38%, #ff6ca8 58%, #ffe46b 78%, #ffffff 100%);
  background-size: 260% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 5px rgba(132, 215, 255, 0.72));
  text-shadow: none;
  animation: champion-level-shimmer 1.05s linear infinite;
}

@keyframes champion-level-shimmer {
  from { background-position: 130% 50%; }
  to { background-position: -130% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .level-badge.champion .level-badge-number,
  .level-up-emblem.champion strong {
    animation: none;
    background-position: 50% 50%;
  }
}

/* Unified level numerals and denser community cards */
.level-badge:not(.champion) .level-badge-number,
.level-up-emblem:not(.champion) strong {
  color: #ffffff;
  text-shadow:
    0 1px 1px #000000,
    0 0 3px #000000,
    0 2px 5px rgba(0, 0, 0, 0.96);
}

[data-screen="board"] > .screen-header {
  min-height: 48px;
  margin-bottom: 10px;
}

[data-screen="board"] .board-intro {
  margin: 12px 2px 8px;
}

[data-screen="board"] .board-form {
  gap: 8px;
  padding: 10px;
}

[data-screen="board"] .board-author,
[data-screen="board"] .board-comment .board-author {
  gap: 7px;
  border-color: transparent;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

[data-screen="board"] .board-workout-proof {
  gap: 6px;
  padding: 8px 10px;
}

[data-screen="board"] .board-compose-field textarea {
  min-height: 82px;
  padding: 10px 11px 26px;
  line-height: 1.42;
}

[data-screen="board"] .board-compose-field > .board-char-count {
  right: 9px;
  bottom: 7px;
}

[data-screen="board"] .board-compose-actions {
  gap: 8px;
}

[data-screen="board"] .board-compose-actions .confirm-button,
[data-screen="board"] .board-tabs button,
[data-screen="board"] .board-comment-form input,
[data-screen="board"] .board-comment-form button,
[data-screen="board"] .board-comment .board-comment-report {
  min-height: 44px;
}

[data-screen="board"] .board-tabs {
  margin: 11px 0 7px;
  padding: 3px;
}

[data-screen="board"] .board-list {
  gap: 7px;
}

[data-screen="board"] .board-post {
  padding: 10px 11px;
}

[data-screen="board"] .board-post .board-post-content {
  margin-top: 9px;
  line-height: 1.45;
}

[data-screen="board"] .board-actions {
  min-height: 44px;
  margin-top: 9px;
  padding: 2px 0;
}

[data-screen="board"] .board-action-button {
  min-width: 48px;
  min-height: 44px;
  padding-inline: 8px;
}

[data-screen="board"] .board-comments {
  margin-top: 7px;
}

[data-screen="board"] .board-comment {
  gap: 7px;
  padding: 8px;
}

[data-screen="board"] .board-comment-body {
  gap: 3px;
  padding-top: 3px;
}

[data-screen="board"] .board-comment-form {
  padding: 7px 8px;
}

[data-screen="board"] .board-post-skeleton {
  min-height: 116px;
}

[data-screen="board"] .board-empty-state {
  min-height: 138px;
}

body:has([data-screen="board"].is-active) .bottom-nav button {
  min-height: 48px;
}

/* 2026-08 control pass: tactile navigation and workout actions */
[data-screen="home"] .menu-button {
  border-color: rgba(117, 166, 255, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 48%),
    linear-gradient(145deg, #202938, #111720 72%);
  color: #dce9ff;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(46, 124, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -2px 0 rgba(0, 0, 0, 0.32);
}

[data-screen="home"] .menu-button:hover {
  border-color: rgba(117, 166, 255, 0.62);
  color: #ffffff;
}

.calendar-sos-button {
  min-width: 52px;
  min-height: 46px;
  border: 1px solid rgba(240, 91, 100, 0.46);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 48%),
    linear-gradient(145deg, rgba(91, 30, 40, 0.72), rgba(28, 13, 18, 0.95));
  color: #ff9fa7;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28);
  font-size: 14px;
  font-weight: 900;
  transition: transform 160ms var(--sc-ease), border-color 160ms ease, color 160ms ease;
}

.calendar-sos-button:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.38);
}

#menuSosSection {
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 72px);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

#menuSosSection.is-arrival-highlighted {
  border-color: rgba(244, 183, 93, 0.62);
  box-shadow: 0 0 0 1px rgba(244, 183, 93, 0.15), 0 12px 34px rgba(0, 0, 0, 0.34);
}

.record-actions .action-row {
  gap: 10px;
}

.record-actions .secondary-button,
.record-actions .count-button,
.record-actions .confirm-button {
  border-radius: 12px;
  font-size: 16px;
  font-weight: 850;
  box-shadow:
    0 9px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  transition: transform 150ms var(--sc-ease), border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.record-actions .secondary-button {
  border-color: rgba(156, 174, 201, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 50%),
    linear-gradient(145deg, #1b222d, #11161e);
  color: #d7deea;
}

.record-actions .count-button {
  border-color: rgba(112, 167, 255, 0.62);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 48%),
    linear-gradient(145deg, #3d88ff, #2269dc 72%);
  box-shadow:
    0 10px 24px rgba(26, 94, 209, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -3px 0 rgba(9, 49, 116, 0.42);
}

.record-actions .confirm-button:not(.is-target-complete):not(:disabled) {
  border-color: rgba(156, 174, 201, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 50%),
    linear-gradient(145deg, #1a202a, #10151c);
  color: #bdc6d4;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 0 rgba(0, 0, 0, 0.28);
}

.record-actions :is(.secondary-button, .count-button, .confirm-button):active {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.36);
}

/* Record actions are tactile controls: set completion is immediate, save is a final commit. */
.record-actions .record-action-button {
  position: relative;
  isolation: isolate;
  overflow: visible;
  min-height: 58px;
  padding: 0;
  border-radius: 13px;
  transform-origin: center bottom;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.record-action-face {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border-radius: inherit;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

.record-action-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
}

.record-action-glow {
  position: absolute;
  z-index: 0;
  inset: 7px 12%;
  border-radius: 999px;
  background: rgba(76, 145, 255, 0.48);
  filter: blur(16px);
  opacity: 0;
  pointer-events: none;
}

.record-action-sheen {
  position: absolute;
  z-index: 3;
  top: 1px;
  bottom: 4px;
  left: 38%;
  width: 18%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: skewX(-18deg) translateX(-520%);
  opacity: 0;
  pointer-events: none;
}

.record-actions .record-set-button {
  border-color: rgba(116, 173, 255, 0.74);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 42%),
    linear-gradient(150deg, #438eff 0%, #2b73e8 56%, #1c59bf 100%);
  box-shadow:
    0 11px 23px rgba(24, 88, 190, 0.3),
    0 4px 0 #123d87,
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 0 rgba(4, 36, 91, 0.34);
}

.record-actions .record-set-button:not(:disabled):hover {
  filter: brightness(1.055);
  box-shadow:
    0 13px 27px rgba(24, 88, 190, 0.36),
    0 4px 0 #123d87,
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -2px 0 rgba(4, 36, 91, 0.34);
}

.record-actions .record-save-button {
  border-color: rgba(149, 164, 188, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 48%),
    linear-gradient(150deg, #202731, #131922 72%);
  color: #c2cad7;
  box-shadow:
    0 9px 18px rgba(0, 0, 0, 0.28),
    0 3px 0 #090d12,
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

.record-actions .record-save-button.is-target-complete {
  border-color: rgba(116, 173, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 43%),
    linear-gradient(150deg, #3e88fb, #2467d7 70%, #194ca3);
  color: #fff;
  box-shadow:
    0 12px 28px rgba(25, 91, 199, 0.34),
    0 4px 0 #103976,
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(3, 31, 79, 0.36);
}

.record-actions .record-action-button:disabled {
  border-color: rgba(255, 255, 255, 0.07);
  background: linear-gradient(150deg, #1a1f27, #11161d);
  color: #68717f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  opacity: 1;
}

.record-actions .record-action-button:focus-visible {
  outline: 3px solid rgba(79, 143, 255, 0.34);
  outline-offset: 3px;
}

.record-action-burst {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.record-action-burst i {
  position: absolute;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: #dceaff;
  box-shadow: 0 0 7px rgba(104, 166, 255, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .record-action-sheen,
  .record-action-burst { display: none; }
}

[data-screen="board"] .board-tabs {
  border-color: rgba(133, 156, 192, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    #0e131a;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.48), 0 8px 18px rgba(0, 0, 0, 0.2);
}

[data-screen="board"] .board-tabs button {
  border: 1px solid transparent;
  background: transparent;
  color: #8791a2;
  box-shadow: none;
}

[data-screen="board"] .board-tabs button.is-active {
  border-color: rgba(111, 163, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 52%),
    linear-gradient(145deg, rgba(45, 103, 196, 0.56), rgba(27, 55, 101, 0.62));
  color: #e2edff;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.24);
}

.workout-delete-dialog {
  width: min(100%, 360px);
  gap: 10px;
}

.workout-delete-dialog > p:not(.eyebrow) {
  color: var(--sc-text-secondary);
  font-size: 14px;
  line-height: 1.55;
}
.menu-language-row {
  min-height: 112px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  padding: 14px 16px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 52%),
    rgba(12, 17, 25, 0.38);
}

.menu-language-row .language-row-icon {
  border-color: rgba(92, 150, 255, 0.32);
  background: linear-gradient(145deg, rgba(42, 92, 174, 0.34), rgba(14, 25, 43, 0.72));
  color: #86afff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.2);
}

.language-segmented {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(139, 154, 178, 0.18);
  border-radius: 12px;
  background: rgba(4, 7, 12, 0.76);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.035);
}

[data-screen="menu"] .language-segmented button {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text-secondary, #a6adba);
  background: rgba(255, 255, 255, 0.025);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 140ms ease;
}

[data-screen="menu"] .language-segmented .language-code {
  display: grid;
  width: 25px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(151, 166, 190, 0.2);
  border-radius: 6px;
  color: #7f8a9c;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

[data-screen="menu"] .language-segmented button.is-active {
  color: #f5f7fb;
  border-color: rgba(93, 156, 255, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 56%),
    linear-gradient(145deg, rgba(46, 124, 255, 0.5), rgba(26, 70, 144, 0.5));
  box-shadow: 0 7px 16px rgba(17, 65, 145, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

[data-screen="menu"] .language-segmented button.is-active .language-code {
  border-color: rgba(194, 217, 255, 0.42);
  background: rgba(3, 11, 25, 0.28);
  color: #e8f1ff;
}

[data-screen="menu"] .language-segmented button:active { transform: scale(0.96); }

[data-screen="menu"] .support-menu #hapticToggleButton {
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}

@media (max-width: 370px) {
  [data-screen="menu"] .language-segmented button { gap: 6px; padding-inline: 8px; }
  .rest-timer { grid-template-columns: minmax(0, 1fr) 118px; gap: 8px; }
  .rest-duration-stepper { width: 118px; }
  .rest-duration-stepper output { padding-left: 7px; font-size: 12px; }
}