/* ═══════════════════════════════════════════════════════════
   FitForge v3.3 — Fully isolated, theme-proof layout
   All critical layout rules use !important to override themes
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

/* ── ISOLATION: override ANY WordPress theme ───────────────
   The app is wrapped in #fitforge-root which gets a hard reset
   ────────────────────────────────────────────────────────── */
#fitforge-root {
  all: initial !important;
  display: block !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #f0f0f8 !important;
  background: #09090b !important;
  width: 100% !important;
  min-height: 100vh !important;
  position: relative !important;
  overflow-x: hidden !important;
  -webkit-font-smoothing: antialiased !important;
  box-sizing: border-box !important;
}

/* Kill theme interference */
#fitforge-root *, #fitforge-root *::before, #fitforge-root *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ── CSS VARIABLES (inside root) ───────────────────────── */
#fitforge-root {
  --bg0: #09090b;
  --bg1: #0f0f18;
  --bg2: #151521;
  --bg3: #1b1b2a;
  --bg4: #222235;

  --bd1: rgba(255,255,255,0.05);
  --bd2: rgba(255,255,255,0.09);
  --bd3: rgba(255,255,255,0.16);

  --a:    #c8ff00;
  --a10:  rgba(200,255,0,0.10);
  --a20:  rgba(200,255,0,0.20);

  --ok:    #34d27b;  --ok10:  rgba(52,210,123,0.10);
  --warn:  #ff9f40;  --warn10:rgba(255,159,64,0.10);
  --err:   #ff5a5a;  --err10: rgba(255,90,90,0.10);
  --info:  #5b9dff;  --info10:rgba(91,157,255,0.10);
  --purp:  #a78bfa;  --purp10:rgba(167,139,250,0.10);

  --t1: #f0f0f8;
  --t2: rgba(240,240,248,0.55);
  --t3: rgba(240,240,248,0.28);

  --fdisp: 'Syne', sans-serif;
  --fmono: 'DM Mono', monospace;
  --fbody: 'Inter', -apple-system, sans-serif;

  --nav-h: 60px;
  --adm:   0px;  /* overridden by JS for WP admin bar */
}

/* WP admin bar adjustments */
body.admin-bar #fitforge-root { --adm: 32px; }
@media screen and (max-width: 782px) { body.admin-bar #fitforge-root { --adm: 46px; } }

/* ── ELEMENT RESETS ─────────────────────────────────────── */
#fitforge-root button  { all: unset; cursor: pointer; box-sizing: border-box; }
#fitforge-root input   { all: unset; box-sizing: border-box; -moz-appearance: textfield; }
#fitforge-root input::-webkit-inner-spin-button,
#fitforge-root input::-webkit-outer-spin-button { -webkit-appearance: none; }
#fitforge-root a       { color: var(--a); text-decoration: none; }
#fitforge-root ul, #fitforge-root ol { list-style: none; }
#fitforge-root p, #fitforge-root h1, #fitforge-root h2, #fitforge-root h3 { margin: 0; padding: 0; font-weight: normal; }
#fitforge-root img     { max-width: 100%; }

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes ff-spin    { to { transform: rotate(360deg); } }
@keyframes ff-fadein  { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes ff-slideup { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes ff-slidein { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }

/* ── LOADING SCREEN ─────────────────────────────────────── */
#fitforge-root .ff-loading {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 16px;
  color: var(--t3);
  font-size: 13px;
  font-family: var(--fbody);
}

#fitforge-root .ff-spin {
  width: 36px; height: 36px;
  border: 2.5px solid var(--bd2);
  border-top-color: var(--a);
  border-radius: 50%;
  animation: ff-spin 0.7s linear infinite;
}
#fitforge-root .ff-spin--lg { width: 44px; height: 44px; }

#fitforge-root .ff-loading-text {
  font-size: 14px; color: var(--t2); letter-spacing: 0.02em;
}

/* ── SHELL ──────────────────────────────────────────────── */
#fitforge-root .ff-shell {
  display: flex !important;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg0);
}

