/* ============================================================================
   BIG SURF WORKOUT TRACKER - MINIMAL CSS v1.0
   Target: ~1500 lines (down from 11,000+)
   ============================================================================ */

/* ===========================================
   1. DESIGN TOKENS
   =========================================== */
:root {
    /* Colors - iOS-style limited accent usage */
    --primary: #1dd3b0;
    --primary-dark: #0fa48a;
    --success: #36c46b;
    --danger: #e35d6a;
    --warning: #f0c24b;

    /* Warm highlight - for streaks, achievements, PRs */
    --highlight-warm: #f7a865;
    --highlight-warm-dark: #b96c2c;

    /* Backgrounds - darker, softer, less contrasty (Apple Health style) */
    --bg-app: #05070b;
    --bg-surface: #0a0e14;
    --bg-card: #0a0f15;
    --bg-card-hi: #0e1319;
    --bg-tertiary: #0e1319;

    /* Text - high contrast for readability */
    --text-strong: #f6f9ff;
    --text-main: #c4cad4;
    --text-primary: #c4cad4;
    --text-muted: #b0b8c1;
    --text-secondary: #9aa3ad;

    /* Borders - subtle */
    --border: #1a2028;
    --border-accent: rgba(29, 211, 176, 0.85);

    /* Border Radius scale */
    --radius-xs: 4px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Shadows - crisp, iOS-like */
    --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 8px 14px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 20px rgba(0, 0, 0, 0.6);

    /* Font size scale */
    --font-xs: 0.7rem;
    --font-sm: 0.8rem;
    --font-base: 0.9rem;
    --font-md: 1rem;
    --font-lg: 1.15rem;
    --font-xl: 1.4rem;
    --font-2xl: 2rem;
    --font-3xl: 2.5rem;

    /* Category colors */
    --cat-push: #4A90D9;
    --cat-pull: #D94A7A;
    --cat-legs: #7B4AD9;
    --cat-cardio: #D9A74A;
    --cat-core: #4AD9A7;
    --cat-arms: #D96A4A;
    --cat-fullbody: #4AD9D9;
    --cat-custom: var(--primary);

    /* Badge/achievement colors */
    --badge-gold: #ffd700;
    --badge-silver: #c0c0c0;
    --badge-bronze: #cd7f32;
    --badge-purple: #9370db;

    /* Animation durations */
    --anim-fast: 100ms;
    --anim-normal: 200ms;
    --anim-slow: 300ms;
    --anim-ring: 1000ms;

    /* Z-index scale */
    --z-sticky: 10;
    --z-header: 100;
    --z-sidebar: 300;
    --z-overlay: 350;
    --z-modal: 500;
    --z-exercise-lib: 550;
    --z-add-exercise: 600;
    --z-toast: 700;
    --z-onboarding: 9999;

    /* Spacing */
    --pad-page: 18px;
    --pad-card-y: 14px;
    --pad-card-x: 16px;
    --gap-section: 18px;
    --gap-items: 12px;

    /* Sizing */
    --tap: 44px;
    --font: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
}

/* ===========================================
   2. RESET & BASE
   =========================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    overflow-x: hidden;
    max-width: 100vw;
}
body {
    background: var(--bg-app);
    color: var(--text-strong);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    line-height: 1.5;
}

input,
select,
textarea {
    font-size: 1rem; /* Prevent iOS auto-zoom on focus */
}

/* Disable double-tap zoom delay on interactive elements */
button,
a,
.btn,
input,
select,
textarea,
.bottom-nav-item,
.clickable {
    touch-action: manipulation;
}

/* iOS momentum scrolling for scrollable containers */
.sidebar,
.modal > .modal-content,
.modal-content-editor,
.exercise-list-container,
.section-content-scroll {
    -webkit-overflow-scrolling: touch;
}

.hidden {
    display: none !important;
}
.text-muted {
    color: var(--text-muted);
}
.text-primary {
    color: var(--primary);
}

/* ===========================================
   3. CARD PATTERN (Apple Health / Withings style)
   =========================================== */
/* Flat, soft cards - no harsh gradients or loud borders */
.hero-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: var(--shadow-sm);
    padding: var(--pad-card-x);
    position: relative;
    overflow: hidden;
}

/* Signature accent line - thin top border on important cards */
.hero-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Warm accent for streaks/achievements */
.hero-card-warm::before {
    background: linear-gradient(90deg, var(--highlight-warm), var(--highlight-warm-dark));
}
.hero-card-warm {
    border-color: rgba(247, 168, 101, 0.15);
}

/* Success accent */
.hero-card-success::before {
    background: var(--success);
}

/* No accent bar variant */
.hero-card-flat::before {
    display: none;
}

/* Active state */
.hero-card:active {
    background: var(--bg-card-hi);
}

/* ===========================================
   3b. ROW CARD PATTERN (Unified List Items)
   =========================================== */
/* Use for: exercise cards, PR items, location items, equipment options, history items */
.row-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.15s ease;
    cursor: pointer;
}
.row-card:active {
    background: var(--bg-card-hi);
}
.row-card__icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: rgba(29, 211, 176, 0.12);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}
.row-card__icon--warning {
    background: rgba(255, 140, 0, 0.12);
    color: #ff8c00;
}
.row-card__icon--success {
    background: rgba(54, 196, 107, 0.12);
    color: var(--success);
}
.row-card__content {
    flex: 1;
    min-width: 0;
}
.row-card__title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-strong);
    letter-spacing: -0.01em;
}
.row-card__subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 3px;
}
.row-card__action {
    color: var(--text-muted);
    font-size: 1rem;
}

/* ===========================================
   3c. SECTION HEADER PATTERN (Unified Headers)
   =========================================== */
/* Use for: all section headers across the app */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 2px 10px;
}
.section-header__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-strong);
}
.section-header__action {
    color: var(--primary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}
.section-header__action:hover {
    text-decoration: underline;
}

/* ===========================================
   4. BUTTONS (iOS-style flat, minimal)
   =========================================== */
.btn {
    min-height: var(--tap);
    padding: 0 18px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--bg-card-hi);
    color: var(--text-strong);
    font: 600 0.9rem var(--font);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s ease;
}
.btn:active {
    transform: scale(0.97);
    background: var(--bg-card);
}

.btn-primary {
    background: var(--primary);
    color: #02100e;
}
.btn-primary:active {
    background: var(--primary-dark);
}
.btn-secondary {
    background: var(--bg-card);
    color: var(--text-main);
}
.btn-success {
    background: var(--success);
    color: white;
}
.btn-danger {
    background: transparent;
    color: var(--text-muted);
}
.btn-danger:active {
    color: var(--danger);
}

.btn-text {
    background: none;
    border: none;
    padding: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
}
.btn-text:active {
    color: var(--text-strong);
}
.btn-text-danger {
    color: var(--danger);
}

.btn-full {
    width: 100%;
}
.btn-small,
.btn-sm {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.85rem;
}

/* ===========================================
   4. CARDS (Base flat style)
   =========================================== */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}
.card-accent {
    border-top: 3px solid var(--border-accent);
}
.card-success {
    border-top: 3px solid var(--success);
}

/* ===========================================
   5. LAYOUT - APP SHELL
   =========================================== */
.app-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* Header */
.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 200;
}
.main-header h1 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}
.menu-toggle {
    width: var(--tap);
    height: var(--tap);
    background: none;
    border: none;
    color: var(--text-strong);
    font-size: 1.25rem;
    cursor: pointer;
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100%;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    z-index: 300;
    transition: left 0.3s ease;
    overflow-y: auto;
}
.sidebar.open {
    left: 0;
}
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 299;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.sidebar-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--border);
}
.sidebar-nav {
    padding: 12px 0;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}
.sidebar-link:hover,
.sidebar-link.active {
    background: rgba(29, 211, 176, 0.1);
    color: var(--primary);
}
.sidebar-link i {
    width: 20px;
    text-align: center;
}

/* Bottom Nav */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    padding: 12px 0 env(safe-area-inset-bottom, 16px);
    z-index: 200;
}
.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    color: var(--text-muted);
    background: none;
    border: none;
    font-size: 0.7rem;
    cursor: pointer;
    transition: color 0.2s;
    min-height: 48px;
}
.bottom-nav-item i {
    font-size: 1.25rem;
}
.bottom-nav-item.active,
.bottom-nav-item:hover {
    color: var(--primary);
}

/* ===========================================
   6. DASHBOARD
   =========================================== */
.dashboard {
    padding-top: 8px;
}
.dashboard-loading {
    text-align: center;
    padding: 40px;
}
.dashboard-error {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* Stats Section Headers */
.stats-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 12px;
}
.stats-section-title {
    font-size: 1rem;
    font-weight: 600;
}
.view-more-link {
    font-size: 0.85rem;
    color: var(--primary);
    cursor: pointer;
}

/* Weekly Goal Card - Hero Pattern */
.weekly-goal-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 20px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    max-width: 100%;
    box-sizing: border-box;
}
.weekly-goal-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.weekly-goal-card.compact {
    padding: 16px;
}
.weekly-goal-card.goal-complete::before {
    background: var(--success);
}
.weekly-goal-content {
    display: flex;
    align-items: center;
    gap: 20px;
}
.weekly-goal-status-inline {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.weekly-goal-status-inline.complete {
    color: var(--success);
}

/* Progress Ring */
.weekly-progress-ring-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}
.weekly-progress-ring {
    transform: rotate(-90deg);
}
.ring-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 8;
}
.ring-progress {
    fill: none;
    stroke: var(--primary);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}
.ring-center-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ring-count {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
.ring-goal {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Weekly Stats Grid */
.weekly-stats-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.weekly-stat-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.weekly-stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
}
.weekly-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Weekly Goal Hero (redesigned) */
.weekly-goal-hero {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    margin-bottom: var(--gap-section);
}
.weekly-ring-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}
.weekly-ring {
    display: block;
}
.ring-progress-animated {
    transition: stroke-dashoffset 1s ease-out;
}
.weekly-ring-container .ring-center-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.weekly-ring-container .ring-count {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-strong);
}
.weekly-ring-container .ring-goal {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: block;
}
.week-day-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 16px 0;
}
.day-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
}
.day-dot.completed {
    background: var(--primary);
    color: white;
}
.day-dot.today {
    border: 2px solid var(--primary);
    color: var(--primary);
}
.weekly-stats-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}
.weekly-stat {
    text-align: center;
}
.weekly-stat .weekly-stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-strong);
}
.weekly-stat .weekly-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}
.weekly-stat-divider {
    width: 1px;
    background: var(--border);
    align-self: stretch;
}

/* In Progress Card (Resume Banner) */
.in-progress-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 18px;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.in-progress-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.in-progress-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.in-progress-icon {
    width: 40px;
    height: 40px;
    background: rgba(29, 211, 176, 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.25rem;
}
.in-progress-info {
    flex: 1;
}
.in-progress-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.in-progress-name {
    font-weight: 600;
    font-size: 1rem;
}
.in-progress-arrow {
    color: var(--text-muted);
}
.in-progress-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}
.progress-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.progress-stat i {
    color: var(--primary);
}
.in-progress-bar-wrap {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}
.in-progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s;
}

/* Streak Row - Hero Pattern */
.stats-streak-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.streak-box {
    background: var(--bg-card);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 12px 12px 10px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.streak-box::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--border);
    border-radius: 18px 18px 0 0;
}
/* Current streak - warm highlight */
.streak-box.active {
    background: var(--bg-card);
    border-color: rgba(247, 168, 101, 0.3);
    box-shadow: 0 8px 18px rgba(247, 168, 101, 0.15);
}
.streak-box.active::before {
    background: linear-gradient(90deg, var(--highlight-warm), var(--highlight-warm-dark));
}
.streak-box-icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 8px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: 2px;
}
.streak-box-icon.fire {
    background: rgba(247, 168, 101, 0.15);
    color: var(--highlight-warm);
}
.streak-box-icon.trophy {
    background: rgba(255, 215, 0, 0.15);
    color: var(--badge-gold);
}
.streak-box-icon.total {
    background: rgba(29, 211, 176, 0.12);
    color: var(--primary);
}
.streak-box-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}
.streak-box-value {
    font-size: 0.96rem;
    font-weight: 600;
}

