:root {
  --ink: #172033;
  --muted: #6b7280;
  --paper: #f4f7f3;
  --card: #ffffff;
  --line: #e5e9e3;
  --navy: #111827;
  --lime: #c9f31d;
  --lime-dark: #89a900;
  --monthly-fit: #0e9a9b;
  --monthly-start: #16444c;
  --monthly-end: #0e9a9b;
  --monthly-rgb: 14, 154, 155;
  --monthly-contrast: #ffffff;
  --radius: 24px;
  --shadow: 0 18px 45px rgba(23, 32, 51, .08);
}

* { box-sizing: border-box; }
html { min-height: 100%; color-scheme: light; }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }
h1, h2, p { margin-top: 0; }
h1 {
  margin-bottom: 0;
  font-size: clamp(1.85rem, 4vw, 2.65rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.muted { color: var(--muted); }
.brand-fit { color: var(--monthly-fit); }
.eyebrow {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow .brand-fit { text-transform: none; }

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 56px);
  background:
    radial-gradient(circle at 15% 20%, rgba(201, 243, 29, .22), transparent 28rem),
    radial-gradient(circle at 90% 80%, rgba(var(--monthly-rgb), .14), transparent 30rem),
    var(--paper);
}
.auth-shell {
  width: min(1180px, 100%);
  min-height: min(760px, calc(100vh - 48px));
  display: grid;
  grid-template-columns: minmax(390px, .84fr) minmax(0, 1.16fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 34px;
  background: white;
  box-shadow: var(--shadow);
}
.auth-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 70px);
  background: rgba(255, 255, 255, .98);
}
.auth-toolbar {
  position: absolute;
  inset: 28px 30px auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.auth-logo {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  filter: drop-shadow(0 8px 16px rgba(17, 24, 39, .16));
}
.auth-logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.language-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.language-form select {
  width: auto;
  min-width: 112px;
  padding: 8px 30px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfcfa;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 750;
  text-transform: none;
}
.auth-copy { margin-top: 68px; }
.auth-copy h1 { max-width: 410px; }
.auth-copy > p:last-child {
  max-width: 430px;
  margin: 13px 0 30px;
  color: var(--muted);
  line-height: 1.55;
}
.auth-copy + .auth-form { margin-top: 30px; }
.auth-copy + .alert { margin-top: 24px; }
.alert + .auth-form { margin-top: 0; }
.auth-form { display: grid; gap: 16px; }
.auth-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 760;
}
.auth-form input,
.auth-form select {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: none;
  background: #fbfcfa;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.auth-form input:focus,
.auth-form select:focus,
.language-form select:focus {
  border-color: var(--monthly-fit);
  background: white;
  box-shadow: 0 0 0 3px rgba(var(--monthly-rgb), .15);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border: 0;
  border-radius: 13px;
  text-decoration: none;
  font-weight: 850;
}
.button.primary { background: var(--navy); color: white; }
.button.primary:hover { background: #24314a; }
.button.accent { background: var(--lime); color: #172033; box-shadow: 0 10px 24px rgba(201, 243, 29, .22); }
.button.accent:hover { background: #d8ff36; }
.button.ghost { border: 1px solid var(--line); background: white; color: var(--ink); }
.button.ghost-invert { border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .08); color: white; }
.button.ghost-invert:hover { background: rgba(255, 255, 255, .16); }
.button.danger { background: #fff0ed; color: #b83220; }
.button.wide { width: 100%; margin-top: 6px; }
.auth-switch,
.login-links {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
  text-align: center;
}
.auth-switch a,
.login-links a { color: var(--ink); font-weight: 800; text-decoration-thickness: 1px; }
.login-links { display: flex; align-items: center; justify-content: center; gap: 8px; }
.alert {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 13px;
  font-size: .84rem;
  line-height: 1.45;
  text-align: center;
}
.alert.error { background: #fff0ed; color: #b83220; }
.alert.success { background: #eaf8ef; color: #19733a; }
.auth-result {
  max-width: 440px;
  margin: 70px auto 0;
  text-align: center;
}
.auth-result p:not(.eyebrow) { margin: 15px 0 26px; color: var(--muted); line-height: 1.65; }
.result-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: rgba(var(--monthly-rgb), .13);
  color: var(--monthly-fit);
  font-size: 1.6rem;
  font-weight: 950;
}

.auth-visual {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: #0eb3a8;
}
.auth-visual::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 22%;
  background: linear-gradient(90deg, rgba(17, 24, 39, .3), transparent);
  pointer-events: none;
}
.auth-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.visual-brand {
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: 28px;
  display: grid;
  gap: 4px;
  max-width: 340px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 18px;
  background: rgba(17, 24, 39, .72);
  color: white;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
}
.visual-brand strong { font-size: 1.1rem; }
.visual-brand > span { color: rgba(255, 255, 255, .78); font-size: .78rem; line-height: 1.4; }

.environment-corner {
  position: fixed;
  z-index: 300;
  top: 0;
  left: 0;
  width: 76px;
  height: 76px;
  overflow: hidden;
  pointer-events: none;
}
.environment-corner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e19a18;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  filter: drop-shadow(0 5px 8px rgba(17, 24, 39, .2));
}
.environment-corner span {
  position: absolute;
  top: 14px;
  left: 5px;
  width: 56px;
  color: white;
  font-size: .65rem;
  font-weight: 950;
  letter-spacing: .09em;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  transform: rotate(-45deg);
}
.environment-corner-dev::before { background: #b64fc8; }
.environment-corner-test::before { background: #e19a18; }

.dashboard-placeholder {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 20%, rgba(201, 243, 29, .22), transparent 28rem),
    radial-gradient(circle at 90% 80%, rgba(var(--monthly-rgb), .16), transparent 30rem),
    var(--paper);
}
.placeholder-card {
  width: min(100%, 560px);
  padding: clamp(30px, 6vw, 54px);
  border: 1px solid white;
  border-radius: 30px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow);
  text-align: center;
}
.brand-avatar {
  width: 76px;
  height: 76px;
  display: block;
  margin: 0 auto 20px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 8px 16px rgba(17, 24, 39, .16));
}
.brand-heading { margin-bottom: 7px; font-size: 1.15rem; font-weight: 900; }
.placeholder-card h1 { margin-bottom: 18px; }
.placeholder-card .button { margin-top: 14px; }

.dashboard-content { display: grid; gap: 18px; }
.dashboard-quest {
  position: relative;
  overflow: hidden;
  min-height: 265px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 5vw, 52px);
  padding: clamp(26px, 5vw, 48px);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 30px;
  background: var(--navy);
  color: white;
  box-shadow: var(--shadow);
}
.dashboard-quest::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(17, 24, 39, .94) 0%, rgba(17, 24, 39, .78) 38%, rgba(17, 24, 39, .18) 68%, rgba(17, 24, 39, .62) 100%),
    radial-gradient(circle at 12% 18%, rgba(201, 243, 29, .22), transparent 20rem);
  pointer-events: none;
}
.dashboard-quest-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .76;
  pointer-events: none;
}
.dashboard-quest-content,
.dashboard-xp-orb {
  position: relative;
  z-index: 2;
}
.dashboard-quest .eyebrow { color: var(--lime); }
.dashboard-quest h1 {
  max-width: 710px;
  margin-bottom: 12px;
  font-size: clamp(2rem, 5vw, 3.45rem);
}
.dashboard-quest-details {
  max-width: 620px;
  margin: 0;
  color: #e5e9e3;
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  line-height: 1.6;
}
.dashboard-quest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.dashboard-quest-actions form {
  display: flex;
  margin: 0;
}
.dashboard-quest-actions .button {
  min-width: 154px;
  justify-content: center;
}
.dashboard-xp-orb {
  width: clamp(132px, 13vw, 150px);
  height: clamp(132px, 13vw, 150px);
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: 0;
  place-items: center;
  align-self: center;
  justify-self: center;
  border: 2px solid var(--lime);
  border-radius: 50%;
  background: rgba(var(--monthly-rgb), .7);
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}
.dashboard-xp-orb strong {
  display: block;
  color: var(--monthly-contrast);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: .86;
  letter-spacing: -.06em;
  transform: none;
}
.dashboard-xp-orb span {
  display: block;
  margin-top: 0;
  color: var(--monthly-contrast);
  font-size: .72rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  transform: none;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 18px;
}
.dashboard-grid .dashboard-actions-card { grid-column: 1 / -1; }
.dashboard-grid .dashboard-spotlight-card { grid-column: 1 / -1; }
.dashboard-card,
.dashboard-stat-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 14px 38px rgba(23, 32, 51, .06);
}
.dashboard-card h2 {
  margin-bottom: 8px;
  font-size: 1.35rem;
  letter-spacing: -.035em;
}
.dashboard-card .button { margin-top: 14px; }
.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.dashboard-card-header .eyebrow { margin-bottom: 0; }
.dashboard-card-header .button { margin-top: 0; }
.dashboard-soft-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f4f8ef;
  color: var(--monthly-fit);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(var(--monthly-rgb), .12);
}
.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.dashboard-actions .button {
  min-height: 38px;
  margin-top: 0;
  padding: 8px 12px;
  font-size: .76rem;
}
.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.dashboard-stat-card {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dashboard-stat-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #f4f8ef;
  color: var(--monthly-fit);
  font-size: 1.25rem;
  box-shadow: inset 0 0 0 1px rgba(var(--monthly-rgb), .14);
}
.dashboard-stat-label {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dashboard-stat-card strong {
  display: block;
  margin: 13px 0 7px;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  letter-spacing: -.05em;
}
.dashboard-spotlight-card {
  min-height: 260px;
}
.dashboard-record-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 168px;
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 12%, rgba(201, 243, 29, .38), transparent 11rem),
    linear-gradient(135deg, var(--navy), var(--monthly-start));
  color: white;
  box-shadow: 0 18px 42px rgba(23, 32, 51, .14);
}
.dashboard-record-hero > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, .12);
  font-size: 1.7rem;
}
.dashboard-record-hero strong {
  display: block;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -.04em;
}
.dashboard-record-hero p {
  margin: 6px 0;
  color: rgba(255, 255, 255, .86);
  font-weight: 780;
}
.dashboard-record-hero small {
  color: rgba(255, 255, 255, .66);
  font-size: .74rem;
  font-weight: 760;
}
.dashboard-xp-list,
.dashboard-record-list { display: grid; gap: 10px; }
.dashboard-xp-row,
.dashboard-record-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfcfa;
}
.dashboard-row-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: white;
  box-shadow: inset 0 0 0 1px var(--line);
}
.dashboard-xp-row strong { color: #19733a; }
.dashboard-record-row strong { color: #7a4b12; }
.dashboard-xp-row span,
.dashboard-record-row span { overflow-wrap: anywhere; }
.dashboard-xp-row small,
.dashboard-record-row small { color: var(--muted); font-size: .72rem; }

.admin-page {
  min-height: 100vh;
  padding-left: 230px;
  background:
    radial-gradient(circle at 16% 7%, rgba(201, 243, 29, .13), transparent 26rem),
    radial-gradient(circle at 96% 16%, rgba(var(--monthly-rgb), .11), transparent 28rem),
    var(--paper);
}
.dashboard-page {
  padding-left: 230px;
}
.dashboard-sidebar {
  position: fixed;
  z-index: 40;
  inset: 0 auto 0 0;
  width: 230px;
  display: flex;
  flex-direction: column;
  padding: 24px 18px;
  background: linear-gradient(145deg, var(--monthly-start), var(--monthly-end));
  color: white;
}
.dashboard-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 8px 34px;
  color: white;
  font-size: 1.08rem;
  font-weight: 900;
  text-decoration: none;
}
.dashboard-sidebar-brand img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.dashboard-nav-list {
  display: grid;
  gap: 6px;
}
.dashboard-nav-button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: rgba(255, 255, 255, .68);
  font-size: .86rem;
  font-weight: 780;
  text-align: left;
  text-decoration: none;
}
.dashboard-nav-button:hover,
.dashboard-nav-button.active {
  background: rgba(255, 255, 255, .1);
  color: white;
}
.dashboard-nav-button.active span {
  color: var(--lime);
}
.dashboard-nav-button.dashboard-nav-admin {
  margin-top: 4px;
  background: rgba(201, 243, 29, .12);
  color: #f7ffd0;
  box-shadow: inset 0 0 0 1px rgba(201, 243, 29, .2);
}
.dashboard-nav-button.dashboard-nav-admin:hover {
  background: rgba(201, 243, 29, .2);
  color: white;
}
.dashboard-nav-button.dashboard-nav-admin span {
  color: var(--lime);
}
.dashboard-nav-button span {
  width: 22px;
  flex: 0 0 22px;
  color: rgba(255, 255, 255, .78);
  font-size: 1rem;
  text-align: center;
}
.dashboard-nav-button.muted {
  cursor: pointer;
  color: rgba(255, 255, 255, .64);
}
.dashboard-sidebar-footer {
  display: grid;
  gap: 8px;
  margin-top: auto;
}
.dashboard-sidebar-footer form { margin: 0; }
.dashboard-sidebar-footer p {
  margin: 8px 13px 0;
  color: rgba(255, 255, 255, .62);
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .035em;
}
.dashboard-mobile-nav {
  display: none;
}
.dashboard-mobile-menu {
  position: relative;
  display: none;
}
.app-global-mobile-menu {
  position: fixed;
  z-index: 90;
  top: 15px;
  right: 16px;
}
.dashboard-mobile-menu summary {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  list-style: none;
  cursor: pointer;
}
.dashboard-mobile-menu summary::-webkit-details-marker { display: none; }
.dashboard-mobile-menu summary span {
  width: 18px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: var(--ink);
}
.dashboard-mobile-menu[open] summary {
  border-color: rgba(var(--monthly-rgb), .35);
  box-shadow: 0 0 0 3px rgba(var(--monthly-rgb), .12);
}
.dashboard-mobile-menu-panel {
  position: absolute;
  z-index: 90;
  top: calc(100% + 10px);
  right: 0;
  width: min(280px, calc(100vw - 24px));
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 20px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 22px 58px rgba(23, 32, 51, .2);
}
.dashboard-mobile-menu-panel a,
.dashboard-mobile-menu-panel button {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 9px 11px;
  border: 0;
  border-radius: 13px;
  background: #f8faf7;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 820;
  text-align: left;
  text-decoration: none;
}
.dashboard-mobile-menu-panel a:hover,
.dashboard-mobile-menu-panel button:hover {
  background: rgba(var(--monthly-rgb), .1);
}
.dashboard-mobile-menu-panel p {
  margin: 8px 4px 2px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.dashboard-mobile-menu-panel .dashboard-mobile-admin-link {
  background: rgba(var(--monthly-rgb), .14);
  color: #0b6162;
  box-shadow: inset 0 0 0 1px rgba(var(--monthly-rgb), .2);
}
.dashboard-mobile-menu-panel form { margin: 0; }
.dashboard-mobile-menu-panel button {
  color: #b83220;
  background: #fff0ed;
  cursor: pointer;
}
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 0;
  padding: 32px clamp(22px, 4vw, 58px) 0;
  background: transparent;
}
.admin-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-size: 1.08rem;
  font-weight: 900;
}
.admin-brand img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 7px 14px rgba(17, 24, 39, .13));
}
.admin-topbar-actions { display: flex; align-items: end; gap: 12px; }
.dashboard-page .admin-topbar {
  display: none;
}
.calendar-page .admin-topbar {
  display: none;
}
.admin-content { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 72px; }
.admin-heading { margin-bottom: 28px; }
.admin-heading > p:last-child { max-width: 650px; margin: 12px 0 0; color: var(--muted); line-height: 1.55; }
.admin-heading-with-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.admin-heading-with-action > div p:last-child {
  max-width: 650px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.admin-heading-with-action > .button {
  flex: 0 0 auto;
  margin-top: 4px;
}
.admin-grid { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 20px; align-items: start; }
.admin-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: white;
  box-shadow: 0 14px 38px rgba(23, 32, 51, .06);
}
.admin-card h2 { margin-bottom: 22px; font-size: 1.2rem; letter-spacing: -.025em; }
.admin-form { display: grid; gap: 15px; }
.admin-form label, .revoke-panel label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 760;
}
.admin-form input,
.admin-form select,
.admin-form textarea,
.revoke-panel textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfa;
  color: var(--ink);
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 0 0 230px;
  padding: 18px 12px 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
}
.app-footer strong { color: var(--ink); }
.app-footer-mark { color: var(--monthly-fit); font-size: .9rem; }
.app-footer strong,
.app-footer > span:not(.app-footer-mark):not(.app-footer-text) {
  display: none;
}
.app-footer-text {
  display: inline-flex;
}
.admin-form textarea,
.revoke-panel textarea { min-height: 88px; resize: vertical; }
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
  outline: none;
  border-color: var(--monthly-fit);
  background: white;
  box-shadow: 0 0 0 3px rgba(var(--monthly-rgb), .14);
}
.checkbox-row {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 10px !important;
}
.checkbox-row input {
  width: 18px;
  height: 18px;
  min-height: auto;
  flex: 0 0 18px;
}
.invitation-reveal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding: 20px 22px;
  border: 1px solid rgba(var(--monthly-rgb), .28);
  border-radius: 20px;
  background: rgba(var(--monthly-rgb), .09);
}
.invitation-reveal code {
  display: block;
  margin: 5px 0 8px;
  color: var(--ink);
  font-size: clamp(1.05rem, 3vw, 1.45rem);
  font-weight: 850;
  letter-spacing: .04em;
}
.invitation-reveal p:last-child { margin: 0; color: var(--muted); font-size: .8rem; }
.invitation-list { display: grid; gap: 12px; }
.invitation-row { padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: #fbfcfa; }
.invitation-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invitation-main > div { display: flex; align-items: center; gap: 9px; }
.invitation-main code { font-size: .85rem; font-weight: 800; }
.invitation-main strong { font-size: .82rem; }
.status-badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 850;
}
.workout-status-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.workout-source-badge {
  text-transform: uppercase;
  letter-spacing: .06em;
}
.workout-source-badge.source-online {
  background: #edf7f1;
  color: #19733a;
}
.workout-source-badge.source-local {
  background: #fff6d8;
  color: #7a4b12;
}
.status-active { background: #e7f7ec; color: #19733a; }
.status-pending_email,
.status-pending_approval { background: #fff7db; color: #936700; }
.status-blocked { background: #fff0ed; color: #b83220; }
.status-rejected { background: #f0f1f3; color: #626a75; }
.status-deleted { background: #1f2937; color: white; }
.status-used { background: #e9f0ff; color: #315ca8; }
.status-expired { background: #f0f1f3; color: #626a75; }
.status-revoked { background: #fff0ed; color: #b83220; }
.status-locked { background: #f0f1f3; color: #626a75; }
.status-claimable { background: #e7f7ec; color: #19733a; }
.status-redeemed { background: #e9f0ff; color: #315ca8; }
.status-inactive { background: #fff7db; color: #936700; }
.invitation-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 14px 0 0; }
.invitation-meta div { min-width: 0; }
.invitation-meta dt { color: var(--muted); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.invitation-meta dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: .76rem; }
.revoke-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.revoke-panel summary { color: #b83220; font-size: .76rem; font-weight: 800; cursor: pointer; }
.revoke-panel form { display: grid; gap: 10px; margin-top: 12px; }
.revoke-panel .button { justify-self: end; min-height: 38px; padding: 8px 13px; font-size: .76rem; }
.empty-state { margin: 0; padding: 28px 16px; color: var(--muted); text-align: center; }
.users-admin-grid { grid-template-columns: minmax(260px, .58fr) minmax(0, 1.42fr); }
.users-admin-side { display: grid; gap: 22px; }
.users-admin-counts,
.users-admin-report {
  display: grid;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.users-admin-counts h3,
.users-admin-report h3 {
  margin: 0 0 4px;
  font-size: .92rem;
}
.users-admin-report p { margin: 0; color: var(--muted); font-size: .82rem; }
.users-list { gap: 14px; }
.user-row { background: white; }
.user-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.user-actions > form { margin: 0; }
.user-actions .button { min-height: 38px; padding: 8px 13px; font-size: .76rem; }
.user-action-panel { min-width: min(100%, 230px); margin-top: 0; padding-top: 0; border-top: 0; }
.user-restricted-note { margin: 14px 0 0; }
.guardian-panel {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(var(--monthly-rgb), .25);
  border-radius: 16px;
  background: rgba(var(--monthly-rgb), .06);
}
.guardian-panel summary { color: var(--ink); }
.guardian-panel-body {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}
.guardian-panel-body form {
  display: grid;
  gap: 10px;
}
.guardian-panel-body form + form {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.guardian-panel-body .button { justify-self: end; }

.workout-page .admin-content { max-width: 1120px; }
.workout-list,
.workout-exercise-list {
  display: grid;
  gap: 14px;
}
.workout-card,
.workout-exercise-card,
.workout-detail-hero,
.guided-current-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 16px 46px rgba(23, 32, 51, .07);
}
.workout-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
}
.workout-card.has-local-results {
  border-color: rgba(245, 158, 11, .45);
  box-shadow: 0 16px 46px rgba(245, 158, 11, .12);
}
.workout-date-chip {
  width: 58px;
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(var(--monthly-rgb), .18), rgba(var(--monthly-rgb), .06)),
    white;
  color: var(--monthly-fit);
  box-shadow: inset 0 0 0 1px rgba(var(--monthly-rgb), .24);
}
.workout-date-chip strong,
.workout-date-chip span {
  display: block;
  line-height: 1;
}
.workout-date-chip strong {
  font-size: 1.35rem;
  font-weight: 950;
  letter-spacing: -.04em;
}
.workout-date-chip span {
  margin-top: 4px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
}
.workout-list .workout-card-main {
  grid-column: 2;
}
.workout-list .active-session-note {
  grid-column: 2 / -1;
}
.workout-card-main,
.workout-detail-hero,
.exercise-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.workout-card h2,
.workout-detail-hero h1,
.workout-exercise-card h2,
.guided-current-card h2 {
  margin: 0;
  letter-spacing: -.035em;
}
.workout-card h2 { font-size: 1.28rem; }
.workout-list .workout-card h2 {
  font-size: 1.12rem;
}
.workout-list-scheduled,
.workout-list .workout-card .muted {
  display: none;
}
.workout-list-meta {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 780;
}
.workout-card .muted,
.workout-detail-hero .muted,
.workout-exercise-card .muted { margin: 8px 0 0; }
.workout-actions,
.workout-detail-actions,
.guided-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.workout-actions {
  position: relative;
  justify-content: flex-end;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.workout-list .workout-actions {
  grid-column: 3;
  grid-row: 1;
}
.workout-list .workout-actions > form,
.workout-list .workout-actions > details:not(.workout-move-panel),
.workout-list .workout-actions > a.button.primary {
  display: none;
}
.workout-list .workout-actions > .workout-move-panel {
  order: 1;
}
.workout-list .workout-actions > a.button.ghost {
  order: 2;
}
.workout-actions form {
  margin: 0;
}
.workout-actions > .button,
.workout-actions form > .button,
.workout-actions .workout-action-panel > summary.button,
.workout-actions .reward-delete-form .button {
  min-height: 46px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 850;
  line-height: 1;
}
.workout-actions .workout-action-panel {
  flex: 0 1 auto;
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.workout-actions .workout-action-panel > summary.button,
.workout-actions .reward-delete-form .button {
  min-width: 104px;
}
.workout-actions .workout-action-panel form {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 6;
  min-width: min(560px, calc(100vw - 48px));
  margin-left: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 48px rgba(23, 32, 51, .14);
}
.workout-detail-actions .workout-action-panel {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
}
.workout-detail-actions .workout-action-panel form {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 8;
  min-width: min(560px, calc(100vw - 48px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 48px rgba(23, 32, 51, .14);
}
.workout-detail-actions > .button,
.workout-detail-actions > form > .button,
.workout-detail-actions .workout-action-panel > summary.button {
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 850;
  line-height: 1;
}
.workout-detail-actions form {
  margin: 0;
}
.workout-detail-modal-content .workout-detail-hero {
  align-items: flex-start;
}
.workout-detail-modal-content .workout-detail-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
}
.workout-detail-admin-actions {
  margin-top: 16px;
}
.workout-detail-admin-actions h2 {
  margin: 0 0 14px;
  font-size: 1rem;
  letter-spacing: .04em;
}
.workout-detail-edit-panel {
  margin: 0 0 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(249, 251, 248, .96);
  box-shadow: 0 16px 42px rgba(23, 32, 51, .07);
}
.workout-detail-edit-panel[hidden] {
  display: none;
}
.workout-detail-edit-panel h3 {
  margin: 0 0 14px;
  font-size: .95rem;
  letter-spacing: .04em;
}
.workout-detail-admin-actions .workout-detail-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  align-items: stretch;
  justify-content: stretch;
  gap: 10px;
}
.workout-detail-admin-actions .workout-action-panel {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
.workout-detail-admin-actions .workout-action-panel > summary.button,
.workout-detail-admin-actions .workout-detail-actions > .button,
.workout-detail-admin-actions .workout-detail-actions > form > .button {
  width: 100%;
}
.workout-detail-admin-actions .workout-detail-actions .workout-action-panel form {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 10;
  min-width: min(560px, calc(100vw - 48px));
}
.workout-actuals-edit-panel {
  display: none;
}
.workout-detail-edit-mode .workout-actuals-edit-panel {
  display: block;
}
.workout-actions .reward-delete-form {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.workout-local-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.workout-local-actions .button {
  min-height: 46px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 850;
  line-height: 1;
}
.workout-local-note {
  border-color: rgba(245, 158, 11, .18);
  background: #fff9e8;
}
.workout-detail-modal[hidden] {
  display: none;
}
.workout-detail-modal {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(16px, 4vw, 34px);
  overflow: auto;
  background: rgba(10, 22, 35, .56);
}
.workout-detail-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 35, .56);
}
.workout-detail-modal-panel {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: white;
  box-shadow: 0 26px 70px rgba(4, 10, 20, .22);
}
.workout-detail-modal-close {
  position: sticky;
  top: 0;
  z-index: 2;
  float: right;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--monthly-start);
  color: var(--monthly-contrast);
  font-size: 1.4rem;
  font-weight: 900;
  cursor: pointer;
}
.workout-detail-modal-content {
  clear: both;
}
.workout-detail-modal-content .admin-content {
  width: auto;
  padding: 0;
}
.workout-detail-modal-content .admin-topbar {
  display: none;
}
.workout-detail-modal-loading {
  padding: 40px;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}
body.modal-open {
  overflow: hidden;
}
.workout-exercise-manager { margin-bottom: 16px; }
.workout-exercise-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 0;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px solid var(--line);
}
.workout-exercise-edit-actions form { margin: 0; }
.workout-exercise-edit-actions .button { padding: 9px 12px; }
.reward-wallet-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 22px;
}
.reward-wallet-summary article {
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 14%, rgba(201, 243, 29, .28), transparent 8rem),
    rgba(255, 255, 255, .74);
  box-shadow: var(--shadow-soft);
}
.reward-wallet-summary span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reward-wallet-summary strong {
  color: var(--navy);
  font-size: clamp(1.85rem, 4vw, 3rem);
  line-height: .95;
}
.reward-list { align-content: start; }
.reward-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
}
.reward-card-cover {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: -20px -20px 0;
  padding: 18px 22px;
  border-radius: 24px 24px 18px 18px;
  background:
    radial-gradient(circle at 20% 18%, rgba(201, 243, 29, .36), transparent 12rem),
    linear-gradient(135deg, var(--navy), var(--monthly-start) 58%, var(--monthly-fit));
}
.reward-card-cover span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: rgba(255, 255, 255, .16);
  color: white;
  font-size: 1.55rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.reward-card-cover button {
  width: calc(100% + 44px);
  height: calc(100% + 36px);
  margin: -18px -22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.reward-card-cover.has-media {
  padding: 0;
  background: #111827;
}
.reward-card-cover.has-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.reward-redemption-history {
  grid-column: 1 / -1;
  display: grid;
  gap: 18px;
}
.reward-ticket-list {
  display: grid;
  gap: 12px;
}
.reward-ticket-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .78);
}
.reward-ticket-card h3 {
  margin: 2px 0 6px;
  color: var(--navy);
}
.reward-ticket-card.status-cancelled {
  opacity: .72;
  background: rgba(248, 250, 252, .74);
}
.reward-ticket-actions {
  display: grid;
  justify-items: end;
  gap: 10px;
}
.reward-ticket-cancel {
  min-width: min(280px, 100%);
}
.reward-ticket-cancel summary {
  cursor: pointer;
  color: var(--danger);
  font-weight: 950;
}
.reward-ticket-cancel form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(180, 64, 36, .16);
  border-radius: 18px;
  background: rgba(255, 239, 235, .68);
}
.challenge-card-cover {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 181, 106, .32), transparent 12rem),
    linear-gradient(135deg, #13233b, #315fc1 55%, #5b8def);
}
.reward-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.reward-actions form { margin: 0; }
.measurement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.measurement-grid div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfcfa;
}
.measurement-grid dt {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.measurement-grid dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 900;
}
.measurement-validation-card {
  margin-bottom: 24px;
}
.measurement-validation-item {
  align-items: flex-start;
  gap: 18px;
}
.measurement-validation-actions {
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.reject-inline-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.reject-inline-form input {
  min-width: min(260px, 100%);
}
.settings-card { max-width: 920px; }
.settings-section {
  display: grid;
  gap: 14px;
  padding: 0 0 22px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--line);
}
.settings-section:last-of-type { border-bottom: 0; }
.settings-section h2 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -.02em;
}
.profile-media-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.profile-media-row > img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px rgba(23, 32, 51, .08);
}
.profile-media-row > div {
  flex: 1 1 260px;
  display: grid;
  gap: 12px;
}
.avatar-upload-control {
  display: grid;
  justify-items: start;
  gap: 8px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.create-panel {
  overflow: hidden;
}
.create-panel-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  font-size: 1.1rem;
  font-weight: 950;
  letter-spacing: -.02em;
}
.create-panel-summary::-webkit-details-marker { display: none; }
.create-panel-summary strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  background: var(--monthly-start);
  color: var(--monthly-contrast);
  text-align: center;
  font-size: 0;
}
.create-panel-summary strong::before,
.create-panel-summary strong::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .18s ease;
}
.create-panel-summary strong::after {
  transform: rotate(90deg);
}
.create-panel[open] .create-panel-summary {
  margin-bottom: 18px;
}
.create-panel[open] .create-panel-summary strong::before {
  transform: rotate(45deg);
}
.create-panel[open] .create-panel-summary strong::after {
  transform: rotate(-45deg);
}
.file-preview {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.file-preview img,
.file-preview video {
  width: min(260px, 100%);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}
.file-preview small {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 750;
}
.exercise-edit-panel {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.exercise-edit-panel summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 950;
}
.media-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.media-library-card {
  display: grid;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .72);
}
.media-library-item {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 104px;
  border: 1px solid rgba(var(--monthly-rgb), .22);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(var(--monthly-rgb), .10), rgba(255, 255, 255, .82));
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.media-library-item:hover {
  border-color: rgba(var(--monthly-rgb), .42);
  transform: translateY(-1px);
}
.media-library-item img,
.media-library-item video {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 13px;
  background: var(--surface-soft);
}
.media-library-item > span:first-child {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--monthly-start);
  color: white;
  font-size: .9rem;
}
.media-library-item strong {
  font-size: .82rem;
  font-weight: 950;
}
.media-library-item span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.media-library-item > span:first-child {
  color: white;
  font-size: .9rem;
  text-transform: none;
}
.media-library-meta {
  display: grid;
  gap: 5px;
}
.media-library-meta strong {
  font-size: .86rem;
  line-height: 1.2;
}
.media-library-meta small {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
}
.button.compact {
  min-height: 0;
  padding: 7px 10px;
  font-size: .78rem;
}
.avatar-cropper {
  display: grid;
  gap: 16px;
}
.avatar-cropper-frame {
  position: relative;
  width: min(420px, 76vw);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--line);
  cursor: grab;
  touch-action: none;
  background:
    linear-gradient(45deg, rgba(17, 24, 39, .06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(17, 24, 39, .06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(17, 24, 39, .06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(17, 24, 39, .06) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}
.avatar-cropper-frame:active { cursor: grabbing; }
.avatar-cropper-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .95),
    inset 0 0 0 999px rgba(17, 24, 39, .04);
  pointer-events: none;
}
.avatar-cropper-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transition: transform .12s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.avatar-cropper label {
  display: grid;
  gap: 8px;
}
.settings-checkbox-row {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}
.settings-checkbox-row input {
  flex: 0 0 auto;
  margin: 0;
}
.reward-progress {
  display: grid;
  gap: 8px;
}
.reward-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .84rem;
}
.reward-progress-meta strong { color: var(--ink); }
.reward-progress-track {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef1ee;
  box-shadow: inset 0 1px 3px rgba(23, 32, 51, .08);
}
.reward-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lime), var(--monthly-fit));
  box-shadow: 0 0 0 1px rgba(25, 115, 58, .14), 0 6px 14px rgba(var(--monthly-rgb), .2);
  transition: width .25s ease;
}
.reward-progress-0 { width: 0%; }
.reward-progress-1 { width: 1%; }
.reward-progress-2 { width: 2%; }
.reward-progress-3 { width: 3%; }
.reward-progress-4 { width: 4%; }
.reward-progress-5 { width: 5%; }
.reward-progress-6 { width: 6%; }
.reward-progress-7 { width: 7%; }
.reward-progress-8 { width: 8%; }
.reward-progress-9 { width: 9%; }
.reward-progress-10 { width: 10%; }
.reward-progress-11 { width: 11%; }
.reward-progress-12 { width: 12%; }
.reward-progress-13 { width: 13%; }
.reward-progress-14 { width: 14%; }
.reward-progress-15 { width: 15%; }
.reward-progress-16 { width: 16%; }
.reward-progress-17 { width: 17%; }
.reward-progress-18 { width: 18%; }
.reward-progress-19 { width: 19%; }
.reward-progress-20 { width: 20%; }
.reward-progress-21 { width: 21%; }
.reward-progress-22 { width: 22%; }
.reward-progress-23 { width: 23%; }
.reward-progress-24 { width: 24%; }
.reward-progress-25 { width: 25%; }
.reward-progress-26 { width: 26%; }
.reward-progress-27 { width: 27%; }
.reward-progress-28 { width: 28%; }
.reward-progress-29 { width: 29%; }
.reward-progress-30 { width: 30%; }
.reward-progress-31 { width: 31%; }
.reward-progress-32 { width: 32%; }
.reward-progress-33 { width: 33%; }
.reward-progress-34 { width: 34%; }
.reward-progress-35 { width: 35%; }
.reward-progress-36 { width: 36%; }
.reward-progress-37 { width: 37%; }
.reward-progress-38 { width: 38%; }
.reward-progress-39 { width: 39%; }
.reward-progress-40 { width: 40%; }
.reward-progress-41 { width: 41%; }
.reward-progress-42 { width: 42%; }
.reward-progress-43 { width: 43%; }
.reward-progress-44 { width: 44%; }
.reward-progress-45 { width: 45%; }
.reward-progress-46 { width: 46%; }
.reward-progress-47 { width: 47%; }
.reward-progress-48 { width: 48%; }
.reward-progress-49 { width: 49%; }
.reward-progress-50 { width: 50%; }
.reward-progress-51 { width: 51%; }
.reward-progress-52 { width: 52%; }
.reward-progress-53 { width: 53%; }
.reward-progress-54 { width: 54%; }
.reward-progress-55 { width: 55%; }
.reward-progress-56 { width: 56%; }
.reward-progress-57 { width: 57%; }
.reward-progress-58 { width: 58%; }
.reward-progress-59 { width: 59%; }
.reward-progress-60 { width: 60%; }
.reward-progress-61 { width: 61%; }
.reward-progress-62 { width: 62%; }
.reward-progress-63 { width: 63%; }
.reward-progress-64 { width: 64%; }
.reward-progress-65 { width: 65%; }
.reward-progress-66 { width: 66%; }
.reward-progress-67 { width: 67%; }
.reward-progress-68 { width: 68%; }
.reward-progress-69 { width: 69%; }
.reward-progress-70 { width: 70%; }
.reward-progress-71 { width: 71%; }
.reward-progress-72 { width: 72%; }
.reward-progress-73 { width: 73%; }
.reward-progress-74 { width: 74%; }
.reward-progress-75 { width: 75%; }
.reward-progress-76 { width: 76%; }
.reward-progress-77 { width: 77%; }
.reward-progress-78 { width: 78%; }
.reward-progress-79 { width: 79%; }
.reward-progress-80 { width: 80%; }
.reward-progress-81 { width: 81%; }
.reward-progress-82 { width: 82%; }
.reward-progress-83 { width: 83%; }
.reward-progress-84 { width: 84%; }
.reward-progress-85 { width: 85%; }
.reward-progress-86 { width: 86%; }
.reward-progress-87 { width: 87%; }
.reward-progress-88 { width: 88%; }
.reward-progress-89 { width: 89%; }
.reward-progress-90 { width: 90%; }
.reward-progress-91 { width: 91%; }
.reward-progress-92 { width: 92%; }
.reward-progress-93 { width: 93%; }
.reward-progress-94 { width: 94%; }
.reward-progress-95 { width: 95%; }
.reward-progress-96 { width: 96%; }
.reward-progress-97 { width: 97%; }
.reward-progress-98 { width: 98%; }
.reward-progress-99 { width: 99%; }
.reward-progress-100 { width: 100%; }
.reward-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: .78rem;
}
.reward-meta span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8faf7;
}
.reward-edit-panel {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.reward-edit-panel summary {
  color: var(--monthly-fit);
  font-size: .78rem;
  font-weight: 850;
  cursor: pointer;
}
.reward-edit-panel form {
  margin-top: 12px;
}
.reward-delete-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.workout-management-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
}
.workout-action-panel {
  margin-top: 0;
  flex: 1 1 180px;
  min-width: min(100%, 180px);
}
.workout-action-panel > summary.button {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  list-style: none;
}
.workout-action-panel > summary.button::-webkit-details-marker {
  display: none;
}
.workout-action-panel[open] > summary.button {
  border-color: var(--accent);
  color: var(--ink);
  background: rgba(156, 211, 133, .14);
}
.workout-management-actions .reward-delete-form {
  flex: 1 1 180px;
  min-width: min(100%, 180px);
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.workout-management-actions .reward-delete-form .button {
  width: 100%;
}
.compact-form {
  margin-top: 12px;
}
.reward-reactivation-panel {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfa;
}
.reward-reactivation-panel legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
}
.reward-reactivation-panel p { margin: 0; }
.active-session-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(var(--monthly-rgb), .09);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 750;
}
.workout-detail-hero {
  margin-bottom: 18px;
  padding: clamp(22px, 4vw, 34px);
}
.workout-create-card {
  margin-bottom: 18px;
}
.workout-create-modal:not([open]) {
  display: none;
}
.workout-create-modal[open] {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(16px, 4vw, 34px);
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: rgba(10, 22, 35, .56);
  box-shadow: none;
}
.workout-create-modal[open] .create-panel-summary,
.workout-create-modal[open] .workout-create-form {
  width: min(1040px, 100%);
  margin-inline: auto;
  background: white;
}
.workout-create-modal[open] .create-panel-summary {
  margin-bottom: 0;
  padding: 20px clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -6px 40px rgba(4, 10, 20, .14);
}
.workout-create-modal[open] .workout-create-form {
  display: grid;
  gap: 18px;
  padding: 0 clamp(18px, 3vw, 28px) clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 26px 70px rgba(4, 10, 20, .22);
}
.workout-create-dedicated .workout-create-card {
  max-width: 980px;
  margin: 0 auto 18px;
  padding: clamp(22px, 4vw, 34px);
}
.workout-create-dedicated .workout-create-card .create-panel-summary {
  display: none;
}
.workout-create-dedicated .workout-create-card[open] {
  display: block;
}
.workout-create-dedicated .workout-create-form {
  display: grid;
  gap: 18px;
}
.exercise-picker {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.exercise-picker legend {
  padding: 0 7px;
  font-weight: 900;
}
.exercise-picker > .muted {
  margin: 0 0 12px;
  font-size: .82rem;
}
.exercise-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.workout-create-exercise-toolbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(var(--monthly-rgb), .07);
}
.workout-create-exercise-toolbar label {
  position: relative;
  margin: 0;
}
.workout-create-exercise-toolbar select {
  margin-top: 8px;
}
.workout-exercise-search-results {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  max-height: 280px;
  overflow: auto;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  box-shadow: 0 18px 45px rgba(17, 24, 39, .16);
}
.workout-exercise-search-results.hidden {
  display: none;
}
.workout-exercise-search-results button {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: #fbfcfa;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.workout-exercise-search-results button:hover {
  background: rgba(var(--monthly-rgb), .1);
}
.workout-exercise-search-results small,
.workout-exercise-search-results p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
}
.workout-create-exercise-toolbar .button {
  min-width: 132px;
}
.workout-create-exercise-editor {
  display: grid;
  gap: 12px;
}
.workout-create-exercise-option {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcfa;
}
.workout-create-exercise-option[open] {
  background:
    linear-gradient(180deg, rgba(var(--monthly-rgb), .08), transparent 120px),
    #fbfcfa;
}
.workout-create-exercise-option summary {
  cursor: pointer;
  list-style: none;
}
.workout-create-exercise-option summary::-webkit-details-marker {
  display: none;
}
.workout-create-exercise-option[hidden] {
  display: none;
}
.workout-create-exercise-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.workout-create-exercise-toggle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: white;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--monthly-fit);
  font-size: 1.05rem;
  font-weight: 900;
  transition: transform .18s ease;
}
.workout-create-exercise-option[open] .workout-create-exercise-toggle {
  transform: rotate(180deg);
}
.workout-create-exercise-heading {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.workout-create-exercise-heading strong {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workout-create-exercise-heading small {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 760;
}
.workout-create-tracking-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(var(--monthly-rgb), .12);
  color: var(--monthly-fit);
  font-size: .72rem;
  font-weight: 900;
}
.workout-create-exercise-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}
.workout-create-exercise-actions .button {
  margin: 0;
}
.compact-target-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  align-items: start;
  gap: 14px 16px;
  margin-top: 16px;
}
.workout-create-exercise-option [data-create-tracking-field] {
  display: none;
}
.workout-create-exercise-option[data-tracking="weight_reps"] [data-create-tracking-field~="weight_reps"],
.workout-create-exercise-option[data-tracking="bodyweight_reps"] [data-create-tracking-field~="bodyweight_reps"],
.workout-create-exercise-option[data-tracking="assisted_reps"] [data-create-tracking-field~="assisted_reps"],
.workout-create-exercise-option[data-tracking="duration"] [data-create-tracking-field~="duration"],
.workout-create-exercise-option[data-tracking="distance_time"] [data-create-tracking-field~="distance_time"],
.workout-create-exercise-option[data-tracking="distance"] [data-create-tracking-field~="distance"] {
  display: grid;
  gap: 7px;
}
.compact-target-grid + label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}
.workout-create-exercise-option .compact-target-grid input,
.workout-create-exercise-option .compact-target-grid select {
  min-height: 52px;
}
.workout-create-exercise-option .compact-target-grid label > span,
.workout-create-exercise-option > label > span {
  min-height: 2.5em;
  display: flex;
  align-items: flex-end;
}
.workout-create-order-summary {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(var(--monthly-rgb), .26);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(var(--monthly-rgb), .1), transparent),
    #fbfcfa;
}
.workout-create-order-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.workout-create-order-summary strong {
  color: var(--ink);
}
.workout-create-order-summary > div span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}
.workout-create-order-summary ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.workout-create-order-summary li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: white;
  box-shadow: inset 0 0 0 1px var(--line);
}
.workout-create-order-summary li > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(var(--monthly-rgb), .14);
  color: var(--monthly-fit);
  font-size: .8rem;
  font-weight: 950;
}
.workout-create-order-summary li strong,
.workout-create-order-summary li small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workout-create-order-summary li small {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 760;
}
.workout-create-dedicated [data-workout-create-submit]:disabled {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.25);
}
.exercise-picker-option {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 10px !important;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fbfcfa;
}
.exercise-picker-option input {
  width: 18px;
  height: 18px;
  min-height: auto;
  flex: 0 0 18px;
  margin-top: 2px;
}
.exercise-picker-option strong,
.exercise-picker-option small {
  display: block;
}
.exercise-picker-option small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.35;
}
.workout-detail-actions {
  justify-content: flex-end;
  min-width: 190px;
}
.workout-detail-actions form { margin: 0; }
.workout-exercise-card { padding: 18px; }
.exercise-card-title {
  align-items: flex-start;
  margin-bottom: 16px;
}
.exercise-card-title > span:first-child {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--navy);
  color: white;
  font-weight: 900;
}
.exercise-card-title > div { flex: 1; min-width: 0; }
.exercise-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.exercise-snapshot-grid div {
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  background: #f8faf7;
}
.exercise-snapshot-grid dt {
  color: var(--muted);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.exercise-snapshot-grid dd {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: .86rem;
  font-weight: 780;
  overflow-wrap: anywhere;
}
.guided-page .admin-heading { margin-bottom: 18px; }
.guided-progress-card,
.guided-summary-list,
.guided-recovery-banner,
.guided-offline-panel {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 14px 38px rgba(23, 32, 51, .055);
}
.guided-offline-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-color: rgba(var(--monthly-rgb), .28);
  background: linear-gradient(135deg, rgba(var(--monthly-rgb), .10), rgba(255, 255, 255, .96));
}
.guided-offline-panel h2 {
  margin: 0 0 6px;
  font-size: 1.08rem;
}
.guided-offline-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.guided-recovery-banner {
  position: sticky;
  top: 16px;
  z-index: 35;
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 260px;
  padding: clamp(24px, 5vw, 44px);
  border: 0;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 18%, rgba(201, 243, 29, .24), transparent 16rem),
    linear-gradient(135deg, var(--navy), var(--monthly-start) 70%, var(--monthly-fit));
  color: white;
  text-align: center;
  box-shadow: 0 24px 70px rgba(23, 32, 51, .22);
}
.guided-recovery-content {
  display: grid;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 12px;
  width: min(760px, 100%);
}
.guided-recovery-banner.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 120;
  min-height: 100dvh;
  border-radius: 0;
  padding: clamp(28px, 8vw, 80px);
}
.guided-recovery-banner.is-fullscreen strong {
  font-size: clamp(5rem, 24vw, 14rem);
}
.guided-recovery-expand,
.guided-recovery-skip {
  justify-self: center;
}
.guided-recovery-expand {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, .13);
  color: white;
  font-weight: 900;
  cursor: pointer;
}
.guided-recovery-banner small {
  color: rgba(255, 255, 255, .72);
  font-weight: 750;
}
.guided-recovery-banner span,
.guided-timer-panel span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.guided-recovery-banner strong,
.guided-timer-panel strong {
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 950;
  letter-spacing: -.03em;
}
.guided-recovery-banner span {
  color: rgba(255, 255, 255, .72);
}
.guided-recovery-banner strong {
  color: var(--monthly-contrast);
  font-size: clamp(4rem, 16vw, 8rem);
  line-height: .95;
  letter-spacing: -.08em;
  font-variant-numeric: tabular-nums;
}
.guided-recovery-title,
.guided-recovery-next {
  display: block;
  max-width: 100%;
}
.guided-recovery-next {
  font-size: clamp(.9rem, 2.4vw, 1.15rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.guided-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-weight: 850;
}
.guided-progress-header span { color: var(--muted); font-size: .86rem; }
.guided-progress-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ebe5;
}
.guided-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #27a35b, #7ac943);
  transition: width .25s ease;
}
.guided-exercise-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.guided-strip-item {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid transparent;
  border-radius: 50%;
  background: #edf0eb;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
}
.guided-strip-completed,
.guided-strip-partial,
.guided-strip-modified {
  background: #e7f7ec;
  color: #19733a;
}
.guided-strip-skipped {
  background: #fff0ed;
  color: #b83220;
}
.guided-strip-item.is-current {
  border-color: var(--monthly-fit);
  box-shadow: 0 0 0 4px rgba(var(--monthly-rgb), .13);
}
.guided-current-card {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 5vw, 42px);
}
.guided-current-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, var(--monthly-start), var(--monthly-end));
}
.guided-current-card h2 {
  margin-bottom: 18px;
  font-size: clamp(1.7rem, 4vw, 2.45rem);
}
.guided-media-preview {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: clamp(190px, 34vh, 330px);
  display: block;
  margin: 0 0 18px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 26px;
  background: linear-gradient(135deg, #111827, #1f2937);
  box-shadow: 0 18px 44px rgba(23, 32, 51, .14);
  cursor: zoom-in;
}
.guided-media-preview[hidden],
.guided-recovery-banner[hidden] {
  display: none !important;
}
.guided-offline-media-notice {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px dashed rgba(var(--monthly-rgb), .38);
  border-radius: 18px;
  background: rgba(var(--monthly-rgb), .08);
  color: var(--muted);
  font-weight: 750;
}
.guided-record-metric dd {
  display: grid;
  gap: 3px;
}
.guided-record-metric strong {
  color: #7a4b12;
  font-size: 1rem;
}
.guided-record-metric small {
  color: var(--muted);
  font-size: .72rem;
}
.guided-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.guided-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.guided-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 780;
}
.guided-form input,
.guided-form select,
.guided-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: none;
  background: #fbfcfa;
  color: var(--ink);
}
.guided-form textarea {
  min-height: 90px;
  resize: vertical;
}
.guided-form input:focus,
.guided-form select:focus,
.guided-form textarea:focus {
  border-color: var(--monthly-fit);
  background: white;
  box-shadow: 0 0 0 3px rgba(var(--monthly-rgb), .14);
}
.guided-nav { margin-top: 18px; }
.guided-nav form { margin: 0; }
.guided-timer-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(var(--monthly-rgb), .22);
  border-radius: 18px;
  background: rgba(var(--monthly-rgb), .07);
}
.guided-summary-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.guided-summary-list h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.guided-summary-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfcfa;
}
.guided-summary-row.status-row-completed,
.guided-summary-row.status-row-partial,
.guided-summary-row.status-row-modified {
  border-color: rgba(25, 115, 58, .22);
  background: #f2fbf5;
}
.guided-summary-row.status-row-skipped {
  border-color: rgba(184, 50, 32, .2);
  background: #fff8f6;
}
.guided-summary-position {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--navy);
  color: white;
  font-size: .76rem;
  font-weight: 900;
}
.guided-summary-row strong { display: block; }
.guided-summary-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.status-planned { background: #f0f1f3; color: #626a75; }
.status-completed { background: #e7f7ec; color: #19733a; }
.status-partial { background: #fff7db; color: #936700; }
.status-modified { background: #e9f0ff; color: #315ca8; }
.status-skipped,
.status-missed { background: #fff0ed; color: #b83220; }
.status-cancelled { background: #f0f1f3; color: #626a75; }
.status-active { background: #e7f7ec; color: #19733a; }
.status-superseded { background: #f0f1f3; color: #626a75; }
.status-ignored { background: #fff0ed; color: #b83220; }

.record-history-list {
  display: grid;
  gap: 12px;
}
.record-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.record-history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0 0, rgba(201, 243, 29, .14), transparent 12rem),
    rgba(255, 255, 255, .96);
  box-shadow: 0 12px 30px rgba(23, 32, 51, .05);
}
.record-history-row::before {
  content: "🏆";
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #f4f8ef;
  color: var(--monthly-fit);
  font-size: 1.22rem;
  box-shadow: inset 0 0 0 1px rgba(var(--monthly-rgb), .14);
}
.record-history-row h2 {
  margin: 2px 0 4px;
  font-size: 1.12rem;
  letter-spacing: -.025em;
}
.record-history-row > strong {
  color: var(--monthly-fit);
  font-size: clamp(1.16rem, 2.3vw, 1.65rem);
  letter-spacing: -.04em;
  white-space: nowrap;
}
.record-source-link {
  display: inline-flex;
  margin-top: 6px;
  color: var(--monthly-fit);
  font-size: .8rem;
  font-weight: 800;
  text-decoration: none;
}
.record-source-link:hover {
  text-decoration: underline;
}
.record-history-row.record-status-superseded {
  opacity: .76;
}

.xp-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 18%, rgba(201, 243, 29, .28), transparent 14rem),
    linear-gradient(135deg, var(--navy), var(--monthly-start));
  color: white;
}
.xp-hero .eyebrow,
.xp-hero p { color: rgba(255, 255, 255, .72); }
.xp-hero h2 {
  margin: 4px 0;
  font-size: clamp(2.4rem, 8vw, 5rem);
  line-height: .92;
  letter-spacing: -.07em;
}
.xp-hero strong { color: white; }
.xp-hero-orb {
  flex: 0 0 auto;
  width: clamp(96px, 18vw, 150px);
  height: clamp(96px, 18vw, 150px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lime), #fff7a8);
  color: var(--navy);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 1000;
  letter-spacing: -.08em;
  box-shadow: 0 24px 58px rgba(0, 0, 0, .22);
}
.xp-stat-grid .dashboard-stat-card strong { color: var(--monthly-start); }
.xp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.xp-rule-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.xp-rule-list div,
.xp-ledger-row {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
}
.xp-rule-list dt {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
}
.xp-rule-list dd {
  margin: 0;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 900;
}
.xp-milestones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.xp-milestones h3 {
  flex: 1 0 100%;
  margin: 0 0 4px;
  font-size: .92rem;
}
.xp-milestones span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #f4f8ef;
  color: var(--monthly-fit);
  font-size: .78rem;
  font-weight: 900;
}
.xp-config-card,
.xp-ledger-card,
.xp-rules-card {
  grid-column: 1 / -1;
}
.xp-config-form,
.xp-console-form {
  display: grid;
  gap: 14px;
}
.xp-retroactivity-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(29, 78, 216, .16);
  border-radius: 14px;
  background: rgba(239, 246, 255, .72);
}
.xp-console-form {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.xp-config-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.xp-config-grid-compact {
  grid-template-columns: minmax(140px, .35fr) minmax(240px, 1fr);
}
.xp-reason-field {
  grid-column: auto / span 1;
}
.xp-config-grid label {
  display: grid;
  gap: 6px;
}
.xp-config-grid span {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 850;
}
.xp-config-grid input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 11px;
  color: var(--ink);
  font-weight: 900;
}
.xp-ledger-list {
  display: grid;
  gap: 12px;
}
.xp-ledger-row {
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  min-height: 88px;
  padding: 16px 18px;
}
.xp-ledger-row > strong {
  font-size: 1.12rem;
  font-weight: 1000;
  white-space: nowrap;
}
.xp-ledger-row.is-positive > strong { color: #19733a; }
.xp-ledger-row.is-negative > strong { color: #b83220; }
.xp-ledger-row.is-adjusted {
  border-color: rgba(241, 148, 44, .34);
  background:
    linear-gradient(135deg, rgba(255, 248, 232, .96), rgba(255, 255, 255, .82));
  box-shadow: inset 4px 0 0 rgba(241, 148, 44, .72);
}
.xp-ledger-row p {
  margin: 0 0 3px;
  color: var(--ink);
  font-weight: 800;
  overflow-wrap: anywhere;
}
.xp-ledger-row small {
  color: var(--muted);
  font-size: .74rem;
}
.xp-adjustment-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  width: fit-content;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(241, 148, 44, .28);
  border-radius: 14px;
  background: rgba(255, 245, 221, .9);
  color: #7a4213;
  font-size: .76rem;
  font-weight: 850;
}
.xp-adjustment-notice strong {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(241, 148, 44, .18);
  color: #7a4213;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.xp-adjustment-notice span {
  overflow-wrap: anywhere;
}
.xp-override-panel {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.xp-override-panel summary {
  cursor: pointer;
  color: var(--monthly-fit);
  font-size: .78rem;
  font-weight: 900;
}
.xp-override-panel form {
  display: grid;
  grid-template-columns: 120px minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}
.xp-override-panel label {
  display: grid;
  gap: 5px;
}
.xp-override-panel span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
}
.xp-override-panel input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 7px 10px;
}

.calendar-hero,
.workout-list-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  padding: clamp(24px, 4vw, 38px);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 16%, rgba(201, 243, 29, .28), transparent 16rem),
    linear-gradient(135deg, var(--navy), var(--monthly-start) 66%, var(--monthly-fit));
  color: white;
  box-shadow: 0 22px 55px rgba(23, 32, 51, .14);
}
.calendar-hero .eyebrow,
.calendar-hero p,
.workout-list-hero .eyebrow,
.workout-list-hero p {
  color: rgba(255, 255, 255, .72);
}
.calendar-hero h1,
.workout-list-hero h1 {
  margin: 0 0 8px;
}
.calendar-hero > div:first-child,
.workout-list-hero > div:first-child {
  max-width: 620px;
}
.calendar-hero-actions,
.workout-list-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.calendar-create-button {
  margin: 0;
  min-width: 178px;
  justify-content: center;
}
.calendar-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.calendar-month-nav strong {
  min-width: 88px;
  color: white;
  text-align: center;
  font-size: 1rem;
}
.calendar-month-nav .button {
  width: 40px;
  min-height: 40px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  font-size: 1.4rem;
}
.calendar-view-switch {
  width: fit-content;
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 12px 28px rgba(23, 32, 51, .06);
}
.calendar-view-switch a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  text-decoration: none;
}
.calendar-view-switch a.active {
  background: var(--navy);
  color: white;
}
.calendar-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 46px rgba(23, 32, 51, .07);
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}
.calendar-day {
  min-height: 154px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  background: white;
}
.calendar-day.is-muted {
  background: #f8faf7;
  color: rgba(23, 32, 51, .46);
}
.calendar-day.is-sunday {
  background:
    radial-gradient(circle at 100% 0, rgba(255, 115, 92, .13), transparent 9rem),
    #fff8f6;
}
.calendar-day.is-sunday.is-muted {
  background: #fff6f3;
}
.calendar-day.is-today {
  box-shadow: inset 0 0 0 2px rgba(var(--monthly-rgb), .36);
}
.calendar-day-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.calendar-day-number strong {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-radius: 999px;
  background: #f4f8ef;
  color: var(--monthly-fit);
  font-size: 1rem;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(var(--monthly-rgb), .14);
}
.calendar-day.is-sunday .calendar-day-number strong {
  background: #fff0ed;
  color: #b83220;
  box-shadow: inset 0 0 0 1px rgba(184, 50, 32, .12);
}
.calendar-day.is-muted .calendar-day-number strong {
  background: #eef1ee;
  color: rgba(23, 32, 51, .44);
  box-shadow: none;
}
.calendar-day.is-today .calendar-day-number strong {
  background: var(--monthly-fit);
  color: white;
  box-shadow: 0 8px 18px rgba(var(--monthly-rgb), .22);
}
.calendar-mobile-weekday {
  display: inline-flex;
  background: rgba(var(--monthly-rgb), .1);
  color: var(--monthly-fit);
}
.calendar-day.is-sunday .calendar-mobile-weekday {
  background: #fff0ed;
  color: #b83220;
}
.calendar-day.is-muted .calendar-mobile-weekday {
  background: #eef1ee;
  color: rgba(23, 32, 51, .44);
}
.calendar-day-number span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(var(--monthly-rgb), .1);
  color: var(--monthly-fit);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.calendar-empty {
  margin: 0;
  color: rgba(107, 114, 128, .62);
  font-size: .76rem;
  font-weight: 760;
}
.calendar-workout-list {
  display: grid;
  gap: 7px;
}
.calendar-workout {
  display: grid;
  gap: 2px;
  padding: 9px;
  border-left: 4px solid var(--monthly-fit);
  border-radius: 13px;
  background: #f8faf7;
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(23, 32, 51, .045);
}
.calendar-workout:hover {
  background: rgba(var(--monthly-rgb), .08);
}
.calendar-workout span {
  color: var(--monthly-fit);
  font-size: .68rem;
  font-weight: 900;
}
.calendar-workout strong {
  overflow: hidden;
  font-size: .82rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-workout small {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.25;
}
.calendar-workout.status-ring-completed { border-left-color: #19733a; }
.calendar-workout.status-ring-partial,
.calendar-workout.status-ring-modified { border-left-color: #936700; }
.calendar-workout.status-ring-missed,
.calendar-workout.status-ring-skipped { border-left-color: #b83220; }
.calendar-workout.status-ring-cancelled { border-left-color: #626a75; }
.calendar-view-week .calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-view-week .calendar-day {
  min-height: 230px;
}

.exercise-layout {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: 20px;
  align-items: start;
}
.exercise-layout:not(.exercise-create-open) .exercise-list-panel {
  grid-column: 1 / -1;
}
.exercise-create-card { position: sticky; top: 18px; }
.exercise-create-card h2 {
  margin: 0 0 18px;
}
.exercise-create-modal[open] .exercise-create-card,
.exercise-edit-modal[open] .exercise-create-card {
  position: static;
  top: auto;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 28px;
  background: white;
  box-shadow: 0 26px 70px rgba(4, 10, 20, .22);
}
.exercise-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.exercise-modal-header h2 {
  margin: 0;
}
.exercise-modal-close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.35rem;
  line-height: 1;
}
.exercise-filter-card {
  margin-bottom: 20px;
  padding: clamp(16px, 3vw, 22px);
  border: 1px solid rgba(var(--monthly-rgb), .18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 18%, rgba(201, 243, 29, .16), transparent 12rem),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 250, 243, .92));
  box-shadow: 0 18px 46px rgba(23, 32, 51, .07);
}
.exercise-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.exercise-filter-summary .eyebrow {
  margin: 0 0 4px;
}
.exercise-filter-summary h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  letter-spacing: -.035em;
}
.exercise-filter-summary .button {
  min-width: 132px;
  justify-content: center;
}
.exercise-filter-form {
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) repeat(5, minmax(132px, 1fr));
  gap: 14px;
  align-items: end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(23, 32, 51, .08);
}
.exercise-filter-form[hidden] {
  display: none;
}
.exercise-filter-form label {
  display: grid;
  gap: 7px;
  margin: 0;
}
.exercise-filter-form label > span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.exercise-filter-form input,
.exercise-filter-form select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(23, 32, 51, .10);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 252, 248, .96));
  color: var(--ink);
  font-size: .9rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .62);
  outline: none;
}
.exercise-filter-form input::placeholder {
  color: rgba(108, 119, 135, .82);
  font-weight: 700;
}
.exercise-filter-form input:focus,
.exercise-filter-form select:focus {
  border-color: rgba(var(--monthly-rgb), .52);
  box-shadow:
    0 0 0 4px rgba(var(--monthly-rgb), .12),
    inset 0 0 0 1px rgba(255, 255, 255, .72);
}
.exercise-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.exercise-media-thumb {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 174px;
  display: grid;
  place-items: center;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 16%, rgba(201, 243, 29, .28), transparent 12rem),
    linear-gradient(135deg, var(--navy), var(--monthly-start));
  color: white;
  cursor: zoom-in;
}
.exercise-media-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid rgba(var(--monthly-rgb), .28);
  border-radius: 999px;
  background: rgba(var(--monthly-rgb), .08);
  color: var(--navy);
  font-weight: 950;
  cursor: zoom-in;
}
.exercise-media-link span {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--monthly-start);
  color: var(--monthly-contrast);
  font-size: .78rem;
}
.exercise-media-thumb img,
.exercise-media-thumb video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.guided-media-preview img,
.guided-media-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.exercise-media-thumb > span,
.guided-media-preview > span {
  position: absolute;
  inset: auto auto 14px 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  font-size: 1.1rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.exercise-media-placeholder {
  min-height: 128px;
  cursor: default;
}
.exercise-media-placeholder span {
  position: static;
  background: rgba(255, 255, 255, .14);
  color: white;
}
.workout-exercise-media {
  min-height: 150px;
}
.exercise-catalog-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 14px 38px rgba(23, 32, 51, .06);
}
.exercise-catalog-card.exercise-global,
.exercise-catalog-card.exercise-assigned {
  border-color: rgba(var(--monthly-rgb), .28);
  background: linear-gradient(135deg, rgba(var(--monthly-rgb), .08), rgba(255,255,255,.98) 42%);
}
.exercise-catalog-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.exercise-catalog-top h2 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -.03em;
}
.exercise-origin-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--navy);
  background: rgba(var(--monthly-rgb), .10);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .055em;
  white-space: nowrap;
}
.exercise-origin-pill::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--monthly-end);
}
.exercise-origin-pill.origin-global {
  background: rgba(31, 80, 153, .11);
}
.exercise-origin-pill.origin-global::before {
  background: #2f6fbd;
}
.exercise-origin-pill.origin-assigned {
  background: rgba(122, 75, 18, .13);
}
.exercise-origin-pill.origin-assigned::before {
  background: #e08833;
}
.exercise-source-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #f8faf7;
  box-shadow: inset 0 0 0 1px var(--line);
}
.exercise-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.exercise-card-actions form {
  margin: 0;
}
.exercise-card-actions .button {
  min-height: 44px;
}
.exercise-record-metric dd {
  display: grid;
  gap: 3px;
}
.exercise-record-metric strong {
  color: #7a4b12;
  font-size: .98rem;
}
.exercise-record-metric small {
  color: var(--muted);
  font-size: .72rem;
}
.exercise-form .guided-field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.proposal-fieldset {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}
.proposal-fieldset legend {
  padding: 0 8px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.proposal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.proposal-row:first-of-type {
  border-top: 0;
}
.proposal-row h3 {
  margin: 4px 0;
}
.proposal-row .reward-actions {
  grid-column: 1 / -1;
}

.app-toast {
  position: fixed;
  z-index: 220;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  max-width: min(360px, calc(100vw - 32px));
  padding: 13px 15px;
  border-radius: 16px;
  background: var(--navy);
  color: white;
  font-size: .86rem;
  font-weight: 820;
  box-shadow: 0 18px 52px rgba(23, 32, 51, .24);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
}
.app-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.app-toast[data-type="success"] {
  background: linear-gradient(135deg, var(--navy), var(--monthly-start));
}
.app-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
}
.app-modal.hidden { display: none; }
.modal-open { overflow: hidden; }
.app-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 26, .62);
  backdrop-filter: blur(5px);
}
.app-modal-card {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: min(86vh, 820px);
  overflow: auto;
  padding: clamp(20px, 4vw, 30px);
  border-radius: 28px;
  background: white;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .28);
}
.app-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.app-modal-header h2 { margin: 0; }
.media-viewer,
.modal-media-preview {
  display: grid;
  place-items: center;
  min-height: 260px;
}
.media-viewer img,
.media-viewer video,
.modal-media-preview img,
.modal-media-preview video {
  max-width: 100%;
  max-height: 66vh;
  border-radius: 18px;
  object-fit: contain;
  background: #111827;
}
.media-viewer video,
.modal-media-preview video {
  width: min(100%, 820px);
}
.app-confirm {
  display: grid;
  gap: 18px;
}
.app-confirm p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.app-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 1180px) {
  .xp-rule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr); }
  .auth-panel { padding-inline: 38px; }
  .admin-page,
  .dashboard-page { padding-left: 0; }
  .dashboard-sidebar { display: none; }
  .app-footer {
    margin-left: 0;
    margin-top: 32px;
    padding: 18px 12px calc(104px + env(safe-area-inset-bottom));
    font-size: .7rem;
  }
  .admin-page .admin-content { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .dashboard-mobile-nav {
    position: fixed;
    z-index: 60;
    inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 20px;
    background: linear-gradient(100deg, var(--monthly-start), var(--monthly-end));
    box-shadow: 0 15px 50px rgba(0, 0, 0, .24);
    backdrop-filter: blur(14px);
  }
  .dashboard-mobile-nav a {
    min-height: 54px;
    display: grid;
    place-items: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 14px;
    color: rgba(255, 255, 255, .74);
    font-size: .62rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
  }
  .dashboard-mobile-nav a span {
    display: block;
    color: rgba(255, 255, 255, .9);
    font-size: 1rem;
    line-height: 1;
  }
  .dashboard-mobile-nav a.active {
    background: rgba(255, 255, 255, .92);
    color: var(--monthly-start);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
  }
  .dashboard-mobile-nav a.active span { color: var(--monthly-start); }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-heading-with-action {
    display: grid;
    justify-items: center;
    text-align: center;
  }
  .admin-heading-with-action > .button {
    width: auto;
    margin-top: 0;
  }
  .dashboard-quest { grid-template-columns: 1fr; }
  .dashboard-xp-orb { justify-self: start; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calendar-hero,
  .workout-list-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .calendar-hero-actions,
  .workout-list-hero-actions {
    width: 100%;
    align-items: stretch;
  }
  .calendar-month-nav {
    align-self: stretch;
    justify-content: space-between;
  }
  .calendar-create-button {
    width: 100%;
  }
  .calendar-day {
    min-height: 132px;
  }
  .exercise-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .exercise-layout { grid-template-columns: 1fr; }
  .exercise-create-card { position: static; }
  .exercise-snapshot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .exercise-filter-summary {
    display: grid;
    justify-items: stretch;
    text-align: center;
  }
  .exercise-filter-summary .button {
    width: 100%;
  }
  .exercise-filter-form {
    grid-template-columns: 1fr;
  }
  .exercise-card-actions,
  .exercise-card-actions form,
  .exercise-card-actions .button {
    width: 100%;
  }
  .auth-page { display: block; min-height: 100vh; padding: 0; background: var(--paper); }
  .auth-shell {
    min-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: 230px 1fr;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .auth-visual { grid-row: 1; min-height: 230px; }
  .auth-visual::before {
    inset: auto 0 0;
    width: auto;
    height: 45%;
    background: linear-gradient(0deg, rgba(17, 24, 39, .35), transparent);
  }
  .auth-visual img { object-position: center 34%; }
  .visual-brand { right: 16px; bottom: 14px; padding: 10px 13px; border-radius: 13px; }
  .visual-brand > span { display: none; }
  .auth-panel {
    grid-row: 2;
    justify-content: flex-start;
    padding: 30px 22px calc(36px + env(safe-area-inset-bottom));
  }
  .auth-toolbar { position: static; margin-bottom: 28px; }
  .auth-logo { width: 58px; height: 58px; flex-basis: 58px; }
  .language-form label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .language-form select { min-height: 42px; }
  .auth-copy { margin-top: 0; }
  .auth-copy > p:last-child { margin-bottom: 25px; }
  .auth-result { margin-top: 5px; }
  .admin-topbar { align-items: flex-start; padding: 14px 74px 14px 16px; }
  .dashboard-page .admin-topbar { display: flex; }
  .calendar-page .admin-topbar { display: flex; justify-content: flex-start; }
  .calendar-page .admin-brand { display: inline-flex; }
  .admin-brand span { display: none; }
  .dashboard-page .admin-brand span,
  .calendar-page .admin-brand span {
    display: inline;
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-topbar-actions { align-items: center; }
  .dashboard-page .admin-topbar-actions > form { display: none; }
  .calendar-page .admin-topbar-actions { display: none; }
  .dashboard-mobile-menu { display: block; }
  .admin-topbar-actions .language-form label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .admin-topbar-actions .button { min-height: 42px; padding: 9px 12px; font-size: .78rem; }
  .admin-content { width: min(100% - 24px, 1180px); padding-top: 28px; }
  .dashboard-quest { min-height: 0; padding: 24px; border-radius: 24px; }
  .dashboard-quest::after {
    background:
      linear-gradient(180deg, rgba(17, 24, 39, .94) 0%, rgba(17, 24, 39, .82) 58%, rgba(17, 24, 39, .58) 100%),
      radial-gradient(circle at 18% 15%, rgba(201, 243, 29, .2), transparent 16rem);
  }
  .dashboard-quest-actions form,
  .dashboard-quest-actions .button {
    width: 100%;
  }
  .dashboard-xp-orb {
    width: min(100%, 240px);
    height: auto;
    min-height: 82px;
    justify-self: center;
    border-radius: 28px;
    padding: 14px 22px;
  }
  .dashboard-xp-orb strong,
  .dashboard-xp-orb span {
    transform: none;
  }
  .dashboard-actions .button { flex: 1 1 150px; }
  .dashboard-xp-row,
  .dashboard-record-row,
  .record-history-row,
  .xp-layout,
  .xp-ledger-row,
  .reward-wallet-summary,
  .reward-ticket-card { grid-template-columns: 1fr; }
  .xp-rule-list { grid-template-columns: 1fr; }
  .xp-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-config-grid-compact,
  .xp-override-panel form { grid-template-columns: 1fr; }
  .dashboard-row-icon { display: none; }
  .dashboard-card-header { align-items: flex-start; flex-direction: column; }
  .record-history-row .status-badge { justify-self: start; }
  .reward-ticket-actions { justify-items: stretch; }
  .calendar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
    background: transparent;
  }
  .calendar-day {
    min-height: 0;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(23, 32, 51, .05);
  }
  .calendar-day-number {
    grid-row: 1 / span 2;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    padding-right: 10px;
    border-right: 1px solid var(--line);
  }
  .calendar-mobile-weekday {
    display: inline-flex;
    font-size: .68rem;
  }
  .calendar-day-number strong {
    font-size: 1.2rem;
  }
  .calendar-empty,
  .calendar-workout-list {
    grid-column: 2;
  }
  .calendar-day.is-muted {
    display: none;
  }
  .calendar-workout strong {
    white-space: normal;
  }
  .workout-card-main,
  .workout-detail-hero,
  .exercise-card-title {
    align-items: flex-start;
    flex-direction: column;
  }
  .workout-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
  }
  .workout-list .workout-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: stretch;
  }
  .workout-list .workout-actions > .button,
  .workout-list .workout-actions > .workout-move-panel {
    flex: 1 1 150px;
  }
  .workout-status-stack { justify-content: flex-start; }
  .workout-actions,
  .guided-recovery-banner,
  .guided-timer-panel,
  .guided-offline-panel,
  .guided-nav {
    width: 100%;
    justify-content: stretch;
    align-items: stretch;
    flex-direction: column;
  }
  .guided-offline-actions { justify-content: stretch; }
  .guided-offline-actions .button { width: 100%; }
  .workout-actions .button,
  .guided-nav form,
  .guided-nav .button {
    width: 100%;
  }
  .workout-detail-actions {
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }
  .workout-detail-actions .button,
  .workout-detail-actions form {
    width: auto;
  }
  .workout-detail-modal-content .workout-detail-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .workout-detail-admin-actions .workout-detail-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .workout-detail-admin-actions .workout-action-panel > summary.button,
  .workout-detail-admin-actions .workout-detail-actions > .button,
  .workout-detail-admin-actions .workout-detail-actions > form,
  .workout-detail-admin-actions .workout-detail-actions > form > .button {
    width: 100%;
  }
  .invitation-reveal { align-items: stretch; flex-direction: column; }
  .invitation-main { align-items: flex-start; flex-direction: column; }
  .invitation-meta { grid-template-columns: 1fr; }
  .exercise-card-grid { grid-template-columns: 1fr; }
  .exercise-picker-grid { grid-template-columns: 1fr; }
  .workout-create-exercise-toolbar {
    grid-template-columns: 1fr;
  }
  .workout-create-exercise-toolbar .button {
    width: 100%;
  }
  .workout-create-exercise-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .workout-create-exercise-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .workout-create-exercise-actions .button {
    flex: 1 1 0;
  }
  .guided-summary-row { grid-template-columns: auto minmax(0, 1fr); }
  .guided-summary-row .status-badge { grid-column: 2; justify-self: start; }
}

@media (max-width: 520px) {
  .form-grid { grid-template-columns: 1fr; }
  .dashboard-stat-grid { grid-template-columns: 1fr; }
  .record-stat-grid { grid-template-columns: 1fr; }
  .xp-config-grid { grid-template-columns: 1fr; }
  .guided-field-grid { grid-template-columns: 1fr; }
  .exercise-form .guided-field-grid { grid-template-columns: 1fr; }
}

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