/* ── TOKENS ───────────────────────────────────────────────── */
:root,[data-theme="light"]{
  --color-bg:#f7f6f2;--color-surface:#f9f8f5;--color-surface-2:#fbfbf9;
  --color-surface-offset:#f0ede8;--color-surface-dynamic:#e6e4df;
  --color-divider:#dcd9d5;--color-border:#d4d1ca;
  --color-text:#28251d;--color-text-muted:#7a7974;--color-text-faint:#bab9b4;
  --color-primary:#01696f;--color-primary-hover:#0c4e54;
  --color-primary-highlight:#cedcd8;
  --color-success:#437a22;--color-success-highlight:#d4dfcc;
  --color-warning:#964219;--color-error:#a12c7b;
  --color-orange:#da7101;
  --shadow-sm:0 1px 2px oklch(0.2 0.01 80/0.06);
  --shadow-md:0 4px 12px oklch(0.2 0.01 80/0.08);
  --shadow-lg:0 12px 32px oklch(0.2 0.01 80/0.12);
  --radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;
  --transition:180ms cubic-bezier(0.16,1,0.3,1);
  --font-body:"DM Sans","Helvetica Neue",sans-serif;
  --font-mono:"DM Mono","Courier New",monospace;
  --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
  --text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem);
  --text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;
}
[data-theme="dark"]{
  --color-bg:#131211;--color-surface:#1a1918;--color-surface-2:#1f1e1c;
  --color-surface-offset:#252320;--color-surface-dynamic:#2d2b29;
  --color-divider:#262523;--color-border:#3a3835;
  --color-text:#cdccca;--color-text-muted:#797876;--color-text-faint:#5a5957;
  --color-primary:#4f98a3;--color-primary-hover:#227f8b;
  --color-primary-highlight:#1f3335;
  --color-success:#6daa45;--color-success-highlight:#263321;
  --color-warning:#bb653b;--color-error:#d163a7;
  --color-orange:#fdab43;
  --shadow-sm:0 1px 2px oklch(0 0 0/0.2);
  --shadow-md:0 4px 12px oklch(0 0 0/0.3);
  --shadow-lg:0 12px 32px oklch(0 0 0/0.45);
}
@media(prefers-color-scheme:dark){:root:not([data-theme]){
  --color-bg:#131211;--color-surface:#1a1918;--color-surface-2:#1f1e1c;
  --color-surface-offset:#252320;--color-surface-dynamic:#2d2b29;
  --color-divider:#262523;--color-border:#3a3835;
  --color-text:#cdccca;--color-text-muted:#797876;--color-text-faint:#5a5957;
  --color-primary:#4f98a3;--color-primary-hover:#227f8b;
  --color-primary-highlight:#1f3335;
  --color-success:#6daa45;--color-success-highlight:#263321;
  --color-warning:#bb653b;--color-error:#d163a7;
  --color-orange:#fdab43;
  --shadow-sm:0 1px 2px oklch(0 0 0/0.2);
  --shadow-md:0 4px 12px oklch(0 0 0/0.3);
  --shadow-lg:0 12px 32px oklch(0 0 0/0.45);
}}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);
  color:var(--color-text);background:var(--color-bg)}
img,svg{display:block;max-width:100%}
input,button,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
ul{list-style:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
a,button,[role="button"],input,select{
  transition:color var(--transition),background var(--transition),
    border-color var(--transition),box-shadow var(--transition),opacity var(--transition)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{
  animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── LAYOUT ───────────────────────────────────────────────── */
.app{display:grid;grid-template-rows:auto 1fr;min-height:100dvh}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-6);
  background:var(--color-surface);
  border-bottom:1px solid oklch(from var(--color-text) l c h/0.1);
  position:sticky;top:0;z-index:100;
}
.logo{display:flex;align-items:center;gap:var(--space-2)}
.logo svg{color:var(--color-primary)}
.logo-text{font-size:var(--text-lg);font-weight:700;letter-spacing:-.02em}
.topbar-right{display:flex;align-items:center;gap:var(--space-3)}
.main{max-width:720px;margin-inline:auto;padding:var(--space-8) var(--space-4);
  padding-bottom:var(--space-16);width:100%}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:500;cursor:pointer}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-ghost{color:var(--color-text-muted)}
.btn-ghost:hover{color:var(--color-text);background:var(--color-surface-offset)}
.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}
.btn-danger{color:var(--color-error)}
.btn-danger:hover{background:color-mix(in oklch,var(--color-error) 10%,transparent)}
.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius-md);
  color:var(--color-text-muted);
}
.icon-btn:hover{color:var(--color-text);background:var(--color-surface-offset)}