/* Streak Section (redesigned) */
.streak-section {
    margin-bottom: var(--gap-section);
}
.streak-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
}
.streak-hero.active {
    background: linear-gradient(135deg, rgba(247, 168, 101, 0.1), rgba(247, 168, 101, 0.02));
    border: 1px solid rgba(247, 168, 101, 0.15);
}
.streak-flame-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.streak-flame {
    font-size: 2.5rem;
    color: var(--highlight-warm);
    opacity: 0.3;
}
.streak-hero.active .streak-flame {
    opacity: 1;
}
.streak-flame.on-fire {
    animation: flame-glow 2s ease-in-out infinite;
}
@keyframes flame-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(247, 168, 101, 0.4)); }
    50% { filter: drop-shadow(0 0 12px rgba(247, 168, 101, 0.6)); }
}
.streak-count-overlay {
    position: absolute;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-strong);
}
.streak-hero-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.streak-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-strong);
}
.streak-subtext {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.streak-stats-row {
    display: flex;
    justify-content: space-around;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}
.streak-stat {
    text-align: center;
}
.streak-stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-strong);
}
.streak-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}
.streak-heatmap {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
}
.heatmap-cell {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.04);
}
.heatmap-cell.active {
    background: var(--primary);
}
.heatmap-cell.today {
    border: 1px solid var(--primary);
}

/* Insights Grid */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.insight-box {
    background: var(--bg-card);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
}
.insight-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
}
.insight-value {
    font-size: 0.96rem;
    font-weight: 600;
}

/* Badges */
.badges-section-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    position: relative;
    overflow: hidden;
}
.badges-section-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #ffd700, #ff8c00);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.badges-row-preview {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 0.5rem 0;
    justify-content: flex-start;
}
.badge-preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 70px;
}
.badge-preview-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    position: relative;
}
/* Badge color classes applied to parent item */
.badge-turquoise .badge-preview-icon {
    background: rgba(29, 211, 176, 0.15);
    color: var(--primary);
}
.badge-gold .badge-preview-icon {
    background: rgba(255, 215, 0, 0.2);
    color: var(--badge-gold);
}
.badge-teal .badge-preview-icon {
    background: rgba(29, 211, 176, 0.15);
    color: var(--primary);
}
.badge-purple .badge-preview-icon {
    background: rgba(138, 43, 226, 0.2);
    color: var(--badge-purple);
}
.badge-orange .badge-preview-icon {
    background: rgba(255, 140, 0, 0.2);
    color: #ff8c00;
}
.badge-silver .badge-preview-icon {
    background: rgba(192, 192, 192, 0.2);
    color: var(--badge-silver);
}
.badge-bronze .badge-preview-icon {
    background: rgba(205, 127, 50, 0.2);
    color: var(--badge-bronze);
}
/* Direct icon classes for legacy */
.badge-preview-icon.gold {
    background: rgba(255, 215, 0, 0.2);
    color: var(--badge-gold);
}
.badge-preview-icon.silver {
    background: rgba(192, 192, 192, 0.2);
    color: var(--badge-silver);
}
.badge-preview-icon.bronze {
    background: rgba(205, 127, 50, 0.2);
    color: var(--badge-bronze);
}
.badge-preview-icon.teal {
    background: rgba(29, 211, 176, 0.15);
    color: var(--primary);
}
.badge-count-overlay {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--primary);
    color: #02100e;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 10px;
}
.badge-preview-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
}
.badges-empty-msg {
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 20px;
    text-align: center;
}
.badges-expanded {
    margin-bottom: 16px;
}
.badges-grid-section {
    margin-bottom: 16px;
}
.badges-full-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.badge-full-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    text-align: center;
}
.badge-full-item.locked {
    opacity: 0.5;
}
/* Badge-full color classes */
.badge-full-item.badge-turquoise .badge-full-icon {
    background: rgba(29, 211, 176, 0.15);
    color: var(--primary);
}
.badge-full-item.badge-gold .badge-full-icon {
    background: rgba(255, 215, 0, 0.2);
    color: var(--badge-gold);
}
.badge-full-item.badge-teal .badge-full-icon {
    background: rgba(29, 211, 176, 0.15);
    color: var(--primary);
}
.badge-full-item.badge-purple .badge-full-icon {
    background: rgba(138, 43, 226, 0.2);
    color: var(--badge-purple);
}
.badge-full-item.badge-orange .badge-full-icon {
    background: rgba(255, 140, 0, 0.2);
    color: #ff8c00;
}
.badge-full-item.badge-silver .badge-full-icon {
    background: rgba(192, 192, 192, 0.2);
    color: var(--badge-silver);
}
.badge-full-item.badge-bronze .badge-full-icon {
    background: rgba(205, 127, 50, 0.2);
    color: var(--badge-bronze);
}
/* Legacy direct classes */
.badge-full-item.gold .badge-full-icon {
    background: rgba(255, 215, 0, 0.2);
    color: var(--badge-gold);
}
.badge-full-item.silver .badge-full-icon {
    background: rgba(192, 192, 192, 0.2);
    color: var(--badge-silver);
}
.badge-full-item.bronze .badge-full-icon {
    background: rgba(205, 127, 50, 0.2);
    color: var(--badge-bronze);
}
.badge-full-item.teal .badge-full-icon {
    background: rgba(29, 211, 176, 0.15);
    color: var(--primary);
}
.badge-full-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--bg-card-hi);
    color: var(--text-muted);
}
.badge-full-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-strong);
}
.badge-full-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
}
.badge-full-progress {
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Suggested Workouts */
.suggested-list {
    margin-bottom: 16px;
}
.suggested-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    margin-bottom: 10px;
}
.suggested-card:active {
    background: var(--bg-card-hi);
}
.suggested-card.suggested-completed {
    opacity: 0.7;
    border-left: 3px solid var(--success);
    cursor: default;
}
.suggested-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(29, 211, 176, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    font-size: 1.1rem;
    padding: 2px;
}
.suggested-completed-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(54, 196, 107, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
    font-size: 1.25rem;
}
.suggested-info {
    flex: 1;
}
.suggested-name {
    font-weight: 600;
    font-size: 0.96rem;
}
.suggested-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.suggested-status {
    font-size: 0.8rem;
    color: var(--success);
}
.suggested-arrow {
    color: var(--text-muted);
}

/* Suggested Workouts: Featured Card */
.suggested-section {
    margin-bottom: var(--gap-section);
}
.suggested-featured {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.suggested-featured:active {
    transform: scale(0.98);
}
.suggested-featured-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}
.suggested-featured-content {
    flex: 1;
}
.suggested-category-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 4px;
}
.suggested-featured-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0 0 6px;
}
.suggested-meta-row {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.suggested-meta-row i {
    margin-right: 3px;
}
.suggested-muscle-tags {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.muscle-tag {
    font-size: 0.65rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 4px;
}
/* Suggested Workouts: Compact Card */
.suggested-compact {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.suggested-compact:active {
    background: var(--bg-card-hi);
}
.suggested-compact-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}
.suggested-compact-info {
    flex: 1;
    padding-left: 8px;
}
.suggested-compact-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-strong);
    display: block;
}
.suggested-compact-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.suggested-completed-card {
    opacity: 0.6;
    cursor: default;
}

/* All Completed Banner */
.all-completed-banner {
    background: var(--bg-card);
    border: 1px solid rgba(54, 196, 107, 0.2);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.all-completed-banner::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--success);
}
.all-completed-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    background: rgba(54, 196, 107, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
    font-size: 1.75rem;
}
.all-completed-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.all-completed-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Recent Workouts - Row Card Pattern */
.recent-workouts-list {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.recent-workout-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
}
.recent-workout-item:active {
    background: var(--bg-card-hi);
}
.recent-workout-date {
    text-align: center;
    min-width: 48px;
    padding: 8px;
    background: rgba(29, 211, 176, 0.1);
    border-radius: var(--radius-sm);
}
.recent-workout-day {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary);
}
.recent-workout-month {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}
.recent-workout-info {
    flex: 1;
}
.recent-workout-name {
    font-weight: 600;
    color: var(--text-strong);
}
.recent-workout-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Recent PRs - Hero Pattern */
.pr-item-new {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}
.pr-item-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--highlight-warm);
}
.pr-item-icon {
    width: 38px;
    height: 38px;
    background: rgba(247, 168, 101, 0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--highlight-warm);
    flex-shrink: 0;
}
.pr-item-content {
    flex: 1;
    min-width: 0;
}
.pr-item-exercise {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.pr-item-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.pr-item-type {
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
}
.pr-item-value {
    font-weight: 500;
    color: var(--text-main);
}
.pr-item-meta {
    color: var(--text-muted);
}

/* Legacy section header classes (use .section-header__title/action instead) */
.section-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 18px 0 8px;
    letter-spacing: -0.01em;
}
.section-link {
    font-size: 0.85rem;
    color: var(--primary);
    cursor: pointer;
}

/* Typography hierarchy - Apple Health style */
h1,
h2,
h3 {
    letter-spacing: -0.01em;
}
.card-title {
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--text-strong);
}
.card-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* ===========================================
   7. ACTIVE WORKOUT
   =========================================== */
/* #active-workout is now part of FULL-PAGE OVERLAY SECTIONS (see below) */
#active-workout {
    z-index: 40;
}

.active-workout-hero {
    background: var(--bg-card-hi);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 16px;
    margin-bottom: 16px;
    /* Removed sticky positioning - was causing iOS scrolling issues */
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.active-workout-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}
.workout-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.workout-hero-top h2 {
    font-size: 1.2rem;
    margin: 0;
}
.workout-timer-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(29, 211, 176, 0.15);
    border: 1px solid rgba(29, 211, 176, 0.3);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    color: var(--primary);
}

.workout-hero-stats {
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin: 12px 0;
}
.workout-stat {
    text-align: center;
    flex: 1;
}
.workout-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}
.workout-stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}
.workout-stat-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

#workout-rest-stat.rest-active .workout-stat-value {
    color: var(--warning);
}
#workout-rest-stat.rest-ready .workout-stat-value {
    color: var(--success);
}
#workout-rest-stat.timer-active {
    background: rgba(29, 211, 176, 0.12);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
}
#workout-rest-stat.timer-active .workout-stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    animation: timer-pulse 1.5s ease-in-out infinite;
}
#workout-rest-stat.timer-done {
    background: rgba(54, 196, 107, 0.15);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
}
#workout-rest-stat.timer-done .workout-stat-value {
    font-size: 1.1rem;
    color: var(--success);
    font-weight: 700;
}
@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.workout-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--bg-app);
    padding: 10px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin: 0 -16px;
}
.btn-full {
    width: 100%;
    min-height: 44px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-finish {
    background: var(--success);
    color: white;
}
.btn-finish:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.workout-secondary-actions {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 10px;
}
.btn-icon-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.65rem;
    cursor: pointer;
    padding: 6px 12px;
}
.btn-icon-label i {
    font-size: 1.1rem;
}
.btn-icon-label:active {
    color: var(--primary);
}
.btn-icon-label--danger:active {
    color: var(--danger);
}