/* ── TOP BAR (desktop nav) ──────────────────────────────── */
#fitforge-root .ff-topnav {
  position: fixed !important;
  top: var(--adm) !important;
  left: 0 !important; right: 0 !important;
  z-index: 900 !important;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(9,9,11,0.97);
  border-bottom: 1px solid var(--bd2);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.ff-topnav__brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--fdisp); font-size: 16px; font-weight: 800;
  color: var(--t1); letter-spacing: -0.03em;
}
.ff-topnav__logo { color: var(--a); font-size: 22px; line-height: 1; }

.ff-topnav__tabs { display: flex; align-items: center; gap: 4px; }

.ff-topnav__tab {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--t3);
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
  white-space: nowrap;
}
.ff-topnav__tab svg {
  width: 16px; height: 16px;
  stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.ff-topnav__tab:hover { color: var(--t2); background: var(--bg2); }
.ff-topnav__tab.is-on { color: var(--a); background: var(--a10); }

/* ── BOTTOM NAV (mobile) ────────────────────────────────── */
#fitforge-root .ff-botnav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important; right: 0 !important;
  z-index: 900 !important;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex !important;
  align-items: stretch;
  background: rgba(9,9,11,0.97);
  border-top: 1px solid var(--bd2);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.ff-botnav__tab {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  color: var(--t3); font-size: 9px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: color 0.15s;
  cursor: pointer;
  position: relative;
}
.ff-botnav__tab svg {
  width: 22px; height: 22px;
  stroke: currentColor; stroke-width: 1.8;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.ff-botnav__tab.is-on { color: var(--a); }
.ff-botnav__tab.is-on::after {
  content: '';
  position: absolute; top: 0; left: 25%; right: 25%;
  height: 2px; background: var(--a); border-radius: 0 0 2px 2px;
}

/* ── CONTENT AREA ───────────────────────────────────────── */
#fitforge-root .ff-content {
  flex: 1;
  padding-top: calc(54px + var(--adm));
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
  min-height: 100vh;
}

/* On very large screens, hide bottom nav and use top nav fully */
@media (min-width: 900px) {
  #fitforge-root .ff-botnav { display: none !important; }
  #fitforge-root .ff-content {
    padding-bottom: 40px;
  }
}
@media (max-width: 899px) {
  #fitforge-root .ff-topnav .ff-topnav__tabs { display: none; }
}

/* ── VIEWS ──────────────────────────────────────────────── */
.ff-view {
  display: none;
  padding: 24px 18px 0;
  max-width: 800px;
  margin: 0 auto;
  animation: ff-fadein 0.22s ease;
}
.ff-view.is-on { display: block !important; }

/* Section title */
.ff-sec {
  font-size: 10px; font-weight: 700;
  color: var(--t3); text-transform: uppercase;
  letter-spacing: 0.09em; margin-bottom: 12px;
}

/* View heading */
.ff-vhd { margin-bottom: 20px; }
.ff-vhd h1 {
  font-family: var(--fdisp); font-size: 28px; font-weight: 800;
  letter-spacing: -0.04em; color: var(--t1); line-height: 1.1;
}
.ff-vhd p { font-size: 13px; color: var(--t2); margin-top: 5px; }

/* ── STATS GRID ─────────────────────────────────────────── */
.ff-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 8px; margin-bottom: 20px;
}
.ff-stat {
  background: var(--bg2); border: 1px solid var(--bd1);
  border-radius: 14px; padding: 14px 13px;
}
.ff-stat__v {
  display: block; font-family: var(--fmono);
  font-size: 24px; color: var(--a); letter-spacing: -0.04em; line-height: 1.1;
}
.ff-stat__l {
  display: block; font-size: 9px; color: var(--t3);
  text-transform: uppercase; letter-spacing: 0.07em; margin-top: 4px;
}

/* ── STREAK ─────────────────────────────────────────────── */
.ff-streak {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--a10); border: 1px solid var(--a20);
  border-radius: 20px; padding: 6px 14px; margin-bottom: 18px;
  font-family: var(--fmono); font-size: 14px; color: var(--a);
}

