:root {
  --bg: #050505;
  --surface: #151515;
  --surface-2: #1a1a1a;
  --surface-3: #202020;
  --border: rgba(255,255,255,0.06);
  --text: #f5f5f5;
  --text-secondary: #8a8a8a;
  --text-tertiary: #525252;
  --accent: #00d26a;
  --orange: #ff9f0a;
  --blue: #3b82f6;
  --red: #ef4444;
  --yellow: #eab308;
  --protein: #00d26a;
  --carbs: #3b82f6;
  --fat: #ff9f0a;
  --error: #ef4444;
  --radius: 12px;
  --radius-sm: 8px;
  --sidebar-w: 220px;
  --text-heading: 22px;
  --text-title: 20px;
  --text-card: 16px;
  --text-body: 14px;
  --text-caption: 12px;
  --text-small: 11px;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Semantic z-index layers */
  --z-base: 0;
  --z-sticky: 10;
  --z-nav: 100;
  --z-overlay: 50;
  --z-sidebar: 50;
  --z-dropdown: 55;
  --z-timer: 90;
  --z-modal: 200;
  --z-toast: 350;
  --z-sheet: 1000;
  --z-tooltip: 2000;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.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; }
/* Micro-interactions */
button:not(:disabled) { cursor:pointer; transition:transform 0.12s ease, opacity 0.12s ease }
button:not(:disabled):active { transform:scale(0.97) }
.card-lift { transition:transform 0.2s ease, box-shadow 0.2s ease }
.card-lift:hover { transform:translateY(-1px); box-shadow:0 2px 12px rgba(0,0,0,0.3) }
.fade-in { animation:fadeIn 0.2s ease }
.slide-up { animation:slideUp 0.25s cubic-bezier(0.4,0,0.2,1) }
.btn-primary { transition:all 0.15s ease }
.btn-primary:not(:disabled):active { transform:scale(0.97) }
.btn-secondary { transition:all 0.15s ease }
.btn-secondary:active { transform:scale(0.97) }
.progress-bar { transition:width 0.5s cubic-bezier(0.4,0,0.2,1) }
.modal-overlay { animation:fadeIn 0.15s ease }
.modal-card:not(.fr-modal) { animation:slideUp 0.2s cubic-bezier(0.4,0,0.2,1) }
input, select, textarea { font-family:inherit; font-size:inherit; }
select { appearance:auto; background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:0.35rem 0.5rem; }
input[type="text"], input[type="number"], input[type="search"], input[type="email"], input[type="password"] { background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:0.45rem 0.6rem; outline:none; }
input[type="text"]:focus, input[type="number"]:focus, input[type="search"]:focus { border-color:var(--accent); }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, canvas { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-weight: 700; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--accent); text-decoration: none; }
input:focus, textarea:focus { outline: none; }

/* ===== LAYOUT ===== */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  display: none;
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.5rem 0.75rem;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: var(--z-sidebar);
  flex-direction: column;
}

.sidebar-brand {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent);
  padding: 0 0.75rem;
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }

.nav-btn {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  width: 100%;
}

.nav-btn:hover { color: var(--text); background: var(--surface-2); }
.nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-btn.is-active { color: var(--text); background: var(--surface-2); font-weight: 600; }

.sidebar-footer { padding: 0 0.75rem; }
.streak-pill { font-size: 0.72rem; font-weight: 700; color: var(--orange); }

/* ===== MAIN ===== */
.main-area {
  flex: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: env(safe-area-inset-top, 8px) 16px calc(80px + env(safe-area-inset-bottom, 8px));
  width: 100%;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.topbar-date { font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); }
.topbar-timer { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.topbar-avatar {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.25rem 0.6rem 0.25rem 0.25rem;
  min-height: 36px; cursor: pointer; color: var(--text);
  transition: background 0.15s;
}
.topbar-avatar:hover { background: var(--surface-3); }
.topbar-avatar:active { background: var(--surface); }

.avatar-circle {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #000;
  display: grid; place-items: center;
  font-size: 0.65rem; font-weight: 800; flex-shrink: 0;
}

.topbar-profile-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.2; }
.topbar-profile-name { font-size: 0.75rem; font-weight: 700; }
.topbar-profile-goal { font-size: 0.6rem; color: var(--text-secondary); font-weight: 500; }

@media (max-width: 480px) {
  .topbar-profile-info { display: none; }
}

.panel { display: none; }
.panel.is-active { display: block; animation: fadeIn 0.2s ease; }

.section-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

/* ===== BUTTONS ===== */
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
}

.btn-primary { background: var(--accent); color: #0a0a0a; transition: opacity 0.15s, transform 0.1s; }
.btn-primary:hover { opacity: 0.9; }
.btn-primary:active { opacity: 0.85; transform: scale(0.97); }
.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition: background 0.15s, transform 0.1s;
}

.btn-secondary:hover { background: var(--surface-2); }
.btn-icon:active { background: var(--surface-3); }
.btn-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-text {
  min-height: auto;
  padding: 0.25rem 0;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.btn-back {
  min-height: 36px;
  padding: 0 0.5rem 0 0;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.btn-back:active { color: var(--accent); }

/* ===== PILL-SHAPED BOTTOM NAV ===== */
.bottom-nav {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 6px;
  border: 1px solid var(--border);
  z-index: var(--z-nav);
  width: min(360px, calc(100vw - 32px));
}

.nav-indicator {
  position: absolute;
  top: 6px;
  height: calc(100% - 12px);
  background: var(--surface-3);
  border-radius: 999px;
  border: 1px solid var(--border);
  transition: left 0.45s cubic-bezier(0.34, 1.4, 0.64, 1),
              width 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
  z-index: 0;
}

.nav-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px 8px;
  cursor: pointer;
  border-radius: 999px;
}

.nav-tab svg { color: var(--text-secondary); transition: color 0.2s, transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.nav-tab span { font-size: 11px; color: var(--text-secondary); transition: color 0.2s; }
.nav-tab:hover svg { color: var(--text-secondary); }
.nav-tab:hover span { color: var(--text-secondary); }
.nav-tab.is-active:hover svg { color: var(--accent); }
.nav-tab.is-active:hover span { color: var(--accent); }
.nav-tab.is-active svg { color: var(--accent); transform: scale(1.12) translateY(-1px); }
.nav-tab.is-active span { color: var(--accent); }
.nav-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== SETS LEVEL 1: MY WORKOUTS ===== */
.sets-level { display: block; }
.sets-level.is-hidden { display: none; }

.l1-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.l1-title { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); line-height: 1.1; }

.l1-header-right { display: flex; align-items: center; gap: 0.25rem; }

.l1-streak {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orange);
  padding: 0.15rem 0.4rem;
  background: rgba(249,115,22,0.1);
  border-radius: 999px;
}

.l1-list {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}

.l1-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
  min-height: 54px;
}

.l1-row:last-child { border-bottom: 0; }
.l1-row:hover { background: var(--surface-2); }
.l1-row:active { background: var(--surface-3); }
.l1-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.l1-add { color: var(--accent); font-weight: 500; }

.l1-add-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.l1-add-text { flex: 1; }

.l1-row-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.l1-row-label { flex: 1; color: var(--text); font-weight: 500; }
.l1-row-label span { color: var(--text-secondary); }

.l1-chevron { color: var(--text-secondary); font-size: 1.2rem; }

.l1-divider { height: 1px; background: var(--border); margin: 0; }

.l1-plan-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  min-height: 60px;
  cursor: pointer;
}

.l1-plan-row:last-child { border-bottom: 0; }
.l1-plan-row:hover { background: var(--surface-2); }
.l1-plan-row:active { background: var(--surface-3); }
.l1-plan-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.l1-plan-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent);
}

.l1-plan-info { flex: 1; min-width: 0; }

.l1-plan-name {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.l1-plan-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l1-plan-meta {
  font-size: 0.72rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.l1-plan-exercises {
  font-size: 0.64rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.15rem;
}

.l1-start-btn {
  flex-shrink: 0;
  min-height: 32px;
  padding: 0 0.65rem;
  border-radius: 999px;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.l1-start-btn:active { opacity: 0.85; }
.l1-start-btn.is-active { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }

/* ===== WORKOUT HEADER (sticky) ===== */
.wo-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  position: sticky;
  top: -1px;
  background: var(--bg);
  z-index: 10;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.wo-header-info { flex: 1; min-width: 0; }

.wo-header-name {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.wo-header-meta {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.wo-header-progress {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.wo-header-pct {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent);
}


/* ===== EXERCISE PROGRESS DOTS ===== */
.ex-progress {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0 0.5rem;
}

.ex-progress-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: all 0.2s;
}

.ex-progress-dot.is-done {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
}

.ex-progress-dot.is-current {
  border-color: var(--accent);
  color: var(--accent);
}

/* Current set info */
.ex-current-set {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.ex-current-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ex-current-number {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}

/* Last performance */
.ex-last-perf {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 0.75rem;
  padding: 0.4rem 0.6rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* ===== WEIGHT INPUT ===== */
.ex-weight-wrap {
  margin-bottom: 0.65rem;
}

.ex-weight-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}

.ex-weight-input {
  width: 100%;
  height: 56px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 1rem;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--orange);
  text-align: center;
  caret-color: var(--orange);
  transition: border-color 0.2s;
}

.ex-weight-input:focus {
  border-color: var(--orange);
}

.ex-weight-input::placeholder {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 1rem;
  opacity: 0.4;
}

/* ===== REP INPUT ===== */
.ex-rep-wrap {
  margin-bottom: 0.75rem;
}

.ex-rep-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.ex-rep-stepper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.ex-rep-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.ex-rep-btn:active { background: var(--surface-3); }

.ex-rep-value {
  flex: 1;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ex-rep-chips {
  display: flex;
  gap: 0.35rem;
}

.ex-rep-chip {
  flex: 1;
  min-height: 38px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

.ex-rep-chip:active { background: var(--surface-3); color: var(--text); }
.ex-rep-chip.is-active { background: var(--surface-3); border-color: var(--text); color: var(--text); }

/* ===== COMPLETE SET BUTTON ===== */
.ex-complete {
  width: 100%;
  height: 52px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #0a0a0a;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
  margin-bottom: 0.65rem;
}

.ex-complete:active { opacity: 0.85; }
.ex-complete:disabled { opacity: 0.3; cursor: not-allowed; }

/* ===== REPEAT LAST SET BUTTON ===== */
.ex-repeat {
  width: 100%;
  height: 44px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.ex-repeat:active { background: var(--surface-3); }

/* ===== COMPLETE WORKOUT BUTTON ===== */
.wo-finish {
  width: 100%;
  height: 52px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-top: 0.75rem;
}

.wo-finish:active { background: var(--surface-2); color: var(--text); }
.wo-finish:disabled { opacity: 0.3; cursor: not-allowed; }

.pr-toast {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  padding: 0.65rem 1rem;
  background: var(--surface);
  border: 1px solid var(--orange);
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--orange);
  animation: toastIn 0.25s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== SESSIONS ===== */
.session-log { display: grid; gap: 0.35rem; }

.log-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.log-item strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.82rem; display: block; }
.log-item span { font-size: 0.68rem; color: var(--text-secondary); font-weight: 500; }

.pr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
}

.pr-card {
  padding: 0.6rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.pr-card strong { display: block; font-size: 0.75rem; font-family: "Plus Jakarta Sans", sans-serif; margin-bottom: 0.1rem; }
.pr-card span { font-size: 0.68rem; color: var(--text-secondary); font-weight: 500; }

/* ===== BODY TAB ===== */
.goal-chips { display: flex; gap: 0.35rem; }

.goal-btn {
  flex: 1;
  min-height: 42px;
  border-radius: 999px;
  background: var(--surface);
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 0 0.5rem;
}

.goal-btn.is-active { background: var(--surface-2); border-color: var(--text); color: var(--text); font-weight: 700; }

.card-content { font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); }

#weighInCard { display: grid; gap: 0.75rem; }

.weigh-in-current {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
}

.weigh-in-changes { display: flex; gap: 1rem; font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); }

.weigh-in-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: end;
}

.weigh-in-form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.weigh-in-form input {
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

.weigh-in-form input:focus { border-color: var(--accent); }

.trend-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}

.trend-badge.is-green { color: var(--accent); }
.trend-badge.is-yellow { color: var(--yellow); }
.trend-badge.is-red { color: var(--red); }
.trend-badge.is-blue { color: var(--blue); }

.trend-averages {
  display: flex;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.trend-avg {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.trend-avg strong { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.05rem; font-weight: 800; }
.trend-avg small { font-size: 0.6rem; font-weight: 500; color: var(--text-secondary); }

.chart-wrap { width: 100%; max-height: 200px; position: relative; }
.chart-wrap canvas { width: 100% !important; max-height: 200px; }

.filter-row {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.65rem;
}

.filter-chip {
  min-height: 28px;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--surface);
  font-weight: 500;
  font-size: 0.62rem;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.filter-chip.is-active { background: var(--surface-2); border-color: var(--text); color: var(--text); }

/* ===== PREDICTION ===== */
.prediction-grid { display: grid; gap: 0.4rem; }

.prediction-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 500;
}

.prediction-row span:first-child { color: var(--text-secondary); }

.prediction-highlight {
  text-align: center;
  padding: 0.65rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 0.5rem;
}

/* ===== ANALYSIS ===== */
.alert-item {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  line-height: 1.4;
  background: var(--surface);
  border: 1px solid var(--border);
}

.alert-item.is-green { border-color: var(--accent); color: var(--accent); }
.alert-item.is-yellow { border-color: var(--yellow); color: var(--yellow); }
.alert-item.is-red { border-color: var(--red); color: var(--red); }
.alert-item.is-blue { border-color: var(--blue); color: var(--blue); }

.alert-icon { font-size: 1rem; flex-shrink: 0; }
.alert-body { flex: 1; }
.alert-body strong { display: block; margin-bottom: 0.1rem; }

/* ===== ADHERENCE ===== */
.adherence-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }

.streak-label { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 0.85rem; color: var(--text); }

.adherence-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
}

.adherence-week {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
}

.adherence-day {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--surface);
  min-width: 16px;
  max-width: 24px;
}

.adherence-day.cell-trained { background: var(--accent); }
.adherence-day.cell-rest { border: 1px dashed var(--border); background: transparent; }
.adherence-day.cell-future { background: transparent; border: 1px dashed var(--border); opacity: 0.3; }
.adherence-day.cell-today { outline: 2px solid var(--text); outline-offset: -1px; }

/* ===== NUTRITION (moved from Today tab) ===== */
.status-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: grid;
  gap: 0.6rem;
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 500;
}

.status-label { color: var(--text-secondary); }
.status-value { font-weight: 700; color: var(--text); }
.status-value.is-green { color: var(--accent); }
.status-value.is-yellow { color: var(--yellow); }
.status-value.is-red { color: var(--red); }

.status-score { text-align: center; padding: 0.5rem 0; }

.status-score-num {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.status-score-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.status-rec {
  padding: 0.65rem 0.75rem;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}

.status-rec strong { display: block; margin-bottom: 0.1rem; color: var(--accent); }

.macro-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.macro-stat {
  text-align: center;
  padding: 0.5rem 0.2rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.macro-stat strong { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.1rem; font-weight: 800; }
.macro-stat small { font-size: 0.58rem; font-weight: 500; color: var(--text-secondary); }
.macro-stat .label-protein { color: var(--protein); }
.macro-stat .label-carbs { color: var(--carbs); }
.macro-stat .label-fat { color: var(--fat); }
.macro-stat .label-cal { color: var(--text); }

.macro-bars { display: grid; gap: 0.35rem; margin-bottom: 0.5rem; }

.macro-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
}

.macro-bar .bar-value { width: 3.5rem; text-align: right; font-size: 0.72rem; color: var(--text-secondary); }

.score-row { margin-bottom: 0.5rem; }

.score-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}

