:root {
  color-scheme: dark;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --bg: #05081d;
  --bg-2: #08102d;
  --panel: rgba(11, 18, 54, .86);
  --text: #fff;
  --muted: #b4bee9;
  --muted-2: #8390c1;
  --cyan: #31d8ff;
  --blue: #1676ff;
  --pink: #ff37b5;
  --orange: #ff981d;
  --purple: #8a50ff;
  --teal: #19d6d3;
  --page-max: 430px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 10%, rgba(44, 106, 255, .20), transparent 28%),
    radial-gradient(circle at 82% 4%, rgba(255, 46, 180, .18), transparent 24%),
    linear-gradient(180deg, #0a0d2c 0%, #05081b 58%, #040716 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 25%, rgba(49,216,255,.08), transparent 20%),
    radial-gradient(circle at 86% 68%, rgba(255,55,181,.07), transparent 20%);
  mix-blend-mode: screen;
}
button {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#app { min-height: 100%; }
.screen {
  position: relative;
  width: min(100%, var(--page-max));
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 12px) calc(14px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(14px + var(--safe-left));
  overflow: hidden;
  background:
    radial-gradient(circle at 38% 8%, rgba(48, 94, 255, .13), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(255, 50, 181, .13), transparent 26%),
    linear-gradient(180deg, rgba(8,13,40,.99), rgba(3,7,24,.99));
  box-shadow: 0 0 70px rgba(0,0,0,.48);
}
.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .09;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 75%);
}
.screen > * { position: relative; z-index: 1; }