/* ── ALERTS ─────────────────────────────────────────────── */
.ff-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.ff-alert {
  border-radius: 10px; padding: 11px 14px;
  font-size: 13px; line-height: 1.6; border: 1px solid;
  font-family: var(--fbody);
}
.ff-alert--warn { background:var(--warn10); border-color:rgba(255,159,64,.2); color:#ffc07a; }
.ff-alert--ok   { background:var(--ok10);   border-color:rgba(52,210,123,.2); color:#6ef5a8; }
.ff-alert--info { background:var(--info10); border-color:rgba(91,157,255,.2); color:#8ab2ff; }
.ff-alert--danger{background:var(--err10);  border-color:rgba(255,90,90,.2);  color:#ff9090; }

/* ── PROGRAM CARD ───────────────────────────────────────── */
.ff-prog {
  background: var(--bg2); border: 1px solid var(--bd2);
  border-radius: 18px; padding: 20px 18px;
  margin-bottom: 22px; position: relative; overflow: hidden;
}
.ff-prog::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg,var(--a),var(--info));
}
.ff-prog__eyebrow {
  font-size: 9px; color: var(--t3);
  text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; margin-bottom: 6px;
}
.ff-prog__name {
  font-family: var(--fdisp); font-size: 20px; font-weight: 800;
  letter-spacing: -0.03em; color: var(--t1); margin-bottom: 10px;
}
.ff-prog__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ff-prog__pill {
  font-size: 11px; color: var(--t2);
  background: var(--bg3); border-radius: 20px;
  padding: 3px 10px; font-family: var(--fbody);
}
.ff-prog__track { height: 5px; background: var(--bg4); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.ff-prog__fill { height: 100%; background: linear-gradient(90deg,var(--a),var(--info)); border-radius: 3px; transition: width 1s ease; }
.ff-prog__foot { font-size: 11px; color: var(--t3); display: flex; justify-content: space-between; font-family: var(--fbody); }
.ff-prog__foot span { color: var(--a); font-family: var(--fmono); }

/* ── CTA CARD ───────────────────────────────────────────── */
.ff-cta {
  background: var(--bg2); border: 1px solid var(--bd2);
  border-radius: 20px; padding: 32px 22px;
  text-align: center; margin-bottom: 22px; position: relative; overflow: hidden;
}
.ff-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% -20%, var(--a10), transparent 70%);
}
.ff-cta__icon { font-size: 48px; display: block; margin-bottom: 14px; line-height: 1; }
.ff-cta h2 {
  font-family: var(--fdisp); font-size: 22px; font-weight: 800;
  letter-spacing: -0.04em; color: var(--t1); margin-bottom: 8px;
}
.ff-cta p { font-size: 14px; color: var(--t2); margin-bottom: 22px; line-height: 1.6; font-family: var(--fbody); }

/* ── DAY GRID ───────────────────────────────────────────── */
.ff-daygrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}

.ff-day {
  background: var(--bg2); border: 1px solid var(--bd1);
  border-radius: 14px; padding: 14px 13px;
  transition: border-color 0.15s;
}
.ff-day.is-done { opacity: 0.45; }
.ff-day.is-live { border-color: rgba(91,157,255,.25); }
.ff-day__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ff-day__n {
  font-size: 9px; color: var(--t3);
  text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700;
}
.ff-day__badge {
  font-size: 9px; padding: 2px 7px; border-radius: 10px; font-weight: 700;
}
.ff-day__badge--done { background: var(--ok10); color: var(--ok); }
.ff-day__badge--live { background: var(--info10); color: var(--info); }
.ff-day__name {
  font-family: var(--fdisp); font-size: 17px; font-weight: 800;
  letter-spacing: -0.03em; color: var(--t1); margin-bottom: 3px;
}
.ff-day__sub { font-size: 11px; color: var(--t3); margin-bottom: 14px; font-family: var(--fbody); }
.ff-day__cta {
  display: block; width: 100%; padding: 10px 0;
  background: var(--a); color: #000 !important;
  border-radius: 8px; font-size: 12px; font-weight: 800;
  font-family: var(--fdisp); letter-spacing: -0.01em;
  text-align: center; cursor: pointer;
  border: none; outline: none;
  transition: opacity 0.12s, transform 0.1s;
}
.ff-day__cta:active { opacity: 0.8; transform: scale(0.98); }
.ff-day__done-lbl { font-size: 11px; color: var(--ok); font-family: var(--fbody); }

