* { margin: 0; padding: 0; box-sizing: border-box; }

/* ──────────────────── DESIGN TOKENS ──────────────────── */
:root {
    /* Colors */
    --text:       #37352f;
    --text-secondary: #787774;
    --text-muted:  #6b6966;
    --background:  #ffffff;
    --surface:     #f7f6f3;
    --border:      rgba(55,53,47,.09);
    --border-strong: rgba(55,53,47,.18);
    --hover:       rgba(55,53,47,.06);
    --accent:      #2383e2;
    --accent-bg:   rgba(35,131,226,.12);
    --success:     #0f7b6c;
    --warning:     #b45309;

    /* Spacing scale (4px base) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-14: 56px;
    --space-20: 80px;

    /* Border radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.12);
    --shadow-md:  0 4px 12px rgba(35,131,226,.3);
    --shadow-lg:  0 4px 24px rgba(0,0,0,.2), 0 1px 4px rgba(0,0,0,.1);
    --shadow-xl:  0 20px 60px rgba(0,0,0,.2);
}

/* ──────────────────── UTILITY CLASSES ──────────────────── */

/* Repeated uppercase label pattern (was in 8+ places) */
.label-caps {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
}

/* Lighter-weight variant for table headers / secondary labels */
.label-caps-light {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
}

/* Common hover-lift button effect */
.btn-lift:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn-lift:active {
    transform: none;
    box-shadow: none;
}

/* Hidden utility */
.hidden { display: none; }

/* ──────────────────── BASE ──────────────────── */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--background);
    color: var(--text);
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5;
}

/* Mobile-first: single column */
.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ──────────────────── SIDEBAR ──────────────────── */
.sidebar {
    width: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sb-top {
    padding: var(--space-2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.workspace {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    cursor: default;
    transition: background .1s;
}
.workspace:hover { background: var(--hover); }

.ws-icon {
    width: 28px; height: 28px;
    border-radius: var(--radius-md);
    background: var(--text);
    color: white;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.ws-name { font-size: 14px; font-weight: 600; color: var(--text); }

.sb-body { padding: 6px var(--space-1) var(--space-4); flex: 1; }

.sec-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 10px var(--space-2) var(--space-1);
}

.phase-toggle {
    display: flex;
    background: rgba(55,53,47,.08);
    border-radius: var(--radius-md);
    padding: 3px;
    margin: 0 var(--space-1) 6px;
}

.phase-btn {
    flex: 1;
    padding: 10px 6px;
    min-height: 44px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    text-align: center;
    transition: all .15s;
}
.phase-btn.active {
    background: white;
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.session-list { padding: 0 var(--space-1); }

.sess-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px var(--space-2);
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 1px;
    transition: background .1s, color .1s;
}
.sess-item:hover { background: var(--hover); color: var(--text); }
.sess-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 500; }

.sess-icon { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; }

.sb-card {
    margin: var(--space-2) 6px;
    padding: var(--space-3);
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.sb-card-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: var(--space-2);
}

.prog-bar-bg {
    height: 4px;
    background: var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    overflow: hidden;
}
.prog-bar-fill {
    height: 4px;
    background: var(--accent);
    border-radius: var(--radius-sm);
    width: 0%;
    transition: width .3s ease;
}
.prog-text { font-size: 12px; color: var(--text-secondary); }

.sess-note {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
    line-height: 1.5;
}

.prev-item {
    padding: 6px var(--space-2);
    background: var(--surface);
    border-radius: 5px;
    margin-bottom: var(--space-1);
}
.prev-item:last-child { margin-bottom: 0; }
.prev-name { font-size: 12px; font-weight: 500; color: var(--text); margin-bottom: 1px; }
.prev-data { font-size: 11px; color: var(--text-secondary); }

.guide-item {
    font-size: 12px;
    color: var(--text-secondary);
    padding-left: var(--space-3);
    position: relative;
    line-height: 1.5;
    margin-bottom: var(--space-1);
}
.guide-item:last-child { margin-bottom: 0; }
.guide-item::before { content: "\00b7"; position: absolute; left: 3px; color: var(--text-muted); }

/* ──────────────────── MAIN ──────────────────── */
.main { flex: 1; min-height: 100vh; }

.page {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-5) 60px;
}

.pg-emoji {
    padding-top: 28px;
    font-size: 44px;
    line-height: 1;
    margin-bottom: var(--space-3);
}

.pg-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: var(--space-1);
}

