/* ============================================================
   LiftTrack — “Gold Dust” Dark UI (readability-tuned)
   Drop-in replacement for style.css
   - keeps the premium dark gold aesthetic
   - improves legibility on iPhone / OLED
   - brighter secondary text
   - less haze / blur
   - larger micro-text
   ============================================================ */

:root{
  /* Core surfaces */
  --bg0:#151210;
  --bg1:#191613;
  --bg2:#1f1b17;

  --card0:#211c17;
  --card1:#28221c;
  --card2:#302821;
  --card3:#392f26;

  --stroke0:rgba(255,255,255,.08);
  --stroke1:rgba(232,184,75,.12);
  --stroke2:rgba(255,255,255,.12);
  --strokeWarm:rgba(232,184,75,.20);

  /* Text */
  --text:#fbf3e4;
  --text2:#f0e4d5;
  --muted:#c3b39f;
  --dim:#988875;

  /* Accents */
  --gold:#e8b84b;
  --gold2:#f7d98a;
  --gold3:#c8922e;
  --gold4:#8a6218;
  --goldGlow: rgba(232,184,75,.22);

  --push:#cf7451;
  --pull:#4ea0c8;
  --legs:#67b06f;
  --upper:#9b78d2;

  --red:#cf4b4b;
  --green:#67b06f;

  /* Radii */
  --r12:12px;
  --r16:16px;
  --r20:20px;
  --r24:24px;
  --r999:999px;

  /* Shadows */
  --shadowSoft: 0 12px 34px rgba(0,0,0,.48);
  --shadowCard: 0 14px 44px rgba(0,0,0,.54);
  --shadowTight: 0 10px 26px rgba(0,0,0,.52);
  --shadowInset: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.55);

  /* FX */
  --blur: blur(8px);
  --glass: rgba(18,16,14,.82);

  /* CTA gradient */
  --ctaGrad: linear-gradient(135deg, var(--gold2), var(--gold3));
  --ctaGradDeep: linear-gradient(135deg, #f8de93, #d39b34 55%, #b17c1f);
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

html{
  min-height:100%;
  background-color:var(--bg2);
}

body{
  min-height:100svh;
  min-height:100dvh;
  overflow-x:hidden;
  overflow-y:auto;
  background-color:var(--bg1);
  background:
    radial-gradient(900px 650px at 15% -10%, rgba(232,184,75,.10), transparent 56%),
    radial-gradient(820px 600px at 95% 10%, rgba(78,160,200,.08), transparent 54%),
    radial-gradient(820px 680px at 65% 120%, rgba(103,176,111,.07), transparent 58%),
    radial-gradient(1200px 900px at 50% 20%, rgba(0,0,0,0), rgba(0,0,0,.05) 72%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, var(--bg0), var(--bg2));
  color:var(--text);
  font-family:'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#app{
  display:flex;
  flex-direction:column;
  min-height:100svh;
  min-height:100dvh;
  padding-top:env(safe-area-inset-top);
  z-index:1;
  background:
    radial-gradient(900px 650px at 15% -10%, rgba(232,184,75,.10), transparent 56%),
    radial-gradient(820px 600px at 95% 10%, rgba(78,160,200,.08), transparent 54%),
    radial-gradient(820px 680px at 65% 120%, rgba(103,176,111,.07), transparent 58%),
    radial-gradient(1200px 900px at 50% 20%, rgba(0,0,0,0), rgba(0,0,0,.05) 72%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, var(--bg0), var(--bg2));
  position:relative;
}

/* ============================================================
   “Gold Dust” texture helpers
   ============================================================ */
.gold-dust{
  position:relative;
  overflow:hidden;
}
.gold-dust:before{
  content:"";
  position:absolute; inset:-1px;
  pointer-events:none;
  opacity:.18;
  mix-blend-mode:screen;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,220,140,.60), transparent 55%),
    radial-gradient(1px 1px at 22% 62%, rgba(255,220,140,.55), transparent 55%),
    radial-gradient(1px 1px at 35% 35%, rgba(255,220,140,.48), transparent 55%),
    radial-gradient(1px 1px at 44% 78%, rgba(255,220,140,.50), transparent 55%),
    radial-gradient(1px 1px at 58% 22%, rgba(255,220,140,.52), transparent 55%),
    radial-gradient(1px 1px at 63% 58%, rgba(255,220,140,.45), transparent 55%),
    radial-gradient(1px 1px at 71% 34%, rgba(255,220,140,.55), transparent 55%),
    radial-gradient(1px 1px at 84% 70%, rgba(255,220,140,.50), transparent 55%),
    radial-gradient(1px 1px at 90% 28%, rgba(255,220,140,.44), transparent 55%),
    radial-gradient(1px 1px at 18% 88%, rgba(255,220,140,.42), transparent 55%);
  filter: blur(.1px);
}
.gold-dust:after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(260px 140px at 30% 0%, rgba(232,184,75,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 38%);
  opacity:.85;
}

/* ============================================================
   Top bar
   ============================================================ */
.topbar{
  padding:14px 16px 10px;
  flex-shrink:0;
  z-index:120;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  background: linear-gradient(180deg, rgba(16,14,12,.96), rgba(16,14,12,.88));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.brand{display:flex;align-items:baseline;gap:8px;min-width:0;}
.logo{
  font-family:'Bebas Neue', cursive;
  font-size:30px;
  letter-spacing:.10em;
  line-height:1;
  white-space:nowrap;
}
.logo em{color:var(--gold);font-style:normal;}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 11px;
  border-radius: var(--r999);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(20,16,13,.70);
  box-shadow: var(--shadowInset);
  white-space:nowrap;
}
.rest-badge{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.01em;
}
.rest-badge.warn{color:var(--red);}

.cta{
  border:none;
  cursor:pointer;
  color:#0a0a08;
  font-family:'DM Sans',sans-serif;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  padding:10px 14px;
  border-radius: var(--r999);
  background: var(--ctaGradDeep);
  box-shadow:
    0 18px 44px rgba(232,184,75,.18),
    0 10px 22px rgba(232,184,75,.10),
    inset 0 1px 0 rgba(255,255,255,.18);
  position:relative;
  overflow:hidden;
}
.cta:before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  transform:translateX(-120%);
  transition:transform .65s ease;
  pointer-events:none;
}
.cta:hover:before{transform:translateX(120%);}
.cta:active{transform:translateY(1px);}

.icon-btn,
.back-btn{
  background: rgba(18,16,14,.72);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  color:var(--muted);
  cursor:pointer;
  box-shadow: var(--shadowInset);
}
.back-btn{font-size:18px;line-height:1;padding:10px 12px;}
.icon-btn{width:42px;height:46px;display:flex;align-items:center;justify-content:center;font-size:18px;}

