/* ============================================================
   AlchemyLift — Main Stylesheet
   Mobile-first, light + dark theme
   ============================================================ */

/* --- CSS Variables --- */
:root {
    /* Brand */
    --accent:        #FF6B35;
    --accent-hover:  #E85A24;
    --accent-dim:    rgba(255, 107, 53, 0.15);

    /* Light theme (default) */
    --bg:            #F4F4F5;
    --surface:       #FFFFFF;
    --surface-2:     #F0F0F1;
    --border:        #E4E4E7;
    --text:          #111113;
    --text-muted:    #71717A;
    --text-on-accent:#FFFFFF;

    /* Semantic */
    --success:       #22C55E;
    --danger:        #EF4444;
    --warning:       #F59E0B;

    /* Layout */
    --nav-height:    64px;
    --radius:        12px;
    --radius-sm:     8px;
    --radius-lg:     16px;
    --shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md:     0 4px 12px rgba(0,0,0,.10);

    /* Typography */
    --font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:     'SF Mono', 'Fira Code', monospace;
}

[data-theme="dark"] {
    --bg:            #0F0F10;
    --surface:       #1A1A1C;
    --surface-2:     #242426;
    --border:        #2E2E32;
    --text:          #FAFAFA;
    --text-muted:    #A1A1AA;
    --shadow:        0 1px 3px rgba(0,0,0,.4);
    --shadow-md:     0 4px 12px rgba(0,0,0,.5);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100dvh;
    padding-bottom: var(--nav-height);
    transition: background .2s, color .2s;
}

a { color: var(--accent); text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }
img { max-width: 100%; }

/* --- Typography --- */
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.5px; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1rem;    font-weight: 600; }
p  { color: var(--text-muted); font-size: .9375rem; }

/* --- Layout --- */
.app-shell {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 16px;
}

/* --- Top Header --- */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 600px;
    margin: 0 auto;
}
.top-bar .logo {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -.5px;
}
.top-bar .logo span { color: var(--text); }

/* --- Bottom Nav --- */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--nav-height);
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: stretch;
    z-index: 100;
}
.nav-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: .6875rem;
    font-weight: 500;
    padding: 8px 2px;
    white-space: nowrap;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
}
.nav-item svg { width: 22px; height: 22px; }
.nav-item.active { color: var(--accent); }
.nav-item:hover  { color: var(--accent); }

/* --- Views (pages) --- */
.view { display: none; padding: 16px 0 24px; }
.view.active { display: block; }

/* --- Cards --- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
    margin-bottom: 12px;
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.card-title { font-size: 1rem; font-weight: 600; }
.card-meta  { font-size: .8125rem; color: var(--text-muted); margin-top: 2px; }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: .9375rem;
    font-weight: 600;
    border: none;
    transition: background .15s, opacity .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }

.btn-primary  { background: var(--accent); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--border); }

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    padding: 8px 12px;
}
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }

.btn-danger { background: var(--danger); color: #fff; }

.btn-full { width: 100%; }
.btn-sm   { padding: 6px 14px; font-size: .875rem; }
.btn-icon { padding: 8px; border-radius: 50%; }

/* --- Forms --- */
.form-group { margin-bottom: 16px; }
.form-label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text);
}
.form-control {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: .9375rem;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    appearance: none;
}
.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-control::placeholder { color: var(--text-muted); }

select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2371717A'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.form-hint { font-size: .8125rem; color: var(--text-muted); margin-top: 4px; }
.form-error{ font-size: .8125rem; color: var(--danger); margin-top: 4px; }