.pg-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
}

.pg-props {
    border-top: 1px solid var(--border);
    margin-bottom: 28px;
}

.prop-row {
    display: flex;
    align-items: center;
    min-height: 34px;
    border-bottom: 1px solid var(--border);
    transition: background .1s;
}
.prop-row:hover { background: var(--hover); }

.prop-key {
    width: 120px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-2);
    flex-shrink: 0;
}

.prop-val {
    font-size: 13px;
    color: var(--text);
    padding: var(--space-1) var(--space-2);
    flex: 1;
}

.prop-tag {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    background: var(--accent-bg);
    color: var(--accent);
}

.blk-heading {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 18px 0 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-1);
}

/* ──────────────────── EXERCISE BLOCK ──────────────────── */
.ex-block { border-radius: var(--radius-md); margin-bottom: 2px; }

.ex-row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 5px var(--space-1);
    border-radius: var(--radius-md);
    cursor: default;
    transition: background .1s;
}
.ex-row:hover { background: var(--hover); }

.ex-toggle {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    font-size: 9px;
    cursor: pointer;
    border-radius: 3px;
    flex-shrink: 0;
    transition: all .1s;
    position: relative;
}
/* Enlarge touch target to 44px minimum */
.ex-toggle::before {
    content: '';
    position: absolute;
    inset: -11px;
}
.ex-toggle:hover { background: rgba(55,53,47,.1); color: var(--text); }
.ex-toggle .arr { display: inline-block; transition: transform .15s; }
.ex-toggle.open .arr { transform: rotate(90deg); }


.ex-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.ex-name { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-name.done { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-muted); }