/* ============================================================
   Stat strip
   ============================================================ */
.stat-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  padding:10px 12px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}

.stat-cell{
  border-radius: var(--r16);
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(180px 90px at 35% 0%, rgba(232,184,75,.08), transparent 60%),
    radial-gradient(220px 120px at 100% 100%, rgba(255,255,255,.03), transparent 60%),
    linear-gradient(135deg, rgba(24,20,17,.96), rgba(14,12,10,.96));
  box-shadow: var(--shadowTight);
  position:relative;
  overflow:hidden;
  min-height:60px;
}
.stat-cell:after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 38%);
}
.stat-cell-label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
  font-weight:700;
}
.stat-cell-val{
  font-family:'Bebas Neue', cursive;
  font-size:24px;
  line-height:1;
}
.stat-cell-sub{
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
  font-family:'IBM Plex Mono', monospace;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stat-cell.next{cursor:pointer;}
.stat-cell.next:hover{border-color:rgba(232,184,75,.28); box-shadow: 0 14px 40px rgba(0,0,0,.56), 0 0 0 1px rgba(232,184,75,.10) inset;}

/* ============================================================
   Content
   ============================================================ */
.content{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(150px + env(safe-area-inset-bottom));
}

.content::-webkit-scrollbar{display:none;}

/* Section headers */
.section-header,
.add-header,
.muscle-detail-header{
  padding:14px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(16,14,12,.70), rgba(16,14,12,0));
}
.section-title,
.add-title{
  font-family:'Bebas Neue', cursive;
  font-size:22px;
  letter-spacing:.10em;
  margin-bottom:8px;
}
.add-title{font-size:24px;}

/* ============================================================
   Month separators
   ============================================================ */
.month-header{
  padding:14px 16px 6px;
  display:flex; align-items:center; gap:10px;
  opacity:.96;
}
.month-label{
  font-family:'Bebas Neue', cursive;
  font-size:12px;
  letter-spacing:.18em;
  color:var(--muted);
}
.month-line{flex:1;height:1px;background:rgba(255,255,255,.10);}
.month-count{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--dim);
}

/* ============================================================
   Session cards
   ============================================================ */
.session-card{
  margin:0 12px 10px;
  border-radius: var(--r24);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(300px 140px at 30% 0%, rgba(232,184,75,.08), transparent 60%),
    linear-gradient(135deg, rgba(24,20,17,.96), rgba(12,10,9,.96));
  box-shadow: var(--shadowCard);
  position:relative;
}
.session-card.open{border-color:rgba(232,184,75,.22);}

.s-top{display:flex;align-items:stretch;cursor:pointer;position:relative;}
.s-stripe{width:4px;flex-shrink:0;}
.s-main{flex:1;padding:12px 12px 10px 12px;min-width:0;}
.s-date{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--muted);
  margin-bottom:4px;
}
.s-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.s-title{
  font-family:'Bebas Neue', cursive;
  font-size:20px;
  letter-spacing:.06em;
  line-height:1;
}
.focus-tag{
  font-size:10px;
  font-weight:900;
  padding:4px 9px;
  border-radius: var(--r999);
  letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadowInset);
}
.pr-tag{
  font-size:10px;
  padding:4px 9px;
  border-radius: var(--r999);
  background: rgba(232,184,75,.10);
  color:var(--gold2);
  letter-spacing:.02em;
  font-family:'IBM Plex Mono', monospace;
  border:1px solid rgba(232,184,75,.22);
  box-shadow: var(--shadowInset);
}
.s-mini-bars{display:flex;align-items:flex-end;gap:3px;height:18px;margin-top:10px;opacity:.95;}
.s-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:space-between;
  padding:12px 12px 10px 0;
  flex-shrink:0;
}
.s-vol-num{font-family:'IBM Plex Mono', monospace;font-size:12px;color:var(--text);}
.s-vol-unit{font-size:10px;color:var(--dim);margin-left:3px;}
.s-chevron{font-size:10px;color:var(--dim);transition:transform .2s;margin-top:6px;opacity:.85;}
.s-chevron.open{transform:rotate(180deg);}

.s-body{
  border-top:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(340px 160px at 30% 0%, rgba(232,184,75,.06), transparent 62%),
    linear-gradient(180deg, rgba(20,17,15,.92), rgba(12,10,9,.94));
}
.s-body-inner{padding:14px 14px 12px;}

.ex-row{margin-bottom:12px;}
.ex-name-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.ex-name-lbl{font-size:12px;color:var(--text);}
.ex-name-lbl.pr{color:var(--gold2);}

.ss-pill{
  font-size:10px;
  border-radius: var(--r999);
  padding:3px 8px;
  font-family:'IBM Plex Mono', monospace;
  color:var(--gold2);
  background: rgba(232,184,75,.10);
  border:1px solid rgba(232,184,75,.18);
  box-shadow: var(--shadowInset);
}
.ex-pr-lbl{font-size:11px;color:var(--gold);font-family:'IBM Plex Mono', monospace;opacity:.82;}
.sets-row{display:flex;flex-wrap:wrap;gap:6px;}
.set-pill{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:#c8baa5;
  background: rgba(26,20,16,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding:8px 10px;
  box-shadow: var(--shadowInset);
}
.set-pill.top{
  border-color: rgba(232,184,75,.30);
  color: var(--gold2);
  background: rgba(42,32,11,.74);
}

/* Actions */
.s-actions{
  display:flex;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.06);
  flex-wrap:wrap;
}
.s-act-btn{
  background: rgba(18,16,14,.72);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--r999);
  color:var(--muted);
  padding:8px 12px;
  font-size:11px;
  cursor:pointer;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-family:'DM Sans',sans-serif;
  font-weight:900;
  box-shadow: var(--shadowInset);
}
.s-act-btn:active{transform:translateY(1px);}
.s-act-btn.danger{color:#c27b7b;border-color:rgba(207,75,75,.25);background:rgba(24,10,10,.60);}
.s-act-btn.primary{color:var(--gold2);border-color:rgba(232,184,75,.22);background:rgba(42,32,11,.70);}

/* ============================================================
   Forms
   ============================================================ */
.add-body{padding:12px 14px;}
.form-row{display:flex;gap:10px;}
.form-group{flex:1;margin-bottom:12px;}
.form-label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
  margin-bottom:6px;
  font-weight:700;
}
.form-input{
  width:100%;
  background: rgba(18,16,14,.82);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  color:var(--text);
  padding:12px 12px;
  font-size:16px;
  font-family:'DM Sans',sans-serif;
  -webkit-appearance:none;
  appearance:none;
  color-scheme:dark;
  box-shadow: var(--shadowInset);
}
.form-input:focus{outline:none;border-color:rgba(232,184,75,.30);box-shadow: var(--shadowInset), 0 0 0 2px rgba(232,184,75,.08);}

