/* ═══════════════════════════════════════════
   FITPRO — Mobile Fitness App UI
   Reworked: Modern · Creative · Animated
   ═══════════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
button { cursor:pointer; border:none; background:none; font:inherit; color:inherit; }
input  { font:inherit; }
a      { color:inherit; text-decoration:none; }

/* ─────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────── */
:root {
  --bg:         #06080D;
  --surface:    #0F1118;
  --card:       #181A24;
  --card-2:     #1E2132;
  --border:     rgba(255,255,255,0.08);
  --border-2:   rgba(255,255,255,0.04);

  --green:      #4ADE80;
  --green-dim:  rgba(74,222,128,0.12);
  --green-glow: rgba(74,222,128,0.4);
  --orange:     #FB923C;
  --orange-dim: rgba(251,146,60,0.12);
  --blue:       #60A5FA;
  --blue-dim:   rgba(96,165,250,0.12);
  --purple:     #A78BFA;
  --purple-dim: rgba(167,139,250,0.12);
  --red:        #F87171;

  --text:   #FFFFFF;
  --text-2: rgba(255,255,255,0.55);
  --text-3: rgba(255,255,255,0.28);

  --r-lg:  22px;
  --r-md:  14px;
  --r-sm:  10px;
  --r-xs:  7px;
  --r-pill:999px;

  --ease:  cubic-bezier(0.22,1,0.36,1);
  --ease2: cubic-bezier(0.16,1,0.3,1);
  --ease3: cubic-bezier(0.34,1.56,0.64,1);

  --nav-h: 72px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

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


/* ═══════════════════════════════════════════
   SHOWCASE PAGE
═══════════════════════════════════════════ */
html, body {
  min-height:100%;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.showcase {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:64px;
  padding:48px 32px;
  position:relative;
  overflow:hidden;
}

/* ── Ambient background ── */
.showcase-bg {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.s-blob {
  position:absolute;
  border-radius:50%;
  filter:blur(110px);
}
.s-blob-1 {
  width:700px; height:700px;
  background:radial-gradient(circle, rgba(74,222,128,0.20) 0%, transparent 70%);
  top:-250px; left:-150px;
  animation:blob-drift-1 18s ease-in-out infinite;
}
.s-blob-2 {
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(96,165,250,0.16) 0%, transparent 70%);
  bottom:-180px; right:-80px;
  animation:blob-drift-2 22s ease-in-out infinite;
}
.s-blob-3 {
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(167,139,250,0.14) 0%, transparent 70%);
  top:40%; left:40%;
  transform:translate(-50%,-50%);
  animation:blob-drift-3 26s ease-in-out infinite;
}

@keyframes blob-drift-1 {
  0%,100% { transform:translate(0,0) scale(1); }
  33%     { transform:translate(60px,40px) scale(1.1); }
  66%     { transform:translate(-30px,60px) scale(0.95); }
}
@keyframes blob-drift-2 {
  0%,100% { transform:translate(0,0) scale(1); }
  40%     { transform:translate(-50px,-30px) scale(1.12); }
  70%     { transform:translate(40px,-50px) scale(0.93); }
}
@keyframes blob-drift-3 {
  0%,100% { transform:translate(-50%,-50%) scale(1); }
  30%     { transform:translate(calc(-50% + 40px),calc(-50% - 60px)) scale(1.14); }
  60%     { transform:translate(calc(-50% - 60px),calc(-50% + 40px)) scale(0.9); }
}

/* ── Showcase info panel ── */
.showcase-info {
  position:relative;
  z-index:2;
  max-width:340px;
  flex-shrink:0;
  animation:si-enter 0.9s 0.1s var(--ease) both;
}

@keyframes si-enter {
  from { opacity:0; transform:translateX(-28px); }
  to   { opacity:1; transform:translateX(0); }
}

.si-chip {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 13px;
  border-radius:var(--r-pill);
  border:1px solid rgba(74,222,128,0.35);
  color:var(--green);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:18px;
  background:rgba(74,222,128,0.07);
}
.si-chip::before {
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 6px var(--green);
  animation:chip-dot 2s ease-in-out infinite;
}
@keyframes chip-dot {
  0%,100% { opacity:1; }
  50%     { opacity:0.35; }
}

.si-title {
  font-size:54px;
  font-weight:900;
  letter-spacing:-0.04em;
  line-height:1;
  margin-bottom:18px;
  background:linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.5) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.si-desc {
  font-size:14px;
  line-height:1.7;
  color:var(--text-2);
  margin-bottom:28px;
}

.si-screens-label {
  font-size:11px;
  font-weight:600;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:10px;
}

.si-pills {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:28px;
}

.si-pill {
  padding:7px 15px;
  border-radius:var(--r-pill);
  font-size:12px;
  font-weight:500;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-2);
  transition:all 0.25s var(--ease);
}
.si-pill:hover {
  border-color:rgba(74,222,128,0.4);
  color:var(--green);
  background:var(--green-dim);
  transform:translateY(-1px);
}
.si-pill.active {
  background:var(--green-dim);
  border-color:rgba(74,222,128,0.5);
  color:var(--green);
  box-shadow:0 0 12px rgba(74,222,128,0.12);
}

.si-stack { display:flex; flex-wrap:wrap; gap:7px; }
.si-tag {
  padding:5px 11px;
  border-radius:var(--r-xs);
  background:var(--card);
  border:1px solid var(--border);
  font-size:11px;
  font-weight:500;
  color:var(--text-3);
}


/* ═══════════════════════════════════════════
   PHONE FRAME
═══════════════════════════════════════════ */
.phone {
  position:relative;
  z-index:2;
  flex-shrink:0;
  animation:phone-enter 0.9s 0.15s var(--ease) both;
}