.ex-tag {
    font-size: 11px;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.tag-warmup { background: #fef3c7; color: #92400e; }
.tag-a { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.tag-b { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }
.tag-c { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.tag-d { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.tag-e { background: #ffe4e6; color: #9f1239; border: 1px solid #fecdd3; }

.ex-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    opacity: 1;
}

.vid-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background .1s, color .1s;
}
.vid-btn:hover { background: rgba(55,53,47,.1); color: var(--text); }

.ex-body { padding: var(--space-1) var(--space-1) 14px 44px; }
.ex-body.hidden { display: none; }

.ex-props {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    padding-top: var(--space-1);
}

.xprop {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--surface);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    border: 1px solid var(--border);
}
.xprop-lbl { color: var(--text-muted); }
.xprop-val { font-weight: 600; color: var(--text); }

/* Sets changed badge */
.sets-changed {
    font-size: 10px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-bg);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 2px;
}

.callout {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border-radius: 5px;
    margin-bottom: var(--space-3);
    border: 1px solid var(--border);
}
.callout-ico { font-size: 15px; flex-shrink: 0; line-height: 1.5; }
.callout-txt { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

.sets-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.sets-tbl { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }

.sets-tbl th {
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    padding: var(--space-1) 10px var(--space-1) 0;
    border-bottom: 1px solid var(--border);
}

.sets-tbl td {
    padding: 5px 10px 5px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.sets-tbl tr:last-child td { border-bottom: none; }

.set-lbl { font-size: 12px; font-weight: 500; color: var(--text-secondary); width: 52px; vertical-align: top; padding-top: 10px !important; }
.set-lbl .prog-cue { margin-top: 2px; }

.num-inp {
    width: 64px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: white;
    text-align: center;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.num-inp:hover { border-color: var(--border-strong); }
.num-inp:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(35,131,226,.18);
}

.sugg-td  { font-size: 12px; color: var(--success); font-weight: 500; }

/* ──────────────────── REST TIMER ──────────────────── */
.rest-btn {
    padding: var(--space-2) var(--space-3);
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all .1s;
}
.rest-btn:hover {
    background: var(--hover);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}

.rest-timer {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
    z-index: 9999;
    background: var(--text);
    color: white;
    border-radius: var(--radius-lg);
    padding: 14px var(--space-4);
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-lg);
    transition: background .3s;
    min-width: unset;
}
.rest-timer.hidden { display: none; }
.rest-timer.done { background: var(--success); }

.rest-timer-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.rest-time {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}
.rest-sublabel {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}
.rest-bar-bg {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,.2);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-top: var(--space-2);
}
.rest-bar-fill {
    height: 3px;
    background: white;
    border-radius: var(--radius-sm);
    transition: width 1s linear;
}
.rest-dismiss {
    width: 24px; height: 24px;
    border-radius: var(--radius-full);
    border: none;
    background: rgba(255,255,255,.15);
    color: white;
    font-size: 12px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .1s;
}
.rest-dismiss:hover { background: rgba(255,255,255,.25); }

/* ──────────────────── SET ACTION STACK (Done + RPE) ──────────────────── */
.set-action-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.set-done-btn {
    padding: var(--space-2) var(--space-3);
    min-height: 44px;
    width: 100%;
    border: 1.5px solid rgba(55,53,47,.2);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    white-space: nowrap;
}
.set-done-btn:hover { background: var(--hover); border-color: var(--border-strong); color: var(--text); }
.set-done-btn.confirmed { background: #dcfce7; border-color: #16a34a; color: #15803d; }
.set-row.confirmed td { background: rgba(22,163,74,.04); }

.pr-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--warning);
    background: #fef3c7;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    vertical-align: middle;
    margin-left: var(--space-1);
}

/* ──────────────────── HEATMAP ──────────────────── */
.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: var(--space-2);
}
.heatmap-day {
    aspect-ratio: 1;
    border-radius: 3px;
    background: var(--border);
    cursor: default;
}
.heatmap-day.active { background: #f59e0b; opacity: .75; }
.heatmap-day.today { outline: 2px solid var(--accent); outline-offset: 1px; }
.heatmap-day.active.today { opacity: 1; }
.heatmap-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: var(--space-1);
}
.heatmap-dow-lbl { font-size: 9px; color: var(--text-muted); text-align: center; font-weight: 500; }
.streak-text { font-size: 12px; color: var(--text-secondary); }
.streak-num { font-weight: 700; color: var(--warning); }

/* ──────────────────── FOCUS MODE ──────────────────── */
.focus-overlay {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
}
.focus-overlay.hidden { display: none; }

.focus-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px var(--space-5);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.focus-prog { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
/* Session timer in focus header — hidden by default, toggled by user */
.session-timer {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    letter-spacing: .02em;
}
.session-timer:hover { background: var(--hover); color: var(--text-secondary); }
.session-timer.hidden { display: none; }

.focus-exit {
    padding: 5px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.focus-exit:hover { background: var(--hover); color: var(--text); }

.focus-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    text-align: center;
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
}
.focus-block-tag { margin-bottom: 6px; }
.focus-ex-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-1);
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.focus-set-counter { font-size: 14px; color: var(--text-muted); font-weight: 500; margin-bottom: var(--space-3); }
.focus-sets-dots { display: flex; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-5); }
.focus-set-dot {
    width: 10px; height: 10px;
    border-radius: var(--radius-full);
    background: var(--border-strong);
    cursor: pointer;
    transition: all .15s;
}
.focus-set-dot.current { background: var(--accent); transform: scale(1.3); }
.focus-set-dot.done { background: #16a34a; }
.focus-prev { font-size: 13px; color: var(--text-muted); margin-bottom: var(--space-5); min-height: 18px; }

.focus-inputs {
    display: flex;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
    width: 100%;
    justify-content: center;
}
.focus-input-group { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.focus-input-group label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
}
.focus-num-inp {
    width: 110px;
    padding: 14px var(--space-2);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-lg);
    font-size: 28px;
    font-weight: 700;
    font-family: inherit;
    color: var(--text);
    background: white;
    text-align: center;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.focus-num-inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(35,131,226,.18); }