.score-pill.is-green { color: var(--accent); }
.score-pill.is-yellow { color: var(--yellow); }
.score-pill.is-red { color: var(--red); }

.food-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.food-btn {
  min-height: 40px;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: var(--surface);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--text);
  border: 1px solid var(--border);
}

.food-btn:hover { background: var(--surface-2); }
.food-btn:active { background: var(--surface-3); }
.food-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.suggestion-chip {
  min-height: 40px;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: var(--orange);
  color: #0a0a0a;
  font-weight: 700;
  font-size: 0.78rem;
}

.suggestion-chip:active { opacity: 0.85; }

#mealLog { display: grid; gap: 0.3rem; }

.meal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.65rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.78rem;
}

.meal-item strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.8rem; }

.meal-macros { font-size: 0.65rem; color: var(--text-secondary); font-weight: 500; }

.meal-delete {
  min-height: 34px;
  min-width: 34px;
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: grid;
  place-items: center;
}

.meal-delete:active { color: var(--red); }

.fav-header { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }

.fav-list { display: grid; gap: 0.35rem; }

.fav-meal-row { display: flex; gap: 0.35rem; }

.fav-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--text);
  border: 1px solid var(--border);
  flex: 1;
  text-align: left;
}

.fav-btn:active { background: var(--surface-2); }
.fav-btn .fav-name { flex: 1; }
.fav-btn .fav-macros { font-size: 0.6rem; color: var(--text-secondary); font-weight: 500; }

.fav-delete {
  min-height: 34px;
  min-width: 34px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  display: grid;
  place-items: center;
}

.fav-delete:active { color: var(--red); }

.water-card { display: flex; align-items: center; gap: 1rem; }

.water-ring {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.water-ring svg { width: 100%; height: 100%; }

.water-ring-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.water-ring-text small { font-size: 0.45rem; font-weight: 500; }

.water-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1;
}

.water-btn {
  flex: 1;
  min-width: 56px;
  min-height: 40px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--blue);
  font-weight: 500;
  font-size: 0.72rem;
  border: 1px solid var(--border);
}

.water-btn:active { background: var(--surface-2); }

.water-prediction { font-size: 0.68rem; font-weight: 500; color: var(--text-secondary); margin-top: 0.35rem; }

.ns-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.25rem 0;
}

.ns-row span:first-child { color: var(--text-secondary); }

.nc-grid { display: grid; gap: 0.35rem; }

.nc-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.nc-label { width: 3.5rem; flex-shrink: 0; color: var(--text-secondary); }

.nc-track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
}

.nc-track span { display: block; height: 100%; border-radius: inherit; transition: width 0.3s; }

.nc-pct { width: 2.5rem; text-align: right; }

.nc-result {
  text-align: center;
  padding: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: var(--radius);
  margin-top: 0.5rem;
}

.nc-result.is-green { color: var(--accent); background: var(--surface); border: 1px solid var(--accent); }
.nc-result.is-yellow { color: var(--yellow); background: var(--surface); border: 1px solid var(--yellow); }
.nc-result.is-red { color: var(--red); background: var(--surface); border: 1px solid var(--red); }

.wn-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.25rem 0;
}

.wn-row span:first-child { color: var(--text-secondary); }

.wn-score {
  text-align: center;
  padding: 0.65rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-top: 0.5rem;
}

.wn-score-num { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--text); }

.wn-score-label { font-size: 0.6rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; }

/* ===== TRAINING CALENDAR ===== */
.calendar-wrap {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1rem;
}

.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.cal-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.cal-nav { display: flex; gap: 0.25rem; }

.cal-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.cal-nav-btn:active { background: var(--surface-2); }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text);
  border-radius: 50%;
}

.cal-cell.cal-trained {
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 700;
}

.cal-cell.cal-today {
  outline: 2px solid var(--text);
  outline-offset: -2px;
}

.cal-cell.cal-other {
  color: var(--text-secondary);
  opacity: 0.2;
}

.cal-cell.cal-future {
  color: var(--text-secondary);
  opacity: 0.25;
}

.cal-streak {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.cal-streak strong {
  color: var(--accent);
  font-weight: 800;
}

.cal-legend {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.cal-legend span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.cal-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.cal-legend-dot.is-green { background: var(--accent); }
.cal-legend-dot.is-empty { background: var(--surface-2); border: 1px solid var(--border); }

/* ===== COACH PANEL ===== */
.insights-list {
  display: grid;
  gap: 0.4rem;
}

.insight-item {
  padding: 0.75rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}

.insight-item strong { color: var(--accent); }

.recovery-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.65rem; }

.recovery-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.recovery-dot.is-green { background: var(--accent); }
.recovery-dot.is-yellow { background: var(--yellow); }
.recovery-dot.is-red { background: var(--red); }

.rec-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.3rem 0;
}

.rec-row span:first-child { color: var(--text-secondary); }

/* ===== WEEKLY REVIEW ===== */
.wr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

.wr-item {
  text-align: center;
  padding: 0.5rem 0.25rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.wr-item strong { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.1rem; font-weight: 800; }
.wr-item small { font-size: 0.58rem; font-weight: 500; color: var(--text-secondary); }

.wr-note { font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); font-style: italic; margin-top: 0.5rem; }

/* ===== MONTHLY REPORT ===== */
.mr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
}

.mr-item {
  text-align: center;
  padding: 0.5rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.mr-item strong { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.95rem; font-weight: 800; }
.mr-item small { font-size: 0.58rem; font-weight: 500; color: var(--text-secondary); }

.mr-rec {
  padding: 0.65rem;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 0.5rem;
}

/* ===== MODALS ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0,0,0,0.7);
  animation: fadeIn 0.2s ease;
}

.modal-overlay.is-hidden { display: none; }

.modal-card {
  width: min(440px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  animation: scaleIn 0.2s ease;
}

.modal-wide { width: min(580px, 100%); }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.modal-header h2 { margin: 0; font-size: 1.05rem; }

.modal-close {
  min-height: 36px;
  min-width: 36px;
  border-radius: 6px;
  font-size: 1rem;
  color: var(--text-secondary);
  display: grid;
  place-items: center;
}

.modal-close:active { color: var(--text); }

.modal-input {
  width: 100%;
  min-height: 80px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 0.75rem;
  font-size: 0.85rem;
  color: var(--text);
  resize: vertical;
}

.modal-input:focus { border-color: var(--accent); }

.modal-actions {
  display: flex;
  gap: 0.65rem;
  margin-top: 1rem;
}

.modal-hint { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 0.75rem; }

.session-recap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  padding: 0.75rem;
  background: var(--surface-2);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  text-align: center;
}

.session-recap div { display: grid; gap: 0.1rem; }
.session-recap strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1rem; font-weight: 800; }
.session-recap small { font-size: 0.6rem; color: var(--text-secondary); font-weight: 500; }

.session-recap-pr {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--orange);
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
}

.program-preview {
  padding: 0.75rem;
  background: var(--surface-2);
  border-radius: var(--radius);
  margin-top: 0.75rem;
  font-size: 0.78rem;
  white-space: pre-wrap;
}

/* ===== NEW WORKOUT CREATOR ===== */
.l3-name-input {
  width: 100%;
  min-height: 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.l3-name-input:focus { border-color: var(--accent); }
.l3-name-input::placeholder { color: var(--text-secondary); font-weight: 500; }

.exercise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}

.exercise-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.65rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
  min-height: 48px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.exercise-card:active { background: var(--surface-2); transform: scale(0.98); }
.exercise-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.exercise-card.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.exercise-card-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 0.55rem;
  font-weight: 800;
  color: transparent;
  transition: all 0.15s;
}

.exercise-card.is-selected .exercise-card-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
}

.exercise-card-info { flex: 1; min-width: 0; }

.exercise-card-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.exercise-card-muscles {
  font-size: 0.58rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 0.1rem;
}

/* ===== BODY MUSCLE MAP ===== */
.bm-container {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 0.5rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.body-map-layout {
  display: flex;
  justify-content: center;
}

.body-view {
  width: 100%;
  max-width: 500px;
}

.body-view svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Mode selector */
.bm-mode-row {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
  flex-wrap: nowrap;
}

.bm-mode-btn {
  flex-shrink: 0;
  padding: 0.45rem 0.75rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.bm-mode-btn.is-active {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
}

/* Stats bar */
.bm-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.bm-coverage {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.bm-coverage-pct {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  display: block;
  line-height: 1.2;
}

.bm-trained {
  font-size: 0.68rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-left: auto;
  text-align: right;
}

/* Muscle list */
.bm-muscle-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.bm-muscle-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  min-height: 36px;
}

.bm-muscle-row:active { background: var(--surface-2); }

.bm-muscle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bm-muscle-name {
  flex: 1;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text);
}

.bm-muscle-sets {
  font-size: 0.6rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.bm-muscle-chevron {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  margin-left: 0.2rem;
}

/* Insights */
.bm-insights {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: -0.25rem;
}

/* Alert severity colors */
.alert-item.is-green .alert-icon { color: var(--accent); }
.alert-item.is-yellow .alert-icon { color: var(--yellow); }
.alert-item.is-red .alert-icon { color: var(--red); }
.alert-item.is-blue .alert-icon { color: var(--blue); }

/* ===== MUSCLE TOOLTIP ===== */
.muscle-tooltip {
  position: fixed;
  z-index: 2000;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.68rem;
  min-width: 160px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  pointer-events: none;
}
/* ===== NEW WORKOUT BUILDER ===== */
#screen-new-workout { display:flex;flex-direction:column;height:100% }
.nw-header { display:flex;align-items:center;gap:0.5rem;padding:0.65rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg) }
.nw-done-btn { background:var(--accent);color:#000;border:none;border-radius:8px;padding:0.45rem 1rem;font-size:0.82rem;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity 0.2s }
.nw-done-btn:disabled { opacity:0.35;cursor:default }
.nw-done-btn:not(:disabled):active { opacity:0.7 }
.nw-body { display:flex;flex:1;overflow:hidden }
.nw-muscle-nav {
  width: 148px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 0.5rem 0;
}
.nw-muscle-nav::-webkit-scrollbar { display: none; }
.nw-mn-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.55rem 0.8rem;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 0.73rem;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.nw-mn-item:active { background: var(--surface-2); }
.nw-mn-item.is-active { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.nw-mn-item.is-active::before { content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--accent);border-radius:0 3px 3px 0 }
.nw-mn-item-icon { font-size: 1rem; flex-shrink: 0; }
.nw-mn-item-count { margin-left: auto; font-size: 0.6rem; color: var(--text-secondary); opacity: 0.7; background:var(--surface-2);padding:0.1rem 0.35rem;border-radius:999px;min-width:18px;text-align:center }
.nw-mn-item.is-active .nw-mn-item-count { color: var(--accent); opacity: 1; background:color-mix(in srgb,var(--accent) 12%,transparent) }

.nw-exercise-area { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.nw-meta { padding:0.75rem 1rem 0.5rem;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg);z-index:2 }
.nw-meta-row { display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem }
.nw-name-input { flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:0.65rem 0.75rem;font-size:0.92rem;font-weight:600;color:var(--text);font-family:inherit;outline:none;transition:border-color 0.2s }
.nw-name-input:focus { border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent) }
.nw-name-input::placeholder { color:var(--text-secondary);font-weight:500 }
.nw-meta-stats { font-size:0.72rem;color:var(--text-secondary);white-space:nowrap;font-weight:500;min-width:fit-content;background:var(--surface-2);padding:0.3rem 0.6rem;border-radius:6px }
.nw-type-row { display:flex;gap:0.35rem }
.nw-type-chip { padding:0.32rem 0.75rem;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:0.72rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.15s }
.nw-type-chip.is-active { background:color-mix(in srgb,var(--accent) 20%,transparent);border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent) }
.nw-type-chip:active { transform:scale(0.96) }
.nw-search-wrap { position:relative;margin:0.5rem 1rem 0;flex-shrink:0 }
.nw-search-icon { position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none }
.nw-search { width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:0.58rem 0.75rem 0.58rem 2.2rem;font-size:0.85rem;color:var(--text);font-family:inherit;outline:none;transition:border-color 0.2s }
.nw-search:focus { border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent) }
.nw-search::placeholder { color:var(--text-secondary) }
.nw-filter-bar { flex-shrink:0;overflow-x:auto;margin:0 -1rem;padding:0.5rem 1rem }
.nw-filter-bar::-webkit-scrollbar { display:none }
.nw-filter-scroll { display:flex;flex-direction:column;gap:0.35rem }
.nw-filter-group { display:flex;align-items:center;gap:0.35rem }
.nw-filter-label { font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-secondary);min-width:fit-content }
.nw-filter-row { display:flex;gap:0.3rem;flex-wrap:wrap }
.nw-chip { padding:0.25rem 0.6rem;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:0.68rem;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all 0.15s }
.nw-chip:active { transform:scale(0.96) }
.nw-chip.is-active { background:color-mix(in srgb,var(--accent) 20%,transparent);border-color:var(--accent);color:var(--accent) }
.nw-clear-filters { display:inline-flex;align-items:center;gap:0.25rem;padding:0.25rem 0.6rem;border:none;background:none;color:var(--accent);font-size:0.7rem;font-weight:600;cursor:pointer;font-family:inherit;margin-left:auto }
.nw-scroll { flex:1;overflow-y:auto;padding:0 1rem 1rem }
.nw-list { display:flex;flex-direction:column;gap:2px }
.nw-list { gap: 4px; }
.nw-ex-card { display:flex;align-items:center;gap:0.65rem;padding:0.75rem 0.75rem;background:var(--surface-2);border-radius:10px;border:1px solid var(--border);cursor:pointer;transition:all 0.18s;box-shadow:0 1px 2px rgba(0,0,0,0.05) }
.nw-ex-card:hover { background:var(--surface-3);border-color:var(--text-secondary);transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,0.08) }
.nw-ex-card:active { transform:scale(0.985) }
.nw-ex-card.is-selected { border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface-2));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent) }
.nw-ex-card-left { display:flex;align-items:center;gap:0.65rem;flex:1;min-width:0 }
.nw-ex-card-icon { width:40px;height:40px;border-radius:10px;background:var(--surface-3);display:grid;place-items:center;font-size:1.15rem;flex-shrink:0 }
.nw-ex-card.is-selected .nw-ex-card-icon { background:color-mix(in srgb,var(--accent) 18%,var(--surface-3)) }
.nw-ex-card-info { flex:1;min-width:0 }
.nw-ex-card-name { font-size:0.85rem;font-weight:600;display:flex;align-items:center;gap:0.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.nw-ex-fav { background:none;border:none;cursor:pointer;padding:2px;display:grid;place-items:center;flex-shrink:0;transition:transform 0.15s;border-radius:4px;color:var(--text-secondary) }
.nw-ex-fav:active { transform:scale(1.3) }
.nw-ex-fav.is-fav { color:#ffd43b }
.nw-ex-card-meta { display:flex;gap:0.3rem;margin-top:0.25rem;flex-wrap:wrap }
.nw-ex-card-tag { font-size:0.6rem;padding:0.15rem 0.45rem;border-radius:4px;background:var(--surface-3);color:var(--text-secondary);white-space:nowrap;font-weight:500;letter-spacing:0.02em }
.nw-ex-card-tag.compound { background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent) }
.nw-ex-card-tag.isolation { background:color-mix(in srgb,var(--blue) 15%,transparent);color:var(--blue) }
.nw-ex-card-tag.pull { background:color-mix(in srgb,var(--orange) 15%,transparent);color:var(--orange) }
.nw-ex-card-tag.push { background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red) }
.nw-ex-add { width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);background:transparent;display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:all 0.18s;color:var(--text-secondary) }
.nw-ex-add:active { transform:scale(0.88) }
.nw-ex-add.is-added { background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent) }
.nw-empty { display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:2.5rem 1rem;text-align:center }
.nw-empty-icon { opacity:0.5 }
.nw-empty-title { font-size:0.95rem;font-weight:700;color:var(--text) }
.nw-empty-text { font-size:0.78rem;color:var(--text-secondary) }
.nw-empty-btn { background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:0.5rem 1rem;font-size:0.8rem;font-weight:600;color:var(--accent);cursor:pointer;font-family:inherit;margin-top:0.25rem }
.nw-empty-btn:active { background:var(--surface-3) }
.nw-selected { width:0;overflow:hidden;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;transition:width 0.25s cubic-bezier(0.4,0,0.2,1);flex-shrink:0 }
.nw-selected.has-items { width:340px }
.nw-selected-header { display:flex;align-items:center;gap:0.4rem;padding:0.75rem;border-bottom:1px solid var(--border);flex-shrink:0;min-width:320px }
.nw-selected-header span:first-child { flex:1;font-size:0.82rem;font-weight:700 }
.nw-selected-count { font-size:0.72rem;font-weight:700;background:var(--accent);color:#000;min-width:22px;height:22px;border-radius:999px;display:grid;place-items:center }
.nw-selected-clear { background:none;border:none;color:var(--text-secondary);font-size:0.72rem;cursor:pointer;font-family:inherit;padding:0.25rem 0.4rem;border-radius:4px }
.nw-selected-clear:active { background:var(--surface-2) }
.nw-selected-list { flex:1;overflow-y:auto;min-width:320px }
.nw-selected-empty { display:flex;align-items:center;justify-content:center;height:100%;font-size:0.78rem;color:var(--text-secondary);padding:2rem;text-align:center }
.nw-selected-items { display:flex;flex-direction:column;gap:1px;padding:0.5rem }
.nw-selected-items { gap: 3px; padding: 0.5rem; }
.nw-selected-item { background:var(--surface-2);border-radius:8px;overflow:hidden;border:1px solid var(--border) }
.nw-si-header { display:flex;align-items:center;gap:0.4rem;padding:0.55rem 0.55rem 0.4rem;cursor:default }
.nw-si-drag { cursor:grab;display:grid;place-items:center;padding:0.15rem;flex-shrink:0;color:var(--text-secondary) }
.nw-si-drag:active { cursor:grabbing }
.nw-si-info { flex:1;min-width:0 }
.nw-si-name { font-size:0.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.nw-si-meta { font-size:0.67rem;color:var(--text-secondary);margin-top:0.08rem;font-weight:500 }
.nw-si-remove { background:none;border:none;cursor:pointer;padding:0.3rem;border-radius:6px;display:grid;place-items:center;flex-shrink:0;color:var(--text-secondary);transition:all 0.15s }
.nw-si-remove:hover { background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red) }
.nw-si-detail { padding:0 0.55rem 0.55rem;display:flex;flex-direction:column;gap:0.4rem }
.nw-si-detail-row { display:flex;gap:0.35rem }
.nw-si-field { flex:1;min-width:0 }
.nw-si-field-wide { flex:2.5 }
.nw-si-field label { display:block;font-size:0.6rem;color:var(--text-secondary);margin-bottom:0.18rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em }
.nw-si-input { width:100%;padding:0.4rem 0.45rem;background:var(--surface-3);border:1px solid transparent;border-radius:6px;font-size:0.78rem;color:var(--text);font-family:inherit;outline:none;transition:border-color 0.15s }
.nw-si-input:focus { border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface-3)) }
.nw-si-select { appearance:auto;padding-right:0.3rem }
.nw-selected-actions { padding:0.75rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:0.4rem;min-width:320px }
.nw-selected-actions .btn-primary { width:100%;min-height:44px;border-radius:8px;font-size:0.85rem;font-weight:700;transition:all 0.15s }
.nw-selected-actions .btn-primary:disabled { opacity:0.35;transform:none }
@media (max-width:768px) {
  .nw-muscle-nav {
    width: auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.35rem 0.5rem;
    display: flex;
    gap: 0.25rem;
  }
  .nw-mn-item {
    width: auto;
    white-space: nowrap;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.68rem;
    flex-shrink: 0;
  }
  .nw-mn-item.is-active { border-color: var(--accent); }
  .nw-mn-item-icon { display: none; }
  .nw-mn-item-count { display: none; }
}
@media (max-width:600px) {
  .nw-body { flex-direction:column }
  .nw-muscle-nav { width:auto;border-right:none;border-bottom:1px solid var(--border);flex-direction:row;overflow-x:auto;padding:0.35rem 0.5rem;display:flex;gap:0.25rem }
  .nw-mn-item { width:auto;white-space:nowrap;padding:0.35rem 0.6rem;border-radius:999px;border:1px solid var(--border);font-size:0.68rem;flex-shrink:0 }
  .nw-mn-item.is-active { border-color:var(--accent) }
  .nw-mn-item-icon, .nw-mn-item-count { display:none }
  .nw-selected { width:100% !important;border-left:none;border-top:1px solid var(--border);max-height:45vh }
  .nw-selected-header, .nw-selected-list, .nw-selected-actions { min-width:auto }
  .nw-si-detail-row { flex-wrap:wrap }
}