/* ── HISTORY ────────────────────────────────────────────── */
.ff-hist { display: flex; flex-direction: column; gap: 8px; }
.ff-hist__row {
  background: var(--bg2); border: 1px solid var(--bd1);
  border-radius: 12px; padding: 13px 15px;
  display: flex; align-items: center; gap: 12px;
}
.ff-hist__info { flex: 1; min-width: 0; }
.ff-hist__name {
  font-size: 14px; font-weight: 600; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--fbody);
}
.ff-hist__meta { font-size: 11px; color: var(--t3); margin-top: 2px; font-family: var(--fbody); }
.ff-hist__vol { font-family: var(--fmono); font-size: 20px; color: var(--a); flex-shrink: 0; }
.ff-hist__vol span { font-size: 11px; color: var(--t3); }

/* ── BUTTONS ────────────────────────────────────────────── */
.ff-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 12px 22px; border-radius: 12px;
  font-family: var(--fbody); font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; outline: none;
  transition: opacity 0.12s, transform 0.1s;
  line-height: 1; white-space: nowrap;
}
.ff-btn:active { transform: scale(0.97) !important; }
.ff-btn--accent { background: var(--a) !important; color: #000 !important; }
.ff-btn--accent:hover { opacity: 0.87; }
.ff-btn--ghost { background: transparent !important; color: var(--t2) !important; border: 1px solid var(--bd2) !important; }
.ff-btn--ghost:hover { color: var(--t1) !important; border-color: var(--bd3) !important; }
.ff-btn--danger { background: var(--err10) !important; color: var(--err) !important; border: 1px solid rgba(255,90,90,.2) !important; }
.ff-btn--lg { padding: 14px 28px; font-size: 15px; border-radius: 14px; }
.ff-btn--sm { padding: 7px 14px; font-size: 12px; border-radius: 8px; }
.ff-btn--full { width: 100%; }
.ff-btn:disabled { opacity: 0.35 !important; pointer-events: none !important; }

/* ── INPUTS ─────────────────────────────────────────────── */
.ff-input {
  display: block; width: 100%;
  background: var(--bg3) !important; border: 1px solid var(--bd2) !important;
  border-radius: 8px !important; padding: 11px 14px !important;
  color: var(--t1) !important; font-size: 15px !important;
  font-family: var(--fbody) !important;
  outline: none; transition: border-color 0.15s;
  line-height: 1.4;
}
.ff-input:focus { border-color: var(--a20) !important; }
.ff-input--cell {
  text-align: center !important; font-family: var(--fmono) !important;
  font-size: 16px !important; padding: 10px 6px !important;
}
.ff-field { display: flex; flex-direction: column; gap: 6px; }
.ff-field label { font-size: 12px; color: var(--t2); font-weight: 500; font-family: var(--fbody); }

/* ── RANGE ──────────────────────────────────────────────── */
.ff-range {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 4px; border-radius: 2px; background: var(--bg4);
  outline: none; margin: 14px 0 6px; cursor: pointer;
  border: none;
}
.ff-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px;
  border-radius: 50%; background: var(--a);
  box-shadow: 0 0 0 6px var(--a10); cursor: pointer; border: none;
}
.ff-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--a); border: none; }

/* ── EXERCISE CHIPS ─────────────────────────────────────── */
.ff-chips {
  display: flex; gap: 8px; overflow-x: auto; margin-bottom: 18px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
}
.ff-chips::-webkit-scrollbar { display: none; }
.ff-chip {
  padding: 8px 18px; border-radius: 20px; flex-shrink: 0;
  border: 1px solid var(--bd2); background: var(--bg2);
  color: var(--t2); font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; font-family: var(--fbody);
  transition: all 0.12s; outline: none;
}
.ff-chip.is-on { background: var(--a10); border-color: var(--a20); color: var(--a); }
.ff-chip:active { transform: scale(0.96); }