.focus-done-btn {
    width: 100%;
    max-width: 300px;
    padding: 18px;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--accent);
    color: white;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    margin-bottom: var(--space-5);
}
.focus-done-btn:hover { background: #1a6fc4; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.focus-done-btn:active { transform: none; box-shadow: none; }

.focus-rest-display {
    width: 100%;
    max-width: 300px;
    text-align: center;
}
.focus-rest-display.hidden { display: none; }

.focus-continue-btn {
    width: 100%;
    max-width: 300px;
    padding: var(--space-4);
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--accent);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.focus-continue-btn:hover { background: var(--accent); color: white; }
.focus-continue-btn.hidden { display: none; }
.focus-rest-time { font-size: 36px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.focus-rest-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 10px; }
.focus-rest-bar-bg { height: 4px; background: var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-3); }
.focus-rest-bar-fill { height: 4px; background: var(--accent); border-radius: var(--radius-sm); transition: width 1s linear; }
.focus-skip-btn {
    padding: 6px var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}
.focus-skip-btn:hover { background: var(--hover); color: var(--text); }

/* ──────────────────── Interval Timer (Cardio Work Phase) ──────────────────── */
.focus-screen-work {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}
.focus-screen-work.hidden { display: none; }

.interval-phase-label {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .15em;
    padding: 8px 28px;
    border-radius: var(--radius-full);
    animation: intervalPulse 1s ease-in-out infinite;
}
.interval-phase-label.ready {
    background: var(--surface);
    color: var(--text-muted);
    border: 2px solid var(--border-strong);
    animation: none;
}
.interval-phase-label.countdown {
    background: #fef3c7;
    color: #92400e;
    border: 2px solid #f59e0b;
}
.interval-phase-label.go {
    background: #dcfce7;
    color: #15803d;
    border: 2px solid #16a34a;
}
.interval-phase-label.rest-label {
    background: #fef3c7;
    color: #92400e;
    border: 2px solid #f59e0b;
    animation: none;
}

@keyframes intervalPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.interval-work-time {
    font-size: 96px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -2px;
}

.interval-work-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.interval-work-bar-bg {
    width: 100%;
    max-width: 300px;
    height: 6px;
    background: var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-top: var(--space-2);
}
.interval-work-bar-fill {
    height: 6px;
    background: #16a34a;
    border-radius: var(--radius-sm);
    transition: width 1s linear;
}

.interval-start-btn {
    margin-top: var(--space-4);
    padding: 18px 48px;
    border: none;
    border-radius: var(--radius-lg);
    background: #16a34a;
    color: white;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .08em;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.interval-start-btn:hover { background: #15803d; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.interval-start-btn:active { transform: none; box-shadow: none; }
.interval-start-btn.hidden { display: none; }

.interval-skip-btn {
    margin-top: var(--space-3);
    padding: 8px var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.interval-skip-btn:hover { background: var(--hover); color: var(--text); }
.interval-skip-btn.hidden { display: none; }

/* Cardio KPI inputs (inline on rest screen) */
.cardio-kpi-inputs {
    width: 100%;
    max-width: 360px;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}
.cardio-kpi-inputs.hidden { display: none; }
.cardio-kpi-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
    text-align: center;
}
.cardio-kpi-row {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
}
.cardio-kpi-inp {
    width: 90px;
    padding: 10px var(--space-2);
    font-size: 22px;
}

/* ──────────────────── Focus Screen Containers ──────────────────── */
.focus-screen-exercise,
.focus-screen-rest {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.focus-screen-rest { gap: var(--space-4); }
.focus-screen-exercise.hidden,
.focus-screen-rest.hidden { display: none; }
.focus-note {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    padding: 0;
    background: none;
    border: none;
    text-align: center;
    margin-bottom: var(--space-2);
}

.focus-video { width: 100%; margin-bottom: var(--space-2); }
.focus-video.hidden { display: none; }
.focus-video-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2) 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.focus-video-toggle:hover { background: var(--surface); }
.focus-video-toggle.open { border-color: var(--accent); background: rgba(35,131,226,.06); }
.focus-video-embed {
    margin-top: 10px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #000;
}
.focus-video-embed.hidden { display: none; }
.focus-video-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-lg);
}