@keyframes phone-enter {
  from { opacity:0; transform:translateY(24px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.phone-shell {
  position:relative;
  width:375px;
  height:780px;
  background:linear-gradient(160deg, #1C1E28 0%, #121419 60%, #0D0F15 100%);
  border-radius:52px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.13),
    0 0 0 2.5px rgba(0,0,0,0.65),
    0 40px 100px rgba(0,0,0,0.8),
    0 0 80px rgba(74,222,128,0.10),
    0 0 160px rgba(96,165,250,0.05);
  overflow:hidden;
  animation:phone-glow-cycle 9s ease-in-out infinite;
}

@keyframes phone-glow-cycle {
  0%,100% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.13),
      0 0 0 2.5px rgba(0,0,0,0.65),
      0 40px 100px rgba(0,0,0,0.8),
      0 0 80px rgba(74,222,128,0.10),
      0 0 160px rgba(96,165,250,0.05);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.15),
      0 0 0 2.5px rgba(0,0,0,0.65),
      0 40px 100px rgba(0,0,0,0.8),
      0 0 100px rgba(74,222,128,0.16),
      0 0 200px rgba(167,139,250,0.07);
  }
}

.phone-btn {
  position:absolute;
  background:#1A1C26;
  border-radius:3px;
  box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.06);
}
.phone-btn--vol-up  { left:-3px; top:130px; width:3px; height:36px; }
.phone-btn--vol-dn  { left:-3px; top:178px; width:3px; height:36px; }
.phone-btn--power   { right:-3px; top:154px; width:3px; height:54px; }

.phone-screen-wrap {
  position:absolute;
  inset:4px;
  border-radius:49px;
  overflow:hidden;
  background:var(--bg);
}

/* Subtle top screen glow */
.phone-screen-wrap::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:100px;
  background:radial-gradient(ellipse at 50% -10%, rgba(74,222,128,0.07) 0%, transparent 70%);
  z-index:200;
  pointer-events:none;
}

.dynamic-island {
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:120px;
  height:34px;
  background:#000;
  border-radius:20px;
  z-index:100;
  box-shadow:0 0 0 1px rgba(255,255,255,0.05);
}


/* ═══════════════════════════════════════════
   APP + SCREENS
═══════════════════════════════════════════ */
.app {
  position:absolute;
  inset:0;
  overflow:hidden;
}

.screen {
  position:absolute;
  inset:0;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:translateX(100%);
  opacity:0;
  transition:
    transform 0.36s var(--ease),
    opacity 0.22s ease;
  will-change:transform, opacity;
}
.screen.active {
  transform:translateX(0);
  opacity:1;
}
.screen.slide-out {
  transform:translateX(-30%) scale(0.96);
  opacity:0;
  transition:
    transform 0.36s var(--ease),
    opacity 0.20s ease;
}

.screen--has-nav { padding-bottom:var(--nav-h); }
.nav-spacer { height:12px; flex-shrink:0; }

/* ── Status Bar ── */
.status-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:54px 24px 8px;
  flex-shrink:0;
}
.sb-time { font-size:15px; font-weight:700; letter-spacing:-0.02em; }
.sb-icons { display:flex; align-items:center; gap:6px; }


/* ═══════════════════════════════════════════
   SCREEN 1 — ONBOARDING WELCOME
═══════════════════════════════════════════ */
#s-onboard1 {
  background:linear-gradient(160deg, #0B0E17 0%, #06080D 55%, #0A0C14 100%);
  justify-content:space-between;
}