/* ── EX GRID ────────────────────────────────────────────── */
.ff-exgrid { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 560px) { .ff-exgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } }

.ff-excard {
  background: var(--bg2); border: 1px solid var(--bd1);
  border-radius: 14px; padding: 15px 16px;
  cursor: pointer; transition: border-color 0.15s, background 0.12s;
}
.ff-excard:active { background: var(--bg3); }
.ff-excat {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.07em; margin-bottom: 9px;
}
.ff-excat--push  { background: var(--warn10); color: var(--warn); }
.ff-excat--pull  { background: var(--info10); color: var(--info); }
.ff-excat--legs  { background: var(--a10);    color: var(--a); }
.ff-excat--core  { background: var(--purp10); color: var(--purp); }
.ff-excat--cardio{ background: var(--err10);  color: var(--err); }
.ff-excat--neutral{background: var(--bg4);    color: var(--t2); }
.ff-exname { font-size: 14px; font-weight: 600; color: var(--t1); margin-bottom: 4px; line-height: 1.3; font-family: var(--fbody); }
.ff-exmus  { font-size: 11px; color: var(--t3); font-family: var(--fbody); }

/* ── EX DETAIL ──────────────────────────────────────────── */
.ff-exdetail { padding: 0 0 8px; }
.ff-exdetail__cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ff-exdetail__title {
  font-family: var(--fdisp); font-size: 22px; font-weight: 800;
  letter-spacing: -0.04em; color: var(--t1); margin-bottom: 10px;
}
.ff-exdetail__mus { font-size: 13px; color: var(--t2); margin-bottom: 18px; line-height: 1.6; font-family: var(--fbody); }
.ff-exdetail__mus strong { color: var(--t1); }
.ff-exdetail__block { margin-bottom: 16px; }
.ff-exdetail__lbl { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; margin-bottom: 8px; font-family: var(--fbody); }
.ff-exdetail__text {
  font-size: 14px; color: var(--t2); line-height: 1.8;
  background: var(--bg3); border-radius: 10px; padding: 14px;
  font-family: var(--fbody);
}
.ff-errlist { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ff-errlist li { padding: 9px 12px; border-radius: 8px; background: var(--err10); border-left: 3px solid var(--err); font-size: 13px; color: #ffaaaa; line-height: 1.5; font-family: var(--fbody); }
.ff-tiplist { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ff-tiplist li { padding: 9px 12px; border-radius: 8px; background: var(--a10); border-left: 3px solid var(--a); font-size: 13px; color: #d8ff44; line-height: 1.5; font-family: var(--fbody); }

/* ── MODALS ─────────────────────────────────────────────── */
.ff-modal {
  position: fixed !important; inset: 0 !important; z-index: 9000 !important;
  display: flex !important; align-items: flex-end; justify-content: center;
}
@media (min-width: 560px) { .ff-modal { align-items: center !important; } }

.ff-modal__bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ff-modal__panel {
  position: relative; z-index: 1;
  background: var(--bg1); border: 1px solid var(--bd2);
  border-radius: 22px 22px 0 0;
  width: 100%; max-width: 560px; max-height: 92dvh;
  overflow-y: auto; padding: 26px 20px 40px;
  animation: ff-slideup 0.28s ease;
}
@media (min-width: 560px) {
  .ff-modal__panel { border-radius: 20px; max-height: 88dvh; }
}
.ff-modal__panel--wide { max-width: 640px; }
.ff-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg3); color: var(--t2);
  font-size: 15px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; outline: none;
  transition: background 0.12s;
}
.ff-modal__close:active { background: var(--bg4); }

/* ── ONBOARDING ─────────────────────────────────────────── */
.ff-ob-prog { height: 3px; background: var(--bg4); border-radius: 2px; margin-bottom: 24px; overflow: hidden; }
.ff-ob-bar  { height: 100%; background: linear-gradient(90deg,var(--a),var(--info)); border-radius: 2px; transition: width .35s ease; }
.ff-ob-steps { min-height: 280px; }
.ff-ob-step { animation: ff-fadein 0.2s ease; }
.ff-ob-step h2 {
  font-family: var(--fdisp); font-size: 22px; font-weight: 800;
  letter-spacing: -0.04em; color: var(--t1); margin-bottom: 7px;
}
.ff-ob-step p { font-size: 13px; color: var(--t2); margin-bottom: 20px; font-family: var(--fbody); }

.ff-ob-cards { display: flex; flex-direction: column; gap: 9px; }
.ff-ob-card {
  background: var(--bg3); border: 1px solid var(--bd2); border-radius: 12px;
  padding: 13px 14px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; border: none; outline: none; text-align: left; width: 100%;
  transition: border-color 0.12s, background 0.12s;
}
.ff-ob-card { border: 1px solid var(--bd2); }
.ff-ob-card:active { background: var(--bg4); }
.ff-ob-card.is-sel { border-color: var(--a20) !important; background: var(--a10) !important; }
.ff-ob-card__ico { font-size: 26px; flex-shrink: 0; line-height: 1; }
.ff-ob-card__l { font-size: 14px; font-weight: 600; color: var(--t1); display: block; font-family: var(--fbody); }
.ff-ob-card__d { font-size: 12px; color: var(--t2); display: block; margin-top: 1px; font-family: var(--fbody); }

.ff-ob-slider { text-align: center; padding: 4px 0; }
.ff-ob-slider__big { font-family: var(--fdisp); font-size: 72px; font-weight: 800; color: var(--a); letter-spacing: -0.06em; line-height: 1; }
.ff-ob-slider__lbl { font-size: 14px; color: var(--t2); margin-bottom: 10px; font-family: var(--fbody); }

.ff-ob-checks { display: flex; flex-direction: column; gap: 8px; }
.ff-ob-check {
  background: var(--bg3); border: 1px solid var(--bd2); border-radius: 12px;
  padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  cursor: pointer; transition: all 0.12s;
}
.ff-ob-check input { display: none; }
.ff-ob-check.is-on { border-color: var(--a20); background: var(--a10); }
.ff-ob-check__box { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--bd3); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; transition: all 0.12s; font-family: var(--fbody); }
.ff-ob-check.is-on .ff-ob-check__box { background: var(--a); border-color: var(--a); color: #000; font-weight: 800; }
.ff-ob-check span:last-child { font-size: 14px; font-weight: 500; color: var(--t1); font-family: var(--fbody); }

.ff-ob-body { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.ff-ob-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ff-ob-nav  { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bd1); }

/* ── WORKOUT FULLSCREEN ─────────────────────────────────── */
.ff-wkovl {
  position: fixed !important; inset: 0 !important; z-index: 9500 !important;
  background: var(--bg0); overflow-y: auto;
  display: none;
}
.ff-wkovl.is-on { display: block !important; }

.ff-wk-load { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; gap: 16px; color: var(--t2); font-size: 13px; font-family: var(--fbody); }

.ff-wkhd {
  position: sticky; top: var(--adm); z-index: 10;
  background: rgba(9,9,11,0.97); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bd2); padding: 12px 16px;
  display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center;
}
.ff-wkhd__back {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg3); color: var(--t2); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; outline: none; flex-shrink: 0;
  font-family: var(--fbody);
}
.ff-wkhd__back:active { background: var(--bg4); }
.ff-wkhd__name {
  font-family: var(--fdisp); font-size: 15px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--t1);
}
.ff-wkhd__timer { font-family: var(--fmono); font-size: 12px; color: var(--t3); margin-top: 1px; }
.ff-wkhd__fin {
  padding: 8px 14px; background: var(--err10); color: var(--err);
  border: 1px solid rgba(255,90,90,.2); border-radius: 8px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: var(--fbody); outline: none; white-space: nowrap;
  transition: background 0.12s;
}
.ff-wkhd__fin:active { background: rgba(255,90,90,.22); }