.focus-footer {
    display: flex;
    gap: var(--space-3);
    padding: 14px var(--space-5);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.focus-nav-btn {
    flex: 1;
    padding: 14px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.focus-nav-btn:hover { background: var(--hover); }
.focus-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.focus-nav-btn.finish { background: var(--success); color: white; border-color: var(--success); }
.focus-nav-btn.finish:hover { background: #0a6556; }

.start-workout-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px var(--space-5);
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    margin-top: var(--space-4);
    margin-bottom: var(--space-1);
}
.start-workout-btn:hover { background: #1a6fc4; transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ──────────────────── CONTEXT SIDEBAR ──────────────────── */
.sb-context-card {
    margin: var(--space-2) 6px;
    padding: var(--space-4) var(--space-3);
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
}
.sb-hero-streak {
    font-size: 32px;
    font-weight: 700;
    color: var(--warning);
    line-height: 1;
    margin-bottom: 2px;
}
.sb-hero-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}
.sb-start-btn {
    width: 100%;
    padding: var(--space-3);
    border: none;
    border-radius: var(--radius-lg);
    background: var(--accent);
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.sb-start-btn:hover { background: #1a6fc4; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sb-session-focus {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    line-height: 1.5;
    text-align: left;
}
.sb-secondary {
    margin: var(--space-1) 6px;
}
.sb-toggle-details {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 6px var(--space-2);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    transition: color .1s;
}
.sb-toggle-details:hover { color: var(--text-secondary); }
.sb-toggle-details .arr { display: inline-block; transition: transform .15s; font-size: 8px; }
.sb-toggle-details.open .arr { transform: rotate(90deg); }
.sb-collapsible { display: none; }
.sb-collapsible.open { display: block; }

/* ──────────────────── PROGRESS SUMMARY ──────────────────── */
.summary-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}
.summary-overlay.hidden { display: none; }

.summary-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6) 28px;
    max-width: 460px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-xl);
}

.summary-emoji { font-size: 52px; line-height: 1; margin-bottom: var(--space-3); }

.summary-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-1);
}

.summary-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.summary-stat {
    flex: 1 1 calc(25% - var(--space-3));
    min-width: 80px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px var(--space-2);
}

.summary-stat-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-1);
}

.summary-stat-lbl {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.summary-pr-section {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-lg);
    padding: 14px var(--space-4);
    margin-bottom: var(--space-6);
    text-align: left;
}

.summary-pr-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #92400e;
    margin-bottom: var(--space-2);
}

.summary-pr-item {
    font-size: 13px;
    color: var(--text);
    padding: 3px 0;
}