/* Workout overflow menu */
.workout-overflow-menu {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-top: 8px;
    overflow: hidden;
}
.workout-overflow-menu.hidden {
    display: none;
}
.workout-overflow-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
}
.workout-overflow-item:active {
    background: var(--bg-card-hi);
}
.workout-overflow-item i {
    width: 18px;
    text-align: center;
    color: var(--text-muted);
}
.btn-more {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

/* Location Indicator */
.workout-location-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    cursor: pointer;
}
.workout-location-indicator i {
    color: var(--primary);
}

/* Exercise List */
.exercise-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exercise-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.exercise-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
}
.exercise-card:active {
    transform: scale(0.98);
    box-shadow: 0 0 0 2px var(--primary);
    background: var(--bg-card-hi);
}
.exercise-card.completed {
    background: var(--bg-card);
    border-color: rgba(54, 196, 107, 0.2);
}
.exercise-card.completed::before {
    background: var(--success);
}

.exercise-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.exercise-title-info {
    flex: 1;
    min-width: 0;
}
.exercise-title {
    font-weight: 600;
    margin-bottom: 4px;
}
.exercise-equipment-tag {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.exercise-card-chevron {
    color: var(--text-muted);
    font-size: 0.9rem;
    opacity: 0.5;
    flex-shrink: 0;
}
.exercise-card-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--primary);
    opacity: 0.7;
    margin-bottom: 4px;
}

/* Inline exercise progress */
.inline-progress {
    padding: 12px 0;
}
.inline-progress-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.inline-progress-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 120px;
    padding: 0 4px;
    margin-bottom: 8px;
}
.inline-progress-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    min-width: 0;
}
.inline-progress-bar-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    white-space: nowrap;
}
.inline-progress-bar {
    width: 100%;
    max-width: 28px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}
.inline-progress-bar-date {
    font-size: 0.55rem;
    color: var(--text-muted);
    margin-top: 4px;
    white-space: nowrap;
}
.inline-progress-summary {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.exercise-progress-display {
    margin-top: 8px;
}

/* Completed exercise sorting */
.completed-separator {
    text-align: center;
    padding: 8px 0;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.exercise-card.completed {
    opacity: 0.55;
}
.exercise-card.just-completed {
    animation: slide-to-bottom 0.4s ease;
}
@keyframes slide-to-bottom {
    0% { opacity: 0.3; transform: translateY(-10px); }
    100% { opacity: 0.55; transform: translateY(0); }
}

/* Reorder mode */
.exercise-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.1rem;
    padding: 4px 8px 4px 0;
    cursor: grab;
    touch-action: none;
}
.reorder-mode .exercise-card {
    border: 1px dashed rgba(255, 255, 255, 0.15);
}
.reorder-mode .exercise-actions-row {
    display: none;
}
.exercise-card.dragging {
    opacity: 0.85;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}
.exercise-card-placeholder {
    border: 2px dashed var(--primary);
    border-radius: var(--radius-md);
    opacity: 0.3;
    margin-bottom: 12px;
}
.btn-reorder {
    background: var(--bg-card-hi);
    color: var(--text-primary);
}

.exercise-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.progress-bar-track {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s;
}
.exercise-card.completed .progress-bar-fill {
    background: var(--success);
}
.progress-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
}
.exercise-card.completed .progress-text {
    color: var(--success);
}

/* Last session label above set table */
/* Per-set completion checkboxes */
.set-complete-cell {
    width: 40px;
    text-align: center;
}
.set-check {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--text-muted);
    padding: 4px;
    transition: color 0.15s ease;
}
.set-check.checked {
    color: var(--success);
}
.set-check:active {
    transform: scale(1.2);
}
.set-row-completed {
    background: rgba(54, 196, 107, 0.06);
}
.set-row-completed .set-input {
    opacity: 0.7;
}
.set-row-warmup {
    opacity: 0.55;
}
.set-type-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 4px;
    font-size: 0.65rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.set-type-btn:active {
    transform: scale(0.92);
}
.set-type-btn.warmup {
    color: var(--warning);
    border-color: rgba(255, 193, 7, 0.3);
}

/* Last session label above set table */
.last-session-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding: 4px 0;
}
.last-session-label i {
    margin-right: 4px;
    opacity: 0.6;
}

.exercise-actions-row {
    display: flex;
    gap: 8px;
}

/* ===========================================
   8. MODALS - BASE STYLES
   =========================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
}
.modal-title {
    font-size: 1.1rem;
    font-weight: 600;
}
.modal-close,
.close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.modal-body {
    padding: 20px;
}

/* Exercise Detail Modal - Full Screen */
#exercise-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-app);
    z-index: 600;
    overflow-y: auto;
    /* Override base dialog.modal flex alignment for full-screen style */
    display: block;
    align-items: unset;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}
#exercise-modal:not([open]) {
    display: none;
}

#exercise-modal > .modal-content {
    width: 100%;
    min-height: 100%;
    background: var(--bg-app);
    position: relative;
}
#exercise-modal > .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    z-index: 2;
}

#exercise-modal .modal-header {
    padding: 16px;
    padding-top: 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-app);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Hidden video section should not take space */
#exercise-video-section.hidden,
.video-section.hidden {
    display: none !important;
}
#modal-exercise-title {
    margin: 0;
}
.exercise-detail-name {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-strong);
}
.exercise-detail-meta {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.exercise-detail-meta i {
    margin-right: 3px;
    opacity: 0.6;
}
.exercise-detail-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    flex-wrap: wrap;
}
.exercise-detail-actions .btn-text {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.exercise-detail-actions .btn-text:active {
    background: rgba(29, 211, 176, 0.15);
    color: var(--primary);
}

#exercise-content {
    padding: 16px;
}

/* Exercise History Section */
.exercise-history-section {
    margin-bottom: 16px;
}
.exercise-history-section > div:first-child {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.exercise-history-display {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}

/* Exercise Unit Toggle in Modal */
.exercise-unit-toggle {
    margin-bottom: 16px;
}

/* Exercise Table Styling */
.exercise-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}
.exercise-table thead th {
    padding: 10px 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.exercise-table thead th:first-child {
    text-align: left;
    width: 60px;
}
.exercise-table tbody td {
    padding: 8px;
    vertical-align: middle;
}
.exercise-table tbody td:first-child {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}
.exercise-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.exercise-table tbody tr:last-child {
    border-bottom: none;
}
.exercise-table input[type='number'] {
    width: 100%;
    padding: 12px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}
.exercise-table input[type='number']:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(29, 211, 176, 0.2);
}

/* Set Action Buttons */
.set-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.set-actions button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.set-actions button:last-child {
    background: rgba(29, 211, 176, 0.15);
    border-color: rgba(29, 211, 176, 0.3);
    color: var(--primary);
}
.set-actions button:hover {
    border-color: var(--primary);
}

/* Exercise Notes Textarea */
.exercise-notes,
#exercise-content textarea {
    width: 100%;
    min-height: 60px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-family: var(--font);
    font-size: 1rem;
    resize: vertical;
    margin-bottom: 16px;
}
.exercise-notes:focus,
#exercise-content textarea:focus {
    outline: none;
    border-color: var(--primary);
}
.exercise-notes::placeholder,
#exercise-content textarea::placeholder {
    color: var(--text-muted);
}

/* Mark Complete Button */
.complete-exercise-btn,
#exercise-content .btn-success {
    width: 100%;
    padding: 16px;
    background: var(--success);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Unit Toggle */
.unit-toggle-container {
    margin-bottom: 16px;
}
.unit-toggle {
    display: inline-flex;
    background: var(--bg-card);
    border-radius: 20px;
    padding: 4px;
}
.unit-btn {
    padding: 8px 20px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
    border-radius: 16px;
    transition: all 0.2s;
}
.unit-btn.active {
    background: var(--primary);
    color: #02100e;
}

/* Rest Timer */
.modal-rest-timer {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
    margin-top: 16px;
}
.modal-rest-display {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
}
.modal-rest-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 12px;
}

/* Mark Complete Button */
.complete-exercise-btn {
    width: 100%;
    padding: 16px;
    background: var(--success);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
}

/* ===========================================
   9. WORKOUT LIBRARY / TEMPLATES
   =========================================== */
.template-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.template-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: var(--pad-card-x);
    position: relative;
    overflow: hidden;
}
.template-card::before {
    display: none;
}
.template-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.template-name {
    font-size: 1.1rem;
    font-weight: 600;
}
.template-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.template-exercises {
    margin-bottom: 14px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-sm);
}
.template-exercise-item {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
}
.template-exercise-item:last-child {
    border: none;
}

.exercise-reorder-buttons {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.btn-reorder {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.7rem;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.btn-reorder:not(:disabled):active {
    background: var(--primary);
    color: #fff;
}

.btn-reorder:disabled {
    opacity: 0.2;
    cursor: default;
}

.exercise-info {
    flex: 1;
    min-width: 0;
}

.exercise-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.template-exercises-list {
    margin-bottom: 14px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-sm);
}
/* Template exercise item layout */
.exercise-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.exercise-row .exercise-info {
    cursor: pointer;
}

/* Inline edit accordion */
.exercise-inline-edit {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.inline-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inline-edit-row {
    display: flex;
    gap: 10px;
}

.inline-edit-field {
    flex: 1;
    min-width: 0;
}

.inline-edit-field-wide {
    flex: 1 1 100%;
}

.inline-edit-field label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inline-edit-field .form-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 1rem;
    -moz-appearance: textfield;
}

.inline-edit-field .form-input::-webkit-inner-spin-button,
.inline-edit-field .form-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.inline-edit-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.inline-edit-actions .btn {
    padding: 8px 20px;
}

/* Inline add exercise search */
.inline-add-exercise {
    margin-top: 8px;
    position: relative;
}

.inline-search-wrapper {
    position: relative;
}

.inline-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.inline-search-wrapper .form-input {
    padding-left: 32px;
    width: 100%;
}

.inline-search-results {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.inline-search-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.1s;
}

.inline-search-result:last-child {
    border-bottom: none;
}

.inline-search-result:active {
    background: rgba(29, 211, 176, 0.15);
}

.inline-search-result.inline-result-added {
    opacity: 0.4;
    cursor: default;
}

.inline-result-name {
    font-weight: 500;
    color: var(--text-strong);
}

.inline-result-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.inline-result-check {
    margin-left: auto;
    color: var(--primary);
    font-size: 0.8rem;
}

.inline-search-empty {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.inline-search-empty a {
    color: var(--primary);
}

.inline-equipment-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(29, 211, 176, 0.05);
    border: 1px solid rgba(29, 211, 176, 0.2);
    border-radius: var(--radius-sm);
}

.inline-equipment-row .form-input {
    flex: 1;
}

/* Quick-add chips */
.quick-add-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.quick-add-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-right: 2px;
}

.quick-add-chip {
    background: rgba(29, 211, 176, 0.1);
    border: 1px solid rgba(29, 211, 176, 0.3);
    color: var(--primary);
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.quick-add-chip:active {
    background: rgba(29, 211, 176, 0.25);
}

/* Save as Template banner */
.save-template-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: rgba(29, 211, 176, 0.1);
    border: 1px solid rgba(29, 211, 176, 0.3);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text-strong);
    animation: slideDown 0.3s ease;
}

.save-template-banner > span {
    flex: 1 1 100%;
}
.save-template-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