.muscle-tooltip.is-hidden { display: none; }
.mt-name { font-size: 0.78rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; }
.mt-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.12rem 0; }
.mt-row span:first-child { color: rgba(255,255,255,0.4); }
.mt-row span:last-child { color: rgba(255,255,255,0.8); font-weight: 600; }

/* ===== GREETING ===== */
.l1-greeting {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  padding: 0.5rem 0;
  margin-bottom: 0.25rem;
}

/* ===== EMPTY STATE ===== */
.l1-empty {
  text-align: center;
  padding: 2rem 1rem;
}
.l1-empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.l1-empty-title { font-size: 1.2rem; font-weight: 800; color: var(--text); margin-bottom: 0.3rem; }
.l1-empty-desc { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 1.25rem; }
.l1-empty-btn {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border-radius: var(--radius);
  border: none;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.l1-empty-btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

/* ===== ONBOARDING MODAL ===== */
#onboardingModal .modal-input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
#onboardingModal .modal-input:focus { border-color: var(--accent); }
#onboardingModal .modal-input::placeholder { color: var(--text-tertiary); }

/* ===== BOTTOM SHEET SUB LABEL ===== */
.ms-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: -0.5rem;
  margin-bottom: 0.75rem;
}


.muscle-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.muscle-sheet.is-hidden { display: none; }

.muscle-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.muscle-sheet-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 70vh;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 0.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  animation: msUp 0.25s ease-out;
}

@keyframes msUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.muscle-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 0 auto 0.75rem;
}

.ms-header {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.ms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ms-item {
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
}

.ms-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.2rem;
}

.ms-value {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.ms-exercises-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

.ms-exercises {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.ms-ex-chip {
  padding: 0.2rem 0.5rem;
  background: var(--border);
  border-radius: 10px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ===== SCREEN NAV ===== */
.screen { display: block; }
.screen.is-hidden { display: none; }

/* ===== LEVEL 1: WORKOUT SESSION ===== */
.ws-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  margin-bottom: 0.25rem;
}

.ws-header-left { display: flex; align-items: center; gap: 0.5rem; flex: 1; }

.ws-header-info { flex: 1; min-width: 0; }

.ws-header-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ws-header-meta {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 0.05rem;
}

.ws-menu-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  border-radius: 50%;
  flex-shrink: 0;
}

.ws-menu-btn:active { background: var(--surface-2); }

.ws-desc {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

.ws-desc-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.ws-desc-text.is-expanded { white-space: normal; }

.ws-desc-more {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}

.ws-exercises {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.ws-exercise-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
  min-height: 60px;
  transition: background 0.15s, transform 0.1s;
}

.ws-exercise-card:active { background: var(--surface-2); transform: scale(0.98); }
.ws-exercise-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ws-ex-card-info { flex: 1; min-width: 0; }

.ws-ex-card-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.ws-ex-card-meta {
  font-size: 0.68rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 0.1rem;
}

.ws-ex-card-chevron {
  color: var(--text-secondary);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.ws-ex-card-done {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #0a0a0a;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 800;
  flex-shrink: 0;
}

.ws-actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.ws-finish-btn {
  width: 100%;
  height: 50px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.ws-finish-btn:active { background: var(--surface-2); color: var(--text); }
.ws-finish-btn:disabled { opacity: 0.3; }

/* ===== LEVEL 2: EXERCISE DETAIL ===== */
.ed-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  margin-bottom: 0.25rem;
}

.ed-header-info { flex: 1; }

.ed-header-name {
  font-size: 1.15rem;
  font-weight: 700;
}

.ed-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.ed-tab {
  flex: 1;
  min-height: 42px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}

.ed-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.ed-content { display: none; }
.ed-content.is-active { display: block; }

.ed-empty {
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 1rem 0;
  text-align: center;
}

.ed-set-list { display: grid; gap: 0.35rem; padding-bottom: 5rem; }

.ed-set-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.75rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
}

.ed-set-row:active { background: var(--surface-2); }

.ed-set-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.ed-set-time {
  font-size: 0.68rem;
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 3.2rem;
  flex-shrink: 0;
}

.ed-set-reps, .ed-set-weight {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  min-width: 2.5rem;
}

.ed-set-reps::after { content: " reps"; font-weight: 500; font-size: 0.65rem; color: var(--text-secondary); }
.ed-set-weight::after { content: " kg"; font-weight: 500; font-size: 0.65rem; color: var(--text-secondary); }

.ed-set-chevron {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-left: auto;
  flex-shrink: 0;
}

/* ===== BOTTOM SHEET (ADD SET) ===== */
.bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.bottom-sheet.is-hidden { display: none; }

.bottom-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.bottom-sheet-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 0.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  animation: bsUp 0.3s ease-out;
}

@keyframes bsUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 0 auto 0.75rem;
}

.bottom-sheet-body { display: grid; gap: 1rem; }

/* ===== NEW WORKOUT OPTIONS (bottom sheet) ===== */
.new-wo-option {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: background 0.15s;
}
.new-wo-option:active { background: var(--surface-3); }
.new-wo-option.primary { background: var(--accent); border-color: var(--accent); }
.new-wo-option.primary:active { opacity: 0.85; }
.new-wo-option-title { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.new-wo-option.primary .new-wo-option-title { color: #000; }
.new-wo-option-desc { font-size: 0.68rem; color: var(--text-secondary); line-height: 1.3; }
.new-wo-option.primary .new-wo-option-desc { color: rgba(0,0,0,0.7); }

/* ===== FIRST 7 DAYS BANNER ===== */
.f7d-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius-sm);
  margin-bottom: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}