.tone-blue { --tone1:#1d8cff; --tone2:#0f4cdb; --glow:rgba(39,145,255,.70); }
.tone-pink { --tone1:#ff3bb5; --tone2:#bd187f; --glow:rgba(255,55,181,.72); }
.tone-orange { --tone1:#ffad22; --tone2:#d56608; --glow:rgba(255,151,25,.72); }
.tone-purple { --tone1:#9354ff; --tone2:#5423d0; --glow:rgba(141,78,255,.72); }
.tone-turquoise { --tone1:#20dcd8; --tone2:#0c9ca0; --glow:rgba(27,214,211,.72); }

.neon-frame {
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 0 0 1px rgba(67, 96, 255, .4),
    0 0 26px rgba(63, 91, 255, .18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* HOME */
.home-hero {
  position: relative;
  height: min(52vh, 500px);
  min-height: 410px;
  overflow: hidden;
  border-radius: 30px;
  background: #091331;
}
.hero-art {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4,8,25,.02) 0%, rgba(4,8,25,.10) 45%, rgba(3,6,20,.9) 100%),
    url('./assets/hero-friends.webp') center 32% / cover no-repeat;
  transform: scale(1.035);
  animation: hero-drift 13s ease-in-out infinite alternate;
}
.floating-settings {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: 17px;
  color: white;
  border: 2px solid #656bff;
  background: rgba(9,17,58,.86);
  box-shadow: 0 0 22px rgba(67,81,255,.35), inset 0 1px 0 rgba(255,255,255,.14);
}
.hero-copy {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;
}
.hero-copy h1 {
  margin: 0;
  line-height: .76;
  letter-spacing: -.075em;
  transform: skew(-6deg) rotate(-2deg);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.hero-copy h1 span,
.hero-copy h1 strong {
  display: block;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(60px, 19vw, 86px);
  font-style: italic;
  text-transform: uppercase;
}
.hero-copy h1 span {
  color: #86dbff;
  text-shadow: 0 0 14px rgba(82,207,255,.5);
}
.hero-copy h1 strong {
  color: #ff39b8;
  margin-top: 6px;
  text-shadow: 0 0 14px rgba(255,51,181,.48);
}
.home-tagline {
  position: absolute;
  left: 8px;
  bottom: 95px;
  font-size: 11px;
  line-height: 1.18;
  letter-spacing: .23em;
  font-weight: 950;
  color: #f1f4ff;
  text-shadow: 0 2px 7px rgba(0,0,0,.85);
}
.hero-copy p {
  margin: 16px 0 0;
  font-size: 18px;
  font-weight: 900;
  color: white;
  text-shadow: 0 2px 7px rgba(0,0,0,.8);
}

.hero-sparkles i,
.day-card-gloss::before,
.exercise-glow::before {
  position: absolute;
  display: block;
  content: "";
  width: 5px;
  height: 5px;
  background: white;
  box-shadow: 0 0 9px 2px rgba(255,255,255,.9);
  transform: rotate(45deg);
  animation: sparkle 2.8s ease-in-out infinite;
}
.hero-sparkles i:nth-child(1) { left: 8%; top: 25%; }
.hero-sparkles i:nth-child(2) { right: 16%; top: 18%; animation-delay: .7s; }
.hero-sparkles i:nth-child(3) { left: 56%; bottom: 17%; animation-delay: 1.4s; }
.hero-sparkles i:nth-child(4) { right: 8%; bottom: 26%; animation-delay: 2.1s; }

.day-stack {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.day-card {
  position: relative;
  min-height: 104px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 74px 1fr 30px;
  gap: 13px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 24px;
  text-align: left;
  border: 2px solid color-mix(in srgb, var(--tone1) 84%, white 16%);
  background: linear-gradient(90deg, var(--tone1), var(--tone2));
  box-shadow:
    0 8px 22px rgba(0,0,0,.36),
    0 0 20px color-mix(in srgb, var(--glow) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,.3);
  animation: card-in .42s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--delay, 0ms);
  isolation: isolate;
}
.day-card-art {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  background:
    linear-gradient(90deg, var(--tone1) 0%, transparent 40%),
    var(--card-art) center / cover no-repeat;
  opacity: .95;
}
.day-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.12), transparent 32%, transparent 68%, rgba(255,255,255,.08));
}
.day-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #e9f7ff;
  background: rgba(4,18,50,.46);
  border: 2px solid rgba(255,255,255,.36);
  box-shadow: inset 0 0 20px rgba(0,0,0,.16), 0 0 14px rgba(255,255,255,.08);
}
.day-icon svg { width: 38px; height: 38px; stroke-width: 2.4; }
.day-copy { min-width: 0; z-index: 2; }
.day-copy small,
.day-copy em { display: block; }
.day-copy small {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .11em;
  margin-bottom: 2px;
}
.day-copy strong {
  display: block;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(27px, 8.8vw, 39px);
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.day-copy em {
  margin-top: 5px;
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
}
.day-arrow,
.exercise-arrow {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  z-index: 3;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.45));
}
.day-arrow svg,
.exercise-arrow svg { width: 24px; height: 24px; stroke-width: 3; }
.card-sheen {
  position: absolute;
  top: -20%;
  left: -30%;
  width: 18%;
  height: 140%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: sheen 5.3s ease-in-out infinite;
  pointer-events: none;
}
.home-footer {
  text-align: center;
  padding: 17px 0 2px;
  color: #6f7cae;
  font-size: 11px;
  letter-spacing: .17em;
  font-weight: 900;
}

/* TOP BAR + DAY */
.topbar {
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin-bottom: 12px;
}
.icon-button {
  width: 54px;
  height: 54px;
  padding: 14px;
  border-radius: 18px;
  border: 2px solid #5d63ff;
  color: white;
  background: rgba(10,16,54,.88);
  box-shadow: 0 0 18px rgba(74,79,255,.32), inset 0 1px 0 rgba(255,255,255,.1);
}
.icon-button svg { stroke-width: 3; }
.mini-logo {
  justify-self: center;
  position: relative;
  text-align: center;
  transform: rotate(-4deg);
  line-height: .7;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}
.mini-logo span,
.mini-logo strong {
  display: block;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-style: italic;
  font-size: 27px;
}
.mini-logo span { color:#7bddff; }
.mini-logo strong { color:#ff42ba; }
.mini-logo i {
  position:absolute;
  color:#ff38b4;
  font-style:normal;
  font-size:15px;
  top:-13px;
  left:2px;
}

.day-hero {
  position: relative;
  min-height: 286px;
  overflow: hidden;
  border-radius: 28px;
  margin-bottom: 16px;
  border: 2px solid color-mix(in srgb, var(--tone1) 76%, white 24%);
  box-shadow: 0 0 26px color-mix(in srgb, var(--glow) 40%, transparent), 0 18px 34px rgba(0,0,0,.36);
}
.day-hero-art {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,7,25,.05) 0%, rgba(2,7,25,.08) 42%, rgba(4,7,27,.88) 100%),
    url('./assets/hero-day.webp') center 34% / cover no-repeat;
  animation: hero-drift 14s ease-in-out infinite alternate;
}
.day-hero-copy {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
}
.day-badge {
  display: inline-flex;
  padding: 7px 13px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(90deg, var(--tone1), var(--tone2));
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 0 15px var(--glow);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1em;
}
.day-hero-copy h2 {
  margin: 10px 0 5px;
  max-width: 95%;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(40px, 12vw, 58px);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -.015em;
  text-shadow: 0 3px 0 rgba(0,0,0,.25), 0 0 12px rgba(255,255,255,.12);
}
.day-hero-copy p {
  margin: 0;
  color: #f5f7ff;
  font-size: 14px;
  font-weight: 850;
}

.exercise-list { display: grid; gap: 12px; }
.exercise-card {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 42px 72px 1fr 26px;
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 22px;
  text-align: left;
  background: linear-gradient(90deg, var(--tone1), var(--tone2));
  border: 2px solid color-mix(in srgb, var(--tone1) 72%, white 28%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--glow) 40%, transparent), 0 8px 20px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18);
  isolation: isolate;
  animation: card-in .4s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--delay, 0ms);
}
.exercise-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(110deg, rgba(255,255,255,.08), transparent 40%, rgba(0,0,0,.12));
}
.exercise-art {
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 54%;
  background:
    linear-gradient(90deg, var(--tone2) 0%, transparent 48%),
    var(--exercise-art) center / cover no-repeat;
  opacity: .98;
}
.exercise-glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(110deg, transparent 50%, rgba(255,255,255,.05) 74%, transparent 90%);
}
.exercise-num {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.5);
  background: rgba(40,5,63,.25);
  font-size: 20px;
  font-weight: 950;
  box-shadow: 0 0 12px rgba(255,255,255,.15);
  z-index: 2;
}
.exercise-muscle-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(15,4,38,.45);
  border: 2px solid rgba(255,255,255,.38);
  box-shadow: inset 0 0 16px rgba(0,0,0,.16);
  z-index: 2;
}
.exercise-muscle-icon svg {
  width: 38px;
  height: 38px;
  stroke-width: 2.1;
}
.exercise-copy {
  min-width: 0;
  z-index: 2;
  text-shadow: 0 2px 6px rgba(0,0,0,.44);
}
.exercise-copy strong {
  display: block;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(20px, 6.2vw, 31px);
  line-height: .93;
  text-transform: none;
}
.exercise-copy small,
.exercise-copy em {
  display: inline;
  font-size: 11px;
  font-weight: 850;
  font-style: normal;
}
.exercise-copy small {
  text-transform: uppercase;
  letter-spacing: .08em;
}
.exercise-copy em { color: rgba(255,255,255,.88); }
.wide-back {
  width: 100%;
  min-height: 62px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  border: 2px solid #6a6dff;
  background: linear-gradient(180deg, rgba(30,47,121,.95), rgba(12,22,70,.95));
  box-shadow: 0 0 20px rgba(79,89,255,.35), inset 0 1px 0 rgba(255,255,255,.13);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .12em;
}
.wide-back svg { width: 20px; height: 20px; stroke-width: 3; }