.btn-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 1rem;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.exercise-number {
    color: var(--text-muted);
    font-weight: 500;
    min-width: 20px;
}
.exercise-name {
    font-weight: 500;
    color: var(--text-strong);
    flex: 1;
    min-width: 0;
}
.exercise-details {
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}
.template-exercise-equipment {
    font-size: 0.75rem;
    background: rgba(29, 211, 176, 0.15);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Template card active state */
.template-card:active {
    background: var(--bg-card-hi);
}

/* Template header styling */
.template-header h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0 0 4px 0;
}
.template-category {
    display: inline-block;
    background: rgba(29, 211, 176, 0.15);
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.template-source {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: 8px;
}

/* Template preview section */
.template-preview {
    margin: 12px 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-sm);
}
.exercise-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 500;
}
.exercise-list-preview {
    list-style: none;
    margin: 0;
    padding: 0;
}
.exercise-list-preview li {
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 8px;
}
.exercise-list-preview li:last-child {
    border-bottom: none;
}
.exercise-list-preview li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Template actions */
.template-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.template-actions .btn {
    white-space: nowrap;
    padding: 10px 16px;
    font-size: 0.85rem;
    border-radius: var(--radius-md);
}
.template-actions .btn-primary {
    flex: 1;
    background: var(--primary);
    color: #02100e;
    font-weight: 600;
}
.template-actions .btn-secondary,
.template-actions .btn-danger {
    flex: 0 0 auto;
    padding: 10px 14px;
}
.template-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}
.template-actions .btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
/* Icon-only buttons in tight spaces */
.template-actions .btn-icon {
    padding: 10px 12px;
    min-width: auto;
}
.template-actions .btn-icon .btn-text {
    display: none;
}

/* ===========================================
   10. CALENDAR / HISTORY
   =========================================== */
.calendar-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.calendar-header::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}
.calendar-title {
    text-align: center;
}
.calendar-title h1 {
    font-size: 1.2rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-strong);
}
.calendar-title h1 i {
    color: var(--primary);
}
.header-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.calendar-actions {
    text-align: center;
    margin-top: 16px;
}
.month-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.month-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}
.month-nav button {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--text-main);
    font-size: 1rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        color 0.2s;
}
.month-nav button:hover {
    background: var(--primary);
    color: #02100e;
}
.current-month {
    font-size: 1.15rem;
    font-weight: 600;
    min-width: 140px;
    text-align: center;
}

/* Calendar grid with premium styling */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.calendar-weekday {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.calendar-day {
    min-height: 42px;
    padding: 6px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.calendar-day:hover {
    background: var(--bg-card-hi);
    transform: scale(1.05);
}
.calendar-day.today {
    border: 2px solid var(--primary);
    background: rgba(29, 211, 176, 0.1);
}
.calendar-day.has-workout {
    background: rgba(29, 211, 176, 0.25);
}
.calendar-day.completed {
    background: rgba(54, 196, 107, 0.2);
}
.calendar-day.completed i {
    color: var(--success);
}
.calendar-day.missed i {
    color: var(--danger);
}
.calendar-day.other-month {
    opacity: 0.25;
}
.calendar-day .day-number {
    line-height: 1;
}
.calendar-day .day-indicator {
    font-size: 0.65rem;
    margin-top: 2px;
}

/* Workout History List */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.history-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}
.history-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}
.history-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.history-date {
    text-align: center;
    min-width: 54px;
    padding: 8px;
    background: rgba(29, 211, 176, 0.1);
    border-radius: var(--radius-sm);
}
.history-date-day {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}
.history-date-month {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 2px;
}
.history-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.history-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-strong);
}
.history-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ===========================================
   11. FORMS & INPUTS
   =========================================== */
.form-group {
    margin-bottom: 16px;
}
.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-main);
}
.form-input {
    width: 100%;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-size: 1rem;
}
.form-input:focus {
    outline: none;
    border-color: var(--primary);
}
.form-input::placeholder {
    color: var(--text-muted);
}

textarea.form-input {
    min-height: 100px;
    resize: vertical;
}

select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Remove number spinners */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type='number'] {
    -moz-appearance: textfield;
}

/* ===========================================
   12. EXERCISE LIBRARY
   =========================================== */
.exercise-library-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.exercise-library-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.exercise-library-item:hover {
    background: var(--bg-card-hi);
    border-color: rgba(255, 255, 255, 0.06);
}
.exercise-library-item:active {
    transform: scale(0.98);
}
.exercise-library-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: rgba(29, 211, 176, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}
.exercise-library-name {
    font-weight: 600;
    color: var(--text-strong);
}
.exercise-library-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Filter/Search */
.search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.search-input {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-strong);
}
.filter-btn {
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-main);
    cursor: pointer;
}
.filter-btn.active {
    border-color: var(--primary);
    color: var(--primary);
}

/* ===========================================
   13. LOCATION MANAGEMENT
   =========================================== */
.location-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.location-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}
.location-name {
    font-weight: 500;
}
.location-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Location Selector Modal */
.location-option {
    padding: 14px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.location-option:hover {
    background: var(--bg-card-hi);
}
.location-option.selected {
    border: 2px solid var(--primary);
    background: rgba(29, 211, 176, 0.1);
}

/* ===========================================
   14. EQUIPMENT PICKER
   =========================================== */
.equipment-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.equipment-option {
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.equipment-option:hover {
    border-color: var(--primary);
}
.equipment-option.selected {
    border-color: var(--primary);
    background: rgba(29, 211, 176, 0.1);
}
.equipment-name {
    font-weight: 500;
}
.equipment-location {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ===========================================
   15. NOTIFICATIONS & TOASTS
   =========================================== */
.notification {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    background: var(--bg-card-hi);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 700;
    animation: slideUp 0.3s ease;
}
.notification.success {
    border-left: 4px solid var(--success);
}
.notification.error {
    border-left: 4px solid var(--danger);
}

@keyframes slideUp {
    from {
        transform: translate(-50%, 20px);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* ===========================================
   16. LOADING STATES
   =========================================== */
.loading-screen {
    position: fixed;
    inset: 0;
    background: var(--bg-app);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 800;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hi) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}
@keyframes shimmer {
    to {
        background-position: -200% 0;
    }
}

/* ===========================================
   17. ANIMATIONS
   =========================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes scaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.3s ease;
}
.scale-in {
    animation: scaleIn 0.2s ease;
}

/* PR Badge Animation */
.pr-badge-animate {
    animation: prPop 0.5s ease;
}
@keyframes prPop {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Consistent tap feedback — all interactive elements */
.hero-card:active,
.row-card:active,
.exercise-card:active,
.template-card:active,
.workout-list-item:active,
.suggested-compact:active {
    transform: scale(0.98);
    transition: transform var(--anim-fast) ease;
}
.btn:active {
    transform: scale(0.96);
    transition: transform var(--anim-fast) ease;
}

/* Modal entrance animation */
@keyframes modal-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
dialog[open]::backdrop {
    background: rgba(0, 0, 0, 0.6);
}
dialog[open] > .modal-content {
    animation: modal-slide-up var(--anim-slow) ease forwards;
}

/* Bottom sheet entrance */
@keyframes sheet-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Page transition fade */
.section-fade-out {
    opacity: 0;
    transition: opacity var(--anim-normal) ease;
}

/* Success flash (set completion, save) */
.flash-success {
    animation: flash-green var(--anim-slow) ease;
}
@keyframes flash-green {
    0% { background-color: rgba(54, 196, 107, 0.2); }
    100% { background-color: transparent; }
}

/* Skeleton loading shimmer */
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-card) 25%,
        var(--bg-card-hi) 50%,
        var(--bg-card) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===========================================
   18. UTILITY CLASSES
   =========================================== */
.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}
.flex-center {
    align-items: center;
    justify-content: center;
}
.flex-between {
    justify-content: space-between;
}
.gap-sm {
    gap: 8px;
}
.gap-md {
    gap: 12px;
}
.gap-lg {
    gap: 16px;
}

.mt-sm {
    margin-top: 8px;
}
.mt-md {
    margin-top: 12px;
}
.mt-lg {
    margin-top: 16px;
}
.mb-sm {
    margin-bottom: 8px;
}
.mb-md {
    margin-bottom: 12px;
}
.mb-lg {
    margin-bottom: 16px;
}

.p-sm {
    padding: 8px;
}
.p-md {
    padding: 12px;
}
.p-lg {
    padding: 16px;
}

.text-center {
    text-align: center;
}
.font-bold {
    font-weight: 700;
}

/* State classes used by JS */
.collapsed > *:not(:first-child) {
    display: none;
}
.online {
    color: var(--success);
}
.offline {
    color: var(--danger);
}
.focused {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(29, 211, 176, 0.2);
}
.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.loading {
    pointer-events: none;
}

/* Content sections */
.content-section {
    display: block;
    animation: sectionFadeIn 0.15s ease;
}
.content-section.hidden {
    display: none;
}

/* Sign-in prompt */
.sign-in-prompt {
    text-align: center;
    padding: 40px 20px;
}
.sign-in-prompt h2 {
    margin-bottom: 12px;
}
.sign-in-prompt p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* Auth section */
.auth-section {
    padding: 20px;
}
.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
}
.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.user-name {
    font-weight: 600;
}
.user-email {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Sidebar profile */
.sidebar-profile {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

/* Sidebar menu */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border);
}
.sidebar-header h2 {
    margin: 0;
    font-size: 1.25rem;
}
.sidebar-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 8px;
}
.sidebar-menu {
    list-style: none;
    padding: 12px 0;
    margin: 0;
}
.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: var(--text-main);
    text-decoration: none;
    transition: all 0.2s;
}
.sidebar-menu li a:hover {
    background: rgba(29, 211, 176, 0.1);
    color: var(--primary);
}
.sidebar-menu li a i {
    width: 20px;
    text-align: center;
}
.sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}
.sidebar-section-title {
    padding: 8px 20px;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
}
.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sidebar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.sidebar-user-details {
    flex: 1;
    min-width: 0;
}
.sidebar-user-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}
.sidebar-user-email {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-sign-out-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
}
.sidebar-sign-out-btn:hover {
    color: var(--danger);
}

/* Loading screen */
.loading-screen {
    position: fixed;
    inset: 0;
    background: var(--bg-app);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 800;
}
.loading-content {
    text-align: center;
    padding: 20px;
}
.loading-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
}
.loading-logo.loading-logo-large {
    width: 200px;
    height: 200px;
    margin-bottom: 24px;
}
.loading-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
}
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}
.loading-message {
    color: var(--text-muted);
}
.loading-signin-prompt {
    margin-top: 24px;
}
.loading-signin-prompt p {
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Header */
.header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--bg-app);
    border-bottom: 1px solid var(--border);
    position: relative;
}
.header.hidden {
    display: none !important;
}
#auth-section.hidden {
    display: none !important;
}
.header .menu-toggle {
    position: absolute;
    left: 12px;
    background: none;
    border: none;
    color: var(--text-strong);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 8px;
}
.logo-img {
    height: 80px;
}
.logo-fallback {
    width: 80px;
    height: 80px;
    background: var(--primary);
    color: #02100e;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Workout controls / Auth section */
.workout-controls {
    padding: 12px 16px;
    display: flex;
    justify-content: center;
}
.user-display {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Resume banner styles */
.stats-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.stats-section-title {
    font-size: 1rem;
    font-weight: 600;
}
/* Redesigned resume banner */
.resume-banner {
    background: linear-gradient(135deg, rgba(29, 211, 176, 0.08), rgba(29, 211, 176, 0.02));
    border: 1px solid rgba(29, 211, 176, 0.2);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: var(--gap-section);
    position: relative;
    overflow: hidden;
}
.resume-banner-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.resume-banner-header h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-strong);
    flex: 1;
    margin: 0;
}
.resume-pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    display: inline-block;
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(54, 196, 107, 0.4); }
    50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(54, 196, 107, 0); }
}
.resume-time-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.resume-workout-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 12px;
}
.resume-ring-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.resume-ring {
    flex-shrink: 0;
}
.resume-ring circle:last-child {
    transition: stroke-dashoffset 0.5s ease;
}
.resume-stats-compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.resume-stats-compact strong {
    color: var(--text-strong);
    font-weight: 600;
}
.resume-banner-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.btn-full {
    width: 100%;
}
.btn-text-small {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 8px;
}
.btn-text-small:active {
    color: var(--danger);
}