.f7d-banner:active { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.f7d-banner-icon { font-size: 1.5rem; flex-shrink: 0; }
.f7d-banner-text { flex: 1; min-width: 0; }
.f7d-banner-title { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.f7d-banner-desc { font-size: 0.68rem; color: var(--text-secondary); margin-top: 0.1rem; line-height: 1.3; }
.f7d-banner-bar { height: 4px; background: var(--surface-3); border-radius: 2px; margin-top: 0.35rem; overflow: hidden; }
.f7d-banner-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s; }
.f7d-banner-arrow { font-size: 1rem; color: var(--text-secondary); flex-shrink: 0; }

/* ===== PAGE CONTAINER (main screens) ===== */
.page-container { padding: 1rem; }

/* ===== TODAY CARDS (nutrition, water) ===== */
.today-card {
  display: flex;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.today-card.col { flex-direction: column; padding: 1rem; gap: 0.75rem; }
.today-card.row { flex-direction: row; align-items: center; padding: 1rem; gap: 0.75rem; }

.tc-header { display: flex; justify-content: space-between; align-items: center; }
.tc-header-left { display: flex; align-items: center; gap: 0.5rem; }
.tc-title { font-size: 0.85rem; font-weight: 600; }
.tc-sub { font-size: 0.7rem; color: var(--text-secondary); }
.tc-add-btn {
  background: var(--accent); color: #000; border: none; border-radius: 6px;
  padding: 0.3rem 0.6rem; font-size: 0.7rem; font-weight: 600; cursor: pointer;
}
.tc-add-btn:active { opacity: 0.85; }
.tc-macro-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
.tc-macro-row { display: flex; justify-content: space-between; font-size: 0.7rem; margin-bottom: 0.2rem; }
.tc-bar { height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.tc-bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.tc-meals { font-size: 0.65rem; color: var(--text-secondary); }
.tc-ring-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.tc-ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; }
.tc-water-info { flex: 1; }
.tc-water-title { font-size: 0.8rem; font-weight: 600; }
.tc-water-goal { font-size: 0.7rem; color: var(--text-secondary); }
.tc-water-actions { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.tc-water-btn {
  background: var(--surface-3); border: none; border-radius: 6px;
  padding: 0.25rem 0.5rem; font-size: 0.65rem; color: var(--text-secondary); cursor: pointer;
}
.tc-water-btn:active { background: var(--surface-2); color: var(--text); }

/* ===== WEEKLY REPORT CARD ===== */
.wr-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 0.75rem;
}
.wr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.wr-stat {
  text-align: center;
  padding: 0.5rem 0.25rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.wr-stat strong { display: block; font-size: 1rem; font-weight: 800; color: var(--text); }
.wr-stat small { display: block; font-size: 0.6rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.1rem; font-weight: 600; }
.wr-weight {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  text-align: center;
  font-weight: 600;
}
.wr-wins { margin-top: 0.5rem; display: grid; gap: 0.3rem; }
.wr-win {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  color: var(--text);
  font-weight: 500;
}

/* ===== HOME GREETING MESSAGE ===== */
.home-greeting-message { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.75rem; }

/* ===== MODAL UTILITY CLASSES ===== */
.ml-field {
  min-height: 44px;
  resize: none;
  font-size: 0.82rem;
  padding: 0 0.75rem;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s;
}
.ml-field:focus { border-color: var(--accent); outline: none; }

.ml-select {
  min-height: 44px;
  padding: 0 0.75rem;
  font-size: 0.82rem;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}
.ml-select:focus { border-color: var(--accent); outline: none; }

.ml-textarea {
  min-height: 60px;
  resize: none;
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
}
.ml-textarea:focus { border-color: var(--accent); outline: none; }

/* Modals: vertical flex container for fields */
.ml-fields { display: flex; flex-direction: column; gap: 0.6rem; }

/* Section label spacing within modals */
.ml-section-gap { margin-top: 0.5rem; }

/* Modal actions top border + spacing */
.ml-actions-top { border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 0.25rem; }

/* Flex row for buttons at modal bottom */
.ml-btn-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.ml-btn-row > * { flex: 1; }

/* Inline flex row with space between */
.ml-flex-between { display: flex; align-items: center; justify-content: space-between; }

/* Hidden (display:none) kept but is-hidden is preferred */
.ml-dn { display: none; }

/* Large gap for section labels in panels */
.ml-gap-lg { margin-top: 1.25rem; }

/* ===== WARM-UP / COOLDOWN MODAL ===== */
.wr-desc { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
.wr-benefits {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem; margin-bottom: 0.75rem;
  font-size: 0.78rem; line-height: 1.5;
}
.wr-sect { margin-bottom: 0.75rem; }
.wr-sect-title { font-size: 0.72rem; font-weight: 700; color: var(--accent); margin-bottom: 0.4rem; }
.wr-ex-list { font-size: 0.78rem; display: flex; flex-direction: column; gap: 0.25rem; }
.wr-actions-col { flex-direction: column; gap: 0.4rem; }
.wr-btn-full { width: 100%; }
.tc-card-center { max-width: 320px; text-align: center; }
.tc-header-center { justify-content: center; }
.tc-timer { font-size: 3rem; font-weight: 800; margin: 1rem 0; }
.tc-info { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.tc-actions-center { justify-content: center; gap: 0.5rem; }

.as-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
}

.as-ex-name {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.as-field { display: grid; gap: 0.4rem; }

.as-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.as-number-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.as-number-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  max-width: 280px;
}

.as-value {
  flex: 1;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.as-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.as-btn:active { background: var(--surface-3); }

.as-unit {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 2rem;
}

.as-save {
  width: 100%;
  height: 52px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #0a0a0a;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
}

.as-save:active { opacity: 0.85; }

/* ===== LEVEL 3B: EDIT SET ===== */
.es-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.es-header-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
}

.es-header-save {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 1.1rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.es-header-save:active { opacity: 0.85; }

.es-form { display: grid; gap: 1rem; padding-bottom: 2rem; }

.es-field { display: grid; gap: 0.35rem; }

.es-field-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.es-field-val {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.es-number-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 280px;
}

.es-input {
  width: 100%;
  min-height: 46px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

.es-input:focus { border-color: var(--accent); }
.es-input::placeholder { color: var(--text-secondary); }

.es-delete {
  width: 100%;
  height: 48px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border: 1px solid var(--red);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--red);
  display: grid;
  place-items: center;
  margin-top: 0.5rem;
}

.es-delete:active { background: color-mix(in srgb, var(--red) 20%, transparent); }

.es-confirm {
  text-align: center;
  padding: 1rem;
  background: var(--surface-2);
  border-radius: var(--radius);
}

.es-confirm p { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.75rem; }

.es-confirm-actions { display: flex; gap: 0.5rem; justify-content: center; }

.es-confirm-del { background: var(--red) !important; color: #fff !important; }

/* ===== ADD EXERCISE BUTTON ===== */
.ws-add-ex-btn {
  width: 100%;
  height: 50px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px dashed var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.ws-add-ex-btn:active { background: var(--surface-2); }

/* ===== EXERCISE LIBRARY ===== */
.el-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  margin-bottom: 0.25rem;
}

.el-header-title {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 700;
}

.el-custom-btn {
  min-height: 32px;
  padding: 0 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
}

.el-custom-btn:active { background: var(--surface-2); }

.el-search-wrap {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding: 0.25rem 0 0.5rem;
}

.el-search {
  width: 100%;
  min-height: 44px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}

.el-search:focus { border-color: var(--accent); }
.el-search::placeholder { color: var(--text-secondary); }

.el-categories {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0.25rem 0 0.75rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.el-categories::-webkit-scrollbar { display: none; }

.el-cat-chip {
  flex-shrink: 0;
  min-height: 32px;
  padding: 0 0.65rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.el-cat-chip:active { background: var(--surface-2); }
.el-cat-chip.is-active { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }

.el-content { display: grid; gap: 1rem; padding-bottom: 2rem; }

.el-section { display: grid; gap: 0.4rem; }

.el-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.el-grid {
  display: grid;
  gap: 0.4rem;
}

.el-ex-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.65rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
}

.el-ex-card:active { background: var(--surface-2); }

.el-ex-info { flex: 1; min-width: 0; }

.el-ex-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.el-ex-meta {
  font-size: 0.62rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 0.05rem;
}

.el-ex-fav {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.el-ex-fav.is-fav { color: var(--yellow); }

.el-ex-add {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #0a0a0a;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.el-empty {
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 0.5rem 0;
  text-align: center;
}

/* ===== HOME DASHBOARD ===== */
.home-greeting {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  padding: 0.5rem 0 0.1rem;
  line-height: 1.2;
}

.home-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.home-insights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  padding: 0.6rem 0.65rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.hi-item { text-align: center; }
.hi-label { font-size: 0.55rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; display: block; }
.hi-value { font-size: 0.82rem; font-weight: 800; color: var(--text); display: block; margin-top: 0.1rem; }

.home-section { margin-bottom: 1.25rem; }

.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.home-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.home-section-actions { display: flex; gap: 0.35rem; }

.home-action-btn {
  min-height: 30px;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
}

.home-action-btn:active { background: var(--surface-2); }

.home-workout-list { display: grid; gap: 0.4rem; }

.home-group-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}

.home-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  cursor: pointer;
  min-height: 48px;
}

.home-group-header:active { background: var(--surface-2); }

.home-group-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.home-group-chevron {
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.home-group-card.is-collapsed .home-group-chevron { transform: rotate(-90deg); }
.home-group-card.is-collapsed .home-group-body { display: none; }

.home-group-body { display: grid; }

.home-wo-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.75rem;
  border-top: 1px solid var(--border);
  cursor: pointer;
  min-height: 56px;
}

.home-wo-card:active { background: var(--surface-2); }

.home-wo-card-info { flex: 1; min-width: 0; }

.home-wo-card-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.home-wo-card-meta {
  font-size: 0.64rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 0.05rem;
}

.home-wo-card-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }

.home-wo-open-btn {
  min-height: 30px;
  padding: 0 0.65rem;
  border-radius: 999px;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.home-wo-open-btn:active { opacity: 0.85; }

.home-wo-open-btn.is-resume { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }

.home-ungrouped { margin-top: 0.25rem; }

.home-recent-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.65rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  margin-bottom: 0.3rem;
}

.home-recent-card:active { background: var(--surface-2); }
.home-recent-card-info { flex: 1; min-width: 0; }
.home-recent-card-name { font-size: 0.78rem; font-weight: 600; color: var(--text); }
.home-recent-card-date { font-size: 0.6rem; color: var(--text-secondary); font-weight: 500; }

/* ===== QUICK ACTIONS BAR (Exercise Detail) ===== */
.qa-bar {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding-bottom: 5rem;
}

.qa-btn {
  flex: 1;
  min-height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.qa-btn:active { background: var(--surface-2); color: var(--text); }
.qa-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ed-set-dup-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.ed-set-dup-btn:active { background: var(--surface-3); color: var(--text); }

/* ===== SETTINGS SCREEN ===== */
.set-group { margin-bottom: 1.25rem; }

.set-group-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.65rem 0.65rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  text-align: left;
}

.set-row:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.set-row:last-child { border-radius: 0 0 var(--radius) var(--radius); border-bottom: 0; }
.set-row:only-child { border-radius: var(--radius); }
.set-row:active { background: var(--surface-2); }
.set-row span:last-child { color: var(--text-secondary); font-size: 0.75rem; }

/* ===== TOPBAR ICON BUTTON ===== */
.topbar-icon-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.1rem;
  padding: 0.25rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
}
.topbar-icon-btn:hover { color: var(--text); }

/* ===== SETTINGS NAV TAB ===== */
.nav-tab[data-tab="settings"].is-active { color: var(--accent); }
.nav-btn[data-tab="settings"].is-active { color: var(--accent); }

/* ===== SETTINGS PROFILE CARD ===== */
.set-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  margin-bottom: 1.25rem;
  transition: background 0.15s;
}
.set-card:active { background: var(--surface-2); }
.set-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.set-card-body { flex: 1; min-width: 0; }
.set-card-name { font-weight: 700; font-size: 0.95rem; }
.set-card-meta { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.15rem; }
.set-card-chevron { color: var(--text-secondary); font-size: 1.2rem; }

/* ===== BODY METRICS GRID ===== */
.set-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.set-metric {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.5rem;
  text-align: center;
}
.set-metric-val { display: block; font-weight: 700; font-size: 1rem; }
.set-metric-lbl { display: block; font-size: 0.65rem; color: var(--text-secondary); margin-top: 0.15rem; text-transform: uppercase; letter-spacing: 0.04em; }


/* ===== WEIGHT TRACKER ===== */
.set-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.5rem; }
.set-stat { background: var(--surface-2); border-radius: var(--radius-sm); padding: 0.65rem 0.5rem; text-align: center; }
.set-stat-val { display: block; font-weight: 700; font-size: 1rem; }
.set-stat-lbl { display: block; font-size: 0.65rem; color: var(--text-secondary); margin-top: 0.15rem; text-transform: uppercase; letter-spacing: 0.04em; }
.set-stat .pos { color: var(--accent); }
.set-stat .neg { color: var(--red); }

.wt-chart-wrap { margin: 0.75rem 0 0.5rem; }
.wt-chart-wrap canvas { width: 100% !important; height: 180px !important; }

.wt-chart-tabs { display: flex; gap: 0.35rem; margin-bottom: 0.5rem; }
.wt-chart-tab {
  flex: 1;
  padding: 0.35rem;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: 0.15s;
}
.wt-chart-tab.is-active { background: var(--surface); border-color: var(--accent); color: var(--accent); }

.wt-streak { font-size: 0.72rem; color: var(--text-secondary); text-align: center; padding: 0.35rem 0; }

/* ===== DANGER ROW ===== */
.set-row-danger span:first-child { color: var(--red) !important; }

/* ===== RESPONSIVE ===== */
@media (max-width: 400px) {
  .bm-muscle-list { grid-template-columns: 1fr; }
  .bm-stats { flex-wrap: wrap; }
  .body-view { max-width: 100%; }
}

@media (max-width: 360px) {
  .bottom-nav { width: calc(100vw - 16px); padding: 4px; }
  .nav-tab { padding: 8px 4px 6px; }
  .nav-tab span { font-size: 10px; }
  .nav-tab svg { width: 18px; height: 18px; }
  .home-dash-grid { grid-template-columns: repeat(2, 1fr); }
  .home-dash-item { padding: 0.6rem 0.25rem; }
  .home-qa-row { grid-template-columns: 1fr; }
  .home-section { padding-left: 0.75rem; padding-right: 0.75rem; }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .co-stats-row { grid-template-columns: 1fr 1fr; }
  .profile-quick-actions { grid-template-columns: 1fr; }
  .modal-card { margin-left: 0.5rem; margin-right: 0.5rem; }
  .bottom-sheet-card { padding-left: 1rem; padding-right: 1rem; }
}

/* ===== PR CARD (ENHANCED) ===== */
.pr-card { cursor: pointer; }
.pr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; margin-top: 0.35rem; }
.pr-stat { text-align: center; }
.pr-stat-val { display: block; font-weight: 700; font-size: 0.82rem; color: var(--accent); }
.pr-stat-lbl { display: block; font-size: 0.6rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }

/* ===== EXERCISE ANALYTICS ===== */
.ea-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.ea-header h2 { font-size: 1.1rem; font-weight: 700; }
.ea-tabs { display: flex; gap: 0.35rem; margin-bottom: 0.75rem; }
.ea-tab { flex: 1; padding: 0.5rem; background: var(--surface-2); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; cursor: pointer; text-align: center; transition: 0.15s; }
.ea-tab.is-active { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.ea-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; margin-bottom: 0.5rem; }
.ea-card-title { font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; }
.ea-card-val { font-size: 1.25rem; font-weight: 800; color: var(--text); }
.ea-card-sub { font-size: 0.68rem; color: var(--text-secondary); margin-top: 0.15rem; }
.ea-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
.ea-chart-wrap { margin: 0.75rem 0; }
.ea-chart-wrap canvas { width: 100% !important; height: 180px !important; }
.ea-history-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.78rem; }
.ea-history-item:last-child { border-bottom: 0; }
.ea-history-date { color: var(--text-secondary); font-size: 0.7rem; }
.ea-history-stat { color: var(--text); font-weight: 600; }

/* ===== SESSION SUMMARY ===== */
.ss-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fadeIn 0.2s ease; }
.ss-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; max-width: 360px; width: 100%; max-height: 90vh; overflow-y: auto; animation: scaleIn 0.25s ease; }
.ss-title { font-size: 1.2rem; font-weight: 800; text-align: center; margin-bottom: 0.25rem; }
.ss-subtitle { font-size: 0.78rem; color: var(--text-secondary); text-align: center; margin-bottom: 1rem; }
.ss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
.ss-item { text-align: center; padding: 0.65rem; background: var(--surface-2); border-radius: var(--radius-sm); }
.ss-item-val { display: block; font-weight: 800; font-size: 1.1rem; }
.ss-item-lbl { display: block; font-size: 0.62rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.1rem; }
.ss-muscles { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin-bottom: 0.75rem; }
.ss-muscle-chip { font-size: 0.68rem; padding: 0.2rem 0.5rem; background: var(--surface-2); border-radius: 20px; color: var(--text-secondary); }
.ss-pr-list { margin-bottom: 0.75rem; }
.ss-pr-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; padding: 0.35rem 0; color: var(--accent); font-weight: 600; }
.ss-close-btn { width: 100%; padding: 0.65rem; background: var(--accent); border: none; border-radius: var(--radius); color: #000; font-weight: 700; font-size: 0.85rem; cursor: pointer; }

/* ===== GOALS ===== */
.goal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; margin-bottom: 0.5rem; cursor: pointer; transition: background 0.15s; }
.goal-card:active { background: var(--surface-2); }
.goal-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem; }
.goal-card-name { font-weight: 700; font-size: 0.85rem; }
.goal-card-target { font-size: 0.72rem; color: var(--text-secondary); }
.goal-bar-wrap { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-top: 0.35rem; }
.goal-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }
.goal-bar-pct { font-size: 0.65rem; color: var(--text-secondary); text-align: right; margin-top: 0.15rem; }
.goal-add-btn { width: 100%; padding: 0.65rem; background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--accent); font-size: 0.78rem; font-weight: 600; cursor: pointer; text-align: center; }
.goal-add-btn:active { background: var(--surface); }

/* ===== WARMUP GENERATOR ===== */
.wu-set { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.wu-set:last-child { border-bottom: 0; }
.wu-set-label { color: var(--text-secondary); font-size: 0.72rem; }
.wu-set-value { font-weight: 700; }
.wu-set-notes { font-size: 0.68rem; color: var(--text-secondary); }

/* ===== BUILDER ===== */
.builder-day { margin-bottom: 0.75rem; }
.builder-day-title { font-weight: 700; font-size: 0.85rem; color: var(--accent); margin-bottom: 0.3rem; }
.builder-ex { display: flex; justify-content: space-between; padding: 0.25rem 0; font-size: 0.78rem; border-bottom: 1px solid var(--border); }
.builder-ex:last-child { border-bottom: 0; }
.builder-ex-name { color: var(--text); }
.builder-ex-detail { color: var(--text-secondary); font-size: 0.7rem; }

/* ===== UTILITY ===== */
.is-hidden { display: none !important; }

/* ===== ANIMATION SYSTEM ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(12px); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
@keyframes confetti-fall { 0% { transform: translateY(-10px) rotate(0deg); opacity: 1; } 100% { transform: translateY(100px) rotate(720deg); opacity: 0; } }

/* ===== CELEBRATION ===== */
@keyframes celebration-bounce {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.1); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes celebration-glow {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  70% { box-shadow: 0 0 0 20px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
@keyframes celebration-sparkle {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(0) rotate(180deg); opacity: 0; }
}
.celebration-bounce { animation: celebration-bounce 0.5s ease forwards; }
.celebration-glow { animation: celebration-glow 1s ease 0.3s; }
.celebration-sparkle { animation: celebration-sparkle 0.6s ease forwards; }

.celebration-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  pointer-events: none;
}
.celebration-particle {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  animation: confetti-fall 1.2s ease-out forwards;
}
.celebration-particle:nth-child(1) { left: 20%; top: 30%; background: var(--accent); animation-delay: 0s; }
.celebration-particle:nth-child(2) { left: 40%; top: 20%; background: var(--yellow); animation-delay: 0.1s; }
.celebration-particle:nth-child(3) { left: 60%; top: 35%; background: var(--blue); animation-delay: 0.2s; }
.celebration-particle:nth-child(4) { left: 80%; top: 25%; background: var(--orange); animation-delay: 0.3s; }
.celebration-particle:nth-child(5) { left: 30%; top: 45%; background: var(--accent); animation-delay: 0.15s; }
.celebration-particle:nth-child(6) { left: 70%; top: 40%; background: var(--yellow); animation-delay: 0.25s; }

.ss-overlay.is-celebrating .ss-title { animation: celebration-bounce 0.5s ease; color: var(--accent); }
.ss-overlay.is-celebrating .ss-card { animation: celebration-glow 1s ease 0.3s; }

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

/* ===== SKELETON LOADING ===== */
.skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200px 100%; animation: shimmer 1.2s ease-in-out infinite; border-radius: var(--radius-sm); }
.skeleton-card { height: 72px; margin-bottom: 0.4rem; }
.skeleton-row { height: 48px; margin-bottom: 0.3rem; }
.skeleton-text { height: 14px; width: 60%; margin-bottom: 0.4rem; }
.skeleton-text-short { height: 14px; width: 35%; }
.skeleton-circle { width: 44px; height: 44px; border-radius: 50%; }
.skeleton-pill { height: 32px; width: 80px; border-radius: 999px; display: inline-block; }

.empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.empty-state-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.nwe-card { background:var(--surface-2);border-radius:var(--radius);padding:1.25rem;margin:0.5rem 0;text-align:center }
.nwe-icon { font-size:2.2rem;margin-bottom:0.5rem }
.nwe-title { font-size:1.05rem;font-weight:800;margin-bottom:0.3rem }
.nwe-text { font-size:0.78rem;color:var(--text-secondary);margin-bottom:0.75rem;line-height:1.4 }
.nwe-actions { display:flex;gap:0.4rem;justify-content:center;margin-bottom:1rem }
.nwe-actions .empty-state-btn { display:inline-flex;align-items:center;gap:0.35rem;padding:0.55rem 1rem;border-radius:8px;font-size:0.8rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.15s;margin-bottom:0 }
.nwe-actions .empty-state-btn:active { transform:scale(0.97) }
.nwe-footer { display:flex;flex-direction:column;gap:0.4rem }
.nwe-achievement { display:flex;align-items:center;gap:0.4rem;padding:0.4rem 0.65rem;background:var(--surface-3);border-radius:6px;font-size:0.72rem;color:var(--text-secondary);text-align:left }
.nwe-ach-icon { font-size:0.9rem;flex-shrink:0 }
.empty-state-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 0.35rem; }
.empty-state-text { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.4; }
.empty-state-btn {
  display: block; width: 100%; padding: 0.85rem; border-radius: 10px;
  background: var(--accent); color: #000; font-size: 0.85rem; font-weight: 700;
  border: none; cursor: pointer; font-family: inherit; margin-bottom: 0.4rem;
}
.empty-state-btn.secondary {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
.empty-state-btn:active { opacity: 0.85; }

/* ===== UNDO TOAST ===== */
.undo-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  padding: 0.65rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: toastIn 0.25s ease;
}

.undo-toast .undo-btn {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.78rem;
}

/* ===== DESKTOP ===== */
@media (min-width: 768px) {
  .sidebar { display: flex; }
  .app-layout { padding-left: var(--sidebar-w); }
  .main-area { padding: 1.5rem 2rem 2rem; }
  .bottom-nav { display: none; }

  .rest-timer {
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    position: fixed;
  }

  .water-ring { width: 80px; height: 80px; }
}

/* ===== SETTINGS V2 ===== */
/* ==========================================================================
   PROFILE SCREEN — Premium Fitness Identity Page
   ========================================================================== */
#screen-settings { display:flex;flex-direction:column;height:100% }

.pr-header {
  display:flex;align-items:center;gap:0.5rem;
  padding:0.75rem 1rem;
  border-bottom:1px solid var(--border);
  flex-shrink:0;background:var(--bg);
}
.pr-header-title { font-weight:700;font-size:0.95rem;flex:1;text-align:center }
.pr-header-btn {
  background:none;border:none;color:var(--text-secondary);
  cursor:pointer;padding:0.35rem;display:grid;place-items:center;
  border-radius:8px;transition:all 0.15s;width:36px;height:36px;
}
.pr-header-btn:hover { background:var(--surface-3);color:var(--text) }
.pr-scroll { flex:1;overflow-y:auto;padding:0.75rem 0 2rem }
.pr-scroll::-webkit-scrollbar { display:none }

/* ---- Hero ---- */
.pr-hero {
  display:flex;flex-direction:column;align-items:center;
  padding:1rem 1.25rem 0.75rem;gap:0.65rem;text-align:center;
}
.pr-avatar {
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000));
  display:grid;place-items:center;
  font-size:1.75rem;font-weight:800;color:#0a0a0a;
  flex-shrink:0;position:relative;cursor:pointer;
  transition:transform 0.2s;user-select:none;
}
.pr-avatar:active { transform:scale(0.96) }
.pr-avatar-edit {
  position:absolute;bottom:-2px;right:-2px;
  width:28px;height:28px;border-radius:50%;
  background:var(--surface);border:2px solid var(--bg);
  display:grid;place-items:center;font-size:0.7rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
}
.pr-name { font-size:1.3rem;font-weight:800;line-height:1.2;letter-spacing:-0.02em }
.pr-badges { display:flex;gap:0.35rem;flex-wrap:wrap;justify-content:center }
.pr-badge {
  display:inline-flex;align-items:center;gap:0.25rem;
  padding:0.2rem 0.55rem;border-radius:999px;
  font-size:0.65rem;font-weight:600;
}
.pr-badge-accent { background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent) }
.pr-badge-orange { background:color-mix(in srgb,var(--orange) 20%,transparent);color:var(--orange) }
.pr-badge-blue { background:color-mix(in srgb,var(--blue) 20%,transparent);color:var(--blue) }
.pr-meta {
  font-size:0.7rem;color:var(--text-secondary);
  display:flex;gap:0.75rem;flex-wrap:wrap;justify-content:center;
}
.pr-streak { display:flex;align-items:center;gap:0.3rem;font-size:0.72rem;font-weight:600;color:var(--orange) }

/* ---- Quick Stats ---- */
.pr-stats {
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:6px;padding:0 1rem 0.75rem;
}
.pr-stat {
  background:var(--surface-2);border-radius:10px;
  padding:0.5rem 0.35rem;text-align:center;
}
.pr-stat-val { font-size:0.9rem;font-weight:700;display:block }
.pr-stat-lbl { font-size:0.55rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.04em;margin-top:0.1rem;display:block }

/* ---- Completion Card ---- */
.pr-complete {
  margin:0 1rem 0.75rem;
  padding:0.75rem 1rem;
  background:color-mix(in srgb,var(--accent) 8%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);
  border-radius:14px;
  display:flex;align-items:center;gap:0.75rem;
}
.pr-complete-ring {
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  font-size:0.75rem;font-weight:700;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 15%,transparent);
}
.pr-complete-body { flex:1;min-width:0 }
.pr-complete-title { font-size:0.82rem;font-weight:700;color:var(--text) }
.pr-complete-desc { font-size:0.68rem;color:var(--text-secondary);margin-top:0.1rem;line-height:1.35 }
.pr-complete-btn {
  font-size:0.72rem;font-weight:600;color:#0a0a0a;
  background:var(--accent);border:none;border-radius:10px;
  padding:0.45rem 0.85rem;cursor:pointer;flex-shrink:0;font-family:inherit;
  transition:transform 0.15s;
}
.pr-complete-btn:active { transform:scale(0.96) }

/* ---- Section Cards ---- */
.pr-section {
  margin:0 1rem 0.5rem;
  background:var(--surface-2);
  border-radius:14px;
  overflow:hidden;
  transition:transform 0.15s;
}
.pr-section:active { transform:scale(0.99) }
.pr-section-header {
  display:flex;align-items:center;gap:0.65rem;
  padding:0.85rem 0.9rem;
  cursor:pointer;user-select:none;
  border:none;background:none;color:var(--text);
  font-family:inherit;text-align:left;width:100%;
}
.pr-section-icon {
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;flex-shrink:0;
  font-size:1rem;
}
.pr-section-title { font-weight:600;font-size:0.85rem;flex:1 }
.pr-section-preview { font-size:0.7rem;color:var(--text-secondary);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.pr-section-chevron { font-size:0.75rem;color:var(--text-secondary);flex-shrink:0 }
.pr-section-body { display:none;padding:0 0.9rem 0.85rem;flex-direction:column;gap:0.3rem }
.pr-section.is-open .pr-section-body { display:flex }
.pr-section.is-open .pr-section-chevron { transform:rotate(90deg) }
.pr-row {
  display:flex;justify-content:space-between;align-items:center;
  padding:0.3rem 0;font-size:0.78rem;
}
.pr-row + .pr-row { border-top:1px solid rgba(255,255,255,0.04) }
.pr-row-label { color:var(--text-secondary) }
.pr-row-val { font-weight:600;color:var(--text) }
.pr-row-val.ns { color:var(--text-tertiary);font-weight:400 }
.pr-row-action {
  font-size:0.65rem;font-weight:600;color:var(--accent);
  cursor:pointer;background:none;border:none;padding:0.15rem 0.4rem;
  border-radius:6px;font-family:inherit;transition:background 0.15s;
}
.pr-row-action:hover { background:color-mix(in srgb,var(--accent) 15%,transparent) }

/* ---- Achievements ---- */
.pa-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));
  gap:0.5rem;padding:0.25rem 0;
}
.pa-card {
  display:flex;flex-direction:column;align-items:center;gap:0.2rem;
  padding:0.5rem 0.35rem;
  background:color-mix(in srgb,var(--orange) 12%,var(--surface-2));
  border-radius:10px;text-align:center;transition:all 0.2s;
}
.pa-card.pa-locked { background:var(--surface);opacity:0.4 }
.pa-icon { font-size:1.1rem;line-height:1 }
.pa-name { font-size:0.5rem;font-weight:600;color:var(--text);line-height:1.2 }
.pa-desc { font-size:0.45rem;color:var(--text-secondary) }

/* ==========================================================================
   SETTINGS SCREEN — Clean grouped settings
   ========================================================================== */
.st-header {
  display:flex;align-items:center;gap:0.5rem;
  padding:0.75rem 1rem;
  border-bottom:1px solid var(--border);
  flex-shrink:0;background:var(--bg);
}
.st-header-title { font-weight:700;font-size:0.95rem;flex:1;text-align:center }
.st-scroll { flex:1;overflow-y:auto;padding:0.75rem 0 2rem }
.st-scroll::-webkit-scrollbar { display:none }
.st-group { margin:0 1rem 1rem }
.st-group-label {
  font-size:0.6rem;font-weight:700;letter-spacing:0.08em;
  color:var(--text-tertiary);text-transform:uppercase;
  margin-bottom:0.5rem;padding-left:0.15rem;
}
.st-card {
  background:var(--surface-2);border-radius:14px;overflow:hidden;
}
.st-row {
  display:flex;align-items:center;gap:0.65rem;
  width:100%;padding:0.7rem 0.85rem;
  background:none;border:none;color:var(--text);cursor:pointer;
  text-align:left;font-family:inherit;font-size:0.82rem;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background 0.1s;
}
.st-row:last-child { border-bottom:none }
.st-row:active { background:var(--surface-3) }
.st-row-icon {
  width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;flex-shrink:0;
  font-size:0.9rem;
}
.st-row span:nth-child(2) { flex:1 }
.st-row-val { color:var(--text-secondary);font-size:0.73rem }
.st-chevron { color:var(--text-tertiary);font-size:0.85rem;flex-shrink:0 }
.st-toggle { padding:0.55rem 0.85rem;cursor:pointer;display:flex;align-items:center;gap:0.75rem;min-height:44px;border-bottom:1px solid rgba(255,255,255,0.04) }
.st-toggle:last-child { border-bottom:none }
.st-toggle input { display:none }
.st-toggle-track {
  width:38px;height:22px;border-radius:11px;background:var(--border);
  flex-shrink:0;position:relative;transition:background 0.2s;
}
.st-toggle-track::after {
  content:'';position:absolute;top:2px;left:2px;
  width:18px;height:18px;border-radius:50%;background:var(--text);
  transition:transform 0.2s;
}
.st-toggle input:checked + .st-toggle-track { background:var(--accent) }
.st-toggle input:checked + .st-toggle-track::after { transform:translateX(16px);background:#000 }
.st-danger { margin:0 1rem 2rem }
.st-danger-btn {
  width:100%;padding:0.7rem;border-radius:14px;
  background:color-mix(in srgb,var(--error) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--error) 25%,transparent);
  color:var(--error);font-family:inherit;font-size:0.82rem;font-weight:600;
  cursor:pointer;transition:background 0.15s;
}
.st-danger-btn:active { background:color-mix(in srgb,var(--error) 20%,transparent) }