/* --- Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}
.badge-accent   { background: var(--accent-dim); color: var(--accent); }
.badge-success  { background: rgba(34,197,94,.15); color: var(--success); }
.badge-muted    { background: var(--surface-2); color: var(--text-muted); }
.badge-warning  { background: rgba(245,158,11,.15); color: var(--warning); }

/* --- List Items --- */
.list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: none; }
.list-item-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    background: var(--accent-dim);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}
.list-item-body { flex: 1; min-width: 0; }
.list-item-title {
    font-weight: 600;
    font-size: .9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list-item-sub { font-size: .8125rem; color: var(--text-muted); margin-top: 1px; }

/* --- Set Logger --- */
.set-row {
    display: grid;
    grid-template-columns: 32px 1fr 1fr 1fr 32px;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.set-row:last-child { border-bottom: none; }
.set-num {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
}
.set-input {
    padding: 8px;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    outline: none;
    width: 100%;
}
.set-input:focus {
    border-color: var(--accent);
    background: var(--surface);
}
.set-label {
    font-size: .6875rem;
    color: var(--text-muted);
    font-weight: 500;
    text-align: center;
    margin-bottom: 2px;
}

/* Tappable set chip (set number / type tag) */
.set-chip {
    position: relative;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    font-size: .8125rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .08s;
}
.set-chip:active { transform: scale(.92); }
.set-note-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
/* PR badge celebration overlay */
.pr-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .25s ease;
}
.pr-overlay.show { opacity: 1; }
.pr-pop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: scale(.6);
    transition: transform .4s cubic-bezier(.2, 1.35, .4, 1), opacity .25s ease;
}
.pr-overlay.show .pr-pop { opacity: 1; transform: scale(1); }
.pr-burst {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 240px;
    height: 240px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 53, .38), rgba(255, 107, 53, 0) 65%);
    pointer-events: none;
}
.pr-badge-img {
    position: relative;
    width: 158px;
    height: 184px;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .5));
}
.pr-pop-title { font-size: 1.65rem; font-weight: 800; color: var(--accent); margin-top: 10px; }
.pr-pop-ex   { font-size: 1.05rem; font-weight: 600; color: #fff; margin-top: 2px; }
.pr-pop-sub  { font-size: .9375rem; color: rgba(255, 255, 255, .82); margin-top: 2px; }
.pr-pop-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.pr-pop-tags span {
    font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    background: var(--accent-dim); color: var(--accent); padding: 3px 10px; border-radius: 999px;
}

/* PR flash on the set chip */
.set-chip.pr-hit {
    color: #B8860B !important;
    border-color: #F5B301 !important;
    animation: prPulse 0.9s ease-in-out 2;
}
@keyframes prPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 179, 1, 0); }
    50%      { box-shadow: 0 0 0 5px rgba(245, 179, 1, .45); }
}
.set-note-line {
    font-size: .8125rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 0 0 8px 40px;
    border-bottom: 1px solid var(--border);
}