.summary-cta-btn {
    width: 100%;
    padding: var(--space-4);
    border: none;
    border-radius: var(--radius-lg);
    background: var(--accent);
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    margin-bottom: 10px;
}
.summary-cta-btn:hover { background: #1a6fc4; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.summary-cta-btn.finish { background: var(--success); }
.summary-cta-btn.finish:hover { background: #0a6556; }

.summary-exit-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: color .1s;
}
.summary-exit-btn:hover { color: var(--text-secondary); }

/* ──────────────────── SHARE WITH COACH ──────────────────── */
.summary-share-btn {
    width: 100%;
    padding: 13px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    margin-bottom: 10px;
}
.summary-share-btn:hover { background: var(--hover); color: var(--text); border-color: var(--text-muted); }
.summary-share-btn.copied { background: #dcfce7; border-color: #16a34a; color: #15803d; }

/* ──────────────────── PROGRESSION CUE ──────────────────── */
.prog-cue {
    font-size: 11px;
    font-weight: 600;
    margin-top: 3px;
    white-space: nowrap;
}
.prog-cue-up      { color: var(--success); }
.prog-cue-neutral { color: var(--text-muted); }
.prog-cue-hold    { color: var(--warning); }

.focus-cue {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: var(--space-5);
    padding: 6px 14px;
    border-radius: var(--radius-full);
}
.focus-cue.hidden { display: none; }
.focus-cue-up      { color: var(--success); background: #d1fae5; }
.focus-cue-neutral { color: var(--text-secondary); background: var(--surface); }
.focus-cue-hold    { color: #92400e; background: #fef3c7; }

/* ──────────────────── RPE (Focus Mode) ──────────────────── */
.focus-rpe {
    margin-bottom: var(--space-5);
    text-align: center;
}
.focus-rpe-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}
.focus-rpe-btns { display: flex; gap: var(--space-2); justify-content: center; }
.focus-rpe-btn {
    padding: 12px 18px;
    min-height: 44px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border-strong);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-secondary);
    transition: all .15s;
}
.focus-rpe-btn:hover          { border-color: var(--text-muted); color: var(--text); }
.focus-rpe-btn.easy.selected  { background: #d1fae5; border-color: var(--success); color: var(--success); }
.focus-rpe-btn.solid.selected { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.focus-rpe-btn.hard.selected  { background: #fef3c7; border-color: var(--warning); color: var(--warning); }

/* ──────────────────── RPE (Main Table) ──────────────────── */
.rpe-mini {
    display: flex;
    gap: 3px;
}
.rpe-mini.hidden { display: none; }
.rpe-mini-btn {
    flex: 1;
    padding: 6px 4px;
    min-height: 36px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: transparent;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-muted);
    transition: all .1s;
    line-height: 1.4;
    text-align: center;
}
.rpe-mini-btn:hover { border-color: var(--text-muted); color: var(--text-secondary); }
.rpe-mini-btn.easy.sel  { background: #d1fae5; border-color: var(--success); color: var(--success); }
.rpe-mini-btn.solid.sel { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.rpe-mini-btn.hard.sel  { background: #fef3c7; border-color: var(--warning); color: var(--warning); }

/* ──────────────────── BLOCK PROGRESS (Focus Header) ──────────────────── */
.focus-block-progress {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}
.bp-node {
    padding: 2px var(--space-2);
    border-radius: var(--radius-lg);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all .15s;
}
.bp-node.bp-current {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent);
}
.bp-node.bp-done {
    background: #dcfce7;
    color: #15803d;
    border-color: #16a34a;
}

/* ──────────────────── TEMPO CUE (Focus Mode) ──────────────────── */
.focus-tempo {
    width: 100%;
    max-width: 360px;
    padding: var(--space-2) 14px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
    text-align: center;
    margin-top: var(--space-2);
    cursor: help;
}

/* ──────────────────── ON DECK (Focus Mode) ──────────────────── */
.focus-on-deck {
    width: 100%;
    max-width: 360px;
    padding: 12px var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: left;
    margin-top: var(--space-3);
}
.on-deck-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}
.on-deck-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.on-deck-prev {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ──────────────────── JOURNEY NARRATIVE ──────────────────── */
.journey-narrative {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--accent-bg);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
    color: var(--text);
    margin-top: var(--space-4);
    animation: narrativeSlideIn .3s ease;
}
.journey-narrative.hidden { display: none; }
.journey-narrative.journey-pr {
    background: #fffbeb;
    border-left-color: #f59e0b;
}
.journey-icon { font-size: 18px; flex-shrink: 0; }
.journey-text { line-height: 1.4; }

@keyframes narrativeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────── PROGRESS CHARTS ──────────────────── */
.chart-section { margin-top: var(--space-6); padding: var(--space-4) 0; }
.chart-section.hidden { display: none; }

.chart-tabs {
    display: flex;
    background: rgba(55,53,47,.08);
    border-radius: var(--radius-md);
    padding: 3px;
    margin-bottom: var(--space-4);
    max-width: 200px;
}
.chart-tab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.chart-tab.active {
    background: white;
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.chart-container { min-height: 200px; }
.chart-container.hidden { display: none; }
.chart-container svg { width: 100%; height: auto; }

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-2);
    padding: 0 var(--space-2);
}
.chart-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    color: var(--text-secondary);
}
.chart-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

/* ──────────────────── COACH SETUP & TOAST ──────────────────── */
.share-section { margin-bottom: 10px; }

.coach-setup {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-top: var(--space-3);
}
.coach-setup.hidden { display: none; }
.coach-setup-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}
.coach-setup-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.coach-type-select {
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: inherit;
    background: var(--background);
    color: var(--text);
    cursor: pointer;
}
.coach-value-input {
    flex: 1;
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: inherit;
    background: var(--background);
    color: var(--text);
    outline: none;
}
.coach-value-input:focus { border-color: var(--accent); }
.coach-save-btn {
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.toast-container {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30000;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}
.toast {
    padding: var(--space-3) var(--space-5);
    background: var(--text);
    color: var(--background);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
    animation: toastIn .3s ease, toastOut .3s ease forwards;
    pointer-events: auto;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-10px); }
}