/* ===========================================
   19. RESPONSIVE
   =========================================== */
@media (max-width: 480px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
    }
    .progress-ring-container {
        margin: 0 auto;
    }
    .hero-stats {
        flex-wrap: wrap;
    }

    .set-row {
        grid-template-columns: 40px 1fr 1fr auto;
        gap: 8px;
    }

    .template-actions {
        flex-wrap: wrap;
    }
    .template-actions .btn {
        flex: 1;
        min-width: 100px;
    }
}

/* ===========================================
   20. WORKOUT SELECTOR
   =========================================== */
/* Workout Selector Page */
#workout-selector {
    padding: var(--pad-page);
    padding-top: 0; /* Header handles its own top padding */
}
#workout-selector .section-header-row {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-app);
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
}
#workout-selector .section-header {
    margin-bottom: 24px;
    display: block;
}
#workout-selector .section-header h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: var(--text-strong);
    line-height: 1.2;
}
#workout-selector .section-header p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.workout-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.workout-option {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.workout-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    opacity: 0;
    transition: opacity 0.2s;
}
.workout-option:hover {
    background: var(--bg-card-hi);
    border-color: rgba(29, 211, 176, 0.3);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.workout-option:hover::before {
    opacity: 1;
}
.workout-option:active {
    transform: scale(0.98);
}
.workout-option i {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    background: rgba(29, 211, 176, 0.12);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
}
.workout-option span {
    font-weight: 700;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 6px;
    color: var(--text-strong);
}
.workout-option p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* ===========================================
   21. MODALS (Additional Styles)
   =========================================== */
/* Base modal - bottom sheet style */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 500;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: modalFadeIn 0.2s ease;
}
.modal.hidden {
    display: none !important;
}

/* Dialog-based modals (e.g., exercise detail) */
dialog.modal {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--text-primary);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
dialog.modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
}
dialog.modal:not([open]) {
    display: none;
}

.modal > .modal-content {
    background: var(--bg-app);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: none;
    animation: modalSlideUp 0.25s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes modalSlideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.modal-content-small,
.modal-small {
    max-width: 400px;
    margin: auto;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.modal-medium {
    max-width: 500px;
    margin: auto;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.modal-description {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 16px;
    line-height: 1.5;
}
.close-btn:active {
    color: var(--text-strong);
}
.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}
.modal-actions-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

/* Full-screen modals (no dead space at top) */
#exercise-library-modal,
#template-editor-modal,
#add-exercise-modal,
#template-selection-modal {
    align-items: stretch;
}
#exercise-library-modal > .modal-content,
#template-editor-modal > .modal-content,
#add-exercise-modal > .modal-content,
#template-selection-modal > .modal-content {
    max-height: 100vh; /* fallback */
    max-height: 100dvh;
    /* min-height removed (Phase 1.1) — only outermost wrapper should set viewport height */
    border-radius: 0;
}

/* Modals that appear above exercise library modal (which gets z-index 1100 inline) */
#location-selector-modal,
#workout-location-selector-modal,
#equipment-picker-modal {
    z-index: 1200;
}

/* Equipment editor section appears above exercise modal */
#equipment-editor-section {
    z-index: 1150;
}

/* Equipment Reassignment Modal */
.reassign-header-info {
    margin-bottom: 8px;
}
.reassign-current {
    margin-bottom: 6px;
    font-size: 0.9rem;
}
.reassign-current .text-muted {
    margin-right: 4px;
}
.reassign-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    margin-top: 8px;
}
.reassign-exercise-option {
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease;
}
.reassign-exercise-option:active {
    transform: scale(0.98);
}
.reassign-exercise-option.selected {
    border-color: var(--primary);
    background: rgba(29, 211, 176, 0.06);
}
.reassign-exercise-name {
    font-weight: 600;
    font-size: 0.9rem;
}
.reassign-exercise-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.reassign-impact {
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}
.reassign-impact p {
    margin: 0;
    font-size: 0.9rem;
}
.reassign-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
}
.reassign-progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.reassign-progress-text {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.reassign-confirm-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.reassign-confirm-actions .btn {
    flex: 1;
}

/* Equipment exercise videos list */
.equipment-exercise-videos-list {
    margin-bottom: 8px;
}
.equipment-video-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
}
.equipment-video-info {
    flex: 1;
    min-width: 0;
}
.equipment-video-exercise {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
}
.equipment-video-url {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Equipment Library Page */
.equipment-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-xs);
}
.location-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-xs);
}
.btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    border-radius: 50%;
}
.btn-icon:active {
    background: rgba(255, 255, 255, 0.06);
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-header__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Settings Page */
.settings-page {
    padding: 16px;
}
.settings-group {
    margin-bottom: 24px;
}
.settings-group-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding: 0 4px;
}
.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.settings-label {
    flex: 1;
    min-width: 0;
}
.settings-name {
    font-size: 0.95rem;
    color: var(--text-primary);
    display: block;
}
.settings-description {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}
.settings-control select {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.85rem;
}
.toggle-switch {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.toggle-switch input {
    display: none;
}
.toggle-slider {
    width: 48px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    position: relative;
    display: inline-block;
    transition: background 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--primary);
}
.toggle-slider::after {
    content: '';
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider::after {
    transform: translateX(20px);
}

/* Onboarding */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-onboarding);
    background: var(--bg-app);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.onboarding-card {
    text-align: center;
    max-width: 340px;
    width: 100%;
}
.onboarding-card h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.onboarding-card p {
    color: var(--text-muted);
    margin-bottom: 24px;
    font-size: 0.95rem;
}
.onboarding-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    color: var(--primary);
}
.onboarding-choices {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.onboarding-choices .btn {
    flex: 1;
    padding: 20px 16px;
    font-size: 1.1rem;
}
.onboarding-goal-picker {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.onboarding-goal-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.onboarding-goal-btn.active {
    border-color: var(--primary);
    background: rgba(29, 211, 176, 0.15);
    color: var(--primary);
}

/* Workout Detail Modal */
.workout-detail-summary {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 20px;
}
.workout-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.workout-meta div {
    font-size: 0.9rem;
    color: var(--text-main);
}
.workout-meta strong {
    color: var(--text-muted);
}
.workout-exercises {
    margin-bottom: 20px;
}
.workout-exercises > h3 {
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--text-strong);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.workout-exercises h5,
.exercise-detail-item h5 {
    color: var(--primary);
    margin: 0 0 10px 0;
    font-size: 0.95rem;
}
.exercise-detail-item {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 12px;
    border-left: 3px solid var(--primary);
}
.exercise-detail-item:last-child {
    margin-bottom: 0;
}
.exercise-notes {
    margin-top: 8px;
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.sets-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.set-badge {
    background: var(--bg-surface);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-main);
}
.no-sets-text {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ===========================================
   22. CALENDAR (Additional Styles)
   =========================================== */
.month-navigation {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nav-button {
    width: 36px;
    height: 36px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-button:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.current-month {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 140px;
    text-align: center;
}
/* Calendar title/header-actions moved to section 10 above */
.calendar-container {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
}
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 8px;
}
.weekday {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    padding: 8px 0;
}
/* Calendar grid - duplicate removed, see above */
.calendar-day:hover {
    background: var(--bg-card-hi);
}
.calendar-day.other-month {
    color: var(--text-muted);
    opacity: 0.4;
}
.calendar-day.today {
    background: rgba(29, 211, 176, 0.15);
    border: 1px solid var(--primary);
}
.calendar-day.has-workout {
    background: rgba(29, 211, 176, 0.1);
    cursor: pointer;
}
.calendar-day.has-workout:active {
    transform: scale(0.95);
    background: rgba(29, 211, 176, 0.2);
}
.calendar-day .day-number {
    font-weight: 500;
}
.calendar-day .workout-indicator {
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    margin-top: 2px;
}
.calendar-day .workout-status-icon {
    font-size: 0.65rem;
    margin-top: 2px;
}
.calendar-day .workout-status-icon.completed {
    color: var(--success);
}
.calendar-day .workout-status-icon.in-progress {
    color: var(--warning);
}
.calendar-day .workout-status-icon.missed {
    color: var(--danger);
}

/* Calendar workout icons */
.calendar-day .workout-icon {
    font-size: 0.75rem;
    margin-top: 2px;
}
.calendar-day .workout-icon.status-completed {
    color: var(--success);
}
.calendar-day .workout-icon.status-incomplete {
    color: var(--warning);
}
.calendar-day .workout-icon.status-partial {
    color: var(--warning);
}
.calendar-day .workout-icon.status-cancelled {
    color: var(--text-muted);
}

/* Calendar legend */
.calendar-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 0 4px;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.legend-dot-completed {
    background: var(--success);
}
.legend-dot-incomplete {
    background: var(--warning);
}
.legend-dot-cancelled {
    background: var(--text-muted);
}
.legend-dot-today {
    background: transparent;
    border: 2px solid var(--highlight-warm);
    width: 6px;
    height: 6px;
}

/* Schema v3.0: Multiple workouts per day - count badge */
.workout-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--primary);
    color: var(--bg-app);
    font-size: 0.6rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.calendar-day .workout-icon {
    position: relative;
}

/* Recent workouts list below calendar */
.recent-workouts-section {
    margin-top: 0.5rem;
}
.recent-workouts-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.recent-workout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: background 0.15s;
}
.recent-workout-item:active {
    background: var(--bg-card-hi);
}
.recent-workout-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-strong);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.recent-workout-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* Schema v3.0: Workout picker for multiple workouts */
.workout-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
}
.workout-picker-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}
.workout-picker-item:hover {
    background: var(--bg-card-hi);
    border-color: var(--primary);
}
.workout-picker-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: rgba(29, 211, 176, 0.12);
    color: var(--primary);
    flex-shrink: 0;
}
.workout-picker-icon.push {
    background: rgba(244, 67, 54, 0.12);
    color: #f44336;
}
.workout-picker-icon.pull {
    background: rgba(33, 150, 243, 0.12);
    color: #2196f3;
}
.workout-picker-icon.legs {
    background: rgba(255, 152, 0, 0.12);
    color: #ff9800;
}
.workout-picker-icon.cardio {
    background: rgba(156, 39, 176, 0.12);
    color: #9c27b0;
}
.workout-picker-info {
    flex: 1;
    min-width: 0;
}
.workout-picker-name {
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 4px;
}
.workout-picker-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===========================================
   23. EXERCISE MANAGER & LIBRARY
   =========================================== */
.exercise-library-view {
    padding: 16px;
}
.exercise-library-header {
    margin-bottom: 16px;
}
.exercise-library-controls {
    margin-bottom: 16px;
}
.exercise-search-row {
    margin-bottom: 12px;
}
.exercise-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.exercise-search-wrapper.full-width {
    width: 100%;
}
.exercise-search-wrapper i {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
}
.exercise-search-input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-strong);
    font-size: 1rem;
}
.exercise-search-input:focus {
    outline: none;
    border-color: var(--primary);
}

.search-container {
    margin-bottom: 12px;
}
.filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

/* Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.category-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 20px 12px;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: all 0.2s;
}
.category-card:hover {
    border-color: var(--primary);
    background: var(--bg-card-hi);
}
.category-icon {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 8px;
    display: block;
}
.category-name {
    font-weight: 600;
    font-size: 0.85rem;
}

/* Exercise List View */
.exercise-list-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.btn-back-category {
    width: var(--tap);
    height: var(--tap);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    cursor: pointer;
}
.exercise-list-title {
    font-size: 1.25rem;
    margin: 0;
}
.exercise-list-search {
    margin-bottom: 12px;
}
.exercise-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.exercise-list-footer {
    position: sticky;
    bottom: 0;
    padding: 16px 0;
    background: linear-gradient(transparent, var(--bg-app) 20%);
}
.btn-add-exercise-bottom {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-md);
    color: #02100e;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Equipment Filter Pills */