.tmpl-banner{
  border-radius:18px;
  padding:10px 13px;
  margin-bottom:12px;
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(42,32,11,.62);
  border:1px solid rgba(232,184,75,.20);
  box-shadow: var(--shadowInset);
  position:relative;
  overflow:hidden;
}
.tmpl-banner:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.18;
  mix-blend-mode:screen;
  background:
    radial-gradient(1px 1px at 18% 28%, rgba(255,220,140,.65), transparent 60%),
    radial-gradient(1px 1px at 65% 20%, rgba(255,220,140,.55), transparent 60%),
    radial-gradient(1px 1px at 72% 68%, rgba(255,220,140,.52), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%);
}
.tmpl-lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,184,75,.72);margin-bottom:2px;font-weight:700;}
.tmpl-date{font-size:12px;color:var(--gold2);font-family:'IBM Plex Mono',monospace;}
.tmpl-clear{
  background: rgba(18,16,14,.45);
  border:1px solid rgba(232,184,75,.20);
  border-radius: var(--r999);
  color:rgba(247,217,138,.95);
  padding:6px 10px;
  font-size:11px;
  cursor:pointer;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-family:'DM Sans',sans-serif;
  font-weight:900;
  box-shadow: var(--shadowInset);
  position:relative;
  z-index:1;
}
.no-tmpl{
  border-radius:18px;
  padding:10px 13px;
  margin-bottom:12px;
  background: rgba(18,16,14,.60);
  border:1px dashed rgba(255,255,255,.14);
  text-align:center;
  font-size:12px;
  color:var(--dim);
}

/* Exercise card */
.ex-card{
  background:
    radial-gradient(320px 160px at 30% 0%, rgba(232,184,75,.08), transparent 62%),
    linear-gradient(135deg, rgba(22,18,15,.90), rgba(12,10,9,.94));
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:12px 12px;
  margin-bottom:10px;
  box-shadow: var(--shadowCard);
  position:relative;
  overflow:hidden;
}
.ex-card:before{
  content:"";
  position:absolute; inset:-1px;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:screen;
  background-image:
    radial-gradient(1px 1px at 14% 18%, rgba(255,220,140,.55), transparent 60%),
    radial-gradient(1px 1px at 25% 76%, rgba(255,220,140,.50), transparent 60%),
    radial-gradient(1px 1px at 44% 38%, rgba(255,220,140,.46), transparent 60%),
    radial-gradient(1px 1px at 63% 22%, rgba(255,220,140,.52), transparent 60%),
    radial-gradient(1px 1px at 78% 64%, rgba(255,220,140,.48), transparent 60%),
    radial-gradient(1px 1px at 90% 32%, rgba(255,220,140,.42), transparent 60%);
}
.ex-card:after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 35%);
}

.ex-card-header{display:flex;gap:8px;margin-bottom:10px;align-items:flex-start;position:relative;z-index:1;}
.ex-name-wrap{flex:1;position:relative;}
.ex-name-input{
  width:100%;
  background: rgba(12,11,10,.82);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  color:var(--text);
  padding:12px 12px;
  font-size:16px;
  font-family:'DM Sans',sans-serif;
  box-shadow: var(--shadowInset);
}
.ex-name-input:focus{outline:none;border-color:rgba(232,184,75,.30);box-shadow: var(--shadowInset), 0 0 0 2px rgba(232,184,75,.08);}

.rm-ex-btn-add{
  width:42px;height:46px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  color:var(--muted);
  background: rgba(18,16,14,.72);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  cursor:pointer;
  box-shadow: var(--shadowInset);
  position:relative;z-index:1;
}

.reorder-wrap,.reorder-btns{display:flex;flex-direction:column;gap:6px;flex-shrink:0;position:relative;z-index:1;}
.reorder-btn-add,.reorder-btn{
  width:34px;height:21px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;
  color:var(--muted);
  background: rgba(18,16,14,.72);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  cursor:pointer;
  box-shadow: var(--shadowInset);
}
.reorder-btn-add:disabled,.reorder-btn:disabled{opacity:.25;cursor:default;}

.overload-hint{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background: rgba(42,32,11,.60);
  border:1px solid rgba(232,184,75,.20);
  border-radius:18px;
  margin-bottom:10px;
  position:relative;z-index:1;
  box-shadow: var(--shadowInset);
}
.oh-icon{font-size:14px;flex-shrink:0;}
.oh-text{font-size:12px;color:rgba(247,217,138,.80);line-height:1.35;flex:1;}
.oh-text strong{color:var(--gold2);}
.oh-apply{
  background: var(--ctaGradDeep);
  border:0;
  color:#0a0a08;
  border-radius: var(--r999);
  padding:8px 10px;
  font-size:11px;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  flex-shrink:0;
  box-shadow: 0 18px 34px rgba(232,184,75,.14), inset 0 1px 0 rgba(255,255,255,.16);
}
.oh-apply:active{transform:translateY(1px);}

.alt-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;position:relative;z-index:1;flex-wrap:wrap;}
.alt-toggle{display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;}
.alt-label{font-size:10px;color:var(--muted);letter-spacing:.10em;text-transform:uppercase;font-weight:700;}
.alt-arrow{font-size:8px;color:var(--muted);line-height:1;}
.alt-chips{display:flex;gap:6px;flex-wrap:wrap;}
.alt-chip{
  background: rgba(18,16,14,.72);
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  border-radius: var(--r999);
  padding:7px 10px;
  font-size:12px;
  cursor:pointer;
  box-shadow: var(--shadowInset);
}

/* Set rows */
.set-form-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;position:relative;z-index:1;}
.set-num{font-size:11px;color:var(--dim);font-family:'IBM Plex Mono',monospace;width:16px;text-align:right;flex-shrink:0;}
.set-input{
  background: rgba(12,11,10,.82);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  color:var(--text);
  padding:11px 10px;
  font-size:16px;
  font-family:'IBM Plex Mono',monospace;
  width:78px;
  text-align:center;
  -webkit-appearance:none; appearance:none;
  color-scheme:dark;
  box-shadow: var(--shadowInset);
}
.set-input:focus{outline:none;border-color:rgba(232,184,75,.30);box-shadow: var(--shadowInset), 0 0 0 2px rgba(232,184,75,.08);}
.set-sep{color:rgba(255,255,255,.24);font-size:14px;flex-shrink:0;}
.prev-ref{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);white-space:nowrap;}
.prev-up{color:var(--green);}
.prev-dn{color:var(--red);}
.rm-set-btn{background:none;border:none;color:var(--dim);cursor:pointer;font-size:18px;padding:0 2px;line-height:1;flex-shrink:0;}