/* ── CARDS ────────────────────────────────────────────────── */
.card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h/0.08);
  border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-sm)}

/* ── TABS ─────────────────────────────────────────────────── */
.tabs{display:flex;gap:var(--space-1);background:var(--color-surface-offset);
  border-radius:var(--radius-lg);padding:var(--space-1);margin-bottom:var(--space-6)}
.tab{flex:1;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);text-align:center;cursor:pointer}
.tab.active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm)}
.tab:hover:not(.active){color:var(--color-text)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ── PANEL HEADER ─────────────────────────────────────────── */
.panel-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--space-5);gap:var(--space-3);
}
.panel-header .section-heading{margin-bottom:0}

/* ── WORKOUT FORM ─────────────────────────────────────────── */
.section-heading{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-4);letter-spacing:-.01em}
.date-row{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--space-5);gap:var(--space-3);flex-wrap:wrap}
.date-row .section-heading{margin-bottom:0}
.date-right{display:flex;align-items:center;gap:var(--space-2)}
.date-label{font-size:var(--text-sm);color:var(--color-text-muted)}
.date-input{
  background:var(--color-surface-offset);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);
  font-size:var(--text-sm);color:var(--color-text);cursor:pointer;
}
.date-input:focus{border-color:var(--color-primary);outline:none;
  box-shadow:0 0 0 3px color-mix(in oklch,var(--color-primary) 20%,transparent)}

.exercise-block{margin-bottom:var(--space-5);background:var(--color-surface);
  border:1px solid oklch(from var(--color-text) l c h/0.08);
  border-radius:var(--radius-xl);overflow:hidden}
.exercise-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid oklch(from var(--color-text) l c h/0.06);
  background:var(--color-surface-2);
  gap:var(--space-3);
}
.exercise-name{font-size:var(--text-base);font-weight:600}
.exercise-hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}
.exercise-tag{font-size:var(--text-xs);color:var(--color-text-muted);
  background:var(--color-surface-offset);padding:2px var(--space-2);border-radius:var(--radius-full);
  white-space:nowrap}

.sets-table{width:100%;border-collapse:collapse}
.sets-table th{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);
  color:var(--color-text-muted);text-align:left;font-weight:500;
  border-bottom:1px solid oklch(from var(--color-text) l c h/0.06)}
.sets-table th:not(:first-child){text-align:center}
.sets-table td{padding:var(--space-2) var(--space-3)}
.sets-table tr:not(:last-child) td{border-bottom:1px solid oklch(from var(--color-text) l c h/0.04)}
.sets-table td:not(:first-child){text-align:center}

.set-num{font-size:var(--text-xs);color:var(--color-text-faint);
  font-family:var(--font-mono);width:28px}
.num-input{
  width:72px;background:var(--color-surface-offset);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:var(--space-1) var(--space-2);font-size:var(--text-sm);
  text-align:center;font-family:var(--font-mono);color:var(--color-text);
}
.num-input:focus{border-color:var(--color-primary);outline:none;
  box-shadow:0 0 0 2px color-mix(in oklch,var(--color-primary) 20%,transparent)}
.checkbox-done{width:20px;height:20px;accent-color:var(--color-primary);cursor:pointer}

.add-set-row{padding:var(--space-3) var(--space-5)}
.set-done-row td{background:color-mix(in oklch,var(--color-success) 6%,transparent)}

.prev-best{font-size:var(--text-xs);color:var(--color-text-faint);
  font-family:var(--font-mono);white-space:nowrap}

.save-row{margin-top:var(--space-6);display:flex;justify-content:flex-end;gap:var(--space-3)}

/* ── ADD EXERCISE ─────────────────────────────────────────── */
.add-exercise-row{margin-bottom:var(--space-5)}
.add-ex-btn{border:1px dashed var(--color-border);width:100%;justify-content:center;
  padding:var(--space-3);border-radius:var(--radius-lg)}
.add-ex-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-highlight)}
.exercise-picker{
  display:none;flex-direction:column;gap:2px;
  margin-top:var(--space-2);
  background:var(--color-surface);
  border:1px solid oklch(from var(--color-text) l c h/0.08);
  border-radius:var(--radius-xl);padding:var(--space-2);
  box-shadow:var(--shadow-md);
}
.exercise-picker.open{display:flex}
.picker-option{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  text-align:left;width:100%;color:var(--color-text);
}
.picker-option:hover{background:var(--color-surface-offset)}
.picker-name{font-size:var(--text-sm);font-weight:500}