.equipment-filter-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 16px;
}
.filter-pill {
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-main);
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}
.filter-pill:hover {
    border-color: var(--primary);
}
.filter-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #02100e;
}

/* ===========================================
   WORKOUT LIBRARY (Category Grid + List View)
   =========================================== */
.workout-library-view {
    padding: 16px;
}
.workout-library-view.hidden {
    display: none;
}

.workout-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Workout List Item (like exercise library items) */
.workout-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition:
        background 0.15s,
        transform 0.15s;
}
.workout-list-item:hover {
    background: var(--bg-card-hi);
}
.workout-list-item:active {
    transform: scale(0.98);
}

.workout-item-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: rgba(29, 211, 176, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.workout-item-content {
    flex: 1;
    min-width: 0;
}

.workout-item-name {
    font-weight: 600;
    color: var(--text-strong);
    font-size: 1rem;
    margin-bottom: 2px;
}

.workout-item-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.workout-item-exercises {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workout-item-edit {
    padding: 8px 14px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    flex-shrink: 0;
}
.workout-item-edit:hover {
    color: var(--primary);
}

/* ===========================================
   24. EDIT EXERCISE SECTION
   =========================================== */
.edit-exercise-container {
    padding: 0 16px 32px;
}
.edit-exercise-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    margin: 0 -16px 16px;
    position: sticky;
    top: 0;
    background: var(--bg-app);
    z-index: 10;
}
.edit-exercise-header h2 {
    font-size: 1.1rem;
    margin: 0;
    flex: 1;
    text-align: center;
}
.btn-back,
.btn-save {
    min-width: 60px;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-back {
    color: var(--text-muted);
}

.edit-section {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
}
.edit-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--text-strong);
}
.edit-section-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: -8px 0 12px;
}
.optional-tag {
    font-weight: 400;
    color: var(--text-muted);
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}
.input-with-icon i {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    z-index: 1;
}
/* Any input inside icon wrapper needs left padding for the icon */
.input-with-icon input {
    padding-left: 42px !important;
}
.edit-input-large,
.edit-input-full {
    width: 100%;
    padding: 12px 16px 12px 42px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-size: 1rem;
}
.edit-input-large:focus,
.edit-input-full:focus {
    outline: none;
    border-color: var(--primary);
}

.edit-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.edit-row-three {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
.edit-field label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.edit-select,
.edit-input-number {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-size: 1rem;
}
.edit-select {
    appearance: none;
}

.edit-subsection-title {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 16px 0 8px;
}
.edit-equipment-list {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.edit-equipment-empty {
    text-align: center;
    padding: 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Equipment item cards in edit exercise section */
.edit-equipment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        border-color 0.2s,
        background 0.2s;
}
.edit-equipment-item:hover {
    border-color: var(--primary);
    background: var(--bg-card-hi);
}
.edit-equipment-item.selected {
    border-color: var(--primary);
    background: rgba(29, 211, 176, 0.1);
}
.edit-equipment-item-info {
    flex: 1;
    min-width: 0;
}
.edit-equipment-item-name {
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 2px;
}
.edit-equipment-item-location {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.edit-equipment-item-edit {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 12px;
    transition:
        border-color 0.2s,
        color 0.2s;
}
.edit-equipment-item-edit:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.edit-add-equipment {
    margin-top: 16px;
}
.edit-equipment-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.btn-add-equipment {
    padding: 12px;
    background: var(--bg-card-hi);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-add-equipment:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.edit-delete-container {
    margin-top: 24px;
    text-align: center;
}
.btn-delete-exercise {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    color: var(--danger);
    font-weight: 500;
    cursor: pointer;
}
.btn-delete-exercise:hover {
    background: rgba(227, 93, 106, 0.1);
}

.edit-selected-equipment {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(29, 211, 176, 0.1);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}
.edit-selected-equipment i {
    color: var(--primary);
}
.btn-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

/* ===========================================
   25. MANUAL WORKOUT MODAL
   =========================================== */
.manual-workout-modal {
    max-height: 95vh;
}
.manual-step {
    padding: 20px;
}
.manual-step.hidden {
    display: none;
}

.manual-workout-source-section {
    margin-top: 20px;
}
.section-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.workout-source-option {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
}
.source-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    cursor: pointer;
}
.source-header i:first-child {
    color: var(--primary);
}
.source-header span {
    flex: 1;
    font-weight: 500;
}
.toggle-icon {
    color: var(--text-muted);
    transition: transform 0.2s;
}
.source-content {
    padding: 0 14px 14px;
}
.source-content.hidden {
    display: none;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.step-info {
    flex: 1;
}
.step-info h4 {
    margin: 0 0 4px;
}
.step-info p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.step-actions {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.manual-location-section {
    margin-bottom: 16px;
}
.manual-location-row {
    display: flex;
    gap: 10px;
}
.manual-exercises-container {
    margin-bottom: 16px;
}
.manual-add-exercise-section {
    margin-bottom: 16px;
}
.manual-final-details {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.library-loading {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
}

/* ===========================================
   26. REST TIMER (Floating)
   =========================================== */
.rest-timer {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card-hi);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 24px;
    box-shadow: var(--shadow-lg);
    z-index: 400;
    text-align: center;
}
.timer-display {
    margin-bottom: 12px;
}
#timer-countdown {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
}
.timer-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ===========================================
   27. LOCATION MANAGEMENT
   =========================================== */
.location-management-content {
    padding: 16px;
}
.current-location-card {
    background: var(--bg-card);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 20px;
}
.current-location-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.current-location-display {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
}
.current-location-display i {
    color: var(--primary);
}

.location-map-container {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    height: 200px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}
.location-map-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.location-map-placeholder i {
    font-size: 2rem;
    margin-bottom: 8px;
}
.map-hint {
    font-size: 0.8rem;
}
.map-location-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
}

.location-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.location-list-header h3 {
    margin: 0;
    font-size: 1rem;
}
.location-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.location-management-list {
    margin-bottom: 20px;
}

/* Location Items */
.location-item,
.location-management-item {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.location-management-item.active {
    border: 1px solid var(--primary);
    background: var(--bg-card-hi);
}
.location-item-info {
    display: flex;
    gap: 12px;
    flex: 1;
    cursor: pointer;
}
.location-item-icon {
    width: 40px;
    height: 40px;
    background: rgba(29, 211, 176, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}
.location-item-details {
    flex: 1;
}
.location-item-name {
    font-weight: 600;
    margin-bottom: 2px;
}
.location-item-name .current-badge {
    background: var(--primary);
    color: #02100e;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    text-transform: uppercase;
}
.location-item-address {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.location-item-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.location-item-actions {
    display: flex;
    gap: 8px;
}
.location-item-actions button {
    width: 36px;
    height: 36px;
    background: var(--bg-card-hi);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.location-item-actions button:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.location-item-actions button.btn-delete:hover,
.location-item-actions button.delete-btn:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.add-location-form {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
}
.add-location-form h4 {
    margin: 0 0 12px;
    font-size: 0.9rem;
}
.add-location-inputs {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.add-location-inputs .input-field {
    flex: 1;
}
.input-field {
    padding: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-size: 1rem;
}
.input-field:focus {
    outline: none;
    border-color: var(--primary);
}

/* Add Location Modal Enhancements */
.location-method-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.method-tab {
    flex: 1;
    min-width: 100px;
    padding: 10px 12px;
    background: var(--bg-card-hi);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}
.method-tab:hover {
    border-color: var(--primary);
    color: var(--text-strong);
}
.method-tab.active {
    background: rgba(29, 211, 176, 0.15);
    border-color: var(--primary);
    color: var(--primary);
}
.location-method-content {
    min-height: 120px;
}
.gps-status-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card-hi);
    border-radius: var(--radius-md);
    color: var(--text-muted);
}
.gps-status-box.success {
    background: rgba(29, 211, 176, 0.1);
    color: var(--primary);
}
.gps-status-box.error {
    background: rgba(255, 107, 107, 0.1);
    color: var(--danger);
}
.search-input-wrapper {
    display: flex;
    gap: 8px;
}
.search-input-wrapper .form-input {
    flex: 1;
}
.search-btn {
    width: 44px;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-sm);
    color: #000;
    cursor: pointer;
}
.search-btn:hover {
    opacity: 0.9;
}
.address-results {
    margin-top: 12px;
    max-height: 200px;
    overflow-y: auto;
}
.address-result-item {
    padding: 12px;
    background: var(--bg-card-hi);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.address-result-item:hover {
    border-color: var(--primary);
}
.address-result-item.selected {
    border-color: var(--primary);
    background: rgba(29, 211, 176, 0.1);
}
.address-result-name {
    font-weight: 500;
    color: var(--text-strong);
}
.address-result-address {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.method-description {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.add-location-map {
    height: 200px;
    background: var(--bg-card-hi);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}
.map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
}
.map-placeholder i {
    font-size: 2rem;
    margin-bottom: 8px;
}
.pin-coords {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 8px;
}
.selected-coords {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(29, 211, 176, 0.1);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    margin-top: 16px;
    color: var(--primary);
    font-size: 0.9rem;
}

/* ===========================================
   28. EQUIPMENT PICKER
   =========================================== */
.equipment-picker-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.equipment-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.equipment-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.equipment-picker-item:hover {
    border-color: var(--primary);
}
.equipment-picker-item.selected {
    border-color: var(--primary);
    background: rgba(29, 211, 176, 0.1);
}
.form-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.form-section-divider::before,
.form-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.equipment-picker-add-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===========================================
   29. VIDEO SECTION
   =========================================== */
.video-section {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}
.video-section.hidden {
    display: none !important;
}
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-source-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}
.video-source-label.hidden {
    display: none;
}

/* Exercise modal specific styles */
.exercise-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 500;
    display: none; /* Hidden by default */
    align-items: flex-end;
    justify-content: center;
}
.exercise-modal.active {
    display: flex;
} /* Show when active class added */
.exercise-modal.hidden {
    display: none;
}
.exercise-modal-content {
    background: var(--bg-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}
.exercise-unit-toggle {
    padding: 12px 16px;
}

/* App section for full-page views */
.app-section {
    position: fixed;
    inset: 0;
    background: var(--bg-app);
    z-index: 600;
    overflow-y: auto;
    animation: sectionFadeIn 0.15s ease;
}
.app-section.hidden {
    display: none;
}

@keyframes sectionFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Equipment locations list in editor */
.equipment-locations-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.equipment-location-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    gap: 12px;
}
.equipment-location-item .location-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    flex: 1;
    min-width: 0;
}
.equipment-location-item .location-name i {
    color: var(--primary);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.equipment-location-item .remove-location-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}
.equipment-location-item .remove-location-btn:hover {
    background: rgba(255, 82, 82, 0.15);
    border-color: var(--danger);
    color: var(--danger);
}
.equipment-locations-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.equipment-add-location-form {
    margin-top: 12px;
}

/* Location prompt text */
.location-prompt-text {
    font-size: 0.95rem;
    color: var(--text-main);
    margin-bottom: 16px;
}

/* Template categories */
.template-categories {
    margin-top: 8px;
}

/* ===========================================
   FULL-PAGE OVERLAY SECTIONS
   Standard layout: fixed, padding: 16px, bottom: 70px for nav
   z-index hierarchy: active-workout(40) < history(50) < workout-selector(60) < locations(75) < workout-management(100) < exercise-manager(650) < edit-exercise(700)
   =========================================== */
#active-workout,
#workout-history-section,
#workout-selector,
#location-management-section,
#workout-management-section,
#exercise-manager-section,
#edit-exercise-section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 70px; /* Leave room for bottom nav */
    background: var(--bg-app);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    box-sizing: border-box;
}
#workout-history-section {
    z-index: 50;
}
#workout-selector {
    z-index: 60;
}
#location-management-section {
    z-index: 75;
}
#workout-management-section {
    z-index: 100;
}
#exercise-manager-section {
    z-index: 650;
}
#edit-exercise-section {
    z-index: 700;
}