/* ──────────────────── FOCUS-VISIBLE (Keyboard A11y) ──────────────────── */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Inputs already have their own focus ring — suppress the default outline */
.num-inp:focus-visible,
.focus-num-inp:focus-visible {
    outline: none;
}

/* Buttons that look better with a box-shadow ring instead of outline */
.focus-done-btn:focus-visible,
.focus-continue-btn:focus-visible,
.focus-nav-btn:focus-visible,
.start-workout-btn:focus-visible,
.sb-start-btn:focus-visible,
.summary-cta-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(35,131,226,.4);
}

/* ──────────────────── DARK MODE ──────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --text:          #ededec;
        --text-secondary:#a1a09e;
        --text-muted:    #8a8986;
        --background:    #191919;
        --surface:       #252525;
        --border:        rgba(255,255,255,.1);
        --border-strong: rgba(255,255,255,.2);
        --hover:         rgba(255,255,255,.06);
        --accent:        #529CCA;
        --accent-bg:     rgba(82,156,202,.15);
        --success:       #34d399;
        --warning:       #fbbf24;

        --shadow-sm:  0 1px 3px rgba(0,0,0,.4);
        --shadow-md:  0 4px 12px rgba(0,0,0,.5);
        --shadow-lg:  0 4px 24px rgba(0,0,0,.5);
        --shadow-xl:  0 20px 60px rgba(0,0,0,.6);
    }

    /* Override explicit whites/hard-coded backgrounds */
    body { color-scheme: dark; }

    .num-inp,
    .focus-num-inp,
    .sb-card,
    .sb-context-card,
    .summary-card,
    .focus-overlay {
        background: var(--surface);
        color: var(--text);
    }

    .phase-btn.active {
        background: var(--surface);
        color: var(--text);
        box-shadow: none;
    }

    .focus-overlay { background: var(--background); }

    /* Rest timer — keep dark background legible */
    .rest-timer { background: #111; }
    .rest-timer.done { background: #065f46; }

    /* Tags — slightly muted for dark mode */
    .tag-warmup { background: #422006; color: #fbbf24; }
    .tag-a { background: #1e3a5f; color: #93c5fd; border-color: #2563eb; }
    .tag-b { background: #2e1065; color: #c4b5fd; border-color: #7c3aed; }
    .tag-c { background: #064e3b; color: #6ee7b7; border-color: #059669; }
    .tag-d { background: #422006; color: #fcd34d; border-color: #d97706; }
    .tag-e { background: #4c0519; color: #fda4af; border-color: #e11d48; }

    /* PR section */
    .summary-pr-section { background: #422006; border-color: #92400e; }
    .summary-pr-title { color: #fbbf24; }

    /* Set confirmed state */
    .set-done-btn.confirmed { background: #064e3b; border-color: #059669; color: #34d399; }
    .set-row.confirmed td { background: rgba(52,211,153,.06); }

    /* Focus cues */
    .focus-cue-up { color: #34d399; background: #064e3b; }
    .focus-cue-hold { color: #fbbf24; background: #422006; }

    /* RPE selected states */
    .focus-rpe-btn.easy.selected,
    .rpe-mini-btn.easy.sel  { background: #064e3b; color: #34d399; border-color: #059669; }
    .focus-rpe-btn.solid.selected,
    .rpe-mini-btn.solid.sel { background: rgba(82,156,202,.15); color: #529CCA; border-color: #529CCA; }
    .focus-rpe-btn.hard.selected,
    .rpe-mini-btn.hard.sel  { background: #422006; color: #fbbf24; border-color: #d97706; }

    /* PR badge */
    .pr-badge { background: #422006; color: #fbbf24; }

    /* Progression cues */
    .prog-cue-up { color: #34d399; }
    .prog-cue-hold { color: #fbbf24; }

    /* Tempo cue */
    .focus-tempo { background: #422006; border-color: #92400e; color: #fbbf24; }

    /* Block progress nodes */
    .bp-node { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
    .bp-node.bp-current { background: rgba(82,156,202,.15); color: #529CCA; border-color: #529CCA; }
    .bp-node.bp-done { background: #064e3b; color: #34d399; border-color: #059669; }

    /* Summary share copied */
    .summary-share-btn.copied { background: #064e3b; border-color: #059669; color: #34d399; }

    /* Focus video embed */
    .focus-video-toggle.open { border-color: #529CCA; background: rgba(82,156,202,.1); }

    /* Heatmap active */
    .heatmap-day { background: rgba(255,255,255,.08); }
    .heatmap-day.active { background: #d97706; opacity: .85; }

    /* On deck */
    .focus-on-deck { background: var(--surface); border-color: var(--border-strong); }

    /* Interval timer (cardio) */
    .interval-phase-label.ready { background: var(--surface); color: var(--text-muted); border-color: var(--border-strong); }
    .interval-phase-label.countdown { background: #422006; color: #fbbf24; border-color: #d97706; }
    .interval-phase-label.go { background: #064e3b; color: #34d399; border-color: #059669; }
    .interval-phase-label.rest-label { background: #422006; color: #fbbf24; border-color: #d97706; }
    .interval-work-bar-fill { background: #34d399; }
    .interval-start-btn { background: #059669; }
    .interval-start-btn:hover { background: #047857; }
    .cardio-kpi-inputs { background: var(--surface); border-color: var(--border-strong); }

    /* Journey narrative */
    .journey-narrative.journey-pr { background: #422006; border-left-color: #d97706; }

    /* Chart tabs */
    .chart-tab.active { background: var(--surface); color: var(--text); box-shadow: none; }

    /* Coach setup */
    .coach-setup { background: var(--surface); border-color: var(--border-strong); }

    /* Toast */
    .toast { background: #ededec; color: #191919; }
}

/* ──────────────────── RESPONSIVE: TABLET & UP ──────────────────── */
@media (min-width: 769px) {
    .app { flex-direction: row; }

    .sidebar {
        width: 240px;
        min-width: 240px;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        border-bottom: none;
        border-right: 1px solid var(--border);
    }

    .main { margin-left: 240px; }

    .page { padding: 0 48px var(--space-20); }

    .pg-emoji { padding-top: 60px; font-size: 56px; }
    .pg-title { font-size: 38px; }

    .prop-key { width: 160px; }

    .ex-actions { opacity: 0; transition: opacity .1s; }
    .ex-block:hover .ex-actions { opacity: 1; }

    .sets-tbl { display: table; overflow-x: visible; }

    .rest-timer {
        left: auto;
        min-width: 180px;
    }

    .focus-ex-name { font-size: 34px; }
    .summary-title { font-size: 26px; }
}

/* ──────────────────── RESPONSIVE: DESKTOP ──────────────────── */
@media (min-width: 1025px) {
    .page { padding: 0 96px var(--space-20); }
}