.ff-wkbody { display: flex; flex-direction: column; gap: 14px; padding: 16px 14px; max-width: 680px; margin: 0 auto; }

/* Exercise panel */
.ff-panel {
  background: var(--bg1); border: 1px solid var(--bd2);
  border-radius: 20px; overflow: hidden;
}
.ff-panel__hd { padding: 16px 16px 12px; border-bottom: 1px solid var(--bd1); }
.ff-panel__meta { font-size: 9px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; margin-bottom: 4px; font-family: var(--fbody); }
.ff-panel__name {
  font-family: var(--fdisp); font-size: 20px; font-weight: 800;
  letter-spacing: -0.03em; color: var(--t1); margin-bottom: 4px;
}
.ff-panel__spec { font-size: 12px; color: var(--t2); font-family: var(--fbody); margin-bottom: 10px; }
.ff-panel__tech {
  font-size: 12px; color: var(--t3); text-decoration: underline;
  cursor: pointer; border: none; background: none; font-family: var(--fbody);
  padding: 0; transition: color 0.12s;
}
.ff-panel__tech:hover { color: var(--t2); }

.ff-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: 20px; margin: 10px 16px 0;
  font-size: 12px; font-weight: 700; font-family: var(--fbody);
}
.ff-pill--up { background: var(--ok10); color: var(--ok); border: 1px solid rgba(52,210,123,.2); }
.ff-pill--eq { background: var(--bg4);  color: var(--t2); border: 1px solid var(--bd2); }
.ff-pill--dn { background: var(--err10);color: var(--err);border: 1px solid rgba(255,90,90,.2); }