/* ── HISTORY ──────────────────────────────────────────────── */
.history-list{display:flex;flex-direction:column;gap:var(--space-4)}
.history-card{cursor:pointer}
.history-card:hover{box-shadow:var(--shadow-md)}
.history-date{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}
.history-summary{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.history-pill{font-size:var(--text-xs);background:var(--color-surface-offset);
  border-radius:var(--radius-full);padding:2px var(--space-3);color:var(--color-text-muted)}
.history-meta{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-2)}
.history-actions{display:flex;gap:var(--space-2);align-items:flex-start;flex-shrink:0}

.history-detail{display:none;margin-top:var(--space-4);border-top:1px solid var(--color-divider);padding-top:var(--space-4)}
.history-detail.open{display:block}
.detail-exercise{margin-bottom:var(--space-4)}
.detail-exercise-name{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}
.detail-set-row{
  display:grid;grid-template-columns:32px 1fr 1fr;
  gap:var(--space-2);font-size:var(--text-xs);
  font-family:var(--font-mono);padding:var(--space-1) 0;
  border-bottom:1px solid oklch(from var(--color-text) l c h/0.04);
  color:var(--color-text-muted);align-items:center;
}
.detail-set-header{color:var(--color-text-faint);font-size:var(--text-xs);font-weight:500}

.empty-state{text-align:center;padding:var(--space-16) var(--space-8);color:var(--color-text-muted)}
.empty-icon{width:48px;height:48px;margin:0 auto var(--space-4);color:var(--color-text-faint)}
.empty-state h3{font-size:var(--text-base);font-weight:600;color:var(--color-text);margin-bottom:var(--space-2)}
.empty-state p{font-size:var(--text-sm);max-width:36ch;margin-inline:auto}

/* ── PROGRESS ─────────────────────────────────────────────── */
.progress-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4)}
.progress-card .ex-name{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-3)}
.pb-row{display:flex;justify-content:space-between;align-items:baseline;
  padding:var(--space-2) 0;border-bottom:1px solid oklch(from var(--color-text) l c h/0.06)}
.pb-row:last-child{border-bottom:none}
.pb-label{font-size:var(--text-xs);color:var(--color-text-muted)}
.pb-value{font-size:var(--text-sm);font-family:var(--font-mono);color:var(--color-text);font-weight:500}
.pb-delta{font-size:var(--text-xs);color:var(--color-success);margin-left:var(--space-2)}
.streak-badge{
  display:inline-flex;align-items:center;gap:var(--space-1);
  font-size:var(--text-xs);font-weight:600;
  background:var(--color-primary-highlight);color:var(--color-primary);
  border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);
}

/* ── SETTINGS ─────────────────────────────────────────────── */
.settings-group{
  background:var(--color-surface);
  border:1px solid oklch(from var(--color-text) l c h/0.08);
  border-radius:var(--radius-xl);padding:var(--space-5);margin-bottom:var(--space-5);
}
.settings-group-title{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-3)}
.settings-desc{
  font-size:var(--text-sm);color:var(--color-text-muted);
  margin-bottom:var(--space-4);max-width:60ch;
}
.settings-desc code{
  font-family:var(--font-mono);font-size:var(--text-xs);
  background:var(--color-surface-offset);padding:1px var(--space-2);border-radius:var(--radius-sm);
}
.field-row{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-3);margin-bottom:var(--space-3);
}
.field-row:last-child{margin-bottom:0}
.field-label{font-size:var(--text-sm);color:var(--color-text-muted);flex-shrink:0}
.text-input{
  flex:1;min-width:0;
  background:var(--color-surface-offset);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);
  font-size:var(--text-sm);color:var(--color-text);
}
.text-input:focus{
  border-color:var(--color-primary);outline:none;
  box-shadow:0 0 0 3px color-mix(in oklch,var(--color-primary) 20%,transparent);
}

/* ── SYNC STATUS ──────────────────────────────────────────── */
.sync-status{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-xs);color:var(--color-text-muted);
}
.sync-dot{
  width:8px;height:8px;border-radius:var(--radius-full);
  background:var(--color-text-faint);flex-shrink:0;
}
.sync-dot.ok{background:var(--color-success)}
.sync-dot.error{background:var(--color-error)}
.sync-dot.pending{background:var(--color-orange);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── TOAST ────────────────────────────────────────────────── */
.toast{position:fixed;bottom:var(--space-6);left:50%;transform:translateX(-50%) translateY(120%);
  opacity:0;background:var(--color-text);color:var(--color-bg);
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);
  font-size:var(--text-sm);font-weight:500;box-shadow:var(--shadow-lg);
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),opacity 0.3s cubic-bezier(0.16,1,0.3,1);
  z-index:999;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ── SAVE CONFIRMATION ────────────────────────────────────── */