.ob-bg {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.ob-ring {
  position:absolute;
  border-radius:50%;
  animation:ob-pulse 4.5s ease-in-out infinite;
}
.ob-r1 {
  width:320px; height:320px;
  top:-70px; left:-70px;
  border:1px solid rgba(74,222,128,0.18);
  animation-delay:0s;
}
.ob-r2 {
  width:530px; height:530px;
  top:-165px; left:-165px;
  border:1px solid rgba(74,222,128,0.08);
  animation-delay:0.9s;
}
.ob-r3 {
  width:740px; height:740px;
  top:-260px; left:-260px;
  border:1px solid rgba(74,222,128,0.04);
  animation-delay:1.8s;
}

.ob-glow {
  position:absolute;
  width:340px; height:340px;
  top:-100px; left:-60px;
  background:radial-gradient(circle, rgba(74,222,128,0.20) 0%, transparent 65%);
  border-radius:50%;
  animation:ob-glow-pulse 5s ease-in-out infinite;
}
@keyframes ob-glow-pulse {
  0%,100% { opacity:0.65; transform:scale(1); }
  50%     { opacity:1; transform:scale(1.12); }
}

/* Floating particles */
.ob-particle {
  position:absolute;
  border-radius:50%;
  animation:particle-float linear infinite;
  opacity:0;
}
.ob-p1 { left:22%; top:72%; width:4px; height:4px; background:var(--green); animation-duration:8s; animation-delay:0s; }
.ob-p2 { left:76%; top:60%; width:3px; height:3px; background:var(--green); animation-duration:11s; animation-delay:2s; }
.ob-p3 { left:46%; top:82%; width:2px; height:2px; background:rgba(74,222,128,0.7); animation-duration:9s; animation-delay:1s; }
.ob-p4 { left:86%; top:47%; width:3px; height:3px; background:var(--blue); animation-duration:13s; animation-delay:0.5s; }
.ob-p5 { left:12%; top:55%; width:2px; height:2px; background:var(--purple); animation-duration:7s; animation-delay:3s; }

@keyframes particle-float {
  0%   { opacity:0; transform:translateY(20px) scale(0); }
  12%  { opacity:0.7; transform:translateY(0) scale(1); }
  88%  { opacity:0.4; transform:translateY(-70px) scale(0.8); }
  100% { opacity:0; transform:translateY(-90px) scale(0); }
}

@keyframes ob-pulse {
  0%,100% { transform:scale(1); opacity:1; }
  50%     { transform:scale(1.05); opacity:0.55; }
}

.ob-body {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  padding:64px 28px 20px;
  flex:1;
}

.ob-brand {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
}
.ob-brand-icon { display:flex; }
.ob-brand-name { font-size:20px; font-weight:800; letter-spacing:-0.03em; }

.ob-hero {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ob-hero-svg {
  width:100%;
  max-width:280px;
  animation:hero-float 3.5s ease-in-out infinite;
  filter:drop-shadow(0 20px 48px rgba(74,222,128,0.18));
}
@keyframes hero-float {
  0%,100% { transform:translateY(0) rotate(0deg); }
  35%     { transform:translateY(-10px) rotate(0.6deg); }
  70%     { transform:translateY(-4px) rotate(-0.5deg); }
}

.ob-text { margin-bottom:8px; }
.ob-heading {
  font-size:35px;
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:1.1;
  margin-bottom:12px;
}

.text-accent {
  background:linear-gradient(90deg, #4ADE80 0%, #22d3ee 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.ob-subtext {
  font-size:14px;
  line-height:1.65;
  color:var(--text-2);
}

.ob-footer {
  position:relative;
  z-index:1;
  padding:16px 28px 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.ob-dots {
  display:flex;
  gap:6px;
  margin-bottom:4px;
}
.ob-dot {
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.18);
  transition:all 0.35s var(--ease3);
}
.ob-dot.active {
  width:22px;
  border-radius:3px;
  background:var(--green);
  box-shadow:0 0 12px var(--green-glow);
}


/* ═══════════════════════════════════════════
   SHARED BUTTONS
═══════════════════════════════════════════ */
.btn-primary {
  width:100%;
  padding:16px;
  border-radius:var(--r-lg);
  background:linear-gradient(145deg, #4ADE80 0%, #22c55e 55%, #16a34a 100%);
  color:#06080D;
  font-size:15px;
  font-weight:700;
  letter-spacing:-0.01em;
  transition:all 0.25s var(--ease);
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(74,222,128,0.3), 0 2px 8px rgba(0,0,0,0.2);
}
.btn-primary::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(158deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.08) 100%);
  border-radius:inherit;
  pointer-events:none;
}
.btn-primary::after {
  content:'';
  position:absolute;
  top:0; bottom:0;
  left:-130%; width:70%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
  transform:skewX(-20deg);
  animation:btn-shimmer 3.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes btn-shimmer {
  0%   { left:-130%; }
  55%, 100% { left:230%; }
}
.btn-primary:hover {
  filter:brightness(1.1);
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(74,222,128,0.42), 0 4px 12px rgba(0,0,0,0.3);
}
.btn-primary:active {
  transform:scale(0.975) translateY(0);
  box-shadow:0 4px 14px rgba(74,222,128,0.22);
}
.btn-primary.btn-disabled {
  background:rgba(255,255,255,0.07);
  color:var(--text-3);
  pointer-events:none;
  box-shadow:none;
}
.btn-primary.btn-disabled::before,
.btn-primary.btn-disabled::after { display:none; }

.btn-text {
  font-size:13px;
  color:var(--text-2);
  background:none;
  padding:4px;
}
.btn-text strong { color:var(--green); }
.btn-text:hover strong { text-decoration:underline; }

.btn-back {
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all 0.22s var(--ease);
}
.btn-back:hover {
  background:rgba(255,255,255,0.11);
  transform:translateX(-1px);
}
.btn-back:active { transform:scale(0.9); }


/* ═══════════════════════════════════════════
   SCREEN 2 — GOAL SELECTION
═══════════════════════════════════════════ */
#s-onboard2 { display:flex; flex-direction:column; }

.screen-top-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:56px 20px 16px;
  flex-shrink:0;
}

.screen-scroll {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:8px 20px 0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.screen-scroll::-webkit-scrollbar { display:none; }

.screen-title {
  font-size:29px;
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:1.15;
  margin-bottom:8px;
}
.screen-sub {
  font-size:13px;
  color:var(--text-2);
  margin-bottom:24px;
  line-height:1.55;
}
.screen-footer {
  padding:16px 20px 32px;
  flex-shrink:0;
}

/* Goal cards */
.goal-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.goal-card {
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:var(--r-md);
  background:var(--card);
  border:1.5px solid var(--border);
  cursor:pointer;
  transition:all 0.25s var(--ease);
  -webkit-tap-highlight-color:transparent;
  position:relative;
  overflow:hidden;
}
.goal-card:hover {
  border-color:rgba(74,222,128,0.28);
  background:var(--card-2);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
}
.goal-card.selected {
  border-color:var(--green);
  background:rgba(74,222,128,0.07);
  box-shadow:0 0 0 1px rgba(74,222,128,0.2), 0 8px 24px rgba(74,222,128,0.1);
}

.goal-icon-box {
  width:46px; height:46px;
  border-radius:var(--r-sm);
  background:var(--gb);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:transform 0.3s var(--ease3);
}
.goal-card.selected .goal-icon-box { transform:scale(1.1); }
.goal-card:hover .goal-icon-box { transform:scale(1.06); }

.goal-text {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.goal-name { font-size:14px; font-weight:700; }
.goal-desc { font-size:12px; color:var(--text-2); }

.goal-radio {
  width:20px; height:20px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all 0.25s var(--ease3);
}
.goal-card.selected .goal-radio {
  border-color:var(--green);
  background:var(--green);
  box-shadow:0 0 0 3px rgba(74,222,128,0.2);
}
.goal-card.selected .goal-radio::after {
  content:'';
  width:8px; height:8px;
  border-radius:50%;
  background:#06080D;
}


/* ═══════════════════════════════════════════
   SCREEN 3 — HOME
═══════════════════════════════════════════ */
.home-content {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.home-content::-webkit-scrollbar { display:none; }

.home-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 20px 16px;
}
.greeting-sub { font-size:13px; color:var(--text-2); margin-bottom:2px; }
.greeting-name { font-size:23px; font-weight:800; letter-spacing:-0.02em; }

.wave {
  display:inline-block;
  animation:wave 2.8s ease-in-out infinite;
  transform-origin:70% 70%;
}
@keyframes wave {
  0%,60%,100% { transform:rotate(0deg); }
  10%,30% { transform:rotate(18deg); }
  20%     { transform:rotate(-10deg); }
  40%     { transform:rotate(14deg); }
  50%     { transform:rotate(-4deg); }
}

.avatar-btn { position:relative; padding:0; }
.avatar {
  width:42px; height:42px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--green) 0%, #22d3ee 100%);
  color:#06080D;
  font-size:15px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 2px rgba(74,222,128,0.3), 0 4px 12px rgba(74,222,128,0.2);
  transition:transform 0.22s var(--ease3);
}
.avatar-btn:hover .avatar { transform:scale(1.06); }

.avatar-notif {
  position:absolute;
  top:0; right:0;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--orange);
  border:2px solid var(--bg);
  animation:notif-pulse 2.2s ease-in-out infinite;
}
@keyframes notif-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(251,146,60,0.55); }
  50%     { box-shadow:0 0 0 4px rgba(251,146,60,0); }
}