/* MODALS */
.modal-overlay,
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: flex-end;
  background: rgba(1,4,17,.78);
  backdrop-filter: blur(16px) saturate(1.2);
}
.modal-overlay.open,
.settings-overlay.open {
  display: flex;
  animation: fade-in .2s ease both;
}
.exercise-modal,
.settings-modal {
  position: relative;
  width: min(100%, var(--page-max));
  max-height: calc(100dvh - var(--safe-top) - 4px);
  margin: 0 auto;
  padding: 14px 15px calc(24px + var(--safe-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 30px 30px 0 0;
  background:
    radial-gradient(circle at 16% 0%, rgba(34,109,255,.16), transparent 24%),
    radial-gradient(circle at 84% 18%, rgba(255,55,181,.16), transparent 25%),
    linear-gradient(180deg, #09102d 0%, #05081d 100%);
  border: 1px solid rgba(94,101,255,.55);
  box-shadow: 0 -18px 60px rgba(0,0,0,.58), 0 0 34px rgba(65,77,255,.18);
  animation: sheet-in .34s cubic-bezier(.15,.82,.2,1) both;
}
.modal-grabber {
  width: 48px;
  height: 5px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.30);
}
.modal-close {
  position: sticky;
  top: 0;
  z-index: 6;
  float: right;
  width: 46px;
  height: 46px;
  margin-bottom: -46px;
  padding: 11px;
  border-radius: 999px;
  color: white;
  background: rgba(10,18,58,.9);
  border: 2px solid #646cff;
  box-shadow: 0 0 18px rgba(87,93,255,.35);
}
.modal-close svg { stroke-width: 2.8; }

.exercise-hero {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border-radius: 28px;
  border: 2px solid #ff42c0;
  box-shadow: 0 0 24px rgba(255,52,190,.34), inset 0 1px 0 rgba(255,255,255,.12);
}
.exercise-hero-art {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3,6,18,.02) 0%, rgba(3,6,18,.10) 46%, rgba(3,6,18,.9) 100%),
    var(--exercise-art) center / cover no-repeat;
  transform: scale(1.04);
  animation: hero-drift 13s ease-in-out infinite alternate;
}
.exercise-hero-copy {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
}
.eyebrow {
  display: inline-block;
  color: #ffd54d;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .12em;
}
.exercise-hero-copy h2 {
  margin: 6px 0 4px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(43px, 14vw, 64px);
  line-height: .86;
  text-shadow: 0 3px 0 rgba(0,0,0,.25);
}
.exercise-hero-copy p {
  margin: 0;
  color: #f1f5ff;
  font-size: 15px;
  font-weight: 850;
}