.save-confirm{
  position:fixed;bottom:var(--space-6);left:50%;
  transform:translateX(-50%) translateY(120%);opacity:0;
  background:var(--color-surface);
  border:1px solid oklch(from var(--color-text) l c h/0.08);
  border-radius:var(--radius-xl);
  padding:var(--space-4) var(--space-8);
  box-shadow:var(--shadow-lg);z-index:998;
  min-width:200px;text-align:center;cursor:pointer;
  transition:transform 0.35s cubic-bezier(0.16,1,0.3,1),opacity 0.35s cubic-bezier(0.16,1,0.3,1);
}
.save-confirm.show{transform:translateX(-50%) translateY(0);opacity:1}
.save-confirm-title{
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-size:var(--text-base);font-weight:600;color:var(--color-success);
  margin-bottom:var(--space-1);
}
.save-confirm-streak{font-size:var(--text-sm);color:var(--color-text-muted)}

/* ── MODAL ────────────────────────────────────────────────── */
.modal-backdrop{position:fixed;inset:0;background:oklch(0 0 0/0.5);
  display:none;align-items:flex-end;justify-content:center;z-index:200;padding:var(--space-4)}
.modal-backdrop.open{display:flex}
@media(min-width:600px){.modal-backdrop{align-items:center}}
.modal{background:var(--color-surface);border-radius:var(--radius-xl);
  width:100%;max-width:480px;padding:var(--space-6);box-shadow:var(--shadow-lg);
  max-height:90dvh;overflow-y:auto}
.modal-title{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-4)}
.modal-body p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4)}
.modal-footer{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-5)}

/* ── WEIGHT TAB ───────────────────────────────────────────── */
.weight-entry-row{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-5)}
.weight-entry-row .num-input{width:96px;font-size:var(--text-base)}
.weight-controls{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-4)}

/* lookback pills */
.lookback-pills{display:flex;gap:var(--space-2)}
.lookback-pill{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);
  border:1px solid var(--color-border);background:transparent;
  font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);
  cursor:pointer;transition:background var(--transition),color var(--transition),border-color var(--transition)}
.lookback-pill:hover{background:var(--color-surface-offset);color:var(--color-text)}
.lookback-pill.active{background:var(--color-primary);border-color:var(--color-primary);
  color:#fff}

/* weight change stat */
.weight-stat-delta{font-weight:600}
.weight-stat-delta.stat-down{color:var(--color-success)}
.weight-stat-delta.stat-up{color:var(--color-warning)}
#weight-change-stat{font-size:var(--text-sm);color:var(--color-text-muted)}

/* chart wrapper */
#weight-chart-area{margin-top:var(--space-4)}
.weight-chart{width:100%;height:auto;display:block;overflow:visible}
.chart-tick{font-family:var(--font-mono);font-size:11px;fill:var(--color-text-muted)}

/* empty/single-entry states */
.weight-empty{
  padding:var(--space-10) var(--space-4);text-align:center;
  color:var(--color-text-muted);font-size:var(--text-sm);
  border:1px dashed var(--color-border);border-radius:var(--radius-lg);
}

/* progress card delta colours */
.pb-value.stat-down{color:var(--color-success)}
.pb-value.stat-up{color:var(--color-warning)}

/* ── WEIGHT LOG LIST (Weight tab) ─────────────────────────── */
.weight-log-list{margin-top:var(--space-5);display:flex;flex-direction:column;gap:0}
.weight-log-row{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) 0;
  border-bottom:1px solid var(--color-divider);
}
.weight-log-row:last-child{border-bottom:none}
.weight-log-date{flex:1;font-size:var(--text-sm);color:var(--color-text)}
.weight-log-val{font-size:var(--text-sm);font-weight:600;color:var(--color-text);
  font-family:var(--font-mono);min-width:64px;text-align:right}

/* ── WEIGHT TREND (Progress tab) ──────────────────────────── */
.weight-trend-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-5);
  margin-bottom:var(--space-6);box-shadow:var(--shadow-sm);
}
.weight-trend-header{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-3);
}
.weight-trend-title{font-size:var(--text-base);font-weight:600;color:var(--color-text)}
.weight-trend-stat{
  font-size:var(--text-sm);color:var(--color-text-muted);
  margin-bottom:var(--space-3);
}

/* ── MOBILE ───────────────────────────────────────────────── */
@media(max-width:500px){
  .topbar{padding:var(--space-3) var(--space-4)}
  .main{padding:var(--space-5) var(--space-3)}
  .num-input{width:60px}
  .tabs .tab{padding:var(--space-2) var(--space-2);font-size:var(--text-xs)}
  .exercise-header{flex-wrap:wrap}
}