#active-workout.hidden,
#workout-history-section.hidden,
#workout-selector.hidden,
#location-management-section.hidden,
#workout-management-section.hidden,
#exercise-manager-section.hidden,
#edit-exercise-section.hidden {
    display: none !important;
}

/* Section content styling for full-page sections */
.section-content {
    padding: 20px 16px;
    background: var(--bg-app);
}
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -16px -16px 20px -16px; /* Offset parent section padding so header is flush */
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.section-header-row .section-title {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-strong);
}
.section-header-row .section-title i {
    color: var(--primary);
    font-size: 1.1rem;
}
.section-header-row .btn-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 1rem;
    cursor: pointer;
}
.section-header-row .btn-back:hover {
    background: rgba(255, 255, 255, 0.12);
}
.section-header-row .btn {
    white-space: nowrap;
}
.section-body {
    padding: 0;
}

/* ===========================================
   31. EXERCISE LIBRARY CARDS (Apple-style flat)
   =========================================== */
.exercise-card-new {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.exercise-card-new::before {
    display: none;
}
.exercise-card-new:active {
    background: var(--bg-card-hi);
}
.exercise-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(29, 211, 176, 0.12);
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-size: 1.2rem;
    flex-shrink: 0;
}
.exercise-card-info {
    flex: 1;
    min-width: 0;
}
.exercise-card-name {
    display: block;
    font-weight: 600;
    color: var(--text-strong);
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exercise-card-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 3px;
}
.exercise-card-edit {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
}
.exercise-card-edit:active {
    background: rgba(255, 255, 255, 0.05);
}

/* Quick Add Chips (recent exercises) */
.quick-add-section {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.quick-add-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.quick-add-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.quick-add-chip {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 100px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.quick-add-chip:active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Library Exercise Cards (Add Exercise modal) */
.library-exercise-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}
.library-exercise-card::before {
    display: none;
}
.library-exercise-card:active {
    background: var(--bg-card-hi);
}
.library-exercise-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.favorite-toggle {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.9rem;
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s;
}
.favorite-toggle.active {
    color: var(--badge-gold);
    opacity: 1;
}
.favorite-toggle:active {
    transform: scale(1.2);
}
.favorites-section {
    margin-bottom: 8px;
}
.favorite-chip {
    border-color: rgba(255, 215, 0, 0.3) !important;
}
.library-exercise-card h5 {
    margin: 0 0 8px 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-strong);
}
.library-exercise-info {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.library-exercise-stats {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-sm);
}
.library-exercise-card .btn {
    width: 100%;
}

/* Notifications container */
.notifications-container {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 700;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===========================================
   32. MORE MENU (Bottom Nav Enhancement)
   =========================================== */
.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 8px auto 12px;
    cursor: grab;
}
.more-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 740;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.more-menu-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
.more-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: 750;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    max-height: 70vh;
    overflow-y: auto;
}
.more-menu.visible {
    transform: translateY(0);
}
.more-menu-content {
    padding: 8px 0;
}
.more-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
}
.more-menu-item:hover {
    background: var(--bg-card);
}
.more-menu-item i {
    width: 20px;
    text-align: center;
    color: var(--text-muted);
}
.more-menu-signout {
    color: var(--danger);
}
.more-menu-signout i {
    color: var(--danger);
}
.more-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}
.more-menu-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.more-menu-user i {
    width: 20px;
    text-align: center;
}

/* ===========================================
   33. FORM INPUT ELEMENTS
   =========================================== */
.edit-exercise-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}
.edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.edit-field label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}
.edit-input-full,
.edit-input-large {
    width: 100%;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-size: 1rem;
}
.edit-input-full:focus,
.edit-input-large:focus {
    outline: none;
    border-color: var(--primary);
}
.edit-input-number {
    width: 80px;
    padding: 10px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-size: 1rem;
}
.btn-save {
    background: var(--primary);
    color: #02100e;
    border: none;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
}
.btn-save:hover {
    background: var(--primary-dark);
}

/* ===========================================
   34. EXERCISE CARD DYNAMIC ELEMENTS
   =========================================== */
.exercise-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.exercise-progress-row {
    margin: 12px 0;
}
.exercise-actions-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.exercise-edit-icon {
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
}
.exercise-edit-icon:hover {
    color: var(--primary);
}
.exercise-equipment-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    background: rgba(29, 211, 176, 0.15);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 4px;
}
.equipment-change-icon {
    cursor: pointer;
    opacity: 0.7;
}
.equipment-change-icon:hover {
    opacity: 1;
}
.exercise-history-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.exercise-unit-toggle,
.unit-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg-card);
    border-radius: 20px;
    padding: 4px;
}
.unit-btn {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.unit-btn.active {
    background: var(--primary);
    color: #02100e;
    font-weight: 600;
}
.exercise-complete-section {
    margin-top: 16px;
}
.exercise-sets {
    margin: 12px 0;
}
.exercise-table {
    width: 100%;
}
.exercise-summary {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ===========================================
   35. REST TIMER IN EXERCISE MODAL
   =========================================== */
.modal-rest-timer {
    background: var(--bg-card-hi);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin: 8px 0;
}
.modal-rest-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.modal-rest-exercise {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    flex-shrink: 1;
    min-width: 0;
}
.modal-rest-display {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
}
.modal-rest-controls {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.modal-rest-controls .btn {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* ===========================================
   36. CONGRATS BANNER
   =========================================== */
.congrats-banner {
    background: var(--bg-card);
    border: 1px solid rgba(29, 211, 176, 0.3);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}
.congrats-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.congrats-icon {
    font-size: 2rem;
}
.congrats-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-strong);
}
.congrats-message {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ===========================================
   37. STATS & BREAKDOWN
   =========================================== */
.stats-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
}
.stats-section-title {
    font-weight: 600;
    color: var(--text-strong);
}
.stats-header-bar {
    margin-bottom: 16px;
}
.stats-loading,
.stats-error {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
}
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
}
.stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-strong);
}
.breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.breakdown-row:last-child {
    border: none;
}
.breakdown-name {
    color: var(--text-main);
}
.breakdown-count {
    font-weight: 600;
    color: var(--primary);
}

/* ===========================================
   38. BADGES (Full Grid View)
   =========================================== */
.badge-full-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}
.badge-full-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.5rem;
}
.badge-full-name {
    font-weight: 600;
    color: var(--text-strong);
}
.badge-full-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.badge-full-progress {
    font-size: 0.75rem;
    color: var(--primary);
    margin-top: 4px;
}

/* ===========================================
   39. PR COMPONENTS
   =========================================== */
.prs-card-new {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    padding: 18px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.prs-card-new::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.prs-list-new {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* PR Achievement Cards (redesigned) */
.pr-achievement-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--gap-section);
}
.pr-achievement-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    border-left: 3px solid var(--badge-gold);
}
.pr-achievement-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.pr-achievement-exercise {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-strong);
    flex: 1;
}
.pr-achievement-date {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.pr-achievement-body {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-left: 26px;
}
.pr-achievement-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}
.pr-achievement-detail {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Volume Trend Chip */
.volume-trend-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: var(--gap-section);
}
.volume-trend-chip.up {
    background: rgba(54, 196, 107, 0.1);
    color: var(--success);
}
.volume-trend-chip.down {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Workout Completion Summary */
.completion-summary {
    padding: 24px 20px;
    text-align: center;
}
.completion-header {
    margin-bottom: 24px;
}
.completion-header h2 {
    margin: 12px 0 4px;
    font-size: 1.4rem;
    color: var(--text-strong);
}
.completion-workout-name {
    font-size: 0.9rem;
    color: var(--text-muted);
}
.completion-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}
.completion-stat {
    text-align: center;
    padding: 12px 4px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
}
.completion-stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
}
.completion-stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}
.completion-prs {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 20px;
    text-align: left;
}
.completion-prs h3 {
    font-size: 0.95rem;
    margin: 0 0 10px;
    color: var(--text-strong);
}
.completion-pr-item {
    font-size: 0.85rem;
    color: var(--text-main);
    padding: 4px 0;
}
.completion-notes-section {
    margin-bottom: 20px;
    text-align: left;
}
.completion-notes-section label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.completion-notes-section textarea {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    padding: 10px 12px;
    font-size: 0.9rem;
    resize: none;
    font-family: inherit;
    box-sizing: border-box;
}
.completion-notes-section textarea::placeholder {
    color: var(--text-muted);
}
.completion-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.prs-browser {
    padding: 16px;
}
.prs-empty-new,
.prs-expanded-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
}
.prs-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 8px;
}
.pr-exercise-item {
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-bottom: 8px;
}
.pr-exercise-title {
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 8px;
}
.pr-equipment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.pr-equipment-item:last-child {
    border: none;
}
.pr-equip-name {
    color: var(--text-main);
}
.pr-equip-value {
    font-weight: 600;
    color: var(--primary);
}
.pr-equip-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.pr-bodypart-group {
    margin-bottom: 16px;
}
.pr-bodypart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
}
.pr-bodypart-name {
    font-weight: 600;
    color: var(--text-strong);
}
.pr-bodypart-count {
    background: var(--primary);
    color: #02100e;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}
.pr-bodypart-content {
    padding-left: 12px;
}

/* ===========================================
   40. EQUIPMENT PICKER
   =========================================== */
.equipment-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-bottom: 8px;
}
.equipment-option:hover {
    border-color: var(--primary);
}
.equipment-option.selected {
    border-color: var(--primary);
    background: rgba(29, 211, 176, 0.1);
}
.equipment-option-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 50%;
    flex-shrink: 0;
}
.equipment-option.selected .equipment-option-radio {
    border-color: var(--primary);
    background: var(--primary);
}
.equipment-option-details {
    flex: 1;
}
.equipment-option-name {
    font-weight: 500;
    color: var(--text-strong);
}
.equipment-option-location {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.equipment-info {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.equipment-locations-empty,
.equipment-picker-empty {
    text-align: center;
    padding: 16px;
    color: var(--text-muted);
}

/* ===========================================
   41. MANUAL WORKOUT COMPONENTS
   =========================================== */
.manual-exercise-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.manual-exercise-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.manual-exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.manual-exercise-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.manual-exercise-equipment {
    font-size: 0.75rem;
    background: rgba(29, 211, 176, 0.15);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 4px;
}
.manual-set-row {
    display: grid;
    grid-template-columns: 40px 1fr 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.manual-sets-grid {
    margin-bottom: 12px;
}
.manual-library-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
}
.manual-library-item:hover {
    background: var(--bg-card-hi);
}

/* ===========================================
   42. LIBRARY & WORKOUT ITEMS
   =========================================== */
.library-group {
    margin-bottom: 20px;
}
.library-group-header {
    font-weight: 600;
    color: var(--text-strong);
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.library-group-items {
    padding-left: 8px;
}
.library-item-name {
    font-weight: 500;
    color: var(--text-strong);
}
.library-item-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.workout-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
}
.workout-item:hover {
    background: var(--bg-card-hi);
}
.workout-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.workout-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.workout-category {
    font-size: 0.75rem;
    background: var(--bg-surface);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--text-muted);
}
.workout-icon {
    color: var(--primary);
}

/* ===========================================
   43. DAY SELECTOR
   =========================================== */
.day-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}
.day-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.day-checkbox input {
    display: none;
}
.day-checkbox.checked,
.day-checkbox:has(input:checked) {
    border-color: var(--primary);
    background: rgba(29, 211, 176, 0.1);
}
.day-number {
    font-weight: 500;
}