.add-set-btn,
.ghost-btn{
  width:100%;
  background: rgba(18,16,14,.52);
  border:1px dashed rgba(255,255,255,.14);
  border-radius:18px;
  color:var(--muted);
  padding:12px;
  font-size:11px;
  cursor:pointer;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-family:'DM Sans',sans-serif;
  font-weight:950;
  margin-bottom:10px;
  box-shadow: var(--shadowInset);
}
.add-set-btn{margin-top:4px;}

.save-btn{
  width:100%;
  background: var(--ctaGradDeep);
  border:0;
  border-radius:22px;
  color:#0a0a08;
  padding:14px;
  font-size:12px;
  font-weight:1000;
  cursor:pointer;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-family:'DM Sans',sans-serif;
  box-shadow:
    0 22px 50px rgba(232,184,75,.16),
    0 10px 24px rgba(232,184,75,.10),
    inset 0 1px 0 rgba(255,255,255,.18);
  position:relative;
  overflow:hidden;
}
.save-btn:before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform:translateX(-120%);
  transition:transform .7s ease;
  pointer-events:none;
}
.save-btn:hover:before{transform:translateX(120%);}
.save-btn:disabled{opacity:.35;cursor:not-allowed;}

/* ============================================================
   Exercise Library Browser
   ============================================================ */
.db-browser{
  margin-bottom:12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  overflow:hidden;
  background:
    radial-gradient(320px 140px at 30% 0%, rgba(232,184,75,.06), transparent 60%),
    rgba(14,12,10,.74);
  box-shadow: var(--shadowCard);
}
.db-browser-header{
  padding:10px 14px 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.db-browser-title{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
  font-weight:700;
}
.db-eq-bar{
  display:flex;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:2px;
}
.db-eq-bar::-webkit-scrollbar{display:none;}
.db-eq-tab{
  flex-shrink:0;
  padding:7px 13px;
  border-radius:var(--r999);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(18,16,14,.72);
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;
  box-shadow:var(--shadowInset);
  white-space:nowrap;
  transition:all .12s;
}
.db-eq-tab.active{
  background:rgba(42,32,11,.68);
  color:var(--gold2);
  border-color:rgba(232,184,75,.25);
}
.db-exercise-list{
  padding:10px 14px 14px;
  max-height:240px;
  overflow-y:auto;
  scrollbar-width:none;
}
.db-exercise-list::-webkit-scrollbar{display:none;}
.db-cat-group{margin-bottom:12px;}
.db-cat-group:last-child{margin-bottom:0;}
.db-cat-label{
  font-family:'Bebas Neue',cursive;
  font-size:13px;
  letter-spacing:.12em;
  margin-bottom:7px;
  opacity:.86;
}
.db-cat-exercises{display:flex;flex-wrap:wrap;gap:6px;}
.db-ex-btn{
  padding:7px 12px;
  border-radius:var(--r999);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(18,16,14,.62);
  color:var(--text2);
  font-size:12px;
  font-family:'DM Sans',sans-serif;
  font-weight:700;
  cursor:pointer;
  box-shadow:var(--shadowInset);
  transition:all .10s;
}
.db-ex-btn:active{
  transform:translateY(1px);
  background:rgba(42,32,11,.60);
  color:var(--gold2);
  border-color:rgba(232,184,75,.20);
}

/* ============================================================
   Autocomplete
   ============================================================ */
.autocomplete{
  position:absolute;
  top:calc(100% + 6px);
  left:0;right:0;
  background: rgba(14,12,10,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  z-index:200;
  box-shadow: 0 24px 60px rgba(0,0,0,.62);
  overflow:hidden;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.ac-item{
  padding:12px 12px;
  font-size:12px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.ac-item:last-child{border-bottom:none;}
.ac-match{font-size:10px;color:rgba(247,217,138,.78);font-family:'IBM Plex Mono',monospace;}

/* ============================================================
   Progress tab
   ============================================================ */
/* Exercise header above graphs */
.progress-ex-header{
  padding:10px 16px 4px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.progress-ex-name{
  font-family:'Bebas Neue',cursive;
  font-size:20px;
  letter-spacing:.05em;
  color:var(--text);
}
/* Exercise list below graphs */
.progress-ex-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  margin-bottom:4px;
  cursor:pointer;
  border:1px solid transparent;
  background:rgba(18,16,14,.40);
}
.progress-ex-row.active{
  background:rgba(42,32,11,.68);
  border-color:rgba(232,184,75,.22);
}
.progress-ex-row-name{font-size:12px;font-weight:700;color:var(--text2);}
.progress-ex-row.active .progress-ex-row-name{color:var(--gold2);}
.progress-ex-row-count{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);}
.ex-chips{display:flex;flex-wrap:wrap;gap:8px;}
.ex-chip{
  font-size:12px;
  font-family:'DM Sans',sans-serif;
  font-weight:900;
  padding:8px 12px;
  border-radius: var(--r999);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(18,16,14,.58);
  color:var(--muted);
  cursor:pointer;
  transition:all .12s;
  box-shadow: var(--shadowInset);
}
.ex-chip.active{
  background: rgba(42,32,11,.68);
  color:var(--gold2);
  border-color: rgba(232,184,75,.22);
}

.chart-block{
  padding:14px 16px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.chart-block-title{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
  font-weight:700;
}
.chart-big{
  font-family:'Bebas Neue',cursive;
  font-size:34px;
  line-height:1;
}
.chart-delta{font-family:'IBM Plex Mono',monospace;font-size:11px;margin-left:10px;}
.chart-wrap{
  position:relative;
  height:160px;
  margin-top:14px;
  background:
    radial-gradient(220px 120px at 30% 0%, rgba(232,184,75,.06), transparent 60%),
    rgba(18,16,14,.56);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:10px 10px 6px;
  box-shadow: var(--shadowInset);
}

/* ============================================================
   Muscles tab
   ============================================================ */
.muscle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:12px;}
.muscle-cell{
  background:
    radial-gradient(260px 140px at 30% 0%, rgba(232,184,75,.06), transparent 62%),
    linear-gradient(135deg, rgba(22,18,15,.90), rgba(12,10,9,.94));
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:14px 14px;
  cursor:pointer;
  box-shadow: var(--shadowCard);
  position:relative;
  overflow:hidden;
}
.muscle-cell:before{
  content:"";
  position:absolute; inset:-1px;
  pointer-events:none;
  opacity:.14;
  mix-blend-mode:screen;
  background-image:
    radial-gradient(1px 1px at 18% 28%, rgba(255,220,140,.55), transparent 60%),
    radial-gradient(1px 1px at 72% 68%, rgba(255,220,140,.48), transparent 60%);
}
.muscle-cell:active{transform:translateY(1px);}
.muscle-cell-name{font-family:'Bebas Neue',cursive;font-size:18px;letter-spacing:.06em;margin-bottom:4px;}
.muscle-cell-sub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);}
.muscle-cell-bar{height:4px;border-radius:4px;margin-top:10px;background:rgba(255,255,255,.10);overflow:hidden;}
.muscle-cell-fill{height:100%;border-radius:4px;transition:width .5s ease;}

.muscle-ex-card{
  background: rgba(18,16,14,.66);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:14px 14px;
  margin-bottom:10px;
  box-shadow: var(--shadowCard);
}
.muscle-ex-name{font-size:13px;font-weight:800;color:var(--text);margin-bottom:10px;}
.score-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.score-label{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);width:84px;flex-shrink:0;font-weight:700;}
.score-dots{display:flex;gap:6px;}
.score-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.12);}
.score-dot.on{background:var(--gold2);box-shadow: 0 0 0 2px rgba(232,184,75,.10);}
.score-dot.on.sec{background:var(--gold3);opacity:.60;}
.muscle-ex-stats{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);margin-top:6px;}