/* ===== FACTORY RESET MODAL ===== */
.fr-modal { max-width:340px;padding:1.5rem;text-align:center }
.fr-header { display:flex;flex-direction:column;align-items:center;gap:0.6rem;margin-bottom:0.75rem }
.fr-header h2 { font-size:1.1rem;color:var(--error);margin:0 }
.fr-warning { font-size:0.82rem;color:var(--text-secondary);margin:0 0 0.75rem;line-height:1.4 }
.fr-list { display:grid;grid-template-columns:1fr 1fr;gap:0.35rem;margin-bottom:0.75rem }
.fr-list span { padding:0.4rem 0.5rem;background:color-mix(in srgb,var(--error) 8%,var(--surface-2));border-radius:6px;font-size:0.72rem;color:var(--text);font-weight:500;text-align:center }
.fr-note { font-size:0.78rem;color:var(--error);margin:0 0 1rem;line-height:1.4 }
.fr-note strong { color:var(--text) }
.fr-actions { display:flex;flex-direction:column;gap:0.4rem }
.fr-cancel { width:100%;padding:0.65rem;border:none;background:none;color:var(--text-secondary);font-size:0.82rem;font-weight:600;cursor:pointer;font-family:inherit;border-radius:8px;transition:background 0.15s }
.fr-cancel:active { background:var(--surface-2) }
.fr-confirm { width:100%;padding:0.65rem;border:none;background:var(--error);color:#fff;font-size:0.85rem;font-weight:700;cursor:pointer;font-family:inherit;border-radius:8px;transition:opacity 0.2s }
.fr-confirm:active { opacity:0.8 }
.fr-loading { display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.75rem;margin-top:0.75rem;background:var(--surface-2);border-radius:8px;font-size:0.82rem;color:var(--text-secondary) }
.fr-spinner { width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:frSpin 0.6s linear infinite }
@keyframes frSpin { to { transform:rotate(360deg) } }

/* ===== WORKOUT DROPDOWN MENU ===== */
.ws-dropdown { position:absolute;top:100%;right:0.75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;z-index:50;min-width:160px;box-shadow:0 4px 20px rgba(0,0,0,0.4) }
.ws-dropdown-item { display:block;width:100%;padding:0.65rem 0.9rem;border:none;background:none;color:var(--text);font-family:inherit;font-size:0.82rem;text-align:left;cursor:pointer }
.ws-dropdown-item:active { background:var(--surface-2) }
.ws-header { position:relative }

/* ===== HOME CARD DROPDOWN MENU ===== */
.home-wo-menu-btn, .home-group-menu-btn { background:none;border:none;color:var(--text-secondary);font-size:0.85rem;padding:0.2rem 0.4rem;cursor:pointer;letter-spacing:1px;border-radius:var(--radius-sm) }
.home-wo-menu-btn:active, .home-group-menu-btn:active { background:var(--surface-2) }
.home-dropdown { position:absolute;right:0;top:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;z-index:50;min-width:150px;box-shadow:0 4px 20px rgba(0,0,0,0.4) }
.home-dropdown-item { display:block;width:100%;padding:0.6rem 0.85rem;border:none;background:none;color:var(--text);font-family:inherit;font-size:0.8rem;text-align:left;cursor:pointer }
.home-dropdown-item:active { background:var(--surface-2) }
.home-wo-card, .home-group-header { position:relative }

/* ===== WARM-UP SETS ===== */
.ed-section-header { display:flex;align-items:center;gap:0.4rem;padding:0.5rem 0.75rem 0.25rem;font-size:0.7rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-secondary) }
.ed-section-label { flex:1 }
.ed-set-warmup { opacity:0.7;background:var(--surface-2);border-radius:var(--radius-sm);margin-bottom:2px }
.ed-set-warmup.is-done { opacity:0.5 }
.ed-set-wu-label { font-size:0.6rem;color:var(--text-secondary);background:var(--surface);padding:0.15rem 0.35rem;border-radius:4px;letter-spacing:0.04em;margin-left:auto;white-space:nowrap }
.skip-warmups-btn { display:block;width:100%;padding:0.5rem;margin-top:0.5rem;background:none;border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:0.72rem;cursor:pointer;font-family:inherit;text-align:center }
.skip-warmups-btn:active { background:var(--surface-2) }
.ed-section-header-wu-done { color:var(--accent);opacity:0.7;cursor:default }
.ed-section-wu-summary { font-weight:400;font-size:0.65rem;color:var(--text-secondary);text-transform:none;letter-spacing:0 }
.ed-section-wu-badge { display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#000;font-size:0.6rem;font-weight:800 }
.ed-set-working-pending { opacity:0.8;border-style:dashed }
.ed-set-working-pending:active { background:var(--surface-2) }
.ed-set-working-label { font-size:0.6rem;color:var(--text-secondary);background:var(--surface-2);padding:0.15rem 0.35rem;border-radius:4px;letter-spacing:0.04em;margin-left:auto;white-space:nowrap }

/* ===== EXERCISE SETUP CARD ===== */
.ed-setup-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:0.85rem;margin-bottom:1rem }
.ed-setup-title { font-size:0.85rem;font-weight:700;margin-bottom:0.25rem }
.ed-setup-meta { display:flex;align-items:center;gap:0.4rem;margin-bottom:0.75rem;flex-wrap:wrap }
.ed-setup-row { display:flex;align-items:center;justify-content:space-between;padding:0.4rem 0;border-bottom:1px solid var(--border) }
.ed-setup-label { font-size:0.78rem;font-weight:600;color:var(--text);min-width:5rem }
.ed-setup-controls { display:flex;align-items:center;gap:0.35rem }
.ed-setup-value { font-size:1.1rem;font-weight:800;min-width:2.5rem;text-align:center;font-variant-numeric:tabular-nums }
.ed-setup-btn { width:44px;height:44px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:0.78rem;font-weight:700;cursor:pointer;font-family:inherit;display:grid;place-items:center }
.ed-setup-btn:active { background:var(--surface-3) }
.ed-setup-toggle { display:flex;align-items:center;gap:0.5rem;padding:0.6rem 0;font-size:0.8rem;font-weight:600;cursor:pointer }
.ed-setup-toggle input[type="checkbox"] { display:none }
.ed-setup-toggle-track { width:38px;height:22px;background:var(--surface-2);border-radius:11px;position:relative;transition:background 0.2s;flex-shrink:0;border:1px solid var(--border) }
.ed-setup-toggle-track::after { content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text-secondary);transition:all 0.2s }
.ed-setup-toggle input:checked + .ed-setup-toggle-track { background:var(--accent);border-color:var(--accent) }
.ed-setup-toggle input:checked + .ed-setup-toggle-track::after { background:#000;left:18px }

/* ===== FOCUS MODE ===== */
.focus-mode .sidebar { display: none !important; }
.focus-mode .bottom-nav { display: none !important; }
.focus-mode .topbar { display: none !important; }
.focus-mode .app-layout { padding-left: 0 !important; }
.focus-mode .main-area { max-width: 100%; padding-top: 0.5rem; }
/* Hide non-essential UI */
.focus-mode .ws-desc,
.focus-mode .ws-add-ex-btn,
.focus-mode .ed-tabs { display: none !important; }

/* ===== WARMUP / STRETCH MODALS ===== */
#wrmRoutineList > div { border-bottom:1px solid var(--border);font-size:0.82rem }
#wrmRoutineList > div:last-child { border-bottom:0 }

/* ===== REST TIMER V2 ===== */
.rest-timer {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  min-width: 200px;
}
.rt-content { display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:1rem 1.5rem }
.rt-label { font-size:0.65rem;font-weight:800;letter-spacing:0.12em;color:var(--text-secondary);text-transform:uppercase }
.rt-ring { position:relative;width:72px;height:72px }
.rt-ring svg { width:100%;height:100% }
.rt-time {
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:"Plus Jakarta Sans",sans-serif;font-size:1.3rem;font-weight:800;font-variant-numeric:tabular-nums
}
.rt-controls { display:flex;gap:0.4rem }
.rt-chip {
  min-height:40px;padding:0 0.85rem;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--border);
  font-weight:600;font-size:0.72rem;color:var(--text);cursor:pointer;font-family:inherit;
  display:grid;place-items:center
}
.rt-chip:active { background:var(--surface-3) }
.rt-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== PREVIOUS PERFORMANCE CARD ===== */
.ed-prev-perf { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:0.65rem 0.75rem;margin-bottom:0.5rem }
.ed-prev-perf-header { font-size:0.65rem;font-weight:700;color:var(--text-secondary);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:0.35rem }
.ed-prev-perf-sets { display:flex;flex-wrap:wrap;gap:0.3rem;margin-bottom:0.3rem }
.ed-prev-perf-set { font-size:0.85rem;font-weight:700;color:var(--text);background:var(--surface-2);padding:0.15rem 0.5rem;border-radius:var(--radius-sm) }
.ed-prev-perf-footer { font-size:0.7rem;color:var(--text-secondary);font-weight:500 }

/* ===== TODAY'S TARGET CARD ===== */
.ed-target { background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius);padding:0.65rem 0.75rem;margin-bottom:0.5rem }
.ed-target-header { font-size:0.65rem;font-weight:700;color:var(--accent);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:0.15rem }
.ed-target-value { font-size:1.1rem;font-weight:800;color:var(--text) }
.ed-target-reason { font-size:0.7rem;color:var(--text-secondary);font-weight:500;margin-top:0.15rem }

.ed-rest-info { display:flex;align-items:center;gap:0.4rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:0.5rem 0.65rem;margin-bottom:0.5rem;font-size:0.78rem }
.ed-rest-label { color:var(--text-secondary);font-weight:600 }
.ed-rest-value { color:var(--text);font-weight:700 }
.ed-rest-apply { margin-left:auto;font-size:0.65rem;font-weight:700;color:var(--accent);padding:0.2rem 0.5rem;border:1px solid var(--accent);border-radius:6px;cursor:pointer;background:transparent;transition:background 0.15s }
.ed-rest-apply:hover { background:var(--accent-10) }

/* ===== SET PROGRESS TRACKER ===== */
.ed-progress { display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;margin-bottom:0.5rem;background:var(--surface-2);border-radius:var(--radius-sm) }
.ed-progress.is-complete { background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--accent) }
.ed-progress-dots { font-size:0.9rem;letter-spacing:0.2em;color:var(--accent);font-weight:700 }
.ed-progress-label { font-size:0.72rem;font-weight:600;color:var(--text-secondary);margin-left:auto }
.ed-progress.is-complete .ed-progress-label { color:var(--accent) }

/* ===== EXERCISE COMPLETION STATE ===== */
.ed-ex-complete { display:flex;align-items:center;gap:0.5rem;padding:0.85rem;margin-bottom:0.5rem;background:color-mix(in srgb, var(--accent) 8%, transparent);border:1px solid var(--accent);border-radius:var(--radius);margin-top:0.5rem }
.ed-ex-complete-icon { width:28px;height:28px;border-radius:50%;background:var(--accent);color:#000;display:grid;place-items:center;font-size:0.85rem;font-weight:800;flex-shrink:0 }
.ed-ex-complete-label { font-size:0.85rem;font-weight:700;color:var(--accent) }
.ed-ex-complete-btn { margin-left:auto;min-height:40px;padding:0 1rem;border-radius:var(--radius-sm);background:var(--accent);color:#000;font-weight:700;font-size:0.78rem;border:none;cursor:pointer;font-family:inherit;white-space:nowrap }
.ed-ex-complete-btn:active { opacity:0.85 }

/* ===== WARM-UP STATUS ===== */
.ed-wu-status { display:flex;align-items:center;gap:0.4rem;padding:0.5rem 0.75rem;margin-bottom:0.35rem;background:var(--surface-2);border-radius:var(--radius-sm);font-size:0.78rem;font-weight:600;cursor:default }
.ed-wu-status.is-done { background:color-mix(in srgb, var(--accent) 8%, transparent);border:1px solid var(--accent) }
.ed-wu-status-label { font-weight:400;font-size:0.7rem;color:var(--text-secondary);margin-left:0.25rem }
.ed-wu-badge { margin-left:auto;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#000;display:grid;place-items:center;font-size:0.65rem;font-weight:800;flex-shrink:0 }
.ed-wu-status.is-done .ed-wu-badge { background:var(--accent) }

/* ===== EXERCISE NOTES ===== */
.ed-notes { margin-top:0.5rem;padding-bottom:0.5rem }
.ed-notes-header { font-size:0.78rem;font-weight:600;color:var(--text-secondary);cursor:pointer;display:block;padding:0.5rem 0 }
.ed-notes-header:active { color:var(--text) }
.ed-notes-body { overflow:hidden;transition:max-height 0.2s }
.ed-notes-body.is-hidden { display:none }
.ed-notes-input { width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.6rem;font-size:0.82rem;color:var(--text);font-family:inherit;resize:vertical;min-height:60px }
.ed-notes-input:focus { border-color:var(--accent);outline:none }

/* ===== 1RM TAB ===== */
/* ===== ED TAB CONTENT ===== */
.ed-content { display:none }

/* ===== ED SET ROW REMOVE TIMESTAMP ===== */
.ed-set-row .ed-set-time { display:none }

/* ===== ANALYZE CARD WIDE ===== */
.ea-card-wide { grid-column:1/-1 }

/* ===== ED PERFORMANCE/TARGET CONTAINERS ===== */
#edPerformanceCard:empty { display:none }
#edTargetCard:empty { display:none }
#edProgressTracker:empty { display:none }

/* ===== SET COMPLETION CHECKMARK ===== */
.ed-set-check { width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:0.7rem;font-weight:800;flex-shrink:0 }
.ed-set-working-pending .ed-set-check { border:2px solid var(--border);color:transparent;background:transparent }
.ed-set-row:not(.ed-set-working-pending) .ed-set-check { background:var(--accent);color:#000;border:2px solid var(--accent) }

/* ===== EDIT SET BOTTOM SHEET ===== */
.es-edit-actions { display:flex;gap:0.5rem;margin-top:0.5rem }
.es-edit-actions .as-save { flex:1 }
.es-edit-del { min-height:52px;padding:0 1rem;border-radius:var(--radius);background:color-mix(in srgb, var(--red) 10%, transparent);border:1px solid var(--red);color:var(--red);font-weight:700;font-size:0.82rem;font-family:inherit;cursor:pointer;display:grid;place-items:center;white-space:nowrap }
.es-edit-del:active { background:color-mix(in srgb, var(--red) 20%, transparent) }

/* ===== QUICK WEIGHT ±2.5 BUTTONS ===== */
#esWeightMinus2, #esWeightPlus2 { font-size:0.8rem }

/* ===== MOBILE TOUCH TARGETS ===== */
@media (pointer:coarse) {
  .qa-btn, .rt-chip, .ed-ex-complete-btn, .ed-setup-btn { min-height:48px;min-width:48px }
  .ed-set-row, .ed-set-working-pending { min-height:52px;padding:0.75rem }
  .ed-set-num { width:32px;height:32px }
  .ed-set-check { width:26px;height:26px;font-size:0.8rem }
  .as-btn { width:52px;height:52px }
  .ed-tab { padding:0.6rem 0 }
}

/* ===== WEIGHT LOG ENTRY LIST ===== */
.wl-entry-row { display:flex;align-items:center;gap:0.4rem;padding:0.35rem 0.4rem;border-radius:var(--radius-sm);font-size:0.78rem;background:var(--surface-2) }
.wl-entry-weight { font-weight:700;color:var(--accent);min-width:55px }
.wl-entry-date { color:var(--text-secondary);flex:1 }
.wl-entry-notes { color:var(--text-secondary);font-size:0.72rem;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.wl-entry-edit,.wl-entry-del { background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:0.82rem;padding:0.2rem;border-radius:4px }
.wl-entry-edit:hover,.wl-entry-del:hover { background:var(--surface-3);color:var(--text) }
.wl-entry-del { color:var(--red) }

/* ===== NUTRITION TARGETS ===== */
.nut-targets { display:flex;flex-direction:column;gap:0.35rem }
.nut-target-row { display:flex;justify-content:space-between;align-items:center;font-size:0.78rem;padding:0.3rem 0 }
.nut-target-label { color:var(--text-secondary) }
.nut-target-value { font-weight:600 }
.nut-target-value.is-met { color:var(--accent) }
.nut-target-value.is-partial { color:var(--yellow) }
.nut-target-value.is-miss { color:var(--red) }

/* ===== HOME SCREEN COACH CARDS ===== */
.home-weekly-review { background:var(--surface-2);border-radius:var(--radius-sm);padding:0.25rem 0.5rem;margin-top:0.35rem;font-size:0.75rem }
.home-goal-analysis { margin-top:0.35rem;display:flex;flex-direction:column;gap:0.3rem }

/* ===== TYPOGRAPHY SYSTEM ===== */
h1, .h1 { font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em }
h2, .h2 { font-size: 24px; font-weight: 700; line-height: 1.3 }
h3, .h3 { font-size: 18px; font-weight: 700; line-height: 1.3 }
h4, .h4 { font-size: 16px; font-weight: 600; line-height: 1.3 }

/* ===== HOME GREETING & STATS ===== */
.home-greeting-line { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 0.1rem; font-weight: 500 }
.home-name-line { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.35rem; color: var(--text) }
.home-dash-card { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 0.85rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04) }
.home-dash-grid { display: grid; grid-template-columns: repeat(4, 1fr) }
.home-dash-item { padding: 0.85rem 0.25rem; text-align: center; border-right: 1px solid var(--border); cursor: pointer }
.home-dash-item:last-child { border-right: 0 }
.home-dash-item:active { background: var(--surface-2) }
.home-dash-value { display: block; font-size: 1rem; font-weight: 800; color: var(--text); line-height: 1.2 }
.home-dash-label { display: block; font-size: 0.6rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.15rem; font-weight: 600 }

.home-qa-row { display:grid;grid-template-columns:1fr 1fr;gap:0.4rem;margin-bottom:0.85rem }
.home-qa-btn { min-height:48px;border-radius:var(--radius-sm);font-size:0.78rem;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:opacity 0.15s }
.home-qa-btn.primary { background:var(--accent);color:#000;font-weight:700 }
.home-qa-btn.secondary { background:var(--surface);color:var(--text);border:1px solid var(--border) }

.home-dash-due { display:block;font-size:0.55rem;color:var(--orange);margin-top:0.1rem;font-weight:600 }

.home-stats-row { display:flex;gap:0.5rem;margin-bottom:0.75rem }
.home-stat-card { flex:1;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:0.5rem 0.6rem }
.home-stat-label { font-size:0.6rem;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:0.06em }
.home-stat-value { font-size:0.82rem;font-weight:700;margin-top:0.15rem }
.home-stat-sub { font-size:0.65rem;color:var(--text-secondary);margin-top:0.05rem }

.home-health-row { display:flex;gap:0.5rem;margin-bottom:0.75rem }

.home-coach-sect { display:flex;flex-direction:column;gap:0.4rem;margin-bottom:0.75rem }
.home-coach-label { font-size:0.6rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-secondary);padding:0 0.15rem }

.home-incomplete-banner {
  display:flex;align-items:center;justify-content:space-between;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);
  border-radius:var(--radius-sm);padding:0.55rem 0.75rem;margin-bottom:0.75rem;cursor:pointer;
}
.home-incomplete-banner:active { background:color-mix(in srgb,var(--accent) 20%,transparent); }

/* ===== WORKOUT CARD REFINEMENT ===== */
.wo-card { min-height: 80px }
.home-wo-card { min-height: 80px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); padding: 0.75rem; margin-bottom: 0.35rem }
.wo-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0 }
.wo-card-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; flex: 1; min-width: 0 }
.wo-card-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.25rem }
.wo-card-actions { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; flex-shrink: 0 }
.wo-card-desc { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.15rem; line-height: 1.4 }