/* ===========================================
   44. MISC UTILITIES
   =========================================== */
.full-width {
    width: 100%;
}
.separator {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
}
.error-state {
    color: var(--danger);
    text-align: center;
    padding: 20px;
}
.error-message {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 8px;
}
.empty-state,
.empty-exercises-state,
.empty-workout-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}
.empty-state i,
.empty-exercises-state i {
    font-size: 2rem;
    margin-bottom: 12px;
    opacity: 0.5;
}
.empty-state--hero {
    padding: 48px 24px;
}
.empty-state--hero i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.3;
}
.empty-state h3 {
    margin-bottom: 8px;
    color: var(--text-strong);
    font-size: 1.1rem;
}
.empty-state p {
    margin-bottom: 16px;
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}
.empty-state .btn {
    margin-top: 4px;
}
.modal-footer {
    padding: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.quick-sets-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.exercise-actions-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.set-controls {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 1rem 0;
}
.set-summary {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.filter-pill {
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
}
.filter-pill.active {
    background: var(--primary);
    color: #02100e;
    border-color: var(--primary);
}
.saved-locations-list {
    margin-top: 12px;
}
.view-more-link {
    font-size: 0.85rem;
    color: var(--primary);
    cursor: pointer;
}
.view-more-link:hover {
    text-decoration: underline;
}

/* ===========================================
   45. PROGRESS PAGE (Exercise Charts)
   =========================================== */

/* Progress Page Layout */
.progress-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
}

.progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -16px -16px 0 -16px;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.progress-header h2 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0;
}

/* Summary Cards */
.progress-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.summary-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.summary-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 1rem;
}

.summary-icon.fire {
    background: rgba(255, 149, 0, 0.15);
    color: #ff9500;
}

.summary-icon.workouts {
    background: rgba(29, 211, 176, 0.15);
    color: var(--primary);
}

.summary-icon.exercises {
    background: rgba(88, 86, 214, 0.15);
    color: #5856d6;
}

.summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.2;
}

.summary-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Exercise Selector - Hierarchical */
.exercise-selector-hierarchy {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Category Pills (Push/Pull/Legs) */
.category-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.category-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
}

.category-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #000;
}

.category-pill i {
    font-size: 0.85rem;
}

/* Exercise Row */
.exercise-row {
    margin-bottom: 16px;
}

.exercise-dropdown {
    width: 100%;
}

/* Equipment Section */
.equipment-section {
    margin-top: 4px;
}

.equipment-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.equipment-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.equipment-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.equipment-pill.active {
    background: rgba(29, 211, 176, 0.15);
    border-color: var(--primary);
    color: var(--text-strong);
}

.equipment-count {
    font-size: 0.75rem;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-muted);
}

.equipment-pill.active .equipment-count {
    background: rgba(29, 211, 176, 0.3);
    color: var(--primary);
}

/* Legacy selector (for backwards compat) */
.exercise-selector {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.selector-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.exercise-select {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a8a9e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.exercise-select:focus {
    outline: none;
    border-color: var(--primary);
}

.exercise-select optgroup {
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
}

.exercise-select option {
    padding: 8px;
    background: var(--bg-card);
    color: var(--text-main);
}

.no-exercises-msg {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.no-exercises-msg i {
    font-size: 2rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Chart Section */
.progress-chart-section {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Time Range Picker */
.time-range-picker {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.time-range-btn {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.time-range-btn:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-main);
}

.time-range-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #000;
}

/* Chart Container */
.chart-container {
    height: 220px;
    position: relative;
    margin-bottom: 16px;
}

.chart-container canvas {
    max-height: 100%;
}

.no-chart-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 180px;
    color: var(--text-muted);
    gap: 12px;
}

.no-chart-data i {
    font-size: 2rem;
    opacity: 0.4;
}

/* Stats Summary Grid */
.exercise-stats-summary {
    margin-top: 8px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.stat-box {
    text-align: center;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
}

.stat-box.highlight {
    background: rgba(29, 211, 176, 0.1);
    border: 1px solid rgba(29, 211, 176, 0.2);
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-strong);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.stat-value.positive {
    color: var(--primary);
}

.stat-value.negative {
    color: #ff6b6b;
}

.stat-value i {
    font-size: 0.85rem;
    margin-right: 2px;
}

.stat-unit {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.stat-detail {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Session History */
.session-history {
    margin-top: 8px;
}

.history-section {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--text-strong);
}

.history-count {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 400;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
    gap: 8px;
}

.history-date {
    font-weight: 500;
    color: var(--text-main);
    min-width: 80px;
}

.history-details {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.history-weight {
    font-weight: 600;
    color: var(--text-strong);
}

.history-reps {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.history-location {
    font-size: 0.8rem;
    color: var(--text-muted);
    width: 100%;
}

.history-location i {
    margin-right: 4px;
    color: var(--primary);
}

/* PR badges in session history */
.history-item--pr {
    border-left: 3px solid #f0a500;
    background: rgba(240, 165, 0, 0.06);
}
.pr-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #f0a500;
    margin-left: 6px;
}
.history-weight--best {
    color: var(--success);
}

/* Trend indicator */
.trend-indicator {
    text-align: center;
    padding: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
}
.trend-up {
    color: var(--success);
    background: rgba(64, 224, 208, 0.08);
}
.trend-down {
    color: var(--danger);
    background: rgba(255, 77, 77, 0.08);
}
.trend-flat {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
}

/* Section Cards (shared style for new sections) */
.section-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin-top: 16px;
}

.section-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-card-header h3 i {
    color: var(--primary);
    font-size: 0.9rem;
}

/* Body Part Distribution (Donut Chart) */
.body-part-content {
    display: flex;
    gap: 20px;
    align-items: center;
}

.donut-chart-container {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.body-part-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-label {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-main);
}

.legend-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-strong);
}

/* Consistency Heat Map (GitHub style) */
.heat-map-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.heat-map-container {
    display: flex;
    justify-content: center;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.heat-map-days {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 6px;
}

.heat-map-day-label {
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.heat-map-grid {
    display: flex;
    gap: 4px;
}

.heat-map-week {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.heat-map-cell {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    transition: transform 0.1s ease;
}

.heat-map-cell:hover {
    transform: scale(1.15);
}

.heat-map-cell.intensity-0 {
    background: rgba(255, 255, 255, 0.05);
}
.heat-map-cell.intensity-1 {
    background: rgba(29, 211, 176, 0.25);
}
.heat-map-cell.intensity-2 {
    background: rgba(29, 211, 176, 0.45);
}
.heat-map-cell.intensity-3 {
    background: rgba(29, 211, 176, 0.7);
}
.heat-map-cell.intensity-4 {
    background: var(--primary);
}

.heat-map-cell.today {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.heat-map-cell.future {
    opacity: 0.3;
}

.heat-map-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
}

.heat-map-legend .heat-map-cell {
    width: 12px;
    height: 12px;
}

.heat-map-legend .heat-map-cell:hover {
    transform: none;
}

.heat-map-legend-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0 4px;
}

/* PR Timeline (Milestone View) */
.pr-timeline {
    position: relative;
    padding-left: 24px;
}

.pr-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1px;
}

.pr-timeline-item {
    position: relative;
    padding-bottom: 16px;
}

.pr-timeline-item:last-child {
    padding-bottom: 0;
}

.pr-timeline-marker {
    position: absolute;
    left: -24px;
    top: 0;
    width: 18px;
    height: 18px;
    background: var(--bg-card-hi);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pr-timeline-marker i {
    font-size: 0.5rem;
    color: var(--text-muted);
}

.pr-timeline-item.latest .pr-timeline-marker {
    background: var(--primary);
    border-color: var(--primary);
}

.pr-timeline-item.latest .pr-timeline-marker i {
    color: #000;
}

.pr-timeline-content {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    padding: 12px;
}

.pr-timeline-item.latest .pr-timeline-content {
    background: rgba(29, 211, 176, 0.08);
    border: 1px solid rgba(29, 211, 176, 0.15);
}

.pr-timeline-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.pr-timeline-exercise {
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 4px;
}

.pr-timeline-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}

.pr-timeline-weight {
    font-weight: 700;
    color: var(--primary);
}

.pr-timeline-reps {
    font-size: 0.9rem;
    color: var(--text-main);
}

.pr-timeline-equipment {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
}

.pr-timeline-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
}

.pr-timeline-empty i {
    font-size: 2rem;
    margin-bottom: 12px;
    opacity: 0.4;
}

/* ===========================================
   46a. CHART TYPE TOGGLE
   =========================================== */
.chart-type-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    padding: 4px;
}

.chart-type-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chart-type-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.chart-type-btn.active {
    background: var(--bg-card);
    color: var(--primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.chart-type-btn i {
    font-size: 0.75rem;
}

/* ===========================================
   46b. WEEKLY VOLUME CHART
   =========================================== */
.weekly-volume-section {
    margin-top: 16px;
}

.weekly-volume-chart-container {
    height: 180px;
}

/* ===========================================
   46c. DASHBOARD MINI CHART
   =========================================== */
.mini-chart-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mini-chart-card:hover {
    border-color: rgba(29, 211, 176, 0.2);
}

.mini-chart-header {
    margin-bottom: 12px;
}

.mini-chart-exercise {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
}

.mini-chart-equipment {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.mini-chart-body {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mini-chart-sparkline {
    flex: 1;
    height: 50px;
    min-width: 0;
}

.mini-chart-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.mini-chart-current {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
}

.mini-chart-change {
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mini-chart-change.positive {
    color: var(--success);
}

.mini-chart-change.negative {
    color: var(--error);
}

.mini-chart-period {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.mini-chart-tap-hint {
    margin-top: 10px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.6;
}

.mini-chart-tap-hint i {
    margin-right: 4px;
}

/* ===========================================
   46. RESPONSIVE
   =========================================== */
@media (max-width: 480px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
    }
    .progress-ring-container {
        margin: 0 auto;
    }
    .hero-stats {
        flex-wrap: wrap;
    }

    .set-row {
        grid-template-columns: 40px 1fr 1fr auto;
        gap: 8px;
    }

    .template-actions {
        flex-wrap: wrap;
    }
    .template-actions .btn {
        flex: 1;
        min-width: 100px;
    }

    .workout-grid {
        grid-template-columns: 1fr;
    }
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    /* Calendar already stacks vertically */

    /* Progress page responsive */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .app-container {
        padding: 24px;
    }
    .modal-content {
        border-radius: var(--radius-lg);
        max-width: 500px;
        margin: auto;
    }
    .bottom-nav {
        display: none;
    }
    .sidebar {
        left: 0;
    }
}

/* ===========================================
   MODAL ENTRANCE/EXIT ANIMATIONS
   Override generic .hidden (display:none) for modals
   so CSS transitions can animate opacity & slide
   =========================================== */
.modal.hidden {
    display: flex !important; /* Override generic .hidden */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        visibility 0.2s;
}
.modal:not(.hidden),
dialog.modal[open] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.2s ease,
        visibility 0.2s;
}
.modal .modal-content {
    transform: translateY(20px);
    transition: transform 0.25s ease;
}
.modal:not(.hidden) .modal-content,
dialog.modal[open] .modal-content {
    transform: translateY(0);
}

/* ===========================================
   SECTION FADE TRANSITIONS
   =========================================== */
.content-section.section-fade-out {
    opacity: 0;
    transition: opacity 0.15s ease;
}