.ff-sets { padding: 12px 14px; }
.ff-sets__hd {
  display: grid; grid-template-columns: 28px 1fr 1fr 78px; gap: 6px;
  font-size: 9px; color: var(--t3); text-transform: uppercase;
  letter-spacing: 0.07em; font-weight: 700; margin-bottom: 8px;
  padding: 0 2px; font-family: var(--fbody);
}
.ff-sets__rows { display: flex; flex-direction: column; gap: 7px; }
.ff-set-row { display: grid; grid-template-columns: 28px 1fr 1fr 78px; gap: 6px; align-items: center; }
.ff-set-row.is-done { opacity: 0.42; }
.ff-set-row__n { font-family: var(--fmono); font-size: 13px; color: var(--t3); text-align: center; }
.ff-logbtn {
  height: 40px; width: 100%;
  background: var(--a) !important; color: #000 !important;
  border-radius: 8px; font-size: 11px; font-weight: 900;
  font-family: var(--fdisp); letter-spacing: 0.03em;
  cursor: pointer; border: none; outline: none;
  transition: opacity 0.12s;
}
.ff-logbtn:active { opacity: 0.78; }
.ff-logbtn.is-done { background: var(--bg4) !important; color: var(--ok) !important; cursor: default; }
.ff-logbtn:disabled { opacity: 0.3; }

.ff-panel__acts { padding: 0 14px 14px; display: flex; gap: 8px; }

.ff-rest {
  margin: 0 14px 14px; border-radius: 14px;
  background: var(--bg2); border: 1px solid var(--bd2);
}
.ff-rest__in { padding: 20px; text-align: center; }
.ff-rest__lbl { font-size: 9px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; font-family: var(--fbody); }
.ff-rest__big {
  font-family: var(--fdisp); font-size: 56px; font-weight: 800;
  color: var(--a); letter-spacing: -0.06em; line-height: 1; margin: 6px 0;
}
.ff-rest__bar  { height: 3px; background: var(--bg4); border-radius: 2px; overflow: hidden; margin-bottom: 14px; }
.ff-rest__fill { height: 100%; background: var(--a); border-radius: 2px; transition: width 1s linear; }
.ff-rest__skip { font-size: 12px; color: var(--t3); text-decoration: underline; cursor: pointer; border: none; background: none; font-family: var(--fbody); }