.neon-panel {
  position: relative;
  overflow: hidden;
  border: 2px solid #2f7cff;
  background:
    linear-gradient(125deg, rgba(25,58,144,.74), rgba(13,25,76,.95) 48%, rgba(94,22,132,.78));
  box-shadow: 0 0 24px rgba(42,118,255,.24), inset 0 1px 0 rgba(255,255,255,.09);
}
.tips-card {
  margin-top: 13px;
  border-radius: 25px;
  padding: 18px 18px 17px;
}
.tips-card::after {
  content:"";
  position:absolute;
  right:-20px;
  bottom:-30px;
  width:140px;
  height:170px;
  background: radial-gradient(circle at 60% 45%, rgba(255,39,187,.35), transparent 56%);
  filter: blur(8px);
}
.tips-heading {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ff4fc5;
}
.tips-heading > span {
  font-size: 24px;
  text-shadow: 0 0 14px #ff49c7;
}
.tips-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 1000;
  letter-spacing: .04em;
}
.tips-card ol {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.tips-card li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  line-height: 1.32;
}
.tips-card li b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: white;
  border: 2px solid #ff49c6;
  box-shadow: 0 0 12px rgba(255,73,198,.45);
}
.muscle-watermark {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 70px;
  height: 70px;
  color: rgba(255,63,190,.26);
  transform: scale(1.5);
  filter: drop-shadow(0 0 10px rgba(255,65,192,.24));
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 19px 4px 10px;
}
.progress-title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #dff8ff;
}
.progress-title svg {
  width: 32px;
  height: 32px;
  color: #40d9ff;
  stroke-width: 2.8;
  filter: drop-shadow(0 0 8px rgba(46,211,255,.5));
}
.progress-title span {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-style: italic;
  font-size: 29px;
  letter-spacing: .02em;
  text-shadow: 0 0 16px rgba(70,209,255,.42);
}
.section-title small {
  color: #a5afd9;
  font-size: 12px;
  font-weight: 850;
}

