/* Elric Fit premium layer: welcome page, sign-up steps, plan card, Pro tools, and motion.
   Deep green #FF4D2E · gold #FF6A1A · warm off-white #FFFFFF. Transform/opacity only, so it stays 60fps on mid phones. */
:root { --e-spring: cubic-bezier(.34, 1.4, .64, 1); --e-green-2: #1E1E24; --e-green-3: #0B0B0D; }

/* ---------- welcome ---------- */
.w-screen { position: fixed; inset: 0; z-index: 95; overflow-y: auto; background: var(--e-bg); color: var(--e-text); }
.w-screen[hidden] { display: none; }
.w-hero { position: relative; overflow: hidden; color: #FFFFFF; background: radial-gradient(120% 70% at 85% 0%, rgba(255, 106, 26, .28), rgba(255, 106, 26, 0) 60%), linear-gradient(160deg, var(--e-green-2) 0%, #FF4D2E 45%, var(--e-green-3) 100%); border-radius: 0 0 32px 32px; }
.w-hero::after { content: ""; position: absolute; inset: auto -20% -40% auto; width: 80vw; max-width: 520px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 106, 26, .25); pointer-events: none; }
.w-hero__in { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; padding: calc(var(--e-safe-t) + 28px) 24px 40px; display: grid; gap: 22px; }
.w-brand { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 16px/1 var(--e-serif); letter-spacing: .3em; text-transform: uppercase; color: #FF6A1A; }
.w-brand img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.w-title { margin: 28px 0 0; display: grid; font: 600 clamp(46px, 13vw, 68px)/1 var(--e-serif); letter-spacing: -.01em; }
.w-title span:last-child { color: #FF6A1A; font-style: italic; }
.w-pitch { margin: 0; max-width: 32ch; font: 400 17px/1.55 var(--e-sans); color: rgba(255, 255, 255, .82); }
.w-ctas { display: grid; gap: 12px; margin-top: 6px; }
.w-btn { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px; border-radius: 16px; font: 600 16px/1 var(--e-sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; border: 1px solid transparent; -webkit-tap-highlight-color: transparent; }
.w-btn.is-gold { background: linear-gradient(180deg, #FF8A00, #FF6A1A 55%, #FF4D2E); color: #FFFFFF; box-shadow: 0 10px 28px rgba(255, 106, 26, .35), inset 0 1px 0 rgba(255, 255, 255, .4); }
.w-btn.is-line { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .35); color: #FFFFFF; }
.w-signin { justify-self: center; min-height: 44px; padding: 0 12px; border: 0; background: none; color: rgba(255, 255, 255, .8); font: 500 14px/1 var(--e-sans); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 106, 26, .7); cursor: pointer; }
.w-cards { max-width: 520px; margin: -4px auto 0; padding: 24px 20px 8px; display: grid; gap: 12px; }
.w-card { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: start; padding: 18px; border-radius: 20px; background: var(--e-surface); border: 1px solid var(--e-line); box-shadow: var(--e-shadow); }
.w-card h2 { margin: 0; font: 600 22px/1.2 var(--e-serif); color: var(--e-text); }
.w-card p { grid-column: 2; margin: 4px 0 0; font: 400 14px/1.5 var(--e-sans); color: var(--e-muted); }
.w-ico { grid-row: span 2; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 77, 46, .07); color: var(--e-primary); }
.w-ico svg { width: 24px; height: 24px; }
.w-more { max-width: 520px; margin: 8px auto 0; text-align: center; }
.w-more a { display: inline-flex; min-height: 44px; align-items: center; font: 600 15px/1 var(--e-sans); color: var(--e-primary); text-decoration: none; border-bottom: 1px solid var(--e-gold); }
.w-foot { padding: 16px 20px calc(var(--e-safe-b) + 24px); }

/* ---------- sign-up steps ---------- */
.g-steps { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.g-steps ol { display: none; margin: 0; padding: 0; list-style: none; gap: 6px; flex: 1; }
.g-steps.is-up ol { display: flex; }
.g-steps li { flex: 1; height: 4px; border-radius: 99px; background: var(--e-line); overflow: hidden; position: relative; }
.g-steps li::after { content: ""; position: absolute; inset: 0; background: var(--e-gold); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--e-ease); }
.g-steps li.is-on::after { transform: scaleX(1); }
.g-steps span { display: none; font: 500 12px/1 var(--e-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--e-muted); white-space: nowrap; }
.g-steps.is-up span { display: inline; }
.g-steps.is-static { width: 100%; }
.g-back { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--e-line); border-radius: 50%; background: var(--e-surface); color: var(--e-primary); cursor: pointer; flex: none; }
.g-back svg { width: 20px; height: 20px; }
.g-wrap { align-content: start; }
.g-head h1 { font-size: 34px; }
.g-code, #gym-code { font: 600 18px/1.2 "Geist Mono", ui-monospace, monospace !important; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
#l-gym[hidden] { display: none; }

/* ---------- avatar + profile ---------- */
.x-avatar { background: var(--e-primary) !important; color: #FFFFFF !important; width: 40px !important; height: 40px !important; margin-left: 4px; box-shadow: 0 0 0 2px var(--e-bg), 0 0 0 3px var(--e-gold); }
.x-avatar svg { width: 20px !important; height: 20px !important; }
.x-avatar[aria-pressed="true"] { background: var(--e-gold) !important; color: #FFFFFF !important; }
[data-theme="dark"] .x-avatar { color: var(--e-on) !important; }
.x-owner { margin: 0; text-align: center; }
.x-owner a { display: inline-flex; min-height: 44px; align-items: center; font: 500 14px/1 var(--e-sans); color: var(--e-primary); text-decoration: none; border-bottom: 1px solid var(--e-gold); }
#v-prof .g-foot { padding-top: 0; }

/* ---------- plan card on Today ---------- */
.x-plantop { padding: 14px 16px; gap: 12px; background: linear-gradient(135deg, var(--e-surface), var(--e-surface)); border-color: var(--e-gold-line); }
.x-plantop.is-pro { background: linear-gradient(135deg, #1E1E24, #FF4D2E 60%, #FFFFFF); border-color: transparent; }
.x-plantop.is-pro b, .x-plantop.is-pro small { color: #FFFFFF !important; }
.x-plantop.is-pro small { opacity: .75; }
.x-plantop__main { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.x-plantop__main b { display: block; font: 600 16px/1.3 var(--e-sans); color: var(--e-text); }
.x-plantop__main small { display: block; font: 400 13px/1.4 var(--e-sans); color: var(--e-muted); }
.x-plantop__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--e-gold); box-shadow: 0 0 0 4px rgba(255, 106, 26, .2); }
.x-plantop.is-off .x-plantop__dot { background: var(--e-danger); box-shadow: 0 0 0 4px rgba(239, 68, 68, .15); }
.x-plantop__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.x-plantop__btns .x-big { flex: 1 1 auto; }
.x-plantop.is-skel { height: 72px; align-content: center; }

/* ---------- skeleton loaders ---------- */
.is-skel i, .g-skel i { display: block; height: 12px; border-radius: 8px; background: linear-gradient(90deg, var(--e-line) 25%, rgba(255, 106, 26, .18) 50%, var(--e-line) 75%); background-size: 200% 100%; }
.is-skel i:first-child { width: 60%; height: 14px; } .is-skel i:last-child { width: 40%; }
.g-boot { align-content: center; gap: 36px; }
.g-skel { width: min(360px, 82vw); display: grid; gap: 14px; }
.g-skel i { height: 64px; border-radius: 18px; }
.g-skel i:nth-child(2) { height: 120px; } .g-skel i:nth-child(3) { width: 70%; }

/* ---------- smart coach ---------- */
.x-coach { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 106, 26, .1); border: 1px solid var(--e-gold-line); }
.x-coach > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.x-coach .x-label { margin: 0; color: var(--e-gold); }
.x-coach b { font: 600 18px/1.2 var(--e-sans); color: var(--e-text); }
.x-coach small { font: 400 12px/1.4 var(--e-sans); color: var(--e-muted); }
.x-coach__ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--e-primary); color: #FFFFFF; font: 600 18px/1 var(--e-sans); }
.x-coach.is-down .x-coach__ic { background: var(--e-danger); }
.x-coach.is-hold .x-coach__ic { background: var(--e-gold); color: #FFFFFF; }
.x-coach .x-big.is-sm { min-height: 40px; }
.x-coach.is-locked { width: 100%; cursor: pointer; font: 500 13px/1.3 var(--e-sans); color: var(--e-muted); text-align: left; }
.x-coach.is-locked span { flex: 1; }
.x-coach.is-locked em { font-style: normal; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--e-gold); color: var(--e-text); font-size: 11px; letter-spacing: .08em; }
.x-coach.is-locked svg { color: var(--e-gold); flex: none; }

/* ---------- tools ---------- */
.x-tools .x-big span { font-size: 16px; }
.x-pcout { display: grid; gap: 12px; justify-items: center; text-align: center; }
.x-barbell { position: relative; width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; gap: clamp(56px, 26vw, 120px); overflow: hidden; }
.x-bb-bar { position: absolute; left: 4%; right: 4%; top: 50%; height: 10px; margin-top: -5px; border-radius: 5px; background: linear-gradient(180deg, #D8DDDB, #8E9693); }
.x-bb-bar::before { content: ""; position: absolute; left: 50%; top: -4px; width: 100px; height: 18px; margin-left: -50px; border-radius: 4px; background: repeating-linear-gradient(90deg, #A5ADAA 0 2px, #C7CDCB 2px 4px); }
.x-bb-side { position: relative; display: flex; align-items: center; gap: 2px; }
.x-bb-side.is-l { flex-direction: row-reverse; }
.x-plate { display: block; flex: none; width: 14px; height: var(--h); border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 2px 6px rgba(0, 0, 0, .15); }
.x-ormbig { display: grid; justify-items: center; gap: 4px; padding: 8px 0 4px; }
.x-ormbig b { font: 600 64px/1 var(--e-serif); color: var(--e-primary); }
.x-ormbig span { font: 500 12px/1.4 var(--e-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--e-muted); }

/* ---------- fasting ---------- */
.x-fring { position: relative; width: 190px; height: 190px; justify-self: center; }
.x-fring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.x-fring circle { fill: none; stroke-width: 9; }
.x-fring .bg { stroke: var(--e-line); }
.x-fring .fg { stroke: var(--e-primary); stroke-linecap: round; transition: stroke-dashoffset 900ms var(--e-ease); }
.x-fast.is-on .x-fring .fg { stroke: var(--e-gold); }
.x-fring b { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; font-weight: 400; }
.x-fring b span { font: 600 36px/1 var(--e-serif); color: var(--e-text); font-variant-numeric: tabular-nums; }
.x-fring b small { font: 500 11px/1.4 var(--e-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--e-muted); }
.x-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.x-four .x-input { min-height: 52px; text-align: center; padding: 0 6px; }
.x-center { text-align: center; margin: 0; }

/* ---------- badges ---------- */
.x-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
.x-badges li { display: grid; justify-items: center; gap: 4px; text-align: center; filter: grayscale(1); opacity: .45; }
.x-badges li.is-on { filter: none; opacity: 1; }
.x-badges b { font: 600 12px/1.3 var(--e-sans); color: var(--e-text); }
.x-badges small { font: 400 11px/1.3 var(--e-sans); color: var(--e-muted); }
.x-medal { position: relative; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #FFC48A, #FF6A1A 45%, #C2410C); box-shadow: 0 10px 30px rgba(255, 106, 26, .45), inset 0 -4px 10px rgba(0, 0, 0, .2), inset 0 0 0 4px rgba(255, 255, 255, .25); }
.x-medal span { font-size: 44px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.x-medal.is-sm { width: 56px; height: 56px; box-shadow: 0 4px 12px rgba(255, 106, 26, .35), inset 0 -3px 6px rgba(0, 0, 0, .2); }
.x-medal.is-sm span { font-size: 26px; }
.x-unlock { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 240ms ease; }
.x-unlock.is-on { opacity: 1; }
.x-unlock__card { width: min(340px, 100%); display: grid; justify-items: center; gap: 10px; padding: 28px 24px 20px; border-radius: 28px; background: var(--e-surface); text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.x-unlock__card h2 { margin: 0; font: 600 28px/1.15 var(--e-serif); color: var(--e-text); }
.x-unlock__card .x-note { margin: 0 0 8px; }

/* ---------- monthly report + share ---------- */
.x-grade { display: flex; align-items: center; gap: 16px; }
.x-grade b { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 18px; font: 600 40px/1 var(--e-serif); background: var(--e-wash); color: var(--e-primary); }
.x-grade b.is-A { background: linear-gradient(135deg, #FF8A00, #FF4D2E); color: #FFFFFF; }
.x-grade b.is-B { background: var(--e-primary); color: #FFFFFF; }
.x-grade p { margin: 0; display: grid; gap: 2px; }
.x-grade strong { font: 600 16px/1.3 var(--e-sans); }
.x-grade small { font: 400 12px/1.4 var(--e-sans); color: var(--e-muted); }
.x-shprev { justify-self: center; width: 100%; display: grid; place-items: center; }
.x-shprev img { display: block; border-radius: 18px; box-shadow: 0 16px 40px rgba(255, 77, 46, .25); max-width: 100%; }
.x-shprev.is-story img { max-height: 52dvh; width: auto; }
.x-shprev.is-square img { width: min(320px, 100%); }

/* ---------- success tick ---------- */
.x-done { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; pointer-events: none; background: rgba(255, 255, 255, 0); transition: background 220ms ease; }
.x-done[hidden] { display: none; }
.x-done.is-on { background: rgba(255, 255, 255, .72); }
[data-theme="dark"] .x-done.is-on { background: rgba(11, 11, 13, .72); }
.x-done > div { display: grid; justify-items: center; gap: 14px; opacity: 0; transform: scale(.8); transition: opacity 220ms ease, transform 420ms var(--e-spring); }
.x-done.is-on > div { opacity: 1; transform: none; }
.x-done svg { width: 96px; height: 96px; }
.x-done circle { fill: var(--e-primary); stroke: var(--e-gold); stroke-width: 2; }
.x-done path { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.x-done.is-on path { animation: x-draw-ok 420ms 180ms var(--e-ease) forwards; }
.x-done p { margin: 0; font: 600 22px/1.2 var(--e-serif); color: var(--e-text); text-align: center; padding: 0 24px; }
@keyframes x-draw-ok { to { stroke-dashoffset: 0; } }

/* ---------- motion (only when the user allows it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .w-screen.is-in .w-brand, .w-screen.is-in .w-title span, .w-screen.is-in .w-pitch, .w-screen.is-in .w-ctas > *, .w-screen.is-in .w-signin, .w-screen.is-in .w-card, .w-screen.is-in .w-more { animation: x-rise 700ms var(--e-ease) backwards; }
  .w-screen.is-in .w-title span:nth-child(1) { animation-delay: 80ms; }
  .w-screen.is-in .w-title span:nth-child(2) { animation-delay: 180ms; }
  .w-screen.is-in .w-pitch { animation-delay: 280ms; }
  .w-screen.is-in .w-ctas > :nth-child(1) { animation-delay: 360ms; }
  .w-screen.is-in .w-ctas > :nth-child(2) { animation-delay: 420ms; }
  .w-screen.is-in .w-signin { animation-delay: 480ms; }
  .w-screen.is-in .w-card:nth-child(1) { animation-delay: 520ms; }
  .w-screen.is-in .w-card:nth-child(2) { animation-delay: 600ms; }
  .w-screen.is-in .w-card:nth-child(3) { animation-delay: 680ms; }
  .w-screen.is-in .w-more { animation-delay: 760ms; }
  .w-btn.is-gold { background-size: 100% 100%; position: relative; overflow: hidden; }
  .w-btn.is-gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: x-shine 3.2s 1.2s ease-in-out infinite; }
  .w-btn, .w-signin, .g-back, .x-plantop__main, .x-coach.is-locked, .x-glass { transition: transform 140ms var(--e-ease), background-color 160ms ease; }
  .w-btn:active, .g-back:active, .x-plantop__main:active, .x-coach.is-locked:active, .x-glass:active { transform: scale(.96); }
  #login.is-in .g-wrap > * { animation: x-rise 520ms var(--e-ease) backwards; }
  #login.is-in .g-wrap > :nth-child(2) { animation-delay: 60ms; }
  #login.is-in .g-wrap > :nth-child(3) { animation-delay: 120ms; }
  #login.is-in .g-wrap > :nth-child(4) { animation-delay: 180ms; }
  .g-form:not([hidden]) { animation: x-fade-slide 360ms var(--e-ease); }

  /* tabs: slide in the direction you moved, cards stagger in */
  .x-enter-r { animation-name: x-from-r !important; }
  .x-enter-l { animation-name: x-from-l !important; }
  .x-enter > * { animation: x-rise 460ms var(--e-ease) backwards; }
  .x-enter > :nth-child(2) { animation-delay: 50ms; }
  .x-enter > :nth-child(3) { animation-delay: 100ms; }
  .x-enter > :nth-child(4) { animation-delay: 150ms; }
  .x-enter > :nth-child(5) { animation-delay: 200ms; }
  .x-enter > :nth-child(6) { animation-delay: 240ms; }
  .x-enter > :nth-child(n+7) { animation-delay: 280ms; }

  /* sheets: spring up */
  .x-sheet { transition: transform 460ms var(--e-spring), opacity 260ms ease !important; }
  .x-sheet.is-open > * { animation: x-rise 420ms var(--e-ease) backwards; }
  .x-sheet.is-open > :nth-child(2) { animation-delay: 40ms; }
  .x-sheet.is-open > :nth-child(3) { animation-delay: 80ms; }
  .x-sheet.is-open > :nth-child(n+4) { animation-delay: 120ms; }

  .is-skel i, .g-skel i { animation: x-shimmer 1.3s linear infinite; }
  .x-plantop.is-pro .x-plantop__dot, .x-plantop__dot { animation: x-pulse 2.4s ease-in-out infinite; }
  .x-plate { animation: x-plate 420ms var(--e-spring) backwards; animation-delay: var(--d); }
  .x-enter .x-badges li { animation: x-pop-in 480ms var(--e-spring) backwards; animation-delay: calc(var(--i) * 35ms); }
  .x-unlock .x-medal { animation: x-medal 900ms var(--e-spring) both; }
  .x-unlock .x-medal::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid #FF6A1A; animation: x-ring-out 1.2s 300ms ease-out both; }
  .x-unlock__card { animation: x-rise 420ms var(--e-ease) backwards; }
  .x-fast.is-on .x-fring { animation: x-breathe 4s ease-in-out infinite; }
  .x-enter .x-grade b { animation: x-pop-in 600ms 150ms var(--e-spring) backwards; }
  .g-steps li::after { transition-delay: 120ms; }
}
@keyframes x-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes x-fade-slide { from { opacity: 0; transform: translateX(18px); } }
@keyframes x-from-r { from { opacity: 0; transform: translateX(24px); } }
@keyframes x-from-l { from { opacity: 0; transform: translateX(-24px); } }
@keyframes x-shine { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
@keyframes x-shimmer { to { background-position: -200% 0; } }
@keyframes x-pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 106, 26, 0); } }
@keyframes x-plate { from { opacity: 0; transform: scaleY(.3); } }
@keyframes x-pop-in { from { opacity: 0; transform: scale(.6); } }
@keyframes x-medal { 0% { opacity: 0; transform: scale(.2) rotate(-30deg); } 60% { opacity: 1; transform: scale(1.12) rotate(6deg); } 100% { transform: none; } }
@keyframes x-ring-out { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(1.5); } }
@keyframes x-breathe { 50% { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .x-done > div, .x-unlock, .x-fring .fg, .g-steps li::after { transition: none; } .x-done.is-on path { animation: none; stroke-dashoffset: 0; } }

/* desktop: stay a centred phone-width app */
@media (min-width: 720px) { .w-hero { border-radius: 0 0 40px 40px; } .w-cards { grid-template-columns: repeat(3, 1fr); max-width: 900px; } .w-card { grid-template-columns: 1fr; } .w-card p { grid-column: 1; } .w-ico { grid-row: auto; margin-bottom: 10px; } }