/* Activity rings card */
.rings-card {
  margin:0 16px 16px;
  padding:18px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.02) 100%);
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  overflow:hidden;
}
.rings-card::before {
  content:'';
  position:absolute;
  top:-1px; left:-1px; right:-1px;
  height:55%;
  background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
  border-radius:inherit;
  pointer-events:none;
}
.rings-card-left { flex:1; }
.rings-title { font-size:15px; font-weight:700; margin-bottom:10px; }
.rings-legend { display:flex; flex-direction:column; gap:5px; margin-bottom:8px; }
.rl-item { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-2); }
.rl-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.rings-sub { font-size:11px; color:var(--text-3); }
.rings-visual { flex-shrink:0; }

/* Ring SVG draw animation */
.ring-arc {
  transition:stroke-dashoffset 1.2s var(--ease2);
}
.ring-arc.ring-animate {
  animation:none;
}

/* Quick stats chips */
.quick-stats {
  display:flex;
  gap:8px;
  padding:0 16px 16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.quick-stats::-webkit-scrollbar { display:none; }
.qs-chip {
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  border-radius:var(--r-pill);
  background:var(--card);
  border:1px solid var(--border);
  white-space:nowrap;
  flex-shrink:0;
  transition:all 0.22s var(--ease);
}
.qs-chip:hover {
  border-color:rgba(255,255,255,0.16);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,0.3);
}
.qs-val { font-size:14px; font-weight:700; }
.qs-unit { font-size:12px; color:var(--text-2); }

/* Section header */
.section-hd {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 20px 10px;
}
.section-label { font-size:15px; font-weight:700; }
.section-more-btn { font-size:13px; color:var(--green); font-weight:600; transition:opacity 0.15s; }
.section-more-btn:hover { opacity:0.75; }
.section-meta { font-size:12px; color:var(--text-3); }

/* Featured workout card */
.featured-card {
  position:relative;
  margin:0 16px 16px;
  border-radius:var(--r-lg);
  background:var(--card);
  border:1px solid var(--border);
  overflow:hidden;
  padding:20px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  min-height:148px;
  text-align:left;
  transition:transform 0.28s var(--ease), box-shadow 0.28s ease;
  -webkit-tap-highlight-color:transparent;
}
.featured-card:hover {
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(74,222,128,0.12);
}
.featured-card:active { transform:scale(0.99); }

.fc-gradient {
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(74,222,128,0.18) 0%, rgba(34,211,238,0.08) 40%, transparent 70%),
    linear-gradient(315deg, rgba(96,165,250,0.1) 0%, transparent 50%);
  pointer-events:none;
}
.fc-gradient::after {
  content:'';
  position:absolute;
  top:-20px; right:-20px;
  width:160px; height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(74,222,128,0.24) 0%, transparent 65%);
}

.fc-body { position:relative; z-index:1; flex:1; }
.fc-tag {
  display:inline-block;
  padding:3px 10px;
  border-radius:var(--r-pill);
  background:rgba(74,222,128,0.15);
  border:1px solid rgba(74,222,128,0.3);
  font-size:11px;
  font-weight:600;
  color:var(--green);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.fc-title {
  font-size:17px;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.25;
  margin-bottom:10px;
}
.fc-meta {
  display:flex;
  gap:12px;
  font-size:12px;
  color:var(--text-2);
}
.fc-play {
  position:relative;
  z-index:1;
  width:50px; height:50px;
  border-radius:50%;
  background:linear-gradient(135deg, #4ADE80, #22d3ee);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-left:12px;
  box-shadow:0 0 28px rgba(74,222,128,0.45), 0 4px 12px rgba(0,0,0,0.3);
  transition:transform 0.22s var(--ease3), box-shadow 0.22s ease;
}
.featured-card:hover .fc-play {
  transform:scale(1.1);
  box-shadow:0 0 40px rgba(74,222,128,0.6), 0 4px 16px rgba(0,0,0,0.4);
}

/* Activity list */
.activity-list { padding:0 16px; display:flex; flex-direction:column; gap:2px; }
.act-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:var(--r-md);
  transition:all 0.2s ease;
}
.act-item:hover {
  background:var(--card);
  transform:translateX(3px);
}
.act-icon {
  width:40px; height:40px;
  border-radius:var(--r-sm);
  background:var(--aic);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.act-info { flex:1; display:flex; flex-direction:column; gap:3px; }
.act-name { font-size:13px; font-weight:600; }
.act-when { font-size:12px; color:var(--text-3); }
.act-kcal { font-size:13px; font-weight:700; color:var(--green); }


/* ═══════════════════════════════════════════
   SCREEN 4 — ACTIVE WORKOUT
═══════════════════════════════════════════ */
.ws-header {
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 16px 14px;
  flex-shrink:0;
}
.ws-title-wrap { flex:1; min-width:0; }
.ws-sub {
  font-size:11px;
  color:var(--text-3);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:2px;
}
.ws-title {
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ws-more-btn {
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-2);
}

/* Workout progress track */
.ws-prog-track {
  margin:0 16px 16px;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.07);
  overflow:hidden;
  flex-shrink:0;
  position:relative;
}
.ws-prog-fill {
  height:100%;
  background:linear-gradient(90deg, #4ADE80, #22d3ee);
  border-radius:2px;
  transition:width 0.6s var(--ease);
  position:relative;
}
.ws-prog-fill::after {
  content:'';
  position:absolute;
  top:0; bottom:0; right:0;
  width:40px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.45));
  animation:prog-shine 1.8s ease-in-out infinite;
}
@keyframes prog-shine {
  0%,100% { opacity:0.5; }
  50%     { opacity:1; }
}

/* Exercise display */
.exercise-area {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 20px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.exercise-area::-webkit-scrollbar { display:none; }

.ex-visual {
  width:170px; height:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  position:relative;
}
.ex-visual::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(74,222,128,0.1) 0%, transparent 70%);
  animation:ex-glow-pulse 3.2s ease-in-out infinite;
}
@keyframes ex-glow-pulse {
  0%,100% { transform:scale(1); opacity:0.6; }
  50%     { transform:scale(1.18); opacity:1; }
}
.ex-svg {
  width:100%; height:100%;
  animation:ex-breathe 3s ease-in-out infinite;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 8px 24px rgba(74,222,128,0.22));
}
@keyframes ex-breathe {
  0%,100% { transform:scale(1) translateY(0); }
  50%     { transform:scale(1.04) translateY(-4px); }
}

