/* ─────────────────────────────────────────────────────────────
   Sandbox Fitness — Shared Design System
   Used by: Client App · Trainer App · Intake Form · Dashboard
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  color-scheme: dark;
  /* Brand colours */
  --black:      #0a0a0a;
  --white:      #f5f2e8;
  --green-dark: #2d5a1b;
  --green-mid:  #4a7c2f;
  --gold:       #f0c040;
  --gold-dark:  #c99a20;
  --danger:     #e05252;

  /* Surfaces */
  --s1:   #000000;
  --s2:   #111111;
  --s3:   #111111;

  /* Borders */
  --border:  #888888;
  --border2: #888888;

  /* Text */
  --text:       #ffffff;
  --text2:      #ffffff;
  --text3:      #ffffff;
  --text-muted: #cccccc;

  /* Field background */
  --field-bg: #0a0a0a;

  /* Gradients */
  --grad:      linear-gradient(135deg, #2d5a1b 0%, #4a7c2f 40%, #8aaa30 70%, #f0c040 100%);
  --grad-text: linear-gradient(90deg, #4a7c2f, #f0c040);
  --g-light:   #7ec850;
  --g-mid:     #4a7c2f;
  --gold-dk:   #c99a20;

  /* Radius */
  --rsm: 6px;
  --rmd: 10px;
  --rlg: 14px;

  /* Text scale — overridden by settings.js via JS */
  --text-scale: 1;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  background:  var(--black);
  color:       var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size:   calc(16px * var(--text-scale));
  min-height:  100vh;
}

/* ── Global nav defaults ──────────────────────────────────── */
.botnav       { border-top-color: #888888; }
.ni           { color: #ffffff; }
.avatar       { border: 2px solid var(--gold); }
.nav-bar-plain { border-bottom-color: #888888; }

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; }

/* ─────────────────────────────────────────────────────────────
   INTAKE FORM  (used by: Intake Form)
   ───────────────────────────────────────────────────────────── */

/* Hero banner */
.hero {
  background:    var(--black);
  border-bottom: 2px solid transparent;
  border-image:  var(--grad) 1;
  padding:       36px 48px 32px;
  position:      relative;
  overflow:      hidden;
}
.hero::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     radial-gradient(ellipse at 65% 50%, rgba(240,192,64,0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Logo */
.logo-area      { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.logo-mark svg  { width: 44px; height: 44px; }
.logo-text      { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 3px; color: var(--gold); }

/* Hero text */
.hero-label {
  font-family:              'Bebas Neue', sans-serif;
  font-size:                11px;
  letter-spacing:           5px;
  background:               var(--grad-text);
  -webkit-background-clip:  text;
  -webkit-text-fill-color:  transparent;
  background-clip:          text;
  margin-bottom:            8px;
}
.hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(32px, 6vw, 58px); letter-spacing: 2px; line-height: 1; color: var(--white); }
.hero p  { margin-top: 10px; font-size: 13px; color: var(--text-muted); max-width: 500px; line-height: 1.65; }

/* Form layout */
.form-body { max-width: 800px; margin: 0 auto; padding: 40px 24px 80px; }

/* Progress bar */
.progress-wrap    { display: flex; gap: 5px; margin-bottom: 36px; }
.prog-seg         { height: 3px; flex: 1; background: #222; border-radius: 2px; transition: background 0.3s; }
.prog-seg.active  { background: var(--gold); }
.prog-seg.done    { background: var(--green-mid); }

/* Sections */
.section         { display: none; animation: fadeIn 0.3s ease; }
.section.visible { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.section-header  { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.section-num     { font-family: 'Bebas Neue', sans-serif; font-size: 42px; line-height: 1; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-title   { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 1px; color: var(--white); }

/* Responsive grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
@media (max-width: 560px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero { padding: 28px 20px; }
}

/* Field groups */
.field-group { display: flex; flex-direction: column; gap: 18px; }
.field       { display: flex; flex-direction: column; gap: 6px; }

/* Labels */
label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--text-muted);
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
  background:    var(--field-bg);
  border:        1px solid #282828;
  color:         var(--white);
  font-family:   'DM Sans', sans-serif;
  font-size:     16px; /* 16px minimum prevents iOS auto-zoom on focus */
  padding:       12px 14px;
  border-radius: 4px;
  outline:       none;
  width:         100%;
  transition:    border-color 0.2s;
  appearance:    none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow:   0 0 0 2px rgba(240,192,64,0.07);
}
select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 14px center;
  padding-right:       36px;
}
textarea { resize: vertical; min-height: 88px; }

/* Option chips */
.options-group         { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.option-chip input     { display: none; }
.option-chip label {
  display:       inline-flex;
  align-items:   center;
  padding:       12px 16px;
  min-height:    44px;
  background:    var(--field-bg);
  border:        1px solid #282828;
  border-radius: 100px;
  cursor:        pointer;
  font-size:     13px;
  font-weight:   500;
  letter-spacing:0.4px;
  text-transform:none;
  color:         var(--text-muted);
  transition:    all 0.15s;
  white-space:   nowrap;
}
.option-chip input:checked + label { background: rgba(240,192,64,0.12); border-color: var(--gold); color: var(--gold); }
.option-chip label:hover            { border-color: var(--gold); color: var(--white); }

/* Rating scale */
.scale-wrap              { display: flex; gap: 6px; }
.scale-wrap input        { display: none; }
.scale-wrap label {
  flex:          1;
  text-align:    center;
  padding:       13px 4px;
  min-height:    44px;
  background:    var(--field-bg);
  border:        1px solid #282828;
  border-radius: 4px;
  cursor:        pointer;
  font-size:     14px;
  font-weight:   600;
  text-transform:none;
  letter-spacing:0;
  color:         var(--text-muted);
  transition:    all 0.15s;
}
.scale-wrap input:checked + label { background: rgba(240,192,64,0.12); border-color: var(--gold); color: var(--gold); }
.scale-labels       { display: flex; justify-content: space-between; margin-top: 4px; }
.scale-labels span  { font-size: 10px; color: var(--text-muted); }

/* Subsection label */
.subsection {
  font-family:              'Bebas Neue', sans-serif;
  font-size:                13px;
  letter-spacing:           3px;
  background:               var(--grad-text);
  -webkit-background-clip:  text;
  -webkit-text-fill-color:  transparent;
  background-clip:          text;
  margin:                   22px 0 10px;
}

/* Info note */
.note {
  font-size:     12px;
  color:         var(--text-muted);
  line-height:   1.6;
  padding:       12px 14px;
  background:    var(--field-bg);
  border-left:   3px solid var(--green-mid);
  border-radius: 0 4px 4px 0;
}

/* PAR-Q */
.parq-question   { padding: 14px 16px; background: var(--field-bg); border: 1px solid #282828; border-radius: 6px; display: flex; flex-direction: column; gap: 10px; }
.parq-question p { font-size: 14px; line-height: 1.55; color: var(--white); }
.parq-q-num      { font-family: 'Bebas Neue', sans-serif; font-size: 11px; letter-spacing: 2px; color: var(--gold); margin-bottom: 2px; }
.parq-alert      { background: rgba(240,192,64,0.07); border: 1px solid rgba(240,192,64,0.25); border-radius: 6px; padding: 14px 16px; font-size: 12px; color: var(--text-muted); line-height: 1.6; display: none; margin-top: 4px; }
.parq-alert.visible { display: block; }
.parq-alert strong  { color: var(--gold); }

/* Intake form nav */
.nav { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }

/* Buttons — intake / shared */
.btn          { font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: 2px; padding: 14px 30px; min-height: 44px; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary  { background: var(--grad); color: var(--black); font-weight: 700; }
.btn-primary:hover    { opacity: 0.85; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost    { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--gold); color: var(--white); }
.step-indicator { font-size: 11px; color: var(--text-muted); letter-spacing: 1px; }

/* Thank-you screen */
.thankyou        { display: none; text-align: center; padding: 60px 24px; animation: fadeIn 0.5s ease; }
.thankyou .check { width: 64px; height: 64px; background: var(--grad); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.thankyou h2     { font-family: 'Bebas Neue', sans-serif; font-size: 46px; letter-spacing: 2px; margin-bottom: 12px; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.thankyou p      { color: var(--text-muted); font-size: 14px; line-height: 1.7; max-width: 400px; margin: 0 auto; }
.thankyou .site-link { display: inline-block; margin-top: 24px; font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 2px; color: var(--gold); text-decoration: none; }

/* Error banners */
.error-banner { display: none; background: rgba(220,50,50,0.1); border: 1px solid rgba(220,50,50,0.4); border-radius: 6px; padding: 12px 16px; font-size: 13px; color: #f08080; margin-top: 16px; line-height: 1.5; }
.error-banner.visible { display: block; }
.error-msg { font-size: 13px; color: var(--danger); min-height: 16px; }

/* Address block */
.address-block         { display: none; }
.address-block.visible { display: flex; flex-direction: column; gap: 18px; }

/* Loading spinner */
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(0,0,0,0.3); border-top-color: #000; border-radius: 50%; animation: spin 0.6s linear infinite; margin-right: 8px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ─────────────────────────────────────────────────────────────
   CLIENT APP  (used by: Client App)
   ───────────────────────────────────────────────────────────── */

/* Viewport / root */
html:not(.scroll-page), html:not(.scroll-page) body { height: 100%; overflow: hidden; }
html.scroll-page, html.scroll-page body { height: auto; overflow-y: auto; }
#root      { display: flex; flex-direction: column; height: 100dvh; max-width: 430px; margin: 0 auto; background: var(--s1); position: relative; overflow: hidden; }

/* ── Splash ── */
#splash {
  position:        fixed;
  inset:           0;
  background:      var(--black);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             16px;
  z-index:         999;
  transition:      opacity 0.5s;
}
.splash-icon  { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.6;} }
.splash-title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 4px; color: var(--gold); }
.splash-sub   { font-size: 12px; color: var(--text3); letter-spacing: 2px; }
.splash-bar   { width: 120px; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
.splash-fill  { height: 100%; width: 0; background: var(--grad); animation: load 1s ease forwards 0.2s; }
@keyframes load { to { width: 100%; } }

/* ── Auth views ── */
.auth-wrap {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         24px;
  gap:             20px;
  background:      var(--s1);
}
.auth-logo   { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.auth-title  { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 3px; color: var(--gold); }
.auth-sub    { font-size: 13px; color: var(--text3); text-align: center; }
.auth-card   { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.auth-switch { font-size: 13px; color: var(--text3); }
.auth-switch span { color: var(--gold); cursor: pointer; text-decoration: underline; }

/* ── Screens ── */
.screen       { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.screen.active{ display: flex; }

/* ── Top bar ── */
.topbar       { padding: calc(env(safe-area-inset-top) + 16px) 16px 12px; flex-shrink: 0; background: var(--s1); border-bottom: 1px solid var(--border); }
.topbar-row   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.logo         { display: flex; align-items: center; gap: 8px; }
.logo-name    { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 3px; color: var(--gold); }
.avatar       { width: 44px; height: 44px; border-radius: 50%; background: var(--green-dark); color: var(--gold); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.topbar-name  { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; }
.topbar-sub   { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text3); margin-top: 2px; }
.dot4         { width: 3px; height: 3px; border-radius: 50%; background: var(--border2); }

/* Nav bar (back-button pages) */
.nav-bar-plain { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; min-height: 52px; }
.back-btn      { background: none; border: none; color: var(--text2); font-size: 22px; cursor: pointer; padding: 0 12px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.page-title    { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px; }

/* Scrollable content area */
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)) 14px; overscroll-behavior: contain; scroll-behavior: smooth; }

/* ── Bottom nav ── */
.botnav  { display: flex; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--s1); padding-bottom: env(safe-area-inset-bottom); }
.ni      { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 8px; cursor: pointer; color: var(--text3); transition: color 0.15s; -webkit-tap-highlight-color: transparent; }
.ni.active-ni { color: var(--gold); }
.nlbl    { font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; }
.nlbl.active { color: var(--gold); }

/* ── Cards ── */
.card    { background: var(--s2); border: 2px solid var(--border); border-radius: var(--rlg); margin-bottom: 10px; overflow: hidden; }
.cp      { padding: 14px 16px; }
.cpsm    { padding: 10px 14px; }
.dvdr    { height: 1px; background: var(--border); }
.row     { display: flex; align-items: center; justify-content: space-between; }

/* Pills / badges */
.pill     { display: inline-block; font-size: 11px; font-weight: 600; font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; padding: 2px 8px; border-radius: 100px; }
.pg       { background: rgba(45,90,27,.25); color: var(--g-light); border: 1px solid rgba(74,124,47,.3); }
.pdone    { background: rgba(93,184,58,.15); color: #7ec850; border: 1px solid rgba(93,184,58,.3); }
.pgold    { background: rgba(197,168,76,.15); color: var(--gold); border: 1px solid rgba(197,168,76,.3); }
.pgray    { background: rgba(255,255,255,.05); color: var(--text2); border: 1px solid var(--border); }
.pdanger  { background: rgba(220,60,60,.12); color: #e87070; border: 1px solid rgba(220,60,60,.3); }
.ptoday   { background: rgba(240,192,64,.15); color: var(--gold); border: 1px solid rgba(240,192,64,.3); }

/* Metric grid */
.mgrid { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 10px; }
.mc    { background: var(--s2); border: 1px solid var(--border); padding: 14px 16px; }
.mc:first-child { border-radius: var(--rlg) 0 0 var(--rlg); border-right: none; }
.mc:last-child  { border-radius: 0 var(--rlg) var(--rlg) 0; }
.mlbl  { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.mval  { font-family: 'Bebas Neue', sans-serif; font-size: 28px; line-height: 1; color: var(--white); }
.mgold { color: var(--gold); }
.msub  { font-size: 11px; color: var(--text3); margin-top: 3px; }
.track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 6px; }
.fg    { height: 100%; background: var(--grad); border-radius: 2px; transition: width .4s; }

/* CTA / skip */
.cta      { display: block; width: 100%; padding: 14px; min-height: 44px; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 2px; background: var(--grad); color: var(--black); border: none; border-radius: var(--rsm); cursor: pointer; font-weight: 700; margin-bottom: 4px; transition: opacity .2s; }
.cta:hover { opacity: .85; }
.btn-skip  { display: block; width: 100%; padding: 12px 16px; min-height: 44px; background: none; border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text3); font-size: 14px; cursor: pointer; font-family: 'DM Sans', sans-serif; margin-top: 8px; }

/* Week nav / calendar */
.week-nav       { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.week-nav-label { font-size: 13px; font-weight: 600; text-align: center; }
.week-nav-btn   { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--s3); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 18px; color: var(--text2); user-select: none; }
.wcal           { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.dc             { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px 4px; border-radius: 8px; cursor: pointer; min-height: 48px; min-width: 36px; }
.dc.selected    { background: rgba(197,168,76,.12); outline: 1px solid rgba(197,168,76,.4); }
.dc.today       { background: rgba(197,168,76,.08); }
.dc.done        {}
.dn             { font-size: 9px; color: var(--text3); }
.dv             { font-size: 14px; font-weight: 600; }
.dd             { width: 5px; height: 5px; border-radius: 50%; margin-top: 2px; background: var(--g-light); }

/* Section header inside workout */
.sechdr   { padding: 10px 14px 4px; border-bottom: 1px solid var(--border); }
.sec-lbl  { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; }

/* Superset grouping — visual wrapper around linked exercises */
.superset-block {
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 8px;
  margin: 8px 0;
  background: rgba(197, 168, 76, 0.04);
}
.superset-hdr {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 4px 8px;
}

/* Exercise rows */
.exrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.exrow:last-child { border-bottom: none; }
.exrow.ex-open    { background: rgba(255,255,255,.02); }
.exrow.ex-done    { border-left: 3px solid var(--g-mid); padding-left: 11px; }
.exinfo    { flex: 1; min-width: 0; }
.exname    { font-size: 14px; font-weight: 500; }
.exdet     { font-size: 12px; color: var(--text2); margin-top: 2px; }
.extgt     { text-align: right; flex-shrink: 0; min-width: 52px; }
.exwt      { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: var(--gold); line-height: 1; }
.exwt-tap  { cursor: pointer; }
.exwt-tap:active { opacity: .6; }
.extl      { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.exrow-expanded { padding: 10px 14px 14px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.015); }
.exdot     { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Set weight input */
.set-inp {
  background:    var(--s3);
  border:        1px solid var(--border);
  border-radius: var(--rsm);
  color:         var(--white);
  font-size:     16px;
  font-family:   'DM Sans', sans-serif;
  padding:       10px 4px;
  text-align:    center;
  outline:       none;
  min-height:    44px;
  min-width:     52px;
}
.set-inp:focus { border-color: var(--gold); }

/* Prefilled from last session — muted until user edits */
.set-inp.prefilled {
  color: var(--gold);
  opacity: 0.55;
  font-style: italic;
}
.set-inp.prefilled:focus {
  opacity: 1;
  font-style: normal;
}

/* Toast */
.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(16px); background: var(--s3); border: 1px solid var(--border2); color: var(--white); font-size: 13px; padding: 10px 18px; border-radius: 100px; opacity: 0; transition: all .25s; pointer-events: none; z-index: 900; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* FAB */
.fab { position: absolute; bottom: 80px; right: 16px; width: 52px; height: 52px; border-radius: 50%; background: var(--grad); border: none; color: var(--black); font-size: 26px; font-weight: 300; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.4); z-index: 10; }

/* Bottom sheet (custom workout) */
.sheet-bg  { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 400; display: none; align-items: flex-end; }
.sheet-bg.open { display: flex; }
.sheet     { background: var(--s2); border-radius: 20px 20px 0 0; width: 100%; max-height: 90vh; overflow-y: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) 16px; }
.sheet-handle { width: 36px; height: 4px; background: var(--border2); border-radius: 2px; margin: 0 auto 14px; }
.sheet-title  { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; margin-bottom: 14px; }

/* Coach message card */
.coach        { background: var(--s2); border: 1px solid var(--border); border-radius: var(--rlg); padding: 14px 16px; position: relative; overflow: hidden; margin-bottom: 10px; }
.coach-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad); }
.coach-lbl    { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; padding-left: 10px; }
.coach-msg    { font-size: 14px; color: var(--text2); line-height: 1.6; padding-left: 10px; }
.coach-time   { font-size: 11px; color: var(--text3); margin-top: 6px; padding-left: 10px; }

/* Week complete card */
.week-complete-card { background: rgba(45,90,27,.15); border: 1px solid rgba(74,124,47,.3); border-radius: var(--rlg); padding: 16px; margin-bottom: 10px; text-align: center; position: relative; }
.week-complete-title{ font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; color: var(--gold); }
.week-complete-sub  { font-size: 13px; color: var(--text2); margin-top: 6px; line-height: 1.5; }

/* Skip / Preview modal */
.skip-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 500; display: flex; align-items: flex-end; justify-content: center; }
.skip-modal-sheet   { background: var(--s2); border-radius: 20px 20px 0 0; padding: 24px 24px calc(24px + env(safe-area-inset-bottom)) 24px; width: 100%; max-width: 430px; }
.skip-modal-title   { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; margin-bottom: 8px; }
.skip-modal-sub     { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 20px; }
.skip-option        { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: var(--s3); border: 1px solid var(--border); border-radius: var(--rmd); cursor: pointer; text-align: left; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--white); margin-bottom: 8px; }
.skip-option-icon   { font-size: 20px; }
.skip-option-lbl    { font-size: 12px; color: var(--text3); margin-top: 2px; }

/* Tab bar */
.tabbar  { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ti      { flex: 1; padding: 12px 8px; text-align: center; font-size: 13px; font-weight: 500; color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; }
.ti.active { color: var(--gold); border-bottom-color: var(--gold); }

/* Progress tabs */
.prog-tabs  { display: flex; border-bottom: 1px solid var(--border); background: var(--s1);
              overflow-x: auto; flex-shrink: 0; }
.ptab       { flex: 1; text-align: center; padding: 11px 8px; font-size: 13px; font-weight: 500;
              color: var(--text3); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
              transition: color .15s, border-color .15s; }
.ptab.active { color: var(--gold); border-bottom-color: var(--gold); }

/* Calendar history */
.cal-month-nav  { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
.cal-month-label{ font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; }
.cal-grid       { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 0 8px; }
.cal-day        { display: flex; flex-direction: column; align-items: center; padding: 8px 2px; border-radius: 8px; cursor: pointer; min-height: 48px; }
.cal-day.today-cal  { background: rgba(197,168,76,.1); outline: 1px solid rgba(197,168,76,.3); }
.cal-day.selected-cal { background: rgba(197,168,76,.18); outline: 1px solid var(--gold); }
.cal-day.other-month  { opacity: .35; }
.cal-dv    { font-size: 13px; font-weight: 500; color: var(--text); }
.cal-pips  { display: flex; gap: 2px; justify-content: center; margin-top: 2px; min-height: 5px; }
.cal-pip   { width: 5px; height: 5px; border-radius: 50%; }

/* Progress / measurements — moved to Analytics block at end of file */

/* Macro bars (nutrition) */
.macro-bar        { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.macro-bar-fill   { height: 100%; border-radius: 3px; transition: width .4s; }
.macro-bar-row    { margin-bottom: 12px; }
.macro-bar-label  { display: flex; justify-content: space-between; font-size: 12px; color: var(--text2); margin-bottom: 2px; }
.macro-ring-row   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 12px 16px; }
.macro-ring       { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-right: 1px solid var(--border); }
.macro-ring:last-child { border-right: none; }
.ring-label       { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.ring-val         { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--gold); }
.ring-sub         { font-size: 9px; color: var(--text3); }
.meal-entry       { border-bottom: 1px solid var(--border); }
.meal-name-row    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.meal-name-txt    { font-size: 14px; font-weight: 500; color: var(--text); }
.meal-macros      { display: flex; gap: 12px; }
.meal-macro       { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.meal-macro-val   { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: var(--gold); }
.meal-macro-lbl   { font-size: 9px; color: var(--text3); text-transform: uppercase; }
.minput {
  background:    var(--s3);
  border:        1px solid var(--border);
  border-radius: var(--rsm);
  color:         var(--white);
  font-family:   'DM Sans', sans-serif;
  font-size:     16px; /* prevents iOS zoom */
  padding:       12px 14px;
  min-height:    44px;
  outline:       none;
  width:         100%;
}
.minput:focus { border-color: var(--gold); }
.minput-wrap  { display: flex; flex-direction: column; gap: 4px; }
.minput-lbl   { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.measure-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Nutrition — search + quick-list */
.nutr-search-row       { display: flex; gap: 8px; margin-bottom: 10px; }
.nutr-search-input     { flex: 1; background: var(--s3); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 15px; padding: 9px 12px; outline: none; }
.nutr-search-input:focus { border-color: var(--green-mid); }
.nutr-scan-btn         { background: var(--green-dark); border: 1px solid var(--green-mid); border-radius: var(--rsm); color: var(--text); font-size: 18px; padding: 0 14px; cursor: pointer; flex-shrink: 0; }
.nutr-search-dropdown  { background: var(--s2); border: 1px solid var(--border); border-radius: var(--rsm); overflow: hidden; margin-bottom: 8px; }
.nutr-search-result    { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.nutr-search-result:last-child { border-bottom: none; }
.nutr-search-result:hover { background: var(--s3); }
.nutr-result-name      { font-size: 13px; color: var(--text); }
.nutr-result-sub       { font-size: 11px; color: var(--text2); margin-top: 1px; }
.nutr-result-macros    { font-size: 11px; color: var(--text3); margin-top: 2px; }
.nutr-quick-tabs       { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.nutr-quick-tab        { padding: 5px 12px; font-size: 11px; font-weight: 600; color: var(--text3); cursor: pointer; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid transparent; }
.nutr-quick-tab.active { color: var(--green-mid); border-bottom-color: var(--green-mid); }
.nutr-quick-item       { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.nutr-quick-item:last-child { border-bottom: none; }
.nutr-quick-item:hover { opacity: .8; }
.nutr-quick-name       { font-size: 13px; color: var(--text); }
.nutr-quick-macros     { font-size: 11px; color: var(--text3); margin-top: 2px; }
.nutr-quick-add        { color: var(--green-mid); font-size: 20px; padding-left: 12px; flex-shrink: 0; }

/* Nutrition — serving size */
.nutr-serving-row      { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.nutr-serving-select   { flex: 1; background: var(--s3); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; padding: 7px 8px; }
.nutr-qty-row          { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.nutr-qty-btn          { background: var(--s2); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 16px; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nutr-qty-input        { background: var(--s3); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 14px; width: 36px; text-align: center; padding: 4px 0; }

/* Nutrition — log row + star */
.nutr-log-row          { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.nutr-log-row .cta     { flex: 1; margin-top: 0; }
.nutr-star-btn         { background: none; border: 1px solid var(--border); border-radius: var(--rsm); font-size: 18px; padding: 0 12px; height: 44px; cursor: pointer; color: var(--text3); flex-shrink: 0; }
.nutr-star-btn.saved   { color: var(--gold); border-color: var(--gold); }
.meal-star-btn         { background: none; border: none; font-size: 16px; color: var(--text3); cursor: pointer; padding: 0 4px; }
.meal-star-btn.saved   { color: var(--gold); }

/* Barcode overlay */
#barcode-overlay       { display: none; position: fixed; inset: 0; background: #000; z-index: 500; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
#barcode-overlay.open  { display: flex; }
#barcode-reader        { width: min(360px, 90vw); border-radius: 8px; overflow: hidden; }
.barcode-cancel        { background: var(--s2); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text2); font-size: 14px; padding: 10px 32px; cursor: pointer; }
.barcode-hint          { color: var(--text3); font-size: 13px; }

/* Program overview */
.ptl  { display: flex; gap: 2px; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.pts  { flex: 1; height: 6px; }
.mrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.mrow:last-child { border-bottom: none; }
.mbar { width: 4px; height: 36px; border-radius: 2px; flex-shrink: 0; }
.mtitle { font-size: 14px; font-weight: 500; margin-bottom: 2px; }

/* Agreement screen */
.agreement-screen { position: fixed; inset: 0; background: var(--black); z-index: 800; display: none; flex-direction: column; overflow: hidden; }
.agreement-screen.show { display: flex; }
.agreement-topbar { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.agreement-body   { flex: 1; overflow-y: auto; padding: 20px 16px calc(40px + env(safe-area-inset-bottom)) 16px; }
.agreement-sig-wrap { position: relative; border: 1px solid var(--border2); border-radius: 10px; background: var(--black); overflow: hidden; }

/* History workout cards */
.hist-workout-card { background: var(--s2); border: 1px solid var(--border); border-radius: var(--rlg); margin-bottom: 10px; overflow: hidden; }
.hist-workout-hdr  { display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 14px; }
.hist-workout-title{ font-size: 15px; font-weight: 600; }
.hist-workout-meta { font-size: 12px; color: var(--text2); margin-top: 3px; }
.hist-actions      { display: flex; gap: 6px; }
.hist-edit-btn, .hist-del-btn { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text2); font-size: 13px; padding: 10px 16px; cursor: pointer; font-family: 'DM Sans', sans-serif; min-height: 44px; display: inline-flex; align-items: center; }
.hist-del-btn { border-color: rgba(220,60,60,.3); color: #e87070; }

/* Loading state */
.loading-state { padding: 40px; text-align: center; color: var(--text3); font-size: 13px; }

/* Empty state */
.empty-state   { padding: 40px 24px; text-align: center; }
.empty-state p { font-size: 15px; color: var(--text2); margin-bottom: 6px; }
.empty-state small { font-size: 12px; color: var(--text3); }


/* ─────────────────────────────────────────────────────────────
   TRAINER APP  (used by: Trainer App)
   ───────────────────────────────────────────────────────────── */

/* App shell */
.app     { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: 220px; background: var(--s2); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
.main    { flex: 1; overflow-y: auto; padding: 32px; background: var(--s1); }

/* Sidebar */
.sb-logo      { display: flex; align-items: center; gap: 10px; padding: 20px 16px 14px; border-bottom: 1px solid var(--border); }
.sb-logo-name { font-family: 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: 2px; color: var(--gold); }
.sb-nav       { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; flex: 1; }
.sbn {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 10px;
  min-height:    44px;
  border-radius: 8px;
  font-size:     13px;
  color:         var(--text2);
  cursor:        pointer;
  transition:    all .15s;
}
.sbn:hover { background: var(--s3); color: var(--white); }
.sbn.active { background: rgba(197,168,76,.1); color: var(--gold); }
.nav-badge { background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 100px; }
.sb-bottom      { padding: 12px; border-top: 1px solid var(--border); }
.trainer-badge  { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; margin-bottom: 8px; }
.tb-av          { width: 44px; height: 44px; border-radius: 50%; background: var(--green-dark); color: var(--gold); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tb-name        { font-size: 13px; font-weight: 500; }
.tb-role        { font-size: 11px; color: var(--text3); }
.signout-btn    { width: 100%; padding: 12px; min-height: 44px; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text3); font-size: 12px; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.signout-btn:hover { border-color: var(--danger); color: var(--danger); }

/* Pages */
.page        { display: none; }
.page.active { display: block; }
.page-title  { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 1px; margin-bottom: 4px; }
.page-sub    { font-size: 13px; color: var(--text2); margin-bottom: 24px; }

/* Stats grid */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.stat-card  { background: var(--s2); border: 1px solid var(--border); border-radius: var(--rmd); padding: 16px; }
.stat-lbl   { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); margin-bottom: 6px; }
.stat-val   { font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: var(--gold); line-height: 1; }
.stat-sub   { font-size: 11px; color: var(--text3); margin-top: 4px; }

/* Cards (trainer) */
.card     { background: var(--s2); border: 2px solid var(--border); border-radius: var(--rmd); overflow: hidden; margin-bottom: 20px; }
.card-hdr { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.card-hdr h3 { font-size: 14px; font-weight: 600; }
.card-body    { padding: 16px 18px; }
.card-body-sm { padding: 8px 0; max-height: 340px; overflow-y: auto; }

/* Trainer buttons */
.btn           { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 1px; padding: 8px 16px; border: none; border-radius: var(--rsm); cursor: pointer; transition: all .15s; }
.btn-primary   { background: var(--grad); color: var(--black); }
.btn-ghost     { background: none; border: 1px solid var(--border); color: var(--text2); }
.btn-ghost:hover { border-color: var(--gold); color: var(--white); }
.btn-danger    { background: rgba(220,60,60,.15); border: 1px solid rgba(220,60,60,.3); color: #e87070; }
.btn-danger:hover { background: rgba(220,60,60,.25); }
.btn-sm        { font-size: 12px; padding: 10px 14px; min-height: 44px; letter-spacing: .5px; }

/* Tables */
.tbl      { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th   { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.tbl td   { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: rgba(255,255,255,.02); }
.empty    { padding: 20px; text-align: center; color: var(--text3); font-size: 13px; }
.loading  { padding: 20px; text-align: center; color: var(--text3); font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Modals */
.modal-bg  { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; z-index: 600; }
.modal-bg.open { display: flex; }
.modal     { background: var(--s2); border: 1px solid var(--border); border-radius: var(--rlg); width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; }
.modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-hdr h2 { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px; }
.modal-close  { background: var(--s3); border: none; color: var(--text2); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.modal-body   { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); }
.modal-field  { display: flex; flex-direction: column; gap: 6px; }
.modal-field label { font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.modal-input  { background: var(--s3); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 16px; padding: 12px 14px; min-height: 44px; outline: none; width: 100%; }
.modal-input:focus { border-color: var(--gold); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.modal-cancel  { background: none; border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text2); font-family: 'DM Sans', sans-serif; font-size: 13px; padding: 8px 16px; cursor: pointer; }
.modal-confirm { background: var(--grad); border: none; border-radius: var(--rsm); color: var(--black); font-family: 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: 1px; padding: 8px 20px; cursor: pointer; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 700; }
.modal-overlay .modal { background: var(--s2); border: 1px solid var(--border); border-radius: var(--rlg); padding: 24px; max-width: 460px; width: 90%; }
.modal-overlay h2     { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; margin-bottom: 12px; }
.modal-overlay p      { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 14px; }

/* Form grid (2-col) */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Program builder */
.builder-page  { position: fixed; inset: 0; background: var(--s1); z-index: 500; display: none; flex-direction: column; }
.builder-page.open { display: flex; }
.builder-topbar{ display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--s2); flex-shrink: 0; flex-wrap: wrap; }
.builder-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.builder-back  { background: none; border: none; color: var(--text2); font-size: 13px; cursor: pointer; padding: 4px 8px; font-family: 'DM Sans', sans-serif; white-space: nowrap; }
.builder-body  { display: flex; flex: 1; overflow: hidden; }
.builder-left  { width: 260px; border-right: 1px solid var(--border); overflow-y: auto; flex-shrink: 0; }
.builder-right { flex: 1; overflow-y: auto; padding: 20px; }

/* Session items (builder) */
.week-group     { border-bottom: 1px solid var(--border); }
.week-group-hdr { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--s3); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); }
.session-item   { display: flex; align-items: center; gap: 10px; padding: 14px; min-height: 44px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.session-item:hover  { background: var(--s3); }
.session-item.active { background: rgba(197,168,76,.1); }
.session-dot         { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.session-item-name   { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-item-day    { font-size: 11px; color: var(--text3); margin-top: 1px; }

/* Exercise cards (builder) */
.builder-section-hdr  { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.builder-session-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; }
.session-meta-row      { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ex-card     { background: var(--s2); border: 1px solid var(--border); border-radius: var(--rmd); margin-bottom: 10px; overflow: hidden; }
.ex-card-hdr { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer; }
.ex-card-num { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--text3); width: 24px; flex-shrink: 0; line-height: 1.2; }
.ex-card-name{ font-size: 14px; font-weight: 600; }
.ex-card-meta{ font-size: 12px; color: var(--text2); margin-top: 2px; }
.ex-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.ex-action-btn { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text2); font-size: 14px; min-width: 44px; min-height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.ex-action-btn.danger { border-color: rgba(220,60,60,.3); color: #e87070; }
.ex-edit-form  { display: none; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; border-top: 1px solid var(--border); background: var(--s3); }
.ex-edit-form .full { grid-column: 1 / -1; }
.ex-edit-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.ex-edit-input { background: var(--s2); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 16px; padding: 10px 12px; min-height: 44px; outline: none; width: 100%; }
.ex-edit-input:focus { border-color: var(--gold); }
.ex-lib-item  { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.ex-lib-item:hover { background: var(--s3); }

/* Client detail page */
.client-detail-page  { position: fixed; inset: 0; background: var(--s1); z-index: 500; display: none; flex-direction: column; }
.client-detail-page.open { display: flex; }
.cdp-topbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--s2); flex-shrink: 0; }
.cdp-body   { display: flex; flex: 1; overflow: hidden; }
.cdp-sidebar{ width: 280px; border-right: 1px solid var(--border); overflow-y: auto; padding: 16px; flex-shrink: 0; }
.cdp-main   { flex: 1; overflow-y: auto; padding: 20px; }
.cdp-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--green-dark); color: var(--gold); font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.info-row   { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.info-row:last-child { border-bottom: none; }
.info-lbl   { color: var(--text3); }
.info-val   { color: var(--text); font-weight: 500; }

/* Day chips */
.day-chip { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--s3); color: var(--text2); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; user-select: none; }
.day-chip.selected { background: rgba(197,168,76,.15); border-color: var(--gold); color: var(--gold); }

/* Messages */
.msg-item { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.msg-item:last-child { border-bottom: none; }
.msg-to   { font-size: 11px; color: var(--text3); margin-bottom: 4px; }
.msg-body { font-size: 13px; color: var(--text2); line-height: 1.5; }
.msg-time { font-size: 11px; color: var(--text3); margin-top: 4px; }

/* Track / progress bar (trainer) */
.track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.fg    { height: 100%; background: var(--grad); border-radius: 2px; }

/* Avatar (client list) */
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--green-dark); color: var(--gold); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Notification */
/* .notif handled via JS inline for trainer app */


/* ─────────────────────────────────────────────────────────────
   INTAKE DASHBOARD  (used by: Dashboard)
   ───────────────────────────────────────────────────────────── */

.header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--s2); flex-shrink: 0; }
.header-right { display: flex; align-items: center; gap: 12px; }
.client-count { font-size: 11px; color: var(--text3); letter-spacing: .06em; text-transform: uppercase; }
.refresh-btn  { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text2); font-size: 13px; padding: 10px 16px; min-height: 44px; cursor: pointer; font-family: 'DM Sans', sans-serif; display: inline-flex; align-items: center; }
.refresh-btn:hover { border-color: var(--gold); color: var(--gold); }

.layout       { display: flex; height: calc(100vh - 53px); overflow: hidden; }
.client-list  { width: 300px; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; }
.list-header  { padding: 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.list-header input { background: var(--s2); border: 1px solid var(--border); border-radius: 8px; color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 13px; padding: 8px 12px; outline: none; width: 100%; }
.list-header input:focus { border-color: var(--gold); }
#client-list-body { overflow-y: auto; flex: 1; }

.client-item  { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; position: relative; }
.client-item:hover  { background: var(--s3); }
.client-item.active { background: rgba(197,168,76,.1); }
.client-avatar{ width: 36px; height: 36px; border-radius: 50%; background: var(--green-dark); color: var(--gold); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.client-name  { font-size: 14px; font-weight: 500; }
.client-meta  { font-size: 11px; color: var(--text3); margin-top: 2px; }
.unread-pip   { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }

.detail-panel { flex: 1; overflow-y: auto; }
.empty-state  { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--text3); font-size: 14px; }
.empty-state .icon { font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: var(--border2); }

/* Detail header */
.detail-header { padding: 20px 24px 14px; border-bottom: 1px solid var(--border); }
.detail-name   { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 1px; }
.detail-submitted { font-size: 12px; color: var(--text3); margin-top: 2px; }
.badge-row     { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.action-row    { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Badges */
.badge         { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px; }
.badge-green   { background: rgba(45,90,27,.3); color: var(--g-light); border: 1px solid rgba(74,124,47,.3); }
.badge-gray    { background: rgba(255,255,255,.06); color: var(--text2); border: 1px solid var(--border); }
.badge-gold    { background: rgba(197,168,76,.15); color: var(--gold); border: 1px solid rgba(197,168,76,.3); }
.badge-red     { background: rgba(220,60,60,.12); color: #e87070; border: 1px solid rgba(220,60,60,.3); }

/* Onboard / delete buttons */
.onboard-btn { padding: 12px 18px; min-height: 44px; border-radius: 8px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; background: var(--green-dark); color: var(--gold); font-family: 'DM Sans', sans-serif; display: inline-flex; align-items: center; }
.delete-btn  { padding: 12px 18px; min-height: 44px; border-radius: 8px; border: 1px solid rgba(220,60,60,.3); background: rgba(220,60,60,.08); color: #e87070; font-size: 14px; cursor: pointer; font-family: 'DM Sans', sans-serif; display: inline-flex; align-items: center; }

/* Section cards */
.sections          { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.section-card      { background: var(--s2); border: 1px solid var(--border); border-radius: var(--rmd); overflow: hidden; }
.section-card-header{ display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--s3); }
.section-card-num  { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: var(--text3); }
.section-card-title{ font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.section-card-body { padding: 16px 20px; }

/* Field grids */
.field-grid      { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.field-grid.cols-1 { grid-template-columns: 1fr; }
.field-item      { display: flex; flex-direction: column; gap: 4px; }
.field-label     { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); font-weight: 600; }
.field-value     { font-size: 13px; color: var(--text); }
.field-value.empty { color: var(--text3); font-style: italic; }
.divider         { border: none; border-top: 1px solid var(--border); margin: 12px 0; }

/* Tags */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag      { display: inline-block; background: rgba(45,90,27,.2); color: var(--g-light); border: 1px solid rgba(74,124,47,.2); border-radius: 100px; font-size: 11px; padding: 3px 10px; }

/* Scale */
.scale-bar { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.scale-pip { width: 12px; height: 12px; border-radius: 3px; background: var(--border); }
.scale-pip.filled { background: var(--gold); }

/* PAR-Q (dashboard) */
.parq-grid { display: flex; flex-direction: column; gap: 8px; }
.parq-row  { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 8px; border-radius: 6px; }
.parq-row.parq-yes { background: rgba(220,60,60,.08); }
.parq-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.parq-dot.yes { background: var(--danger); }
.parq-dot.no  { background: var(--border2); }

/* PAR-Q (intake viewer in trainer app) */
.parq-row-intake { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 8px; border-radius: 6px; margin-bottom: 4px; }
.parq-row-intake.flagged { background: rgba(220,60,60,.08); }

/* Intake section */
.intake-section       { margin-bottom: 20px; background: var(--s2); border: 1px solid var(--border); border-radius: var(--rmd); overflow: hidden; }
.intake-section-hdr   { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--s3); }
.intake-section-num   { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: var(--text3); }
.intake-section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.intake-tags          { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.intake-tag           { background: rgba(45,90,27,.2); color: var(--g-light); border: 1px solid rgba(74,124,47,.2); border-radius: 100px; font-size: 11px; padding: 3px 10px; }
.intake-val           { font-size: 13px; color: var(--text); }
.intake-val.empty     { color: var(--text3); font-style: italic; }
.intake-scale         { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.intake-pip           { width: 12px; height: 12px; border-radius: 3px; background: var(--border); }
.intake-pip.on        { background: var(--gold); }
.intake-section-body  { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.intake-grid          { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.intake-grid.cols3    { grid-template-columns: 1fr 1fr 1fr; }
.intake-field         { display: flex; flex-direction: column; gap: 4px; }
.intake-lbl           { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); font-weight: 600; }
.intake-divider       { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* Toast (dashboard) */
.toast         { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--s3); border: 1px solid var(--border2); color: var(--white); font-size: 13px; padding: 10px 18px; border-radius: 100px; z-index: 900; white-space: nowrap; }
.toast.success { border-color: rgba(93,184,58,.4); color: #7ec850; }

/* ── Nudge Panel ── */
.nudge-panel {
  position: fixed;
  top: 0; right: -480px; bottom: 0;
  width: 460px;
  background: var(--s2);
  border-left: 1px solid var(--border);
  z-index: 700;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  box-shadow: -8px 0 32px rgba(0,0,0,.5);
}
.nudge-panel.open { right: 0; }
.nudge-panel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nudge-panel-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.nudge-panel-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.nudge-textarea {
  width: 100%;
  min-height: 160px;
  background: var(--s1);
  border: 1px solid var(--border2);
  border-radius: var(--rsm);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  padding: 12px 14px;
  resize: vertical;
  outline: none;
  transition: border-color .2s;
}
.nudge-textarea:focus { border-color: var(--gold); }

/* ── Calendar ─────────────────────────────────────────────────── */
.cal-container { background: var(--s2); border: 1px solid var(--border); border-radius: var(--rlg); overflow: hidden; }
.cal-header { display: grid; grid-template-columns: 56px repeat(7, 1fr); border-bottom: 1px solid var(--border); background: var(--s2); position: sticky; top: 0; z-index: 10; }
.cal-time-gutter { padding: 10px 0; }
.cal-day-hdr { padding: 10px 8px; text-align: center; border-left: 1px solid var(--border); }
.cal-day-name { font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; }
.cal-day-date { font-size: 20px; font-weight: 300; color: var(--text); margin-top: 2px; }
.cal-day-hdr.today .cal-day-name { color: var(--green-mid); }
.cal-day-hdr.today .cal-day-date { color: var(--green-mid); font-weight: 600; }
.cal-scroll { overflow-y: auto; max-height: calc(100vh - 130px); }
.cal-inner { display: flex; }
.cal-time-col { width: 56px; flex-shrink: 0; position: relative; }
.cal-time-label { position: absolute; right: 8px; font-size: 10px; color: var(--text3); transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.cal-days-wrap { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-day-col { position: relative; border-left: 1px solid var(--border); cursor: pointer; }
.cal-day-col.cal-today { background: rgba(74,124,47,0.04); }
.cal-hour-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); pointer-events: none; }
.cal-subhour-line { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255,255,255,0.06); pointer-events: none; }
.cal-15min-line { border-top-color: rgba(255,255,255,0.03); }
.cal-session-block { position: absolute; left: 3px; right: 3px; border-radius: 5px; padding: 4px 6px; font-size: 11px; font-weight: 500; cursor: pointer; overflow: hidden; z-index: 2; transition: opacity .15s; }
.cal-session-block:hover { opacity: .85; }
.cal-session-block.status-scheduled { background: rgba(74,124,47,0.25); border-left: 3px solid var(--green-mid); color: var(--text); }
.cal-session-block.status-completed { background: rgba(255,255,255,0.04); border-left: 3px solid var(--border2); color: var(--text3); }
.cal-session-block.status-no-show { background: rgba(232,90,42,0.12); border-left: 3px solid #e85a2a; color: var(--text2); }
.cal-session-block.status-cancelled-free,
.cal-session-block.status-cancelled-charged { background: rgba(255,255,255,0.04); border-left: 3px solid var(--border2); color: var(--text3); text-decoration: line-through; }
.cal-block-block { position: absolute; left: 3px; right: 3px; border-radius: 5px; padding: 4px 6px; font-size: 11px; background: var(--s3); border-left: 3px solid var(--border2); color: var(--text2); cursor: pointer; overflow: hidden; z-index: 1; }
.dur-btn { padding: 6px 14px; border-radius: var(--rsm); border: 1px solid var(--border2); background: var(--s3); color: var(--text2); font-size: 13px; cursor: pointer; transition: all .15s; }
.dur-btn.active { background: var(--green-dark); border-color: var(--green-mid); color: var(--white); }
.cal-now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--green-mid); z-index: 3; pointer-events: none; }
.cal-now-line::before { content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--green-mid); }
.cal-day-col.drag-over { background: rgba(74,124,47,0.12) !important; }
.cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-month-day-hdr { text-align: center; padding: 8px 4px; font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); }
.cal-month-cell { min-height: 110px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px; cursor: pointer; transition: background .1s; }
.cal-month-cell:hover { background: var(--s3); }
.cal-month-cell:nth-child(7n) { border-right: none; }
.cal-month-cell.other-month { opacity: .4; }
.cal-month-cell.cal-today-cell { background: rgba(74,124,47,0.06); }
.cal-month-day-num { font-size: 13px; font-weight: 500; color: var(--text2); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 4px; }
.cal-month-cell.cal-today-cell .cal-month-day-num { background: var(--green-mid); color: #000; font-weight: 700; }
.cal-month-chip { font-size: 11px; padding: 2px 6px; border-radius: 4px; margin-bottom: 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-month-chip.status-scheduled { background: rgba(74,124,47,0.3); color: var(--text); }
.cal-month-chip.status-completed { background: rgba(255,255,255,0.06); color: var(--text3); }
.cal-month-chip.status-no-show { background: rgba(232,90,42,0.15); color: var(--text2); }
.cal-month-chip.status-cancelled-free,
.cal-month-chip.status-cancelled-charged { background: rgba(255,255,255,0.04); color: var(--text3); }

/* ── Segmented control ───────────────────────────────────────── */
.seg-ctrl {
  display: flex;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}
.seg-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.seg-btn.active {
  background: var(--grad);
  color: #fff;
  font-weight: 700;
}

/* ── Billing modal ───────────────────────────────────────────── */
.billing-section-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.billing-breakdown {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-top: 14px;
  font-size: 13px;
}
.billing-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  color: var(--text2);
  border-bottom: 1px solid var(--border2);
}
.billing-breakdown-row:last-child {
  border-bottom: none;
}
.billing-breakdown-total {
  font-weight: 600;
  color: var(--text);
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 6px;
}

/* ── Billing modal two-column layout (desktop) ───────────────── */
.billing-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
@media (max-width: 540px) {
  .billing-two-col { grid-template-columns: 1fr; }
}

/* ── Billing modal form rows ─────────────────────────────────── */
.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border2);
}
.form-row:last-of-type { border-bottom: none; }
.form-label {
  font-size: 13px;
  color: var(--text2);
  font-weight: 500;
  flex-shrink: 0;
}
.form-input,
.form-select {
  background: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--rsm);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  padding: 9px 12px;
  min-height: 44px;
  outline: none;
  flex: 1;
}
.form-input:focus,
.form-select:focus { border-color: var(--gold); }
textarea.form-input { min-height: 72px; resize: vertical; }

/* ── Stepper control ─────────────────────────────────────────── */
.stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stepper-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--s3);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 22px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.stepper-btn:hover  { background: var(--border); border-color: var(--text3); }
.stepper-btn:active { background: var(--s1); }
.stepper-val {
  min-width: 36px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

/* ── Progress Analytics ──────────────────────────────────────────────────── */

.prog-section       { padding: 16px 16px 8px; }
.prog-section-title { font-size: 11px; font-weight: 700; letter-spacing: .08em;
                      text-transform: uppercase; color: var(--text3); margin-bottom: 12px; }

.prog-card          { background: var(--s2); border: 1px solid var(--border);
                      border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }

.prog-stat-row      { display: flex; gap: 12px; margin-bottom: 12px; }
.prog-stat          { flex: 1; background: var(--s2); border: 1px solid var(--border);
                      border-radius: 10px; padding: 12px; }
.prog-stat-lbl      { font-size: 10px; font-weight: 600; color: var(--text3);
                      text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.prog-stat-val      { font-family: 'Bebas Neue', sans-serif; font-size: 28px;
                      line-height: 1; color: var(--text); }
.prog-stat-sub      { font-size: 11px; color: var(--text3); margin-top: 2px; }

.prog-chart-wrap    { width: 100%; overflow-x: auto; padding: 4px 0; }
.prog-chart-wrap svg { max-width: 100%; }

.prog-range-btns    { display: flex; gap: 6px; margin-bottom: 12px; }
.prog-range-btn     { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
                      border: 1px solid var(--border); background: none; color: var(--text3);
                      cursor: pointer; font-family: 'DM Sans', sans-serif; }
.prog-range-btn.active { background: var(--s3); color: var(--gold); border-color: var(--gold); }

/* Habit checklist */
.habit-row          { display: flex; align-items: center; gap: 12px; padding: 12px 0;
                      border-bottom: 1px solid var(--border); }
.habit-row:last-child { border-bottom: none; }
.habit-check        { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border);
                      display: flex; align-items: center; justify-content: center;
                      cursor: pointer; flex-shrink: 0; transition: background .15s, border-color .15s; }
.habit-check.done   { background: var(--green-mid); border-color: var(--green-mid); }
.habit-info         { flex: 1; }
.habit-name         { font-size: 14px; font-weight: 500; color: var(--text); }
.habit-meta         { font-size: 11px; color: var(--text3); margin-top: 2px; }
.habit-streak       { font-size: 12px; font-weight: 600; color: var(--gold); flex-shrink: 0; }

/* 1RM / lift rows */
.prow               { margin-bottom: 14px; }
.ptop               { display: flex; justify-content: space-between; align-items: baseline;
                      margin-bottom: 5px; }
.pname              { font-size: 13px; font-weight: 600; color: var(--text); }
.pnums              { display: flex; gap: 6px; align-items: baseline; }
.pprev              { font-size: 11px; color: var(--text3); }
.pcurr              { font-size: 14px; font-weight: 700; color: var(--text); }
.ppct               { font-size: 11px; font-weight: 700; color: var(--green-mid); }

/* ── Mobile trainer nav (≤768px) ── */
.mobile-header      { display: none; }
.mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; -webkit-tap-highlight-color: transparent; }

@media (max-width: 768px) {
  .app { flex-direction: column; }

  .mobile-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; height: 52px; flex-shrink: 0;
    background: var(--s2); border-bottom: 1px solid var(--border);
  }
  .mobile-menu-btn {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--text);
    cursor: pointer; border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-title { font-size: 15px; font-weight: 600; color: var(--text); }

  .sidebar {
    position: fixed; top: 0; height: 100vh; z-index: 1001;
    width: min(280px, 85vw); left: calc(-1 * min(280px, 85vw));
    transition: left .25s ease; overflow-y: auto;
  }
  body.sidebar-open .sidebar      { left: 0; }
  body.sidebar-open .mobile-nav-overlay { display: block; }

  .main { padding: 16px 14px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 34px)); }

  /* Stats: 2-col grid, labels same height so gold numbers align */
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-lbl   { min-height: 2.4em; display: flex; align-items: flex-end; margin-bottom: 0; padding-bottom: 6px; }

  /* Tables: horizontal scroll */
  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Client detail topbar: wrap to two rows, actions get full width to scroll */
  .cdp-topbar  { flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
  .cdp-actions { width: 100%; margin-left: 0 !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }

  /* Client detail: hide sidebar, show on toggle */
  .cdp-body    { flex-direction: column; }
  .cdp-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); display: none; max-height: 60vh; overflow-y: auto; }
  .cdp-sidebar.panel-open { display: block; }
  .cdp-main    { padding: 14px; }

  /* Program builder: hide session list, show on toggle */
  .builder-body  { flex-direction: column; }
  .builder-left  { width: 100%; border-right: none; border-bottom: 1px solid var(--border); display: none; max-height: 45vh; overflow-y: auto; }
  .builder-left.panel-open { display: block; }
  .builder-right { padding: 14px; }

  /* Mobile panel toggle button (hidden on desktop) */
  .mobile-panel-btn {
    min-width: 44px; min-height: 44px; padding: 0 12px;
    background: none; border: 1px solid var(--border); border-radius: 8px;
    color: var(--text2); font-size: 13px; font-family: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent; white-space: nowrap; flex-shrink: 0;
  }

  /* Exercise modal: collapse 2-col field grids to 1 col */
  #exercise-modal [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}

@media (min-width: 769px) {
  .mobile-panel-btn { display: none; }
}

.prog-section .track { height: 4px; background: var(--s3); border-radius: 2px; overflow: hidden; }
.prog-section .fg    { height: 100%; background: var(--green-mid); border-radius: 2px; transition: width .4s; }