/* Muscle group cards (level 1 of 3-level muscle nav) */
.muscle-group-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:12px;}
.muscle-group-card{
  background: linear-gradient(135deg, rgba(22,18,15,.90), rgba(12,10,9,.94));
  border:1px solid rgba(255,255,255,.10);
  border-left:3px solid var(--gc,#888);
  border-radius:22px;
  padding:18px 16px;
  cursor:pointer;
  box-shadow: var(--shadowCard);
  position:relative;
  overflow:hidden;
}
.muscle-group-card:active{transform:translateY(1px);}
.muscle-group-name{font-family:'Bebas Neue',cursive;font-size:22px;letter-spacing:.06em;color:var(--gc,var(--text));margin-bottom:4px;}
.muscle-group-sub{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);}
.muscle-group-vol{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--dim);margin-top:6px;}
.muscle-subtab-bar{display:flex;gap:6px;margin-top:8px;}
.muscle-subtab{
  flex-shrink:0;
  padding:5px 14px;
  border-radius:var(--r999);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(18,16,14,.72);
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;
  box-shadow:var(--shadowInset);
  transition:all .12s;
}
.muscle-subtab.active{
  background:rgba(42,32,11,.68);
  color:var(--gold2);
  border-color:rgba(232,184,75,.25);
}

/* ============================================================
   Overview tab
   ============================================================ */
.ov-section{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);}
.ov-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:700;}
.focus-row{margin-bottom:12px;}
.focus-row-top{display:flex;justify-content:space-between;margin-bottom:6px;}
.focus-row-name{font-size:12px;font-weight:900;}
.focus-row-count{font-size:11px;color:var(--muted);font-family:'IBM Plex Mono',monospace;}
.focus-track{height:6px;background:rgba(255,255,255,.10);border-radius: var(--r999);overflow:hidden;}
.focus-fill{height:100%;border-radius: var(--r999);}
.vol-bars{display:flex;align-items:flex-end;gap:4px;height:62px;}
.vol-bar{flex:1;border-radius:8px 8px 0 0;min-height:2px;opacity:.78;}
.freq-grid{display:flex;flex-wrap:wrap;gap:8px;}
.freq-item{
  background: rgba(18,16,14,.58);
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--r999);
  padding:8px 12px;
  display:flex;align-items:center;gap:8px;
  box-shadow: var(--shadowInset);
}
.freq-name{font-size:12px;color:var(--text);font-weight:800;}
.freq-n{
  font-size:10px;
  font-family:'IBM Plex Mono',monospace;
  background: rgba(42,32,11,.68);
  color:var(--gold2);
  border-radius:12px;
  padding:2px 7px;
  border:1px solid rgba(232,184,75,.18);
}

/* ============================================================
   Loading / Toast
   ============================================================ */
.loading-overlay{
  position:fixed; inset:0;
  background: rgba(8,7,6,.72);
  display:flex; align-items:center; justify-content:center;
  z-index:300;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.spinner{
  width:36px;height:36px;
  border:3px solid rgba(255,255,255,.12);
  border-top-color: var(--gold2);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.toast{
  position:fixed;
  bottom:calc(86px + max(env(safe-area-inset-bottom),20px));
  left:50%;
  transform:translateX(-50%) translateY(10px);
  background: rgba(14,12,10,.96);
  color:var(--text);
  padding:10px 14px;
  border-radius:18px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.12);
  opacity:0;
  transition:all .2s;
  pointer-events:none;
  white-space:nowrap;
  z-index:260;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 22px 56px rgba(0,0,0,.56);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.error{border-color:rgba(207,75,75,.30);color:var(--red);}

/* ============================================================
   Floating bottom dock
   ============================================================ */
.dock{
  position:fixed;
  left:12px;
  right:12px;
  bottom:0;
  padding-bottom:calc(env(safe-area-inset-bottom) + 8px);
  z-index:210;
  pointer-events:none;
}

.dock-inner{
  pointer-events:auto;
  display:flex;
  align-items:flex-end;
  gap:6px;
  padding:8px 8px 8px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(16,14,12,.96);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:
    0 20px 54px rgba(0,0,0,.56),
    inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;
  overflow:visible;
}

.tab{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:6px 4px 4px;
  border:0;
  background:transparent;
  cursor:pointer;
  color:var(--muted);
  font-family:'DM Sans',sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  gap:3px;
  border-radius:16px;
  transition:all .15s;
}
.tab.active{
  color:var(--gold2);
  background:rgba(42,32,11,.46);
  border:1px solid rgba(232,184,75,.14);
}
.tab-icon{font-size:15px;line-height:1;}
.tab-label{display:block;}
.tab-dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--gold2);
  opacity:0;transition:opacity .15s;
}
.tab.active .tab-dot{opacity:1;}

.tab.tab-add{
  flex:0 0 64px;
  width:64px;
  min-height:64px;
  margin-top:-24px;
  margin-bottom:2px;
  border-radius:50%;
  background:var(--ctaGradDeep);
  color:#0a0a08;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 18px 38px rgba(232,184,75,.22),
    0 8px 18px rgba(232,184,75,.14),
    inset 0 1px 0 rgba(255,255,255,.20);
  gap:0;
  padding:0;
}
.tab.tab-add .tab-icon{font-size:26px;line-height:1;}
.tab.tab-add .tab-label{display:none;}
.tab.tab-add .tab-dot{display:none;}
.tab.tab-add.active{
  color:#0a0a08;
  background:var(--ctaGradDeep);
  border:1px solid rgba(255,255,255,.16);
  transform:translateY(-2px);
  box-shadow:
    0 22px 44px rgba(232,184,75,.28),
    0 10px 22px rgba(232,184,75,.18),
    inset 0 1px 0 rgba(255,255,255,.22);
}