.ex-name {
  font-size:24px;
  font-weight:900;
  letter-spacing:-0.03em;
  margin-bottom:4px;
  text-align:center;
}
.ex-detail { font-size:12px; color:var(--text-2); margin-bottom:20px; text-align:center; }

/* Counters */
.counters-row {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  background:linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border-radius:var(--r-md);
  padding:14px 12px;
  border:1px solid var(--border);
  margin-bottom:16px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.counter-box {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.cbox-label {
  font-size:10px;
  font-weight:600;
  color:var(--text-3);
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.cbox-ctrl { display:flex; align-items:center; gap:8px; }
.cbox-btn {
  width:30px; height:30px;
  border-radius:50%;
  background:rgba(255,255,255,0.07);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:600;
  transition:all 0.15s var(--ease3);
  color:var(--text-2);
}
.cbox-btn:hover { background:rgba(255,255,255,0.13); color:var(--text); border-color:rgba(255,255,255,0.2); }
.cbox-btn:active { transform:scale(0.84); background:rgba(74,222,128,0.15); color:var(--green); }
.cbox-val {
  font-size:20px;
  font-weight:800;
  min-width:30px;
  text-align:center;
  transition:transform 0.18s var(--ease3);
}
.counter-sep { font-size:14px; color:var(--text-3); font-weight:600; flex-shrink:0; }

/* Rest timer */
.rest-block {
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 20px 14px;
  flex-shrink:0;
}
.timer-wrap {
  position:relative;
  width:90px; height:90px;
  flex-shrink:0;
}
.timer-svg { position:absolute; inset:0; }
.timer-arc { transition:stroke-dashoffset 1s linear; }
.timer-inner {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.timer-val { font-size:22px; font-weight:800; line-height:1; letter-spacing:-0.02em; }
.timer-rest-label { font-size:9px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:0.07em; }

.btn-timer {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,0.1);
  font-size:14px;
  font-weight:600;
  transition:all 0.22s var(--ease);
  position:relative;
  overflow:hidden;
}
.btn-timer::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:45%;
  background:linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
  border-radius:inherit;
  pointer-events:none;
}
.btn-timer:hover {
  border-color:rgba(74,222,128,0.42);
  background:rgba(74,222,128,0.07);
}
.btn-timer.running {
  border-color:rgba(74,222,128,0.52);
  background:rgba(74,222,128,0.1);
  color:var(--green);
  box-shadow:0 0 24px rgba(74,222,128,0.2) inset, 0 0 14px rgba(74,222,128,0.1);
}

/* Exercise prev/next/done */
.ex-controls {
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px 16px;
  flex-shrink:0;
}
.ex-ctrl-btn {
  display:flex;
  align-items:center;
  gap:4px;
  padding:12px 16px;
  border-radius:var(--r-md);
  background:var(--card);
  border:1px solid var(--border);
  font-size:13px;
  font-weight:600;
  color:var(--text-2);
  transition:all 0.2s var(--ease);
}
.ex-ctrl-btn:hover {
  color:var(--text);
  border-color:rgba(255,255,255,0.18);
  transform:translateY(-1px);
}
.ex-ctrl-btn:active { transform:scale(0.95); }

.btn-done {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:14px;
  border-radius:var(--r-md);
  background:linear-gradient(145deg, #4ADE80 0%, #22c55e 55%, #16a34a 100%);
  color:#06080D;
  font-size:14px;
  font-weight:700;
  transition:all 0.22s var(--ease);
  position:relative;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(74,222,128,0.32);
}
.btn-done::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(155deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.03) 60%);
  border-radius:inherit;
  pointer-events:none;
}
.btn-done::after {
  content:'';
  position:absolute;
  top:0; bottom:0;
  left:-120%; width:65%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.24), transparent);
  transform:skewX(-20deg);
  animation:btn-shimmer 3.6s 0.4s ease-in-out infinite;
  pointer-events:none;
}
.btn-done:hover { filter:brightness(1.1); box-shadow:0 8px 26px rgba(74,222,128,0.42); }
.btn-done:active { transform:scale(0.97); }
.btn-ripple {
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.22);
  transform:scale(0);
  animation:ripple-anim 0.6s linear;
  pointer-events:none;
}
@keyframes ripple-anim {
  to { transform:scale(4); opacity:0; }
}