/* ===== WORKOUT CARD ITEMS (home list) ===== */
.wo-card-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 0.75rem;
  border-top: 1px solid var(--border);
  cursor: pointer;
  min-height: 56px;
}
.wo-card-item:first-child { border-top: 0; }
.wo-card-item:active { background: var(--surface-2); }
.wo-card-item.is-active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.wo-card-item-active-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wo-card-item-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: #000;
  background: var(--accent);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wo-card-item-menu {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.wo-card-item-menu:active { color: var(--text); }
.wo-card-item-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.wo-card-item-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wo-card-item-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wo-card-item-meta { font-size: 0.64rem; color: var(--text-secondary); font-weight: 500; }
.wo-card-item-btn {
  min-height: 28px;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 0.62rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.wo-card-item-btn:active { opacity: 0.85; }

/* ===== PROGRAM GROUP (home prog groups) ===== */
.wo-program-group { border-bottom: 1px solid var(--border); }
.wo-program-group:last-child { border-bottom: 0; }
.wo-program-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  cursor: pointer;
  min-height: 48px;
}
.wo-program-header:active { background: var(--surface-2); }
.wo-program-name {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}
.wo-program-toggle {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.wo-program-body { display: grid; }

.home-wo-open-btn {
  min-height: 44px; padding: 0 0.85rem; border-radius: 999px; background: var(--accent); color: #0a0a0a;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; border: 0; cursor: pointer;
}
.home-wo-open-btn.is-resume { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.home-wo-open-btn:active { opacity: 0.85; }

/* ===== STICKY QA BAR ===== */
.qa-bar { position: sticky; bottom: 0; background: var(--bg); padding: 0.5rem 0; z-index: 5; display: flex; gap: 0.35rem; border-top: 1px solid var(--border); margin-top: 0.5rem }
.qa-btn { flex: 1; min-height: 44px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 600; color: var(--text); padding: 0 0.35rem }
.qa-btn:active { background: var(--surface-3) }
.qa-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== EXERCISE SCREEN COMPRESS ===== */
.ed-content.is-active { display: flex; flex-direction: column; gap: 0 }
#edPerformanceCard:empty { display: none }
#edTargetCard:empty { display: none }
#edProgressTracker:empty { display: none }
.ed-content > div { margin-bottom: 0 }
.ed-content > * + * { margin-top: 0.25rem }
#edSetList { margin-top: 0.35rem }
.ed-section-header { margin-top: 0.35rem; margin-bottom: 0.2rem }

/* ===== COACH ACTIVATION ===== */
.ob-activation-card {
  text-align: center;
  padding: 2rem 1.5rem 1.5rem;
}

.ob-activation-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ob-activation-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.35rem;
}

.ob-activation-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 1.25rem;
  line-height: 1.4;
}

.ob-activation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  text-align: left;
}

.ob-activation-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
}

.ob-activation-item-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
}

.ob-activation-item-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.ob-activation-btn {
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
}

/* ===== HIDE OLD HI CLASSES ===== */
.hi-item, .hi-label, .hi-value { display: none }

/* ===== GENERATOR PREMIUM ===== */
.gn-modal { max-width: 580px; }

.gn-desc { margin-bottom: 1rem; }

.gn-body {
  min-height: 280px;
}

.gn-actions {
  display: flex;
  gap: 0.65rem;
  padding: 1rem 1.5rem 1.5rem;
  flex-shrink: 0;
}

.gn-actions button {
  min-height: 50px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.gn-actions button:active { transform: scale(0.97); }

.gn-actions .ob-btn-primary {
  flex: 1;
  background: var(--accent);
  color: #0a0a0a;
  border: 0;
}

.gn-actions .ob-btn-primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.gn-actions .ob-btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 0;
  padding: 0 1.25rem;
}

/* Location Cards */
.gn-location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.65rem;
}

.gn-location-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 18px;
  padding: 1.25rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-family: inherit;
  color: var(--text);
}

.gn-location-card:hover {
  background: var(--surface-2);
  border-color: var(--text-tertiary);
}

.gn-location-card:active { transform: scale(0.97); }

.gn-location-card.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.gn-location-card .gn-loc-icon {
  font-size: 2rem;
  line-height: 1;
}

.gn-location-card .gn-loc-title {
  font-size: 0.95rem;
  font-weight: 700;
}

.gn-location-card .gn-loc-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* Selectable Option Cards */
.gn-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gn-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 1rem 1.15rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}

.gn-option:hover { border-color: var(--text-tertiary); }

.gn-option:active { transform: scale(0.985); }

.gn-option.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.gn-option-icon {
  width: 40px;
  height: 40px;
  background: var(--surface-2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.gn-option-body { flex: 1; min-width: 0; }

.gn-option-title {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.gn-option-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Day Grid */
.gn-day-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}

.gn-day-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 1rem 0.4rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  color: var(--text);
  text-align: center;
}

.gn-day-card:hover { background: var(--surface-2); border-color: var(--text-tertiary); }

.gn-day-card:active { transform: scale(0.96); }

.gn-day-card.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.gn-day-num { font-size: 1.5rem; font-weight: 700; }

.gn-day-label { font-size: 0.68rem; color: var(--text-secondary); }

/* Duration Grid */
.gn-duration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.5rem;
}

.gn-duration-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  color: var(--text);
  text-align: center;
}

.gn-duration-card:hover { background: var(--surface-2); border-color: var(--text-tertiary); }

.gn-duration-card:active { transform: scale(0.96); }

.gn-duration-card.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.gn-dur-num { font-size: 1.35rem; font-weight: 700; }

.gn-dur-label { font-size: 0.72rem; color: var(--text-secondary); }

/* Multi-select chips */
.gn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.gn-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.gn-chip:hover { border-color: var(--text-tertiary); }

.gn-chip:active { transform: scale(0.96); }

.gn-chip.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}

.gn-chip-icon { font-size: 0.9rem; }

/* Summary */
.gn-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gn-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.gn-summary-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 0.85rem;
  border: 1px solid var(--border);
}

.gn-summary-label {
  font-size: 0.68rem;
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}

.gn-summary-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.gn-summary-volume {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-radius: 14px;
  padding: 1rem;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.gn-summary-volume-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-bottom: 0.15rem;
}

.gn-summary-volume-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
}

.gn-summary-note {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.4;
}

.gn-toggle-row {
  margin: 0.75rem 0;
  padding: 0.6rem 0.75rem;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.gn-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.gn-toggle-label input { display: none; }

.gn-toggle-slider {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--surface-3);
  border-radius: 11px;
  flex-shrink: 0;
  transition: background 0.2s;
}

.gn-toggle-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}

.gn-toggle-label input:checked + .gn-toggle-slider { background: var(--accent); }
.gn-toggle-label input:checked + .gn-toggle-slider::after { transform: translateX(18px); background: #fff; }

.gn-toggle-text { display: flex; flex-direction: column; gap: 0.1rem; }
.gn-toggle-text strong { font-size: 0.8rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.gn-toggle-desc { font-size: 0.65rem; color: var(--text-secondary); line-height: 1.2; }

/* Overlay */
.gm-overlay {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 24px;
}

.gm-overlay-inner {
  text-align: center;
  padding: 2.5rem 2rem;
  max-width: 320px;
  animation: scaleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.gm-overlay-inner.is-hidden { animation: none; }

.gm-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--surface-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: gnSpin 0.8s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes gnSpin { to { transform: rotate(360deg); } }

.gm-ol-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.gm-ol-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.gm-ol-icon { margin-bottom: 1rem; }
.gm-ol-icon svg { width: 56px; height: 56px; }
.gm-ol-meta { font-size: 0.72rem; color: var(--text-tertiary); margin-bottom: 1.25rem; line-height: 1.4; }

/* Responsive */
@media (max-width: 520px) {
  .gn-location-grid { grid-template-columns: 1fr; }
  .gn-day-grid { grid-template-columns: repeat(3, 1fr); }
  .gn-duration-grid { grid-template-columns: repeat(3, 1fr); }
  .gn-summary-grid { grid-template-columns: 1fr 1fr; }
  .gn-modal { border-radius: 0; }
  .gn-actions { padding: 1rem; }
}

/* ===== GOAL SELECTOR CARDS ===== */
.gs-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gs-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}

.gs-card:hover {
  border-color: var(--text-tertiary);
}

.gs-card:active {
  transform: scale(0.985);
}

.gs-card.is-sel {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.gs-card-icon {
  width: 44px;
  height: 44px;
  background: var(--surface-2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.gs-card-body {
  flex: 1;
  min-width: 0;
}

.gs-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.gs-card-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

.gs-card-tag {
  display: inline-block;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.gs-card-meta {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* ===== FORM BOTTOM SPACING (prevent nav overlap) ===== */
.screen { padding-bottom: 0 }
.ws-exercises { padding-bottom: 1rem }
.ws-actions { padding-bottom: env(safe-area-inset-bottom, 0px) }
.modal-card { margin-bottom: env(safe-area-inset-bottom, 0px) }
/* .nw-footer removed — replaced by new create workout layout */

/* ===== ONBOARDING V2 PREMIUM ===== */
/* ==========================================================================
   ONBOARDING — Premium Native Experience
   Inspired by Apple Fitness, Oura, Whoop, Linear
   ========================================================================== */

.onboard-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 1rem;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.onboard-overlay.is-hidden {
  display: none;
  opacity: 0;
}

.onboard-overlay.animate-in {
  animation: obFadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.onboard-overlay.animate-out {
  animation: obFadeDown 0.3s ease-in both;
}

@keyframes obFadeUp {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes obFadeDown {
  from { opacity: 1; }
  to { opacity: 0; }
}

.onboard-modal {
  position: relative;
  background: var(--bg);
  border-radius: 28px;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}

.ob-close-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ob-close-btn:hover { background: var(--surface-3); color: var(--text); }

.onboard-stage {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.75rem 2rem 1.25rem;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}

.onboard-stage::-webkit-scrollbar { display: none; }

.onboard-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ---- Step base ---- */
.ob-step {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 340px;
}

.ob-step-question {
  position: relative;
}

/* ---- Question typography ---- */
.ob-question {
  font-size: var(--text-heading);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.ob-why {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  line-height: 1.4;
  margin-bottom: 0.5rem;
  max-width: 380px;
}

/* ---- Progress Dots ---- */
.ob-progress-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 1.5rem;
  min-height: 10px;
}

.ob-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ob-dot.is-done {
  background: var(--accent);
  opacity: 0.6;
}

.ob-dot.is-active {
  background: var(--accent);
  opacity: 1;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent);
  transform: scale(1.15);
}

/* ---- Live Summary ---- */
.ob-live-summary {
  margin-top: auto;
  padding-top: 1.25rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  line-height: 1.5;
  letter-spacing: 0.01em;
  min-height: 1.5em;
}

/* ---- Welcome Screen ---- */
.ob-welcome {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 340px;
}

.ob-welcome-logo svg {
  display: block;
  margin: 0 auto;
}

.ob-welcome-tagline {
  font-size: var(--text-heading);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-top: 0.5rem;
}

.ob-welcome-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

/* ---- Buttons ---- */
.ob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: inherit;
  border: 0;
  padding: 0 2rem;
  -webkit-tap-highlight-color: transparent;
}

.ob-btn:active {
  transform: scale(0.97);
}

.ob-btn-primary {
  background: var(--accent);
  color: #0a0a0a;
}

.ob-btn-primary:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.ob-btn-glow {
  box-shadow: 0 4px 24px color-mix(in srgb, var(--accent) 35%, transparent);
}

.ob-btn-next {
  width: 100%;
  margin-top: 0.75rem;
}

.ob-back-wrap {
  display: flex;
  margin-bottom: 0.5rem;
}
.ob-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s ease;
}
.ob-btn-back:hover { color: var(--text); }

.ob-btn-link {
  background: none;
  border: 0;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem;
  font-family: inherit;
  transition: color 0.15s;
}

.ob-btn-link:hover { color: var(--text-secondary); }

/* ---- Name Step ---- */
.ob-name-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
}

.ob-input-name {
  width: 100%;
  max-width: 320px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(255,255,255,0.1);
  padding: 0.5rem 0.25rem 0.75rem;
  font-size: 2rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  outline: none;
  text-align: center;
  transition: border-color 0.25s ease;
}

.ob-input-name:focus {
  border-color: var(--accent);
}

.ob-input-name::placeholder {
  color: var(--text-tertiary);
  font-weight: 400;
}

/* ===================================================================
   WHEEL PICKER — iOS-style scroll picker
   =================================================================== */

.ob-wheel-clip {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface);
  margin: 0.5rem 0;
  user-select: none;
  -webkit-user-select: none;
}

.ob-wheel-shade {
  position: absolute;
  left: 0; right: 0;
  height: 68px;
  z-index: 10;
  pointer-events: none;
}

.ob-wheel-shade-top {
  top: 0;
  background: linear-gradient(to bottom, var(--surface) 0%, transparent 100%);
}

.ob-wheel-shade-bot {
  bottom: 0;
  background: linear-gradient(to top, var(--surface) 0%, transparent 100%);
}

.ob-wheel-highlight {
  position: absolute;
  left: 8px; right: 8px;
  top: 50%;
  height: 44px;
  transform: translateY(-22px);
  background: var(--surface-2);
  border-radius: 10px;
  z-index: 5;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.04);
}

.ob-wheel-viewport {
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
  z-index: 8;
  outline: none;
}

.ob-wheel-viewport::-webkit-scrollbar { display: none; }

.ob-wheel-track {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ob-wi {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 450;
  color: rgba(255,255,255,0.2);
  transition: color 0.15s ease, font-size 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.ob-wi.is-selected {
  font-size: 2.85rem;
  font-weight: 650;
  color: #fff;
  letter-spacing: -0.02em;
}

/* Units next to wheel */
.ob-wheel-unit {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-secondary);
  z-index: 12;
  pointer-events: none;
}

/* ---- Dual Weight Layout ---- */
.ob-weight-dual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0.5rem 0;
}

.ob-wheel-area {
  flex-shrink: 0;
}

.ob-wheel-half {
  width: 130px;
}

.ob-weight-dual .ob-wheel-half .ob-wheel-clip {
  margin: 0;
}

.ob-weight-dual .ob-wheel-clip {
  height: 200px;
}

.ob-weight-dot {
  font-size: 2.85rem;
  font-weight: 650;
  color: #fff;
  padding: 0 0.15rem;
  margin-top: -0.15rem;
  z-index: 20;
  pointer-events: none;
  letter-spacing: -0.04em;
}

.ob-weight-unit {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 0.75rem;
  margin-top: -0.15rem;
  z-index: 20;
  pointer-events: none;
}

.ob-weight-dual .ob-wheel-viewport {
  scroll-snap-type: y mandatory;
}

/* ---- Goal Cards ---- */
.ob-goal-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.5rem 0;
}

.ob-goal-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: left;
  font-family: inherit;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.ob-goal-card:hover {
  background: var(--surface-2);
  border-color: rgba(255,255,255,0.1);
  transform: translateY(-1px);
}

.ob-goal-card:active {
  transform: scale(0.985);
}

.ob-goal-card.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: 0 0 0 1px var(--accent), 0 4px 20px color-mix(in srgb, var(--accent) 15%, transparent);
}

.ob-goal-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: background 0.25s ease;
}