/* ============================================================
   Misc
   ============================================================ */
.edit-form{padding:12px 14px;}
select option{background:#0f0d0b;}
input[type=number]::-webkit-inner-spin-button{opacity:0;}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(0.62);}

/* ============================================================
   Log tab — Next Up & Recent Workouts
   ============================================================ */
.log-next-section{
  padding:16px 12px 4px;
}
.log-section-hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.log-section-title{
  font-family:'Bebas Neue', cursive;
  font-size:22px;
  letter-spacing:.10em;
  color:var(--gold);
}
.log-recent-hdr{
  padding:12px 12px 4px;
  position:relative;
  z-index:1;
}
.next-hero-date-row{
  font-size:12px;
  color:#c8b898;
  font-weight:600;
  letter-spacing:.02em;
  margin-bottom:8px;
}

/* Next Up hero card — dark obsidian + antique gold */
.next-hero-card{
  position:relative;
  border-radius:var(--r20);
  background:
    radial-gradient(ellipse 62% 30% at 28% -8%, rgba(170,118,26,.18) 0%, rgba(80,48,10,.06) 46%, transparent 68%),
    radial-gradient(ellipse 70% 44% at 34% 24%, rgba(52,33,10,.28) 0%, transparent 62%),
    radial-gradient(ellipse 60% 70% at 100% 56%, rgba(0,0,0,.78) 0%, transparent 66%),
    radial-gradient(ellipse 100% 46% at 50% 116%, rgba(0,0,0,.90) 0%, transparent 56%),
    linear-gradient(160deg, #0a0807 0%, #070605 40%, #030303 100%);
  border:1px solid rgba(146,100,24,.12);
  box-shadow:
    0 8px 24px rgba(0,0,0,.55),
    0 4px 10px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(214,156,44,.10),
    inset 0 0 42px rgba(66,38,6,.18);
  overflow:hidden;
  cursor:pointer;
  padding:20px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
/* Dusty metallic grain / warm speckle */
.next-hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.10;
  mix-blend-mode:screen;
  background-image:
    radial-gradient(1px 1px at  6%  8%, rgba(220,168,58,.55),transparent 62%),
    radial-gradient(1px 1px at 11% 32%, rgba(206,152,42,.42),transparent 62%),
    radial-gradient(1px 1px at 17% 60%, rgba(222,164,54,.34),transparent 62%),
    radial-gradient(1px 1px at 29% 18%, rgba(214,160,50,.42),transparent 62%),
    radial-gradient(1px 1px at 46% 26%, rgba(220,166,56,.36),transparent 62%),
    radial-gradient(1px 1px at 68% 14%, rgba(214,160,50,.32),transparent 62%),
    radial-gradient(1px 1px at 84% 30%, rgba(222,168,58,.30),transparent 62%),
    radial-gradient(1.5px 1.5px at 15% 44%, rgba(240,186,74,.16),transparent 62%),
    radial-gradient(1.5px 1.5px at 45% 68%, rgba(236,180,68,.14),transparent 62%);
  filter:blur(.35px);
}
/* Warm top-rim shimmer */
.next-hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(ellipse 52% 18% at 26% 0%, rgba(214,150,38,.10), transparent 56%),
    linear-gradient(180deg, rgba(232,172,54,.05) 0%, transparent 22%);
}
/* Colour-accent glow (inline style) + ornamental diamond lattice */
.next-hero-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.28;
  background:
    radial-gradient(ellipse 40% 28% at 76% 48%, rgba(86,50,8,.08) 0%, transparent 70%),
    radial-gradient(ellipse 48% 32% at 18% 16%, rgba(180,126,34,.07) 0%, transparent 72%);
  mix-blend-mode:screen;
}
/* Faint baroque lattice masked to upper-left shadow zone */
.next-hero-bg::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient( 45deg, transparent 0, transparent 9px, rgba(195,145,36,.05) 9px, rgba(195,145,36,.05) 10px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 9px, rgba(195,145,36,.05) 9px, rgba(195,145,36,.05) 10px);
  -webkit-mask-image:radial-gradient(ellipse 62% 52% at 18% 12%, black 0%, transparent 68%);
  mask-image:radial-gradient(ellipse 62% 52% at 18% 12%, black 0%, transparent 68%);
}
.next-hero-content{
  position:relative;z-index:3;
}
.next-hero-top-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.next-hero-name{
  font-family:'Bebas Neue', cursive;
  font-size:40px;
  letter-spacing:.06em;
  line-height:1;
  text-shadow:0 2px 22px rgba(0,0,0,.60), 0 0 28px rgba(0,0,0,.40);
}
.next-hero-cta{
  position:relative;z-index:3;
  width:100%;
  background:linear-gradient(135deg,#f4d06a 0%,#d4960a 52%,#b87c08 100%);
  border:0;
  border-radius:var(--r16);
  color:#0d0900;
  padding:15px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-family:'DM Sans', sans-serif;
  box-shadow:
    0 12px 32px rgba(180,130,8,.32),
    0 4px 10px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,240,160,.30),
    inset 0 -1px 0 rgba(0,0,0,.22);
}
.next-hero-cta:active{transform:translateY(1px);}
.next-hero-schedule-link{
  position:relative;z-index:3;
  background:none;border:0;
  color:rgba(200,184,152,.55);
  font-size:11px;font-weight:700;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;
  text-align:right;
  padding:4px 0 0;
  letter-spacing:.04em;
  transition:color .15s;
  white-space:nowrap;
  flex-shrink:0;
  line-height:1.3;
}
.next-hero-schedule-link:hover{color:rgba(200,184,152,.85);}

/* ============================================================
   Schedule tab
   ============================================================ */