/* ═══════════════════════════════════════════
   WORKOUT — SET TRACKER
═══════════════════════════════════════════ */
.set-tracker {
  width:100%;
  margin-bottom:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.st-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.st-current {
  font-size:12px;
  font-weight:600;
  color:var(--text-3);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.st-current span {
  color:var(--text);
  font-weight:800;
}
.st-volume {
  font-size:11px;
  font-weight:600;
  color:var(--green);
}
.st-dots {
  display:flex;
  gap:6px;
  align-items:center;
}
.st-dot {
  height:6px;
  flex:1;
  border-radius:3px;
  background:rgba(255,255,255,0.1);
  transition:background 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.st-dot.current {
  background:rgba(74,222,128,0.45);
  box-shadow:0 0 8px rgba(74,222,128,0.35);
  transform:scaleY(1.4);
}
.st-dot.done {
  background:#4ADE80;
  box-shadow:0 0 6px rgba(74,222,128,0.5);
}

/* ═══════════════════════════════════════════
   WORKOUT — NEXT EXERCISE BAR
═══════════════════════════════════════════ */
.next-ex-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
  background:rgba(255,255,255,0.025);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  color:var(--text-3);
}
.neb-inner {
  display:flex;
  align-items:center;
  gap:10px;
}
.neb-label {
  font-size:10px;
  font-weight:700;
  color:var(--text-3);
  text-transform:uppercase;
  letter-spacing:0.07em;
  flex-shrink:0;
}
.neb-name {
  font-size:13px;
  font-weight:700;
  color:var(--text-2);
}

/* ═══════════════════════════════════════════
   SCREEN 5 — PROGRESS
═══════════════════════════════════════════ */
.progress-content {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.progress-content::-webkit-scrollbar { display:none; }

.pg-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 20px 16px;
}
.pg-title { font-size:25px; font-weight:900; letter-spacing:-0.03em; }

.pg-period-tabs {
  display:flex;
  background:var(--card);
  border-radius:var(--r-pill);
  padding:3px;
  gap:2px;
  border:1px solid var(--border);
}
.period-tab {
  padding:5px 12px;
  border-radius:var(--r-pill);
  font-size:12px;
  font-weight:600;
  color:var(--text-2);
  transition:all 0.25s var(--ease3);
}
.period-tab.active {
  background:rgba(255,255,255,0.1);
  color:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

/* Streak banner */
.streak-banner {
  margin:0 16px 14px;
  padding:16px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg, rgba(251,146,60,0.15) 0%, rgba(251,146,60,0.06) 50%, rgba(251,100,50,0.02) 100%);
  border:1px solid rgba(251,146,60,0.25);
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  overflow:hidden;
}
.streak-banner::before {
  content:'';
  position:absolute;
  top:-1px; left:-1px; right:-1px;
  height:50%;
  background:linear-gradient(180deg, rgba(251,146,60,0.09) 0%, transparent 100%);
  border-radius:inherit;
  pointer-events:none;
}
.streak-flame {
  font-size:30px;
  flex-shrink:0;
  animation:flame 1.4s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(251,146,60,0.55));
}
@keyframes flame {
  0%,100% { transform:scale(1) rotate(-3deg); }
  50%     { transform:scale(1.16) rotate(4deg); }
}
.streak-info { flex:1; }
.streak-num {
  display:block;
  font-size:28px;
  font-weight:900;
  letter-spacing:-0.03em;
  color:var(--orange);
  line-height:1;
  text-shadow:0 0 20px rgba(251,146,60,0.45);
}
.streak-label { font-size:12px; color:var(--text-2); }
.streak-dots { display:flex; gap:5px; align-items:center; }
.sd {
  width:28px; height:7px;
  border-radius:4px;
  background:rgba(255,255,255,0.08);
  transition:all 0.3s var(--ease3);
}
.sd.active {
  background:var(--orange);
  box-shadow:0 0 8px rgba(251,146,60,0.45);
}

/* Week stats */
.week-stats {
  display:flex;
  gap:8px;
  padding:0 16px 16px;
}
.ws-chip {
  flex:1;
  padding:14px 10px;
  border-radius:var(--r-md);
  background:var(--card);
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  transition:all 0.2s var(--ease);
}
.ws-chip:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.3); }
.wsc-val { font-size:18px; font-weight:800; letter-spacing:-0.02em; }
.wsc-label { font-size:11px; color:var(--text-2); text-align:center; }

/* Bar chart */
.bar-chart {
  margin:0 16px 16px;
  padding:16px;
  border-radius:var(--r-lg);
  background:var(--card);
  border:1px solid var(--border);
}
.bc-bars {
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:100px;
}
.bc-col {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  height:100%;
}
.bc-bar-wrap {
  flex:1;
  width:100%;
  display:flex;
  align-items:flex-end;
}
.bc-bar {
  width:100%;
  border-radius:5px 5px 3px 3px;
  background:linear-gradient(180deg, rgba(74,222,128,0.75) 0%, rgba(74,222,128,0.3) 100%);
  min-height:4px;
  transition:height 0.8s var(--ease);
}
.bc-bar--today {
  background:linear-gradient(180deg, #4ADE80 0%, #22c55e 100%);
  box-shadow:0 0 14px rgba(74,222,128,0.38);
}
.bc-bar--rest { background:rgba(255,255,255,0.08); }
.bc-bar--empty { background:transparent; }
.bc-day { font-size:11px; color:var(--text-3); font-weight:500; }
.bc-day--today { color:var(--green); font-weight:700; }

/* Muscle groups */
.muscle-list { padding:0 16px 8px; display:flex; flex-direction:column; gap:12px; }
.muscle-item { display:flex; align-items:center; gap:10px; }
.mi-name { font-size:13px; font-weight:500; min-width:44px; color:var(--text-2); }
.mi-bar-track {
  flex:1;
  height:6px;
  border-radius:3px;
  background:rgba(255,255,255,0.07);
  overflow:hidden;
}
.mi-bar {
  height:100%;
  border-radius:3px;
  background:var(--mc);
  transition:width 1s var(--ease);
  position:relative;
  overflow:hidden;
}
.mi-bar::after {
  content:'';
  position:absolute;
  top:0; right:0;
  width:24px; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35));
  animation:mi-shine 2.5s ease-in-out infinite;
}
@keyframes mi-shine {
  0%,100% { opacity:0; }
  50%     { opacity:1; }
}
.mi-pct { font-size:12px; font-weight:700; min-width:34px; text-align:right; color:var(--text-2); }


/* ═══════════════════════════════════════════
   SCREEN 6 — PROFILE
═══════════════════════════════════════════ */
.profile-content {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.profile-content::-webkit-scrollbar { display:none; }

.profile-header {
  display:flex;
  justify-content:flex-end;
  padding:8px 20px 0;
}
.settings-shortcut {
  width:36px; height:36px;
  border-radius:50%;
  background:var(--card);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-2);
  transition:all 0.22s var(--ease);
}
.settings-shortcut:hover {
  color:var(--text);
  background:var(--card-2);
  transform:rotate(35deg);
}

.profile-hero {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:16px 20px 20px;
  gap:8px;
}

/* Spinning gradient ring around avatar */
.profile-avatar-wrap {
  position:relative;
  width:80px; height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:4px;
}
.profile-avatar-wrap::before {
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:conic-gradient(from 0deg, #4ADE80, #22d3ee, #A78BFA, #FB923C, #4ADE80);
  animation:avatar-ring-spin 5s linear infinite;
  z-index:0;
}
.profile-avatar-wrap::after {
  content:'';
  position:absolute;
  inset:2px;
  border-radius:50%;
  background:var(--bg);
  z-index:1;
}
@keyframes avatar-ring-spin {
  to { transform:rotate(360deg); }
}

.profile-avatar-lg {
  width:72px; height:72px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--green) 0%, #22d3ee 100%);
  color:#06080D;
  font-size:26px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
}

.profile-name { font-size:20px; font-weight:800; letter-spacing:-0.02em; }
.profile-level {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  color:var(--text-2);
  font-weight:500;
}