/* ── FEEDBACK ────────────────────────────────────────────── */
.ff-fb { padding: 2px 0; }
.ff-fb__hd { text-align: center; margin-bottom: 22px; }
.ff-fb__em { font-size: 48px; display: block; margin-bottom: 10px; line-height: 1; }
.ff-fb__hd h2 { font-family: var(--fdisp); font-size: 22px; font-weight: 800; letter-spacing: -0.04em; color: var(--t1); }
.ff-fb__hd p { font-size: 13px; color: var(--t2); margin-top: 5px; font-family: var(--fbody); }
.ff-slrow { margin-bottom: 18px; }
.ff-slrow label { font-size: 13px; font-weight: 500; color: var(--t1); display: flex; justify-content: space-between; font-family: var(--fbody); }
.ff-slrow label span { font-family: var(--fmono); color: var(--a); }
.ff-checklbl { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t2); cursor: pointer; margin-top: 4px; font-family: var(--fbody); }
.ff-checklbl input { width: 18px; height: 18px; accent-color: var(--a); display: inline; }
.ff-fb__btns { display: flex; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bd1); }

/* ── PROGRESS ────────────────────────────────────────────── */
.ff-proglist { display: flex; flex-direction: column; gap: 12px; }
.ff-progitem { background: var(--bg2); border: 1px solid var(--bd1); border-radius: 14px; padding: 16px; }
.ff-progitem__hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.ff-progitem__name { font-size: 15px; font-weight: 600; color: var(--t1); font-family: var(--fbody); }
.ff-progbadge { font-size: 10px; padding: 3px 9px; border-radius: 20px; font-weight: 700; white-space: nowrap; font-family: var(--fbody); }
.ff-progbadge--improving  { background: var(--ok10);   color: var(--ok); }
.ff-progbadge--stagnating { background: var(--warn10);  color: var(--warn); }
.ff-progbadge--declining  { background: var(--err10);   color: var(--err); }
.ff-progbadge--deloading  { background: var(--info10);  color: var(--info); }
.ff-progchart { height: 64px; margin-bottom: 10px; }
.ff-progitem__ft { font-size: 13px; color: var(--t2); font-family: var(--fbody); }
.ff-progitem__ft strong { color: var(--a); font-family: var(--fmono); }

/* ── EMPTY STATE ────────────────────────────────────────── */
.ff-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 56px 24px; text-align: center; color: var(--t3);
  font-size: 14px; font-family: var(--fbody);
}
.ff-empty span { font-size: 40px; line-height: 1; }

/* ── TOAST ──────────────────────────────────────────────── */
.ff-toast {
  position: fixed !important; bottom: calc(var(--nav-h) + 20px) !important;
  left: 50% !important; transform: translateX(-50%) translateY(20px) !important;
  z-index: 9999 !important; white-space: nowrap; pointer-events: none;
  background: var(--bg3); border: 1px solid var(--bd3);
  border-radius: 20px; padding: 11px 22px;
  font-size: 13px; font-weight: 600; color: var(--t1);
  font-family: var(--fbody); opacity: 0; transition: opacity .2s, transform .2s;
}
.ff-toast.show { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; }
.ff-toast--ok    { border-color: rgba(52,210,123,.3); color: var(--ok); }
.ff-toast--error { border-color: rgba(255,90,90,.3);  color: var(--err); }

/* ── LOGIN SCREEN ───────────────────────────────────────── */
.ff-login {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 80vh; text-align: center;
  gap: 12px; padding: 32px 24px;
}
.ff-login__logo { color: var(--a); font-size: 60px; line-height: 1; margin-bottom: 8px; }
.ff-login h1 { font-family: var(--fdisp); font-size: 32px; font-weight: 800; letter-spacing: -0.05em; color: var(--t1); }
.ff-login p { font-size: 15px; color: var(--t2); margin-bottom: 12px; font-family: var(--fbody); }

/* ── LOADING OVERLAY INLINE ─────────────────────────────── */
.ff-load-inline { display: flex; justify-content: center; padding: 48px 0; }