/* Tap-to-complete set checkbox (last column of a set row) */
.set-check {
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.set-check svg { width: 17px; height: 17px; opacity: .5; }
.set-check:active { transform: scale(.9); }
.set-check.checked {
    background: var(--success, #22C55E);
    border-color: var(--success, #22C55E);
    color: #fff;
}
.set-check.checked svg { opacity: 1; }
/* Completed set row — subtle green wash + accent edge */
.set-row.set-done {
    background: color-mix(in srgb, var(--success, #22C55E) 12%, transparent);
    box-shadow: inset 3px 0 0 0 var(--success, #22C55E);
    border-radius: var(--radius-sm);
}

/* Set-type picker (in the options sheet) */
.set-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.set-type-btn {
    padding: 12px;
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    border-radius: var(--radius-sm);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}
.set-type-btn.active {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
}

/* Exercise card action buttons (own row under the title) */
.ex-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }

/* Exercise header with demo thumbnail */
.ex-head { display: flex; gap: 10px; align-items: center; }
.ex-thumb {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 10px; overflow: hidden;
    background: var(--surface-2); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
}
.ex-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ex-thumb svg { width: 20px; height: 20px; color: var(--text-muted); }

/* Add-Exercise list rows (pick + edit) */
.ex-item { display: flex; gap: 6px; align-items: stretch; margin-bottom: 8px; }
.ex-pick { flex: 1; text-align: left; }
.ex-muscle { display: block; font-size: .6875rem; color: var(--text-muted); font-weight: 500; margin-top: 1px; }
.ex-edit { flex-shrink: 0; }

/* Plate calculator result */
.pc-result { margin-top: 6px; }
.pc-side-label {
    font-size: .625rem; letter-spacing: 1px; font-weight: 700;
    color: var(--text-muted); text-align: center; margin-bottom: 10px;
}
.plate-badges {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px;
}
.plate-badge {
    min-width: 34px; padding: 8px 10px;
    background: var(--accent); color: var(--text-on-accent);
    border-radius: 8px; font-weight: 800; font-size: .9375rem; text-align: center;
}
.pc-summary {
    text-align: center; font-weight: 600; color: var(--text);
    padding: 10px; background: var(--surface-2); border-radius: var(--radius-sm);
}
.pc-warn { margin-top: 10px; text-align: center; font-size: .8125rem; color: var(--danger); }

/* 1RM calculator result */
.orm-headline {
    text-align: center; padding: 14px; margin-bottom: 14px;
    background: var(--accent-dim); border-radius: var(--radius-sm);
}
.orm-big { font-size: 2rem; font-weight: 800; color: var(--accent); }
.orm-sub { font-size: .8125rem; color: var(--text-muted); }
.orm-table { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.orm-cell { background: var(--surface-2); border-radius: 8px; padding: 8px 4px; text-align: center; }
.orm-reps { display: block; font-size: .625rem; color: var(--text-muted); font-weight: 700; }
.orm-wt { font-weight: 700; font-size: .9375rem; }
.orm-note { margin-top: 12px; font-size: .75rem; color: var(--text-muted); text-align: center; }

/* Strength score (Wilks / DOTS / IPF GL) */
.ss-result { margin-top: 6px; }
.ss-total { text-align: center; font-size: .9375rem; color: var(--text-muted); margin-bottom: 10px; }
.ss-total strong { color: var(--text); font-size: 1.0625rem; }
.ss-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ss-card {
    text-align: center; padding: 14px 6px;
    background: var(--accent-dim); border-radius: var(--radius-sm);
}
.ss-val { display: block; font-size: 1.5rem; font-weight: 800; color: var(--accent); line-height: 1.1; }
.ss-lbl { font-size: .625rem; letter-spacing: 1px; font-weight: 700; color: var(--text-muted); }

/* Competitions / meets */
.meet-group-label { font-size: .6875rem; letter-spacing: 1px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin: 16px 2px 8px; }
.meet-card { padding: 14px 16px; }
.meet-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.meet-name { font-weight: 700; font-size: 1rem; }
.meet-date { font-size: .8125rem; color: var(--text-muted); margin-top: 2px; }
.meet-badge { font-size: .5625rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.meet-upcoming  { background: var(--accent); color: #fff; }
.meet-completed { background: var(--surface-2); color: var(--text-muted); }
.meet-cancelled { background: var(--surface-2); color: var(--danger); }
.meet-meta { font-size: .8125rem; color: var(--text-muted); margin-top: 8px; }
.meet-countdown-wrap { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.meet-countdown { font-size: 1.125rem; font-weight: 800; color: var(--accent); }
.meet-countdown-lbl { font-size: .75rem; color: var(--text-muted); }
.meet-notes { font-size: .8125rem; color: var(--text-muted); margin-top: 8px; white-space: pre-wrap; }
.meet-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* Meet-day attempt planner */
.lift-card { padding: 14px 16px; }
.lift-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.lift-name { font-weight: 700; font-size: 1rem; }
.lift-ref { font-size: .75rem; color: var(--text-muted); }
.lift-goal { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.lift-goal .form-label { white-space: nowrap; font-size: .75rem; }
.lift-goal .att-input { flex: 1; }
.att-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.att-col { text-align: center; }
.att-no { font-size: .625rem; letter-spacing: .5px; text-transform: uppercase; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.att-input { text-align: center; padding: 8px 4px; }
.att-result {
    width: 100%; margin-top: 6px; padding: 6px 4px; border: none; border-radius: var(--radius-sm);
    font-size: .6875rem; font-weight: 700; cursor: pointer; background: var(--surface-2); color: var(--text-muted);
}
.att-good   { background: var(--success, #22c55e); color: #fff; }
.att-no_lift { background: var(--danger); color: #fff; }
.plan-total-card { background: var(--accent-dim); }
.plan-total-row { display: flex; justify-content: space-between; align-items: baseline; }
.plan-total-lbl { font-weight: 700; }
.plan-total-val { font-size: 1.5rem; font-weight: 800; color: var(--accent); }

/* Per-set program builder */
.ps-head, .ps-row { display: grid; grid-template-columns: 1.5fr .8fr .8fr .9fr .8fr 28px; gap: 5px; align-items: center; }
.ps-head { font-size: .625rem; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; padding: 0 2px 4px; }
.ps-list { display: flex; flex-direction: column; gap: 5px; }
.ps-row .form-control { padding: 7px 6px; font-size: .8125rem; }
.ps-del { background: none; border: none; color: var(--danger); cursor: pointer; font-size: .9rem; padding: 0; }
.ps-actions { display: flex; gap: 8px; margin-top: 8px; }
.ps-quick { display: flex; gap: 6px; margin-top: 8px; }
.ps-quick .form-control { flex: 1; }
/* Program view — planned set chips */
.vp-sets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.vp-set { font-size: .6875rem; padding: 2px 6px; border-radius: 4px; background: var(--surface-2); color: var(--text); white-space: nowrap; }
.vp-set.vp-warmup { color: var(--text-muted); }
.vp-set.vp-amrap  { color: var(--accent); font-weight: 700; }

/* Muscle-group multi-select (custom exercise form) */
.musc-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.musc-pick-chip {
    padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface-2); color: var(--text-muted); font-size: .8125rem; font-weight: 600;
    cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.musc-pick-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* RIR effort picker + autoregulation (set options sheet) */
.rir-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rir-chip {
    padding: 10px 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 1rem; cursor: pointer;
}
.rir-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.rir-readout { text-align: center; font-size: .8125rem; color: var(--text-muted); margin-top: 8px; }
.rir-auto { margin-top: 12px; padding: 10px 12px; background: var(--accent-dim); border-radius: var(--radius-sm); }
.rir-auto-lbl { font-size: .75rem; color: var(--text-muted); margin-bottom: 6px; }
.rir-auto-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rir-sug { font-size: .8125rem; color: var(--text-muted); }
.rir-sug b { color: var(--text); font-size: .9375rem; }
.rir-sug.now b { color: var(--accent); }

/* Analytics / Progress */
.chart-box { position: relative; height: 280px; margin-top: 12px; }
.chart-label { font-size: .6875rem; letter-spacing: 1px; font-weight: 700; color: var(--text-muted); margin-top: 16px; }
.an-stats { display: flex; gap: 8px; margin-top: 14px; }
.an-stat-pill {
    flex: 1; text-align: center; padding: 10px 6px;
    background: var(--surface-2); border-radius: var(--radius-sm);
}
.an-stat-val { display: block; font-weight: 800; font-size: 1.0625rem; color: var(--accent); }
.an-stat-lbl { font-size: .5625rem; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; }

/* Progress overview (dashboard summary) */
.ov-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ov-pill { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 10px; text-align: center; }
.ov-val { display: block; font-weight: 800; font-size: 1.0625rem; }
.ov-lbl { font-size: .5625rem; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; }
.ov-sbd { display: flex; gap: 8px; margin-top: 10px; }
.ov-lift { flex: 1; text-align: center; padding: 8px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ov-lift-total { border-color: var(--accent); }
.ov-lift-name { display: block; font-size: .625rem; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.ov-lift-val { display: block; font-weight: 800; font-size: .9375rem; margin-top: 3px; }
.ov-lift-total .ov-lift-val { color: var(--accent); }

/* Block comparison */
.blk-rows { margin-top: 14px; }
.blk-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.blk-row:last-child { border-bottom: none; }
.blk-info { min-width: 0; }
.blk-name { font-weight: 600; font-size: .875rem; }
.blk-meta { display: block; font-size: .6875rem; color: var(--text-muted); margin-top: 1px; }
.blk-active { color: var(--accent); font-weight: 700; text-transform: uppercase; }
.blk-val { color: var(--accent); font-weight: 700; font-size: .8125rem; white-space: nowrap; padding-left: 10px; }

/* Muscle coverage / body map */
.bodymap-wrap { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.bodymap-col { flex: 1; min-width: 0; text-align: center; }
.bodymap-label { font-size: .5625rem; letter-spacing: 1.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; }
.bodymap-svg { width: 100%; height: auto; max-height: 320px; display: block; margin: 0 auto; }
.musc-list { margin-top: 14px; }
.musc-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .875rem;
}
.musc-row:last-child { border-bottom: none; }
.musc-name { font-weight: 600; }
.musc-sets { color: var(--accent); font-weight: 700; font-size: .8125rem; }

/* Profile / account */
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-avatar {
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 800; flex-shrink: 0;
}
.profile-id { min-width: 0; }
.profile-name { font-weight: 700; font-size: 1.0625rem; }
.profile-sub { font-size: .8125rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.profile-badge {
    font-size: .625rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px;
    background: var(--accent); color: #fff;
}
.profile-badge.ghost { background: var(--surface-2); color: var(--text-muted); }
.form-unit { color: var(--text-muted); font-weight: 600; font-size: .75rem; }
.danger-zone { border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); }

/* Invites manager (admin) */
.inv-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.inv-row:last-child { border-bottom: none; }
.inv-info { flex: 1; min-width: 0; }
.inv-who { font-size: .875rem; font-weight: 600; }
.inv-role { font-size: .625rem; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); font-weight: 700; margin-left: 4px; }
.inv-meta { font-size: .6875rem; color: var(--text-muted); margin-top: 1px; }
.inv-badge { font-size: .5625rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.inv-pending  { background: var(--accent); color: #fff; }
.inv-accepted { background: var(--surface-2); color: var(--text-muted); }
.inv-revoked  { background: var(--surface-2); color: var(--danger); }
.inv-expired  { background: var(--surface-2); color: var(--text-muted); }
.inv-actions { display: flex; gap: 2px; }

/* Waitlist capture on the login screen */
.wl-card { margin-top: 14px; }
.wl-badge {
    display: inline-block; font-size: .625rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff;
}
.wl-row { display: flex; gap: 8px; }
.wl-row .form-control { flex: 1; }
.wl-row .btn { white-space: nowrap; }

/* Help & Guide (accordion) */
.help-card { padding: 0; overflow: hidden; }
.help-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 16px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--text);
}
.help-title { font-weight: 700; font-size: .9375rem; }
.help-icon { margin-right: 6px; }
.help-caret { color: var(--text-muted); transition: transform .2s ease; flex-shrink: 0; }
.help-card.open .help-caret { transform: rotate(180deg); }
.help-body { display: none; padding: 0 16px 16px; font-size: .875rem; line-height: 1.6; color: var(--text); }
.help-card.open .help-body { display: block; }
.help-body p { margin: 0 0 10px; }
.help-body ul, .help-body ol { margin: 0 0 10px; padding-left: 20px; }
.help-body li { margin-bottom: 6px; }
.help-body strong { color: var(--text); }
.help-body em { color: var(--text-muted); font-style: italic; }
.help-body a { color: var(--accent); }
/* Glossary */
.gloss { margin: 0; }
.gloss-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.gloss-row:last-child { border-bottom: none; }
.gloss-term { font-weight: 700; color: var(--accent); font-size: .8125rem; }
.gloss-def { margin: 2px 0 0; color: var(--text-muted); font-size: .8125rem; }

/* Privacy policy document */
.privacy-doc { line-height: 1.6; }
.privacy-doc p { margin: 0 0 12px; }
.privacy-doc ul { margin: 0 0 12px; padding-left: 20px; }
.privacy-doc li { margin: 4px 0; }
.privacy-doc a { color: var(--accent); }
.privacy-h {
    font-size: .95rem;
    font-weight: 700;
    margin: 18px 0 8px;
    color: var(--text);
}
/* Footer "Privacy" link — sidebar (desktop) + sign-in screen */
.sidebar-footer-links { margin-top: 8px; text-align: center; }
.sidebar-footer-links a,
.auth-footer-links a { color: var(--text-muted); text-decoration: none; }
.sidebar-footer-links a:hover,
.auth-footer-links a:hover { color: var(--accent); text-decoration: underline; }
.auth-footer-links { text-align: center; margin-top: 18px; }

/* Program templates */
.tpl-card {
    display: flex; gap: 10px; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.tpl-card:last-child { border-bottom: none; }
.tpl-info { flex: 1; min-width: 0; }
.tpl-name { font-weight: 700; }
.tpl-meta { font-size: .75rem; color: var(--text-muted); margin-top: 1px; }
.tpl-desc { font-size: .8125rem; color: var(--text-muted); margin-top: 4px; }

/* Training maxes manager */
.tm-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.tm-row:last-child { border-bottom: none; }
.tm-info { flex: 1; min-width: 0; }
.tm-name { font-weight: 700; }
.tm-meta { font-size: .75rem; color: var(--text-muted); margin-top: 1px; }
.tm-weight { font-weight: 800; font-size: 1.0625rem; color: var(--accent); }
.tm-actions { display: flex; gap: 2px; flex-shrink: 0; }
.tm-hist-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--border);
}
.tm-hist-row:last-child { border-bottom: none; }
.tm-hist-date { flex: 1; color: var(--text-muted); font-size: .875rem; }
.tm-hist-wt { font-weight: 700; }

/* Exercise history modal */
.hist-bests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.hist-best {
    background: var(--accent-dim); border-radius: var(--radius-sm);
    padding: 12px 6px; text-align: center;
}
.hist-best-val { display: block; font-weight: 800; font-size: 1.0625rem; color: var(--accent); }
.hist-best-lbl { font-size: .5625rem; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; }
.hist-totals { text-align: center; font-size: .8125rem; color: var(--text-muted); margin-bottom: 16px; }
.hist-list { max-height: 50vh; overflow-y: auto; }
.hist-session { margin-bottom: 14px; }
.hist-date {
    font-size: .75rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.hist-set { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-weight: 600; }
.hist-tag { font-weight: 800; font-size: .75rem; width: 16px; flex-shrink: 0; }
.hist-rpe { color: var(--text-muted); font-weight: 500; font-size: .8125rem; }

/* Demo media modal */
.demo-media img, .demo-media video { width: 100%; border-radius: 12px; display: block; }
.demo-placeholder {
    text-align: center; padding: 28px 16px; color: var(--text-muted);
}
.demo-placeholder svg { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--text-muted); }
.demo-placeholder p { margin-bottom: 14px; }

/* Warm-up ramp rows */
.wu-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.wu-row:last-child { border-bottom: none; }
.wu-pct { font-size: .75rem; font-weight: 800; color: var(--accent); }
.wu-wt  { font-weight: 700; }
.wu-plates { font-size: .75rem; color: var(--text-muted); text-align: right; }

/* Plate readout in the Set Options sheet */
.set-plates {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--text);
}
.set-plates-label {
    display: block;
    font-size: .625rem;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 3px;
}

/* Rest timer — sticky pill above the bottom nav */
.rest-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 84px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    border-radius: 999px;
    padding: 6px 8px;
    max-width: 92vw;
}
.rest-readout { display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.rest-label { font-size: .5625rem; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; }
.rest-time { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); }
.rest-btn {
    border: none; background: var(--surface-2); color: var(--text);
    font-weight: 700; font-size: .8125rem; padding: 8px 12px; border-radius: 999px; cursor: pointer;
}
.rest-btn.rest-skip { background: var(--accent); color: var(--text-on-accent); }
.rest-bar.rest-done .rest-time { color: #22C55E; }
.rest-bar.rest-done { animation: restPulse .6s ease-in-out 3; }
@keyframes restPulse { 50% { box-shadow: 0 0 0 4px var(--accent-dim); } }

/* Segmented control (calculator method) */
.seg { display: flex; background: var(--surface-2); border-radius: var(--radius-sm); padding: 4px; }
.seg-btn {
    flex: 1; padding: 8px; border: none; background: none; color: var(--text-muted);
    border-radius: calc(var(--radius-sm) - 2px); font-weight: 600; font-size: .875rem; cursor: pointer;
}
.seg-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* Calculator result panel */
.calc-result {
    margin-top: 16px; text-align: center; padding: 16px;
    background: var(--accent-dim); border-radius: var(--radius-sm);
}
.calc-result-label { font-size: .6875rem; letter-spacing: 1px; font-weight: 700; color: var(--accent); }
.calc-result-weight { font-size: 1.75rem; font-weight: 800; color: var(--text); margin: 2px 0; }
.calc-result-sub { font-size: .8125rem; color: var(--text-muted); }

/* --- Stat Pills --- */
.stats-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0;
}
.stat-pill {
    flex: 1;
    min-width: 80px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    text-align: center;
}
.stat-pill .val {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}
.stat-pill .lbl {
    font-size: .6875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 2px;
}

/* --- Section Headers --- */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 12px;
}
.section-title {
    font-size: .875rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
}

/* --- Auth Screen --- */
.auth-screen {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* `safe center` centers when it fits but falls back to top-aligned +
       scrollable when the content is taller than the viewport (so the logo
       never gets clipped on shorter screens). */
    justify-content: safe center;
    min-height: 100dvh;
    padding: 24px 16px;
}
/* Low-poly faceted background behind the auth card */
.lowpoly-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}
.auth-screen > .auth-logo,
.auth-screen > .auth-hero,
.auth-screen > .auth-card {
    position: relative;
    z-index: 1;
}
.auth-hero {
    width: clamp(150px, 42vw, 210px);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 6px 0 16px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
/* On very short screens (e.g. landscape phones), drop the hero to save space */
@media (max-height: 600px) {
    .auth-hero { display: none; }
}
.auth-logo {
    font-size: 2rem;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: -1px;
    margin-bottom: 4px;
}
.auth-logo span { color: var(--text); }
.auth-tagline { color: var(--text-muted); font-size: .9375rem; margin-bottom: 40px; }
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: var(--shadow-md);
}
.auth-tabs {
    display: flex;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-bottom: 24px;
}
.auth-tab {
    flex: 1;
    padding: 8px;
    border: none;
    background: none;
    border-radius: calc(var(--radius-sm) - 2px);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: all .15s;
}
.auth-tab.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}

/* --- Modal --- */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.modal-backdrop.open { opacity: 1; pointer-events: all; }
.modal {
    width: 100%;
    max-width: 600px;
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 24px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
    transform: translateY(40px);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    max-height: 90dvh;
    overflow-y: auto;
}
.modal-backdrop.open .modal { transform: translateY(0); }
.modal-handle {
    width: 40px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: -8px auto 20px;
}
.modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 16px;
}

/* --- Toast --- */
.toast-container {
    position: fixed;
    bottom: calc(var(--nav-height) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    width: calc(100% - 32px);
    max-width: 400px;
}
.toast {
    background: var(--text);
    color: var(--bg);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    animation: toast-in .25s ease forwards;
}
.toast.error { background: var(--danger); color: #fff; }
.toast.success { background: var(--success); color: #fff; }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Workout active timer --- */
.timer-bar {
    background: var(--accent);
    color: #fff;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: .9375rem;
}
.timer-time { font-size: 1.25rem; font-feature-settings: 'tnum'; }

/* --- Empty states --- */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}
.empty-state svg {
    width: 56px; height: 56px;
    opacity: .35;
    margin-bottom: 16px;
}
.empty-state h3 { color: var(--text); margin-bottom: 8px; }
.empty-state .empty-spot {
    width: 200px;
    max-width: 72%;
    height: auto;
    opacity: 1;
    margin: 0 auto 18px;
    display: block;
}

/* --- RPE tag --- */
.rpe-tag {
    font-size: .75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--text-muted);
}

/* --- Divider --- */
.divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 16px 0;
}

/* --- Spinner --- */
.spinner {
    width: 20px; height: 20px;
    border: 2.5px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .6s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Utilities --- */
.text-accent  { color: var(--accent); }
.text-muted   { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-sm      { font-size: .875rem; }
.text-xs      { font-size: .75rem; }
.font-bold    { font-weight: 700; }
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.gap-2        { gap: 8px; }
.gap-3        { gap: 12px; }
.mt-1         { margin-top: 4px; }
.mt-2         { margin-top: 8px; }
.mt-3         { margin-top: 12px; }
.mt-4         { margin-top: 16px; }
.mb-2         { margin-bottom: 8px; }
.mb-3         { margin-bottom: 12px; }
.mb-4         { margin-bottom: 16px; }
.hidden       { display: none !important; }
.sr-only      { position: absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* --- Scrollbar (webkit) --- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* --- Safe area (notch) --- */
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0)); }

/* --- Responsive tweaks --- */
@media (min-width: 480px) {
    h1 { font-size: 2rem; }
    .auth-card { padding: 36px 32px; }
}

/* ============================================================
   Desktop sidebar layout (768px+)
   ============================================================ */
.sidebar { display: none; }

@media (min-width: 768px) {

    /* Shift only the app shell — not body — so the auth screen stays unaffected */
    body { padding-bottom: 0; }
    #app-shell { padding-left: var(--sidebar-width, 240px); }

    /* Hide mobile-only elements */
    .bottom-nav { display: none !important; }
    .top-bar    { display: none; }

    /* ---- Sidebar shell ---- */
    .sidebar {
        --sidebar-width: 240px;
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: var(--sidebar-width);
        background: var(--surface);
        border-right: 1px solid var(--border);
        z-index: 100;
    }

    /* Logo */
    .sidebar-logo {
        font-size: 1.2rem;
        font-weight: 900;
        color: var(--accent);
        letter-spacing: -.5px;
        padding: 24px 20px 20px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }
    .sidebar-logo span { color: var(--text); }

    /* Nav */
    .sidebar-nav {
        flex: 1;
        padding: 10px 0;
        overflow-y: auto;
    }
    .sidebar-nav-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 12px 20px;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: .9375rem;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        transition: background .15s, color .15s;
        -webkit-tap-highlight-color: transparent;
    }
    .sidebar-nav-item svg {
        width: 20px; height: 20px;
        flex-shrink: 0;
    }
    .sidebar-nav-item:hover {
        background: var(--surface-2);
        color: var(--text);
    }
    .sidebar-nav-item.active {
        background: var(--accent-dim);
        color: var(--accent);
        font-weight: 600;
    }
    .sidebar-nav-item.active::before {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 3px;
        background: var(--accent);
        border-radius: 0 2px 2px 0;
    }

    /* Footer */
    .sidebar-footer {
        padding: 16px 20px;
        border-top: 1px solid var(--border);
        flex-shrink: 0;
    }
    .sidebar-user {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        width: 100%;
        background: none;
        border: none;
        text-align: left;
        cursor: pointer;
        padding: 6px;
        border-radius: var(--radius-sm);
        transition: background .15s ease;
        font: inherit;
    }
    .sidebar-user:hover { background: var(--surface-2); }
    .sidebar-user.active { background: var(--surface-2); }
    .sidebar-avatar {
        width: 34px; height: 34px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .75rem;
        font-weight: 700;
        flex-shrink: 0;
    }
    .sidebar-user-info { flex: 1; min-width: 0; }
    .sidebar-user-name {
        font-size: .875rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--text);
    }
    .sidebar-user-email {
        font-size: .75rem;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sidebar-footer-actions {
        display: flex;
        gap: 8px;
    }

    /* Widen and pad main content area */
    .app-shell {
        max-width: 920px;
        padding: 28px 40px;
    }

    .view { padding-top: 4px; padding-bottom: 40px; }

    .auth-screen { min-height: 100dvh; }
}