/* Stats grid */
.profile-stats {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin:0 16px 16px;
}
.ps-item {
  padding:14px 8px;
  border-radius:var(--r-md);
  background:var(--card);
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  transition:all 0.22s var(--ease);
}
.ps-item:hover {
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.16);
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}
.ps-val { font-size:16px; font-weight:800; letter-spacing:-0.02em; }
.ps-label { font-size:10px; color:var(--text-3); text-align:center; font-weight:500; }

/* Achievements */
.achievements {
  display:flex;
  gap:8px;
  padding:0 16px 16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.achievements::-webkit-scrollbar { display:none; }
.badge {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:14px 10px;
  border-radius:var(--r-md);
  background:var(--card);
  border:1px solid var(--border);
  min-width:68px;
  flex-shrink:0;
  transition:all 0.25s var(--ease);
  position:relative;
  overflow:hidden;
}
.badge.earned {
  border-color:rgba(74,222,128,0.25);
  background:linear-gradient(145deg, rgba(74,222,128,0.08), var(--card));
}
.badge.earned:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(74,222,128,0.16);
}
/* Badge shimmer sweep */
.badge.earned::after {
  content:'';
  position:absolute;
  top:0; bottom:0;
  left:-100%; width:60%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent);
  transform:skewX(-20deg);
  animation:badge-shimmer 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes badge-shimmer {
  0%,55% { left:-100%; }
  100%   { left:200%; }
}
.badge.locked { opacity:0.35; filter:grayscale(0.8); }
.badge-icon { font-size:24px; }
.badge-name { font-size:10px; font-weight:600; color:var(--text-2); text-align:center; white-space:nowrap; }

/* Personal bests */
.pb-list { margin:0 16px; display:flex; flex-direction:column; gap:2px; }
.pb-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 14px;
  border-radius:var(--r-md);
  background:var(--card);
  border:1px solid var(--border);
  margin-bottom:6px;
  transition:all 0.2s var(--ease);
}
.pb-item:hover {
  border-color:rgba(255,255,255,0.14);
  transform:translateX(3px);
}
.pb-name { font-size:13px; font-weight:500; color:var(--text-2); }
.pb-val { font-size:14px; font-weight:800; }


/* ═══════════════════════════════════════════
   SCREEN 7 — SETTINGS
═══════════════════════════════════════════ */
.settings-content {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.settings-content::-webkit-scrollbar { display:none; }

.settings-top-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 16px 16px;
  flex-shrink:0;
}
.settings-title { font-size:18px; font-weight:800; letter-spacing:-0.02em; }

.settings-profile-row {
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 16px 20px;
  padding:16px;
  border-radius:var(--r-lg);
  background:var(--card);
  border:1px solid var(--border);
}
.spr-avatar {
  width:48px; height:48px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--green) 0%, #22d3ee 100%);
  color:#06080D;
  font-size:18px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.spr-info { flex:1; display:flex; flex-direction:column; gap:3px; }
.spr-name { font-size:14px; font-weight:700; }
.spr-email { font-size:12px; color:var(--text-3); }
.spr-edit {
  width:32px; height:32px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-2);
  transition:all 0.2s var(--ease);
}
.spr-edit:hover { background:rgba(255,255,255,0.1); color:var(--text); }

.settings-group { margin:0 16px 20px; }
.sg-label {
  font-size:11px;
  font-weight:600;
  color:var(--text-3);
  text-transform:uppercase;
  letter-spacing:0.08em;
  padding:0 4px;
  margin-bottom:8px;
}
.sg-rows {
  background:var(--card);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  overflow:hidden;
}
.sg-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px;
  border-bottom:1px solid var(--border-2);
  width:100%;
  text-align:left;
  transition:background 0.18s ease;
}
.sg-row:last-child { border-bottom:none; }
.sg-row--link { color:var(--text-2); }
.sg-row--link:hover { background:rgba(255,255,255,0.03); }
.sg-row--danger .sgr-name { color:var(--red); }
.sg-row--select { gap:10px; flex-wrap:wrap; }
.sgr-info { display:flex; flex-direction:column; gap:3px; flex:1; }
.sgr-name { font-size:14px; font-weight:500; }
.sgr-desc { font-size:12px; color:var(--text-3); }

/* Toggle */
.toggle {
  width:46px; height:27px;
  border-radius:14px;
  background:rgba(255,255,255,0.1);
  padding:3px;
  display:flex;
  align-items:center;
  transition:background 0.28s var(--ease);
  flex-shrink:0;
}
.toggle.toggle--on {
  background:var(--green);
  box-shadow:0 0 14px rgba(74,222,128,0.35);
}
.toggle-thumb {
  width:21px; height:21px;
  border-radius:50%;
  background:white;
  transition:transform 0.3s var(--ease3);
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.toggle.toggle--on .toggle-thumb { transform:translateX(19px); }

/* Segmented controls */
.sg-seg {
  display:flex;
  background:rgba(255,255,255,0.06);
  border-radius:var(--r-pill);
  padding:2px;
  gap:2px;
}
.seg-btn {
  padding:5px 11px;
  border-radius:var(--r-pill);
  font-size:12px;
  font-weight:600;
  color:var(--text-2);
  transition:all 0.22s var(--ease3);
}
.seg-btn.active {
  background:rgba(255,255,255,0.12);
  color:var(--text);
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}


/* ═══════════════════════════════════════════
   BOTTOM NAVIGATION
═══════════════════════════════════════════ */
.bottom-nav {
  position:absolute;
  bottom:0; left:0; right:0;
  height:var(--nav-h);
  background:rgba(6,8,13,0.5);
  backdrop-filter:blur(48px) saturate(220%) brightness(1.22);
  -webkit-backdrop-filter:blur(48px) saturate(220%) brightness(1.22);
  display:flex;
  align-items:center;
  padding:0 4px 8px;
  z-index:50;
  overflow:hidden;
}

/* Iridescent top border */
.bottom-nav::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.05) 8%,
    rgba(74,222,128,0.65) 26%,
    rgba(96,165,250,0.55) 50%,
    rgba(167,139,250,0.55) 74%,
    rgba(255,255,255,0.05) 92%,
    transparent 100%
  );
  animation:nav-border-glow 5s ease-in-out infinite;
  pointer-events:none;
  z-index:1;
}

/* Glass sweep */
.bottom-nav::after {
  content:'';
  position:absolute;
  top:0; bottom:0;
  left:-80%; width:55%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transform:skewX(-18deg);
  animation:nav-sweep 9s ease-in-out infinite;
  pointer-events:none;
}