.user-log {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  grid-template-areas:
    "avatar name step"
    "save save save";
  gap: 11px 12px;
  align-items: center;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 13px;
  border-radius: 24px;
  background: linear-gradient(120deg, rgba(14,29,87,.96), rgba(15,16,57,.96));
  border: 2px solid #3d8cff;
  box-shadow: 0 0 26px rgba(44,123,255,.24), inset 0 1px 0 rgba(255,255,255,.09);
}
.user-log::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(115deg, transparent 0 68%, rgba(45,130,255,.12) 68% 73%, transparent 73% 80%, rgba(255,69,192,.07) 80% 86%, transparent 86%);
}
.user-marcus {
  border-color: #ff8f20;
  box-shadow: 0 0 26px rgba(255,139,31,.24), inset 0 1px 0 rgba(255,255,255,.09);
  background: linear-gradient(120deg, rgba(57,29,12,.92), rgba(19,16,50,.96));
}
.avatar {
  position: relative;
  grid-area: avatar;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  overflow: visible;
  font-size: 21px;
  font-weight: 1000;
  border: 2px solid #4ba1ff;
  background: linear-gradient(145deg, #287fff, #173ab6);
  box-shadow: 0 0 18px rgba(55,143,255,.44), inset 0 1px 0 rgba(255,255,255,.16);
}
.avatar-marcus {
  border-color: #ff9a22;
  background: linear-gradient(145deg, #ff9d21, #db5811);
  box-shadow: 0 0 18px rgba(255,138,29,.44), inset 0 1px 0 rgba(255,255,255,.16);
}
.avatar i {
  position: absolute;
  right: -3px;
  top: -14px;
  color: #ff4bc2;
  font-size: 17px;
  font-style: normal;
  text-shadow: 0 0 10px #ff4bc2;
}
.avatar-marcus i { color:#ff9632; text-shadow:0 0 10px #ff9632; }
.user-name { grid-area: name; min-width: 0; }
.user-name strong {
  display: block;
  font-size: 19px;
  font-weight: 950;
}
.user-name small {
  display: block;
  margin-top: 2px;
  color: #a9b5df;
  font-size: 11px;
}
.weight-stepper {
  grid-area: step;
  display: grid;
  grid-template-columns: 42px 74px 42px;
  gap: 8px;
  align-items: center;
}
.weight-stepper button {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 2px solid #6978d6;
  background: linear-gradient(180deg, rgba(34,47,104,.95), rgba(19,27,73,.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 12px rgba(77,95,210,.18);
  font-size: 23px;
  font-weight: 900;
}
.weight-stepper output {
  text-align: center;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 950;
}
.save-weight {
  grid-area: save;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 18px;
  border: 2px solid #ff77dd;
  background: linear-gradient(90deg, #ff28ba, #e850b8);
  box-shadow: 0 0 24px rgba(255,47,188,.34), inset 0 1px 0 rgba(255,255,255,.28);
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: .04em;
}
.save-weight svg { width: 25px; height: 25px; stroke-width: 3; }
.user-log.saved { animation: saved-pulse .58s ease both; }
.history-note {
  text-align:center;
  color:#7582af;
  font-size:11px;
  padding:5px 0 1px;
}

/* SETTINGS */
.settings-overlay {
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-top) + 14px) 14px calc(var(--safe-bottom) + 14px);
}
.settings-modal {
  width: min(100%, 420px);
  max-height: none;
  margin: auto;
  padding: 20px;
  border-radius: 28px;
  border: 2px solid #5b63ff;
  box-shadow: 0 0 32px rgba(74,82,255,.28), 0 20px 50px rgba(0,0,0,.5);
}
.settings-modal h2 {
  margin: 8px 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 36px;
}
.settings-modal p { color:#bec7e9; line-height:1.5; font-size:14px; }
.danger-button {
  width:100%;
  min-height:52px;
  border-radius:16px;
  border:1px solid rgba(255,91,118,.35);
  background:rgba(255,60,96,.12);
  color:#ff8ca0;
  font-weight:900;
  margin:8px 0 12px;
}
.settings-tip {
  display:grid;
  gap:5px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(17,25,72,.84);
}
.settings-tip strong { font-size:13px; }
.settings-tip span { font-size:12px; line-height:1.45; color:#aeb9df; }

/* INTERACTIONS */
.toast {
  position:fixed;
  z-index:100;
  left:50%;
  bottom:calc(18px + var(--safe-bottom));
  transform:translate(-50%,16px);
  opacity:0;
  pointer-events:none;
  padding:12px 16px;
  border-radius:999px;
  white-space:nowrap;
  background:rgba(7,12,39,.96);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 30px rgba(0,0,0,.38),0 0 18px rgba(255,61,184,.15);
  color:white;
  font-size:12px;
  font-weight:900;
  transition:.2s ease;
}
.toast.show { opacity:1; transform:translate(-50%,0); }
.modal-open { overflow:hidden; }
.paused *, .paused *::before, .paused *::after { animation-play-state:paused !important; }

button:focus-visible { outline:2px solid white; outline-offset:2px; }
.day-card:active,
.exercise-card:active,
.icon-button:active,
.floating-settings:active,
.wide-back:active,
.weight-stepper button:active,
.save-weight:active { transform:translateY(1px) scale(.985); }

@media (hover:hover) {
  .day-card:hover,
  .exercise-card:hover { transform:translateY(-2px) scale(1.005); filter:brightness(1.04); }
  .icon-button:hover,
  .floating-settings:hover,
  .wide-back:hover,
  .weight-stepper button:hover { filter:brightness(1.08); }
  .save-weight:hover { filter:brightness(1.08) saturate(1.08); }
}

@keyframes card-in {
  from { opacity:0; transform:translateY(12px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes sheen {
  0%,72%,100% { transform:translateX(0) skewX(-20deg); opacity:0; }
  76% { opacity:.12; }
  91% { transform:translateX(760%) skewX(-20deg); opacity:.55; }
  97% { opacity:0; }
}
@keyframes sparkle {
  0%,100% { opacity:.25; transform:scale(.45) rotate(45deg); }
  50% { opacity:1; transform:scale(1.2) rotate(45deg); }
}
@keyframes hero-drift {
  from { transform:scale(1.035) translate3d(0,0,0); }
  to { transform:scale(1.08) translate3d(0,-7px,0); }
}
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes sheet-in { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes saved-pulse {
  0% { transform:scale(1); }
  45% { transform:scale(1.012); box-shadow:0 0 0 2px rgba(255,255,255,.12),0 0 36px rgba(255,53,188,.42); }
  100% { transform:scale(1); }
}

@media (max-width: 390px) {
  .screen { padding-left:calc(11px + var(--safe-left)); padding-right:calc(11px + var(--safe-right)); }
  .home-hero { min-height:390px; }
  .day-card { grid-template-columns:66px 1fr 26px; min-height:99px; padding:11px 12px; }
  .day-icon { width:58px; height:58px; }
  .day-copy strong { font-size:31px; }
  .exercise-card { grid-template-columns:38px 60px 1fr 22px; min-height:105px; gap:8px; padding:9px 10px; }
  .exercise-muscle-icon { width:56px; height:56px; }
  .exercise-copy strong { font-size:21px; }
  .weight-stepper { grid-template-columns:37px 62px 37px; gap:5px; }
  .weight-stepper button { width:37px; height:37px; }
  .weight-stepper output { font-size:14px; }
}

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

/* =========================================================
   v4.1.0 — card composition polish
   Goal: match the mockup more closely without changing app logic.
   ========================================================= */

/* HOME DAY CARDS
   Use the artwork as a full-card, right-anchored layer so we show much
   more of the character instead of zooming into a narrow 55% crop. */
.day-card {
  min-height: 100px;
  grid-template-columns: 68px minmax(0, 1fr) 28px;
  gap: 12px;
  padding: 11px 13px;
}
.day-card-art {
  inset: 0;
  width: 100%;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--tone1) 96%, #081331 4%) 0%,
      color-mix(in srgb, var(--tone1) 94%, #081331 6%) 34%,
      color-mix(in srgb, var(--tone1) 70%, transparent) 49%,
      rgba(4, 9, 28, .10) 68%,
      rgba(4, 9, 28, 0) 100%
    ),
    var(--card-art) right center / auto 100% no-repeat;
  opacity: 1;
}
.day-icon {
  width: 62px;
  height: 62px;
  z-index: 3;
  background: rgba(8, 20, 58, .56);
  backdrop-filter: blur(4px);
}
.day-copy {
  position: relative;
  z-index: 4;
  align-self: center;
  max-width: 100%;
  min-width: 0;
  padding-right: 2px;
}
.day-copy small {
  font-size: 10px;
  margin-bottom: 2px;
}
.day-copy strong {
  font-size: clamp(23px, 6.2vw, 29px);
  line-height: .92;
  letter-spacing: -.015em;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  max-width: 220px;
}
.day-copy em {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .14em;
}
.day-arrow {
  z-index: 5;
  align-self: center;
  justify-self: end;
}

/* Give the home card text a dedicated readable gradient, while leaving
   the right half visibly image-led like the mockup. */
.day-card::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.04) 52%, transparent 78%),
    linear-gradient(115deg, rgba(255,255,255,.13), transparent 32%, transparent 70%, rgba(255,255,255,.08));
}

/* EXERCISE LIST CARDS
   Same principle: keep the whole exercise illustration visible on the
   right rather than magnifying a narrow crop. */
.exercise-card {
  min-height: 110px;
  grid-template-columns: 42px 66px minmax(0, 1fr) 26px;
  gap: 9px;
  padding: 10px 12px;
}
.exercise-art {
  inset: 0;
  width: 100%;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--tone1) 96%, #081331 4%) 0%,
      color-mix(in srgb, var(--tone1) 94%, #081331 6%) 38%,
      color-mix(in srgb, var(--tone1) 66%, transparent) 54%,
      rgba(4,9,28,.10) 72%,
      transparent 100%
    ),
    var(--exercise-art) right center / auto 100% no-repeat;
  opacity: 1;
}
.exercise-copy {
  max-width: 205px;
}
.exercise-copy strong {
  font-size: clamp(19px, 5.4vw, 27px);
  line-height: .96;
}
.exercise-copy small,
.exercise-copy em {
  font-size: 10px;
}
.exercise-arrow {
  justify-self: end;
}

/* HERO IMAGES
   Pull the crop back slightly. We preserve full-bleed framing but stop the
   CSS drift from zooming further into faces/bodies. */
.hero-art,
.day-hero-art,
.exercise-hero-art {
  animation-name: hero-drift-soft;
}
@keyframes hero-drift-soft {
  from { transform: scale(1.005) translate3d(0, 0, 0); }
  to   { transform: scale(1.025) translate3d(0, -3px, 0); }
}

/* On the home hero specifically, show more of the group vertically. */
.hero-art {
  background-position: center 38%;
  background-size: auto 104%;
  background-color: #09102b;
}

/* Small-screen guardrails: keep labels fully inside every card. */
@media (max-width: 390px) {
  .day-card {
    grid-template-columns: 58px minmax(0, 1fr) 24px;
    min-height: 94px;
    gap: 9px;
    padding: 9px 10px;
  }
  .day-icon { width: 54px; height: 54px; }
  .day-copy strong { font-size: clamp(21px, 6.3vw, 25px); max-width: 190px; }
  .day-copy em { font-size: 10px; }
  .exercise-card {
    grid-template-columns: 38px 56px minmax(0, 1fr) 22px;
    min-height: 104px;
    gap: 7px;
    padding: 9px 10px;
  }
  .exercise-muscle-icon { width: 54px; height: 54px; }
  .exercise-copy { max-width: 180px; }
  .exercise-copy strong { font-size: clamp(18px, 5.4vw, 23px); }
}