.sched-add-btn{
  width:100%;
  background:linear-gradient(135deg,rgba(232,184,75,.16),rgba(232,184,75,.08));
  border:1px solid rgba(232,184,75,.22);
  border-radius:var(--r16);
  color:var(--gold2);
  padding:13px;
  font-size:14px;
  font-weight:900;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:all .12s;
}
.sched-add-btn:active{transform:translateY(1px);opacity:.85;}
.sched-card{
  display:flex;
  align-items:center;
  margin:0 12px 8px;
  border-radius:var(--r16);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,rgba(30,24,18,.97),rgba(14,12,10,.98));
  box-shadow:0 6px 18px rgba(0,0,0,.38);
  min-height:60px;
}
.sched-card.today{border-color:rgba(232,184,75,.22);box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 0 1px rgba(232,184,75,.08) inset;}
.sched-card.past{opacity:.5;}
.sched-card-stripe{width:4px;align-self:stretch;flex-shrink:0;min-height:60px;}
.sched-card-main{flex:1;padding:10px 12px;}
.sched-card-focus{font-family:'Bebas Neue',cursive;font-size:20px;letter-spacing:.06em;line-height:1.1;}
.sched-card-date{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);margin-top:3px;}
.sched-del-btn{
  flex-shrink:0;
  padding:10px 16px;
  background:none;border:0;
  color:var(--dim);font-size:18px;
  cursor:pointer;
  transition:color .12s;
}
.sched-del-btn:hover{color:var(--red);}
.sched-add-panel{
  padding:12px 16px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.sched-add-panel-date{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--gold2);
  margin-bottom:10px;
}

/* Calendar */
.cal-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.cal-month-label{
  font-family:'Bebas Neue',cursive;
  font-size:20px;
  letter-spacing:.10em;
  color:var(--text);
}
.cal-nav-btn{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r999);
  color:var(--text2);
  width:32px;height:32px;
  font-size:18px;line-height:1;
  cursor:pointer;
  transition:all .12s;
  display:flex;align-items:center;justify-content:center;
}
.cal-nav-btn:active{transform:scale(.92);}
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:3px;
}
.cal-dow{
  text-align:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:.08em;
  color:var(--dim);
  padding-bottom:4px;
  text-transform:uppercase;
}
.cal-day{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  aspect-ratio:1;
  border-radius:10px;
  cursor:pointer;
  transition:background .12s;
  position:relative;
}
.cal-day:hover{background:rgba(255,255,255,.06);}
.cal-day-num{
  font-family:'DM Sans',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--text2);
  line-height:1;
}
.cal-past .cal-day-num{color:var(--dim);}
.cal-today{background:rgba(255,255,255,.08);}
.cal-today .cal-day-num{color:var(--text);font-weight:900;}
.cal-selected{background:rgba(232,184,75,.18);border:1px solid rgba(232,184,75,.35);}
.cal-selected .cal-day-num{color:var(--gold2);font-weight:900;}
.cal-dots{
  display:flex;
  gap:2px;
  justify-content:center;
}
.cal-dot{
  width:5px;height:5px;
  border-radius:50%;
  flex-shrink:0;
}

/* My Splits */
.split-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 12px;
  border-radius:var(--r999);
  font-size:12px;
  font-weight:700;
  font-family:'DM Sans',sans-serif;
}
.split-pill.built-in{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
}
.split-pill.custom{
  background:rgba(232,184,75,.10);
  border:1px solid rgba(232,184,75,.20);
  color:var(--gold2);
}
.split-pill-del{
  background:none;border:0;
  color:rgba(232,184,75,.45);
  font-size:15px;line-height:1;
  cursor:pointer;padding:0;
  transition:color .12s;
}
.split-pill-del:hover{color:var(--red);}

/* Template editor cards */
.tmpl-editor-card{
  border-radius:var(--r16);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,rgba(28,22,16,.97),rgba(14,12,10,.98));
  padding:12px 14px;
  margin-bottom:8px;
}
.tmpl-editor-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.tmpl-editor-name{
  font-family:'Bebas Neue',cursive;
  font-size:18px;
  letter-spacing:.08em;
  color:var(--text2);
}
.tmpl-chevron{
  color:var(--dim);font-size:11px;
  transition:transform .18s;
}
.tmpl-chevron.open{transform:rotate(180deg);}
.tmpl-editor-card.tmpl-expanded{
  border-color:rgba(255,255,255,.13);
}
.tmpl-name-input{
  background:transparent;border:none;outline:none;
  font-family:'Bebas Neue',cursive;
  font-size:18px;letter-spacing:.08em;
  color:var(--gold2);width:0;flex:1;
  padding:0;
}
.tmpl-name-input::placeholder{color:rgba(232,184,75,.35);}
.tmpl-save-btn{
  width:100%;margin-top:10px;
  background:linear-gradient(135deg,rgba(232,184,75,.16),rgba(232,184,75,.06));
  border:1px solid rgba(232,184,75,.3);
  border-radius:var(--r12);
  color:var(--gold2);
  font-size:13px;font-weight:800;
  font-family:'DM Sans',sans-serif;
  padding:10px;cursor:pointer;
  transition:all .15s;
}
.tmpl-save-btn:hover{background:linear-gradient(135deg,rgba(232,184,75,.24),rgba(232,184,75,.10));border-color:rgba(232,184,75,.45);}
.tmpl-create-btn{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px dashed rgba(255,255,255,.12);
  border-radius:var(--r16);
  color:var(--muted);
  font-size:13px;font-weight:700;
  font-family:'DM Sans',sans-serif;
  padding:12px;cursor:pointer;
  transition:all .15s;
}
.tmpl-create-btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:var(--text2);}
.tmpl-editor-btn{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r999);
  color:var(--text2);
  font-size:11px;font-weight:700;
  font-family:'DM Sans',sans-serif;
  padding:4px 12px;cursor:pointer;
  transition:all .12s;
}
.tmpl-editor-btn:hover{background:rgba(255,255,255,.10);}
.tmpl-editor-btn.del{color:var(--dim);border-color:rgba(255,255,255,.08);font-size:14px;padding:4px 9px;}
.tmpl-editor-btn.del:hover{color:var(--red);border-color:rgba(255,80,80,.25);}
.tmpl-ex-list{margin-top:10px;display:flex;flex-direction:column;gap:4px;}
.tmpl-ex-row{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.04);
  border-radius:10px;
  padding:6px 8px;
}
.tmpl-ex-reorder{display:flex;flex-direction:column;gap:1px;flex-shrink:0;}
.tmpl-reorder-btn{
  background:none;border:0;
  color:var(--dim);font-size:9px;
  cursor:pointer;padding:0;line-height:1.2;
  transition:color .1s;
}
.tmpl-reorder-btn:hover:not([disabled]){color:var(--text2);}
.tmpl-reorder-btn[disabled]{opacity:.25;cursor:default;}
.tmpl-ex-name{
  flex:1;
  font-size:13px;color:var(--text2);
  font-family:'DM Sans',sans-serif;
  font-weight:600;
}
.tmpl-ex-del{
  background:none;border:0;
  color:var(--dim);font-size:16px;
  cursor:pointer;padding:0 2px;
  transition:color .12s;flex-shrink:0;
}
.tmpl-ex-del:hover{color:var(--red);}