@keyframes nav-border-glow {
  0%,100% { opacity:0.55; }
  50%     { opacity:1; }
}
@keyframes nav-sweep {
  0%   { left:-80%; }
  100% { left:220%; }
}

.nav-tab {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  height:100%;
  color:var(--text-3);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.02em;
  border-radius:var(--r-sm);
  transition:all 0.25s var(--ease);
  -webkit-tap-highlight-color:transparent;
  padding:6px 0;
  position:relative;
}
.nav-tab:hover { color:var(--text-2); }
.nav-tab.active { color:var(--green); }

.nt-icon {
  width:22px; height:22px;
  flex-shrink:0;
  transition:transform 0.25s var(--ease3);
}
.nav-tab.active .nt-icon {
  filter:drop-shadow(0 0 8px rgba(74,222,128,0.55));
  transform:translateY(-1px);
}
.nav-tab:active { transform:scale(0.88); }

/* Active dot indicator */
.nav-tab.active::before {
  content:'';
  position:absolute;
  top:7px;
  width:20px; height:2.5px;
  border-radius:2px;
  background:var(--green);
  box-shadow:0 0 10px rgba(74,222,128,0.7);
  animation:tab-dot-in 0.28s var(--ease) both;
}
@keyframes tab-dot-in {
  from { transform:scaleX(0); opacity:0; }
  to   { transform:scaleX(1); opacity:1; }
}


/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:860px) and (min-width:641px) {
  .showcase {
    flex-direction:column;
    gap:32px;
    padding:24px 16px 40px;
  }
  .showcase-info { max-width:100%; text-align:center; }
  .si-pills { justify-content:center; }
  .si-stack { justify-content:center; }
  .si-title { font-size:42px; }
}

@media (max-width:640px) {
  html, body { height:100%; overflow:hidden; }
  .showcase {
    padding:0; gap:0;
    min-height:100dvh; height:100dvh;
    overflow:hidden;
    align-items:stretch;
    justify-content:flex-start;
    flex-direction:column;
  }
  .showcase-info { display:none; }
  .phone {
    position:fixed;
    inset:0; z-index:10;
    width:100%; height:100%;
    flex-shrink:0;
    animation:none;
  }
  .phone-shell {
    width:100%; height:100%;
    border-radius:0;
    box-shadow:none;
    background:var(--bg);
    animation:none;
  }
  .phone-btn { display:none; }
  .phone-screen-wrap { inset:0; border-radius:0; }
  .phone-screen-wrap::before { display:none; }
  .dynamic-island { display:none; }
  .status-bar {
    padding-top:max(env(safe-area-inset-top), 16px);
    padding-bottom:8px;
  }
  .bottom-nav {
    height:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom:max(env(safe-area-inset-bottom), 8px);
  }
  .nav-tab { padding:8px 0; }
  .ob-footer { padding-bottom:max(env(safe-area-inset-bottom), 28px); }
  .screen-footer { padding-bottom:max(env(safe-area-inset-bottom), 12px); }
}


/* ═══════════════════════════════════════════
   SCREEN CONTENT ENTRANCE ANIMATIONS
═══════════════════════════════════════════ */
@keyframes enter-up {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes enter-scale {
  from { opacity:0; transform:scale(0.94) translateY(14px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

.screen.active .home-header   { animation:enter-up   0.44s 0.04s var(--ease) both; }
.screen.active .rings-card    { animation:enter-scale 0.48s 0.10s var(--ease) both; }
.screen.active .quick-stats   { animation:enter-up   0.44s 0.16s var(--ease) both; }
.screen.active .featured-card { animation:enter-scale 0.48s 0.22s var(--ease) both; }
.screen.active .activity-list { animation:enter-up   0.44s 0.28s var(--ease) both; }
.screen.active .streak-banner { animation:enter-scale 0.48s 0.06s var(--ease) both; }
.screen.active .week-stats    { animation:enter-up   0.44s 0.12s var(--ease) both; }
.screen.active .bar-chart     { animation:enter-scale 0.48s 0.18s var(--ease) both; }
.screen.active .muscle-list   { animation:enter-up   0.44s 0.26s var(--ease) both; }
.screen.active .pg-header     { animation:enter-up   0.44s 0.02s var(--ease) both; }
.screen.active .profile-hero  { animation:enter-up   0.44s 0.04s var(--ease) both; }
.screen.active .profile-stats { animation:enter-up   0.44s 0.12s var(--ease) both; }
.screen.active .achievements  { animation:enter-up   0.44s 0.20s var(--ease) both; }
.screen.active .pb-list       { animation:enter-up   0.44s 0.28s var(--ease) both; }
.screen.active .exercise-area { animation:enter-up   0.44s 0.08s var(--ease) both; }
.screen.active .rest-block    { animation:enter-up   0.44s 0.16s var(--ease) both; }
.screen.active .next-ex-bar   { animation:enter-up   0.44s 0.19s var(--ease) both; }
.screen.active .ex-controls   { animation:enter-up   0.44s 0.22s var(--ease) both; }
.screen.active .ws-header     { animation:enter-up   0.44s 0.02s var(--ease) both; }
.screen.active .goal-list     { animation:enter-up   0.44s 0.08s var(--ease) both; }
.screen.active .settings-profile-row { animation:enter-up 0.44s 0.06s var(--ease) both; }
.screen.active .settings-group { animation:enter-up  0.44s 0.12s var(--ease) both; }
.screen.active .settings-group:nth-child(2) { animation-delay:0.18s; }
.screen.active .settings-group:nth-child(3) { animation-delay:0.24s; }


/* ═══════════════════════════════════════════
   PAGE LOADER
═══════════════════════════════════════════ */
.page-loader {
  position:fixed;
  inset:0;
  z-index:10000;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity 400ms ease;
}
.page-loader.is-hidden {
  opacity:0;
  pointer-events:none;
}
.page-loader__spinner {
  width:36px; height:36px;
  border:2.5px solid rgba(74,222,128,0.12);
  border-top-color:var(--green);
  border-radius:50%;
  animation:loaderSpin 0.7s linear infinite;
  box-shadow:0 0 20px rgba(74,222,128,0.2);
}
@keyframes loaderSpin {
  to { transform:rotate(360deg); }
}