.ob-goal-card.is-active .ob-goal-icon {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
}

.ob-goal-body {
  flex: 1;
  min-width: 0;
}

.ob-goal-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.1rem;
}

.ob-goal-desc {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.ob-goal-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ob-goal-card.is-active .ob-goal-check {
  opacity: 1;
}

.ob-goal-check svg {
  display: block;
}

/* ---- Experience Mode Cards ---- */
.ob-experience-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.ob-exp-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: left;
  font-family: inherit;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.ob-exp-card:hover {
  background: var(--surface-2);
  border-color: rgba(255,255,255,0.1);
  transform: translateY(-1px);
}

.ob-exp-card:active {
  transform: scale(0.985);
}

.ob-exp-card.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: 0 0 0 1px var(--accent), 0 4px 20px color-mix(in srgb, var(--accent) 15%, transparent);
}

.ob-exp-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: background 0.25s ease;
}

.ob-exp-card.is-active .ob-exp-icon {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
}

.ob-exp-body {
  flex: 1;
  min-width: 0;
}

.ob-exp-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.15rem;
}

.ob-exp-desc {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.ob-exp-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ob-exp-card.is-active .ob-exp-check {
  opacity: 1;
}

.ob-exp-check svg {
  display: block;
}

.ob-exp-note {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  text-align: center;
  margin: -0.25rem 0 0.25rem;
}

/* ---- Done Screen ---- */
.ob-step-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  min-height: 340px;
  padding: 0 1rem;
}

.ob-done-icon {
  margin-bottom: 0.5rem;
}

.ob-done-icon svg {
  display: block;
}

.ob-done-title {
  font-size: var(--text-heading);
  font-weight: 700;
  color: var(--text);
}

.ob-done-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 300px;
}

#obDoneBtn {
  margin-top: 0.75rem;
}

/* ---- Animations ---- */
@keyframes obSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ---- */
@media (max-width: 520px) {
  .onboard-modal {
    border-radius: 0;
    max-width: 100%;
    max-height: 100dvh;
    height: 100dvh;
  }

  .onboard-overlay {
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .onboard-stage {
    padding: 1.25rem 1.25rem 1rem;
  }

  .ob-question {
    font-size: 1.35rem;
  }

  .ob-step {
    min-height: 300px;
  }

  .ob-welcome {
    min-height: 300px;
  }

  .ob-step-done {
    min-height: 300px;
  }

  .ob-wi.is-selected {
    font-size: 2.2rem;
  }

  .ob-weight-dot {
    font-size: 2.2rem;
  }

  .ob-wheel-half {
    width: 100px;
  }

  .ob-goal-card {
    padding: 0.75rem 0.9rem;
  }

  .ob-goal-icon {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }
}

/* ===== RESPONSIVE FIXES v2 ===== */
@media (max-width: 600px) {
  .home-health-row { flex-direction: column; }
  .home-stats-row { flex-direction: column; }
  .wr-grid { grid-template-columns: repeat(2, 1fr); }
  .nw-exercise-area { flex: 1; }
  .page-container { padding: 0.75rem; }

  /* Home redesign responsive */
  .hm-greeting { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .hm-greeting-sub { font-size: 0.8rem; }
  .hm-stats-row { grid-template-columns: repeat(3,1fr); gap: 0.4rem; }
  .hm-stat-card { padding: 0.6rem; }
  .hm-stat-value { font-size: 1.1rem; }
  .hm-stat-label { font-size: 0.62rem; }
  .hm-today-section .today-card.row { flex-direction: column; align-items: stretch; text-align: center; }
  .hm-today-section .tc-ring-wrap { margin: 0 auto; }
  .hm-today-section .tc-water-actions { justify-content: center; }
  .hm-nutrition-section .tc-macro-grid { grid-template-columns: 1fr; gap: 0.4rem; }
  .hm-recent-list { gap: 0.35rem; }
  .hm-progress-link { padding: 0.7rem; }

  /* Readiness page responsive */
  .rr-hero-full { padding: 1.5rem 1rem; }
  .rr-hero-full-ring svg { width: 80px; height: 80px; }
  .rr-hero-full-score { font-size: 1.6rem; }
  .rr-components-grid { grid-template-columns: 1fr 1fr; gap: 0.4rem; }

  /* Command center responsive */
  .cc-metrics-row { grid-template-columns: repeat(2,1fr); gap: 0.4rem; }
  .cc-focus-card { padding: 0.75rem; }

  /* Program review responsive */
  .pr-metrics-grid { grid-template-columns: repeat(2,1fr); gap: 0.4rem; }
  .pr-section { padding: 0.75rem; }
}

@media (max-width: 480px) {
  .page-container { padding: 0.5rem; }
  .home-qa-row .home-qa-btn { font-size: 0.7rem; min-height: 42px; }
  .wr-grid { grid-template-columns: repeat(2, 1fr); }

  /* Home redesign responsive - tight */
  .hm-stats-row { grid-template-columns: repeat(3,1fr); gap: 0.3rem; }
  .hm-stat-card { padding: 0.5rem 0.35rem; }
  .hm-stat-value { font-size: 1rem; }
  .hm-stat-label { font-size: 0.58rem; }
  .hm-empty-workout { gap: 0.5rem; }
  .hm-empty-card { padding: 0.75rem; gap: 0.3rem; }
  .hm-empty-title { font-size: 0.82rem; }
  .hm-empty-desc { font-size: 0.68rem; }
  .hm-section-header { font-size: 0.82rem; padding: 0.5rem 0; }
  .hm-recent-item { padding: 0.5rem; font-size: 0.75rem; }

  /* Goal Center responsive */
  .gc-strategy-grid { grid-template-columns: repeat(2,1fr); gap: 0.4rem; }
  .gc-metrics-row { flex-direction: column; gap: 0.4rem; }

  /* Coach page compact */
  .co-home-hero { padding: 1rem; }
  .co-hero-greeting { font-size: 1rem; }
  .co-hero-message { font-size: 0.78rem; }

}

@media (min-width: 769px) {
  .nw-body { flex-direction: row; }
}

/* ===== UTILITY CLASSES ===== */
.btn-block { width: 100%; }
.btn-fill { flex: 1; }
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.gap-xs { gap: 0.25rem; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 0.75rem; }
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 0.75rem; }
.mb-0 { margin-bottom: 0; }
.nw-header-title { flex: 1; font-weight: 700; font-size: 0.9rem; }
.mt-xs { margin-top: 0.25rem; }
.m-0 { margin: 0; }
.pb-0 { padding-bottom: 0; }
.mb-md { margin-bottom: 1rem; }
.ta-center { text-align: center; }
.mh-44 { min-height: 44px; }
.mh-36 { min-height: 36px; }
.mh-50 { min-height: 50px; font-size: 0.95rem; }


.ob-ready-desc { font-size:var(--text-body);color:var(--text-secondary);margin-bottom:1.5rem;max-width:300px;line-height:1.5; }
.ob-ready-cards { display:flex;flex-direction:column;gap:0.75rem;width:100%;max-width:360px; }
.ob-ready-card { display:flex;align-items:center;gap:0.85rem;padding:1rem 1.25rem;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all 0.15s;text-align:left;width:100%; }
.ob-ready-card:hover { border-color:var(--text-tertiary);background:var(--surface-3); }
.ob-ready-card:active { transform:scale(0.98); }
.ob-ready-card-icon { width:44px;height:44px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--accent) 12%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.ob-ready-card-body { flex:1; }
.ob-ready-card-title { font-size:var(--text-card);font-weight:700;color:var(--text); }
.ob-ready-card-desc { font-size:var(--text-caption);color:var(--text-tertiary);margin-top:0.15rem; }

/* ===== HOME REDESIGN V2 ===== */
.hm-greeting { margin-bottom:1.25rem; }
.hm-greeting-text { font-size:var(--text-title);font-weight:800; }
.hm-greeting-msg { font-size:var(--text-body);color:var(--text-secondary);margin-top:0.25rem; }
.hm-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;margin-bottom:1rem; }
.hm-stat { background:var(--surface-2);border-radius:var(--radius-sm);padding:0.65rem;text-align:center; }
.hm-stat-val { font-size:var(--text-card);font-weight:700; }
.hm-stat-lbl { font-size:var(--text-small);color:var(--text-tertiary);margin-top:0.15rem; }
.hm-stat-due { color:var(--orange);font-weight:600; }
.hm-log-weight { display:flex;align-items:center;justify-content:center;gap:0.4rem;width:100%;padding:0.7rem;background:var(--surface-2);border:1.5px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-body);font-weight:600;cursor:pointer;margin-bottom:1rem;transition:all 0.15s; }
.hm-log-weight:hover { border-color:var(--text-tertiary);color:var(--text); }
.hm-log-weight:active { transform:scale(0.98); }

/* Log Weight Primary Card */
.hm-log-weight-card {
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface-2);border-radius:var(--radius);padding:1rem 1.25rem;
  margin-bottom:1.25rem;cursor:pointer;transition:all 0.15s;
  border:1.5px solid var(--border);
}
.hm-log-weight-card:hover { border-color:var(--text-tertiary);background:var(--surface-3); }
.hm-log-weight-card:active { transform:scale(0.98); }
.hm-lw-label { font-size:var(--text-caption);color:var(--text-tertiary);margin-bottom:0.2rem; }
.hm-lw-value { font-size:var(--text-heading);font-weight:800; }
.hm-lw-date { font-size:var(--text-small);color:var(--text-tertiary);margin-top:0.2rem; }
.hm-lw-action { display:flex;align-items:center;gap:0.35rem;padding:0.5rem 0.75rem;background:var(--accent);color:#000;border-radius:var(--radius-sm);font-size:var(--text-caption);font-weight:700;white-space:nowrap; }

.hm-section { margin-bottom:1.25rem; }
.hm-section-title { font-size:var(--text-caption);font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:0.6rem; }
.hm-workout-card { background:var(--surface-2);border-radius:var(--radius);padding:1rem;border:1.5px solid var(--border); }
.hm-wc-top { display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem; }
.hm-wc-name { font-size:var(--text-card);font-weight:700; }
.hm-wc-pct { font-size:var(--text-caption);font-weight:700;color:var(--accent); }
.hm-wc-focus { font-size:var(--text-caption);color:var(--text-secondary);margin-bottom:0.35rem; }
.hm-wc-bar { height:4px;background:var(--surface-3);border-radius:999px;overflow:hidden;margin-bottom:0.5rem; }
.hm-wc-fill { height:100%;background:var(--accent);border-radius:999px;transition:width 0.5s; }
.hm-wc-info { display:flex;gap:1rem;font-size:var(--text-caption);color:var(--text-tertiary);margin-bottom:0.35rem; }
.hm-wc-next { font-size:var(--text-caption);color:var(--text-secondary);margin-bottom:0.6rem; }
.hm-wc-btn { width:100%;padding:0.7rem;background:var(--accent);color:#000;border:none;border-radius:var(--radius-sm);font-weight:700;font-size:var(--text-body);cursor:pointer;transition:all 0.15s;margin-top:0.25rem; }
.hm-wc-btn:active { transform:scale(0.98);opacity:0.9; }
.hm-wc-btn-secondary { width:100%;padding:0.6rem;background:none;border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);font-weight:600;font-size:var(--text-caption);cursor:pointer;transition:all 0.15s;margin-top:0.35rem; }
.hm-wc-btn-secondary:hover { border-color:var(--text-tertiary);color:var(--text); }
.hm-wc-btn-secondary:active { transform:scale(0.98); }
.hm-empty-workout { display:flex;flex-direction:column;gap:0.75rem; }
.hm-empty-card { display:flex;align-items:center;gap:0.85rem;padding:1.1rem 1.25rem;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all 0.15s;text-align:left;width:100%; }
.hm-empty-card:hover { border-color:var(--text-tertiary);background:var(--surface-3); }
.hm-empty-card:active { transform:scale(0.98); }
.hm-empty-card svg { flex-shrink:0; }
.hm-empty-title { font-size:var(--text-body);font-weight:700;color:var(--text); }
.hm-empty-desc { font-size:var(--text-caption);color:var(--text-tertiary);display:block;margin-top:0.1rem; }

/* Progress Preview */
.hm-progress-preview { background:var(--surface-2);border-radius:var(--radius);padding:1rem;border:1.5px solid var(--border); }
.hm-pp-row { display:flex;justify-content:space-between;margin-bottom:0.5rem; }
.hm-pp-row:last-child { margin-bottom:0; }
.hm-pp-item { display:flex;flex-direction:column;gap:0.15rem; }
.hm-pp-label { font-size:var(--text-caption);color:var(--text-tertiary); }
.hm-pp-value { font-size:var(--text-body);font-weight:700; }

.hm-view-progress { width:100%;padding:0.7rem;background:none;border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-body);font-weight:600;cursor:pointer;transition:all 0.15s;text-align:center;margin-bottom:1rem; }
.hm-view-progress:hover { border-color:var(--text-tertiary);color:var(--text); }
.hm-workout-list-sm { display:flex;flex-direction:column;gap:0.35rem; }
.hm-workout-sm { display:flex;justify-content:space-between;align-items:center;padding:0.65rem 0.75rem;background:var(--surface-2);border-radius:var(--radius-sm);border:none;color:var(--text);font-size:var(--text-body);font-weight:600;cursor:pointer;text-align:left;width:100%; }
.hm-workout-sm:active { background:var(--surface-3); }
.hm-workout-sm-arrow { font-size:var(--text-caption);color:var(--text-tertiary); }

/* Utility: Section labels & cards */
.section-label { font-size:var(--text-caption);font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.05em;padding:0.5rem 0 0.35rem; }
.card-content { display:flex;flex-direction:column;gap:0.35rem; }
.empty-card { padding:1rem;background:var(--surface-2);border-radius:var(--radius-sm);font-size:var(--text-body);color:var(--text-tertiary);text-align:center; }
.empty-card-content { font-size:var(--text-body);color:var(--text-tertiary);line-height:1.4; }

/* PE Sheet (profile editor bottom sheet) */
.pe-section { transition:transform 0.12s ease; }
.pe-section:active { transform:scale(0.99); }

/* ---- Experience Mode Sheet ---- */
.ex-sheet-title { font-size:var(--text-heading);font-weight:800;margin-bottom:0.35rem; }
.ex-sheet-desc { font-size:var(--text-body);color:var(--text-secondary);margin-bottom:1.25rem;line-height:1.4; }
.ex-card { display:flex;align-items:center;gap:0.75rem;width:100%;padding:0.9rem 1rem;margin-bottom:0.6rem;background:var(--surface-2);border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all 0.2s;text-align:left;font-family:inherit;color:var(--text); }
.ex-card:hover { border-color:var(--text-tertiary);background:var(--surface-3); }
.ex-card:active { transform:scale(0.98); }
.ex-card.is-active { border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface-2)); }
.ex-card-icon { width:40px;height:40px;border-radius:12px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0; }
.ex-card-body { flex:1;min-width:0; }
.ex-card-label { font-size:var(--text-card);font-weight:700;margin-bottom:0.1rem; }
.ex-card-desc { font-size:var(--text-caption);color:var(--text-tertiary);line-height:1.35; }
.ex-card-check { width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s;color:var(--accent); }
.ex-card.is-active .ex-card-check { opacity:1; }
.ex-btn { display:block;width:100%;padding:0.75rem;margin-top:0.25rem;background:none;border:none;border-radius:var(--radius);color:var(--text-secondary);font-size:var(--text-body);font-weight:600;cursor:pointer;text-align:center;font-family:inherit;transition:all 0.15s; }
.ex-btn:hover { color:var(--text);background:var(--surface-2); }
.ex-btn:active { transform:scale(0.98); }