/* Restyled Recent Workout cards */
.rw-card{
  margin:0 12px 8px;
  border-radius:var(--r20);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(260px 100px at 30% 0%, rgba(232,184,75,.06), transparent 58%),
    linear-gradient(135deg, rgba(30,24,18,.97), rgba(14,12,10,.98));
  box-shadow:0 8px 22px rgba(0,0,0,.42);
  position:relative;
}
.rw-card.open{
  border-color:rgba(232,184,75,.20);
}
.rw-card-top{
  display:flex;
  align-items:center;
  cursor:pointer;
  min-height:66px;
  position:relative;
}
.rw-stripe{
  width:4px;
  align-self:stretch;
  flex-shrink:0;
  min-height:66px;
}
.rw-main{
  flex:1;
  padding:12px 10px;
  min-width:0;
}
.rw-name{
  font-family:'Bebas Neue', cursive;
  font-size:22px;
  letter-spacing:.06em;
  line-height:1.1;
}
.rw-sub{
  font-size:10px;
  color:var(--dim);
  margin-top:4px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:700;
}
.rw-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  padding:12px 6px;
  gap:4px;
  flex-shrink:0;
}
.rw-date{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--muted);
}
.rw-vol{
  font-family:'Bebas Neue', cursive;
  font-size:22px;
  color:var(--text);
  line-height:1;
}
.rw-chevron{
  font-size:9px;
  color:var(--dim);
  transition:transform .2s;
  padding:0 12px 0 4px;
  flex-shrink:0;
}
.rw-chevron.open{transform:rotate(180deg);}

@media (max-width:380px){
  .stat-strip{grid-template-columns:repeat(2,1fr);}
}

/* ─── Exercise Info Button ─────────────────────────────────────── */
.ex-info-btn{
  flex-shrink:0;
  width:24px;height:24px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:color .12s;
  margin-left:auto;
}
.ex-info-btn:hover,.ex-info-btn:active{color:var(--gold2);}

/* ─── Exercise Detail: lock scroll + hide dock ────────────────── */
body.ex-detail-open{overflow:hidden;overscroll-behavior:none;}
body.ex-detail-open .dock{display:none;}

/* ─── Exercise Detail Bottom Sheet ────────────────────────────── */
.ex-detail-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:200;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  animation:fadeIn .18s ease;
}
.ex-detail-sheet{
  position:fixed;
  bottom:0;left:0;right:0;
  max-height:80vh;
  background:#141210;
  border-top:1px solid rgba(232,184,75,.18);
  border-radius:20px 20px 0 0;
  z-index:201;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 0 env(safe-area-inset-bottom,16px);
  animation:slideUp .22s cubic-bezier(.32,1,.36,1);
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.ex-detail-handle{
  width:36px;height:4px;
  border-radius:2px;
  background:rgba(255,255,255,.18);
  margin:10px auto 0;
}
.ex-detail-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:12px 16px 8px;
  gap:8px;
}
.ex-detail-title{
  font-family:'Bebas Neue',cursive;
  font-size:26px;
  letter-spacing:.07em;
  color:var(--gold2);
  line-height:1.1;
  flex:1;
}
.ex-detail-close{
  flex-shrink:0;
  width:30px;height:30px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.ex-detail-meta{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:0 16px 10px;
}
.ex-detail-tag{
  padding:3px 8px;
  border-radius:var(--r999);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:capitalize;
}
.ex-detail-imgs{
  display:flex;gap:8px;
  padding:0 16px 14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.ex-detail-img{
  width:140px;height:100px;
  object-fit:cover;
  border-radius:12px;
  flex-shrink:0;
  background:rgba(255,255,255,.05);
}
.ex-detail-section{
  padding:0 16px 14px;
}
.ex-detail-section-lbl{
  font-size:10px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:6px;
}
.ex-detail-chips{
  display:flex;flex-wrap:wrap;gap:6px;
}
.ex-detail-chip{
  padding:4px 10px;
  border-radius:var(--r999);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-size:11px;
  font-weight:600;
}
.ex-detail-chip.primary{
  border-color:rgba(232,184,75,.25);
  background:rgba(42,32,11,.68);
  color:var(--gold2);
}
.ex-detail-steps{
  margin:0;padding:0 0 0 18px;
  display:flex;flex-direction:column;gap:8px;
}
.ex-detail-step{
  font-size:12px;
  color:var(--text);
  line-height:1.5;
  padding-left:2px;
}
.ex-detail-empty{
  padding:16px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}

/* ─── Template exercise library ─── */
.tmpl-ex-library{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:8px;
  max-height:160px;
  overflow-y:auto;
  padding:2px 0;
}
.tmpl-lib-btn{
  background:var(--card3);
  border:1px solid var(--stroke0);
  color:var(--text2);
  font-family:'DM Sans',sans-serif;
  font-size:12px;
  padding:5px 9px;
  border-radius:6px;
  cursor:pointer;
  text-align:left;
  transition:background .12s,border-color .12s;
}
.tmpl-lib-btn:hover{background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.3);color:var(--gold2);}

/* ─── Template color swatches ─── */
.tmpl-color-row{
  display:flex;gap:7px;align-items:center;
  padding:8px 0 2px;
}
.tmpl-color-swatch{
  width:20px;height:20px;
  border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  transition:transform .12s,border-color .12s;
}
.tmpl-color-swatch:hover{transform:scale(1.18);}
.tmpl-color-swatch.active{
  border-color:#fff;
  transform:scale(1.18);
}

/* ─── Settings button ─── */
.settings-btn{
  background:none;
  border:none;
  color:var(--muted);
  font-size:18px;
  padding:4px 6px;
  cursor:pointer;
  line-height:1;
  border-radius:6px;
  transition:color .15s;
}
.settings-btn:hover{color:var(--text2);}

/* ─── Settings modal ─── */
.settings-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:300;
}
.settings-sheet{
  position:fixed;
  bottom:0;left:0;right:0;
  background:var(--card1);
  border-top:1px solid var(--stroke1);
  border-radius:18px 18px 0 0;
  padding:0 0 env(safe-area-inset-bottom,16px);
  z-index:301;
  animation:slideUp .22s ease;
}
.settings-handle{
  width:36px;height:4px;
  background:rgba(255,255,255,.15);
  border-radius:2px;
  margin:10px auto 0;
}
.settings-title{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:14px 20px 10px;
}
.settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px 18px;
}
.settings-label{
  font-size:14px;
  color:var(--text2);
}
.settings-lang-btns{
  display:flex;
  gap:6px;
}
.lang-btn{
  background:var(--card3);
  border:1px solid var(--stroke0);
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  font-weight:600;
  padding:6px 14px;
  border-radius:6px;
  cursor:pointer;
  transition:all .15s;
}
.lang-btn.active{
  background:rgba(232,184,75,.15);
  border-color:var(--gold2);
  color:var(--gold2);
}

