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

:root {
    --primary-blue: #6c5cd2;
    --secondary-blue: #5a4bbf;
    --purple-accent: #7c6fd4;
    --orange-accent: #FF9500;
    --pink-accent: #EC4899;
    --light-bg: #0f0e1a;
    --card-bg: #1e1c35;
    --text-dark: #f0eeff;
    --text-light: #8b8aaa;
    --border-light: #2a2840;
    --sidebar-bg: #13122a;
    --bg-deep: #0a0918;
}

html,
body {
    height: 100%;
    width: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    background: var(--light-bg);
    color: var(--text-dark);
}

.container {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
}

/* Sidebar */
.sidebar {
    width: 250px;
    background: var(--sidebar-bg);
    padding: 25px 0;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    overflow-y: auto;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    margin-bottom: 40px;
    text-decoration: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 1em;
}

.sidebar-logo-icon {
    width: 34px;
    height: 34px;
    background: var(--primary-blue);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1em;
}

.sidebar-menu {
    list-style: none;
    padding: 0 12px;
    flex: 1;
}

.sidebar-icon {
    font-size: 1em;
    width: 20px;
    text-align: center;
}

.sidebar-menu-item {
    padding: 12px 16px;
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    border-radius: 10px;
    margin-bottom: 4px;
    font-size: 0.9em;
    font-weight: 500;
}

.sidebar-menu-item:hover {
    background: rgba(108, 92, 210, 0.15);
    color: #ffffff;
}

.sidebar-menu-item.active {
    background: var(--primary-blue);
    color: #ffffff;
    border-left: none;
    padding-left: 16px;
}

.sidebar-bottom {
    padding: 0 12px 12px;
    border-top: 1px solid var(--border-light);
    margin-top: 16px;
    padding-top: 16px;
}

.sidebar-settings {
    margin-bottom: 0;
}

header {
    flex: 0 0 auto;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-light);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 62px;
}

header h1 {
    font-size: 1.1em;
    color: var(--text-dark);
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

header .subtitle {
    display: none;
}

.header-search {
    flex: 1;
    max-width: 340px;
    margin: 0;
    position: relative;
}

.header-search::before {
    content: "🔍";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    opacity: 0.5;
    pointer-events: none;
}

.header-search input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--card-bg);
    font-size: 0.85em;
    color: var(--text-dark);
}

.header-search input::placeholder {
    color: var(--text-light);
}

main {
    flex: 1;
    padding: 32px 40px;
    overflow-y: auto;
    min-height: 0;
    background: var(--light-bg);
}

section {
    margin-bottom: 28px;
}

h2 {
    color: var(--text-dark);
    margin-bottom: 20px;
    font-size: 1.4em;
    font-weight: 600;
}

h3 {
    color: var(--text-dark);
}

/* Footer */
footer {
    background: var(--sidebar-bg);
    padding: 12px 20px;
    text-align: center;
    color: var(--text-light);
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
    font-size: 0.85em;
}

/* Form Styles */
.workout-form,
.workout-setup-form,
.add-exercise-form {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 14px;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.95em;
}

input[type="text"],
input[type="number"],
input[type="date"],
select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 1em;
    transition: all 0.2s ease;
    background: var(--bg-deep, #0a0918);
    color: var(--text-dark);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(108, 92, 210, 0.25);
}

select option {
    background: var(--card-bg);
    color: var(--text-dark);
}

/* Sets Container */
.sets-container,
.exercise-sets-container {
    background: var(--bg-deep, #0a0918);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.sets-container.empty {
    display: none;
}

.set-input-group {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: flex-end;
}

.set-input-group .form-group {
    margin-bottom: 0;
}

.set-input-group label {
    font-size: 0.9em;
}

.set-number {
    grid-column: 1 / -1;
    font-weight: bold;
    color: var(--primary-blue);
    margin-bottom: 5px;
}

/* Button Styles */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-primary {
    background: var(--primary-blue);
    color: white;
}

.btn-primary:hover {
    background: var(--secondary-blue);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 71, 171, 0.2);
}

.btn-secondary {
    background: var(--purple-accent);
    color: white;
}

.btn-secondary:hover {
    background: #5a38a3;
    transform: translateY(-1px);
}

.btn-success {
    background: #10B981;
    color: white;
}

.btn-success:hover {
    background: #059669;
}

.btn-danger {
    background: #EF4444;
    color: white;
}

.btn-danger:hover {
    background: #DC2626;
}

.btn-delete {
    background: #FCA5A5;
    color: white;
    padding: 6px 12px;
    font-size: 0.85em;
}

.btn-delete:hover {
    background: #F87171;
}

.btn-close {
    background: var(--text-light);
    color: white;
    padding: 8px 16px;
}

.btn-close:hover {
    background: var(--text-dark);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.hidden {
    display: none !important;
}

/* Stats Section */
.overview-heading {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--card-bg);
    padding: 22px;
    border-radius: 14px;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    text-align: left;
    transition: all 0.2s ease;
}

.stat-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
    transform: translateY(-2px);
}

.stat-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    margin-bottom: 14px;
}

.stat-badge-blue  { background: rgba(79,142,247,0.18); }
.stat-badge-teal  { background: rgba(78,205,196,0.18); }
.stat-badge-purple{ background: rgba(108,92,210,0.22); }

.stat-card-label {
    font-size: 0.8em;
    color: var(--text-light);
    font-weight: 500;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card-sublabel {
    font-size: 0.78em;
    color: var(--text-light);
    margin-top: 4px;
}

.stat-value {
    font-size: 2.4em;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
}

.stat-card.accent-orange .stat-value {
    color: var(--orange-accent);
}

.stat-card.accent-purple .stat-value {
    color: var(--purple-accent);
}

.stat-card.accent-pink .stat-value {
    color: var(--pink-accent);
}

/* Filter Section */
.filter-section {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-section label {
    margin: 0;
    white-space: nowrap;
    color: var(--text-dark);
}

.filter-section select {
    min-width: 200px;
    margin: 0;
}



.muscle-stat {
    background: var(--light-bg);
    border-left: 4px solid var(--primary-blue);
    padding: 18px 20px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.muscle-stat.negative {
    border-left-color: #EF4444;
    background: #FEE2E2;
}

.muscle-stat .name {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 1.1em;
}

.muscle-stat .value {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--primary-blue);
}

.muscle-stat.negative .value {
    color: #EF4444;
}

/* Personal Records */
.records-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.record-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.record-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.record-card h3 {
    color: var(--primary-blue);
    margin-bottom: 15px;
    font-size: 1.3em;
    font-weight: 600;
}

.record-card p {
    color: var(--text-light);
    margin: 10px 0;
    font-size: 1em;
}

.record-pr {
    font-size: 2.5em;
    font-weight: bold;
    color: var(--purple-accent);
    margin: 20px 0;
}

/* Workout History */
.history-controls {
    margin-bottom: 20px;
}

.workout-history {
    display: grid;
    gap: 15px;
}

.workout-item {
    background: var(--card-bg);
    border-left: 4px solid var(--primary-blue);
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    cursor: pointer;
    margin-bottom: 10px;
}

.workout-item:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
    transform: translateX(4px);
    border-left-color: #9b87f5;
}

.workout-details h3 {
    color: var(--text-dark);
    margin-bottom: 6px;
    font-size: 1.05em;
    font-weight: 600;
}

.muscle-label {
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 0.9em;
    margin: 5px 0;
    display: inline-block;
    background: rgba(0, 71, 171, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

.sets-info {
    color: var(--text-light);
    font-size: 0.9em;
    margin: 8px 0;
    background: var(--light-bg);
    padding: 8px;
    border-radius: 4px;
}

.workout-details p {
    color: var(--text-light);
    margin: 5px 0;
    font-size: 0.95em;
}

.workout-stats {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.stat-badge {
    background: var(--primary-blue);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
}

.stat-badge.volume {
    background: var(--purple-accent);
}

.stat-badge.date {
    background: var(--text-light);
}

.stat-badge.orange {
    background: var(--orange-accent);
}

.stat-badge.pink {
    background: var(--pink-accent);
}

.delete-btn {
    flex-shrink: 0;
}

.empty-message {
    text-align: center;
    color: var(--text-light);
    padding: 40px 20px;
    font-size: 1.1em;
}

/* Progress Container */
.progress-container {
    display: grid;
    gap: 20px;
}

.progress-item {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.progress-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.progress-item h3 {
    color: var(--text-dark);
    margin-bottom: 15px;
    font-size: 1.1em;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .sidebar {
        width: 180px;
    }

    .sidebar-logo span {
        display: none;
    }

    .sidebar-menu-item span:last-child {
        display: none;
    }

    .sidebar-menu-item {
        padding: 12px 20px;
        justify-content: center;
    }

    main {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: 150px;
    }

    .sidebar-logo {
        padding: 0 15px;
        margin-bottom: 30px;
    }

    .sidebar-menu-item {
        padding: 10px 15px;
        font-size: 0.9em;
    }

    header {
        padding: 8px 15px;
        gap: 10px;
    }

    header h1 {
        font-size: 1em;
        min-width: 70px;
    }

    .header-search {
        flex: 1;
        max-width: 200px;
        margin: 0;
    }

    .header-search input {
        font-size: 0.8em;
        padding: 5px 8px;
    }

    main {
        padding: 25px 20px;
    }

    .filter-section {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-section select {
        min-width: unset;
    }

    .stats-container {
        grid-template-columns: 1fr;
    }

    .workout-item {
        flex-direction: column;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .set-input-group {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   WORKOUT PROGRESS SECTION
   ======================================== */

.progress-section {
    margin-bottom: 40px;
}

.progress-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
}

.progress-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.progress-card:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(0, 71, 171, 0.15);
    transform: translateY(-2px);
}

.progress-card-exercise {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.progress-card-muscle {
    font-size: 1em;
    color: var(--text-light);
    margin-bottom: 16px;
    background: rgba(0, 71, 171, 0.1);
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    color: var(--primary-blue);
    font-weight: 600;
}

.progress-card-1rm {
    font-size: 2.2em;
    color: var(--primary-blue);
    font-weight: bold;
    margin-bottom: 6px;
}

.progress-card-1rm-label {
    font-size: 0.8em;
    color: var(--text-light);
    margin-bottom: 12px;
}

.progress-card-date {
    font-size: 0.85em;
    color: var(--text-light);
    margin-bottom: 8px;
}

.progress-card-sets {
    font-size: 0.85em;
    color: var(--text-light);
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.progress-card-click-hint {
    font-size: 0.8em;
    color: var(--primary-blue);
    margin-top: 12px;
    font-style: italic;
}

/* ========================================
   MUSCLE GROUP STATS SECTION
   ======================================== */

.muscle-group-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.muscle-group-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.muscle-group-card:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.muscle-group-card-name {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--primary-blue);
}

.muscle-group-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.muscle-stat-label {
    font-size: 0.75em;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    font-weight: 600;
}

.muscle-stat-value {
    font-size: 1.3em;
    color: var(--primary-blue);
    font-weight: bold;
}

.muscle-group-card-date {
    font-size: 0.85em;
    color: var(--text-light);
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.muscle-group-card-changes {
    background: var(--light-bg);
    padding: 16px;
    border-radius: 8px;
    margin: 16px 0;
    border-left: 4px solid var(--primary-blue);
}

.avg-change {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.change-label {
    color: var(--text-light);
    font-size: 0.9em;
}

.change-value {
    font-size: 1.3em;
    font-weight: bold;
}

.change-value.positive {
    color: #10B981;
}

.change-value.negative {
    color: #EF4444;
}

.exercise-changes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 12px;
}

.exercise-change-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
    padding: 8px;
    background: white;
    border-radius: 6px;
    border-left: 3px solid var(--border-light);
}

.exercise-name {
    flex: 1;
    color: var(--text-dark);
    font-weight: 500;
}

.change-percent {
    font-weight: bold;
    min-width: 60px;
    text-align: right;
    margin: 0 8px;
}

.change-percent.positive {
    color: #10B981;
}

.change-percent.negative {
    color: #EF4444;
}

.weights {
    color: var(--text-light);
    font-size: 0.8em;
}

.no-history {
    font-size: 0.85em;
    color: var(--text-light);
    text-align: center;
    padding: 8px 0;
    margin: 0;
}

/* ========================================
   EXERCISE DETAIL MODAL
   ======================================== */

.exercise-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.exercise-detail-modal.hidden {
    display: none;
}

.exercise-detail-content {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.exercise-detail-header {
    background: var(--primary-blue);
    color: white;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
}

.exercise-detail-header h2 {
    color: white;
    margin: 0;
    font-size: 1.5em;
    font-weight: 600;
}

.exercise-detail-body {
    padding: 30px;
}

.exercise-chart-container {
    margin-bottom: 40px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
    background: var(--light-bg);
}

.exercise-chart-container canvas {
    width: 100%;
    max-height: 400px;
}

.exercise-workout-history {
    border-top: 1px solid var(--border-light);
    padding-top: 20px;
}

.exercise-workout-history h3 {
    color: var(--text-dark);
    margin-bottom: 20px;
    font-size: 1.2em;
}

.exercise-workout-item {
    background: var(--light-bg);
    border-left: 4px solid var(--primary-blue);
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 6px;
}

.exercise-workout-item-date {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.exercise-workout-item-1rm {
    color: var(--primary-blue);
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 8px;
}

.exercise-workout-item-sets {
    font-size: 0.9em;
    color: var(--text-light);
}

/* ========================================
   WORKOUT DETAIL MODAL
   ======================================== */

.workout-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.workout-detail-modal.hidden {
    display: none;
}

.workout-detail-content {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.workout-detail-header {
    background: var(--primary-blue);
    color: white;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.workout-detail-header h2 {
    color: white;
    margin: 0;
    font-size: 1.5em;
    font-weight: 600;
}

.workout-detail-body {
    padding: 30px;
}

.workout-detail-date {
    color: var(--text-light);
    font-size: 0.95em;
    margin-bottom: 20px;
}

.workout-detail-exercises {
    display: grid;
    gap: 20px;
}

.workout-detail-exercise {
    background: var(--light-bg);
    border-left: 4px solid var(--primary-blue);
    padding: 16px;
    border-radius: 6px;
}

.workout-detail-exercise h4 {
    color: var(--text-dark);
    margin-bottom: 10px;
    font-weight: 600;
}

.workout-detail-exercise-info {
    font-size: 0.9em;
    color: var(--text-light);
}

/* ========================================
   CREATE WORKOUT SECTION
   ======================================== */

.create-workout-section {
    background: transparent;
    padding: 0;
}

.workout-setup-form {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--border-light);
}

.workout-setup-form .form-group:last-child {
    margin-bottom: 0;
}

.add-exercise-form {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--primary-blue);
    margin: 20px 0;
}

.add-exercise-form.hidden {
    display: none;
}

.add-exercise-form h3 {
    color: var(--text-dark);
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: 600;
}

.exercise-sets-container {
    background: var(--light-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.exercise-sets-container.empty {
    display: none;
}

.exercise-set-input-group {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: flex-end;
}

.exercise-set-input-group .form-group {
    margin-bottom: 0;
}

.exercise-set-input-group label {
    font-size: 0.9em;
}

.exercise-set-number {
    grid-column: 1 / -1;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 5px;
}

.exercise-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.exercise-form-actions .btn {
    flex: 1;
}

.current-workout-display {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    margin: 20px 0;
}

.current-workout-display.hidden {
    display: none;
}

.current-workout-display h3 {
    color: var(--text-dark);
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: 600;
}

.current-exercises-list {
    margin-bottom: 20px;
}

.current-exercise-item {
    background: var(--light-bg);
    border-left: 4px solid var(--primary-blue);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.current-exercise-item-details h4 {
    color: var(--text-dark);
    font-size: 1.1em;
    margin-bottom: 5px;
    font-weight: 600;
}

.current-exercise-item-muscle {
    color: var(--text-light);
    font-size: 0.9em;
    margin-bottom: 8px;
    background: rgba(0, 71, 171, 0.1);
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--primary-blue);
}

.current-exercise-item-sets {
    color: var(--text-light);
    font-size: 0.85em;
}

.current-exercise-item-remove {
    flex-shrink: 0;
}

.current-exercise-item-remove .btn-delete {
    padding: 6px 12px;
    font-size: 0.8em;
}

.workout-save-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

.workout-save-actions .btn {
    flex: 1;
}

.btn-success {
    background: #10B981;
    color: white;
}

.btn-success:hover {
    background: #059669;
    transform: translateY(-1px);
}

/* Remove duplicate workout detail modal styles - already defined above */

.workout-detail-exercise-sets {
    margin-top: 12px;
}

.workout-detail-set {
    background: white;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 6px;
    border-left: 3px solid var(--purple-accent);
    font-size: 0.9em;
    color: var(--text-light);
}

/* ========================================
   EXERCISE PROGRESS CHART
   ======================================== */

.exercise-chart-container {
    margin-bottom: 40px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    background: var(--light-bg);
}

.exercise-chart-canvas {
    width: 100%;
    height: 400px;
    background: white;
    border-radius: 8px;
}

.exercise-chart-empty {
    text-align: center;
    color: var(--text-light);
    padding: 40px 20px;
    font-size: 1em;
}

@media (max-width: 768px) {
    .progress-container {
        grid-template-columns: 1fr;
    }

    .exercise-detail-header {
        flex-direction: column;
        gap: 12px;
    }

    .exercise-detail-header h2 {
        font-size: 1.4em;
    }

    .exercise-detail-body {
        padding: 20px;
    }

    .workout-detail-header {
        flex-direction: column;
        gap: 12px;
    }

    .workout-detail-header h2 {
        font-size: 1.4em;
    }

    .workout-detail-body {
        padding: 20px;
    }

    .exercise-form-actions {
        flex-direction: column;
    }

    .exercise-form-actions .btn {
        width: 100%;
    }

    .workout-save-actions {
        flex-direction: column;
    }

    .workout-save-actions .btn {
        width: 100%;
    }

    .current-exercise-item {
        flex-direction: column;
        gap: 10px;
    }

    .current-exercise-item-remove .btn-delete {
        width: 100%;
    }

    .exercise-set-input-group {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   START WORKOUT SECTION
   ======================================== */

.start-workout-section {
    margin-bottom: 30px;
}

.start-workout-card {
    background: linear-gradient(135deg, #2a1f5a 0%, #1a1535 100%);
    border: 1px solid rgba(108, 92, 210, 0.4);
    border-radius: 16px;
    padding: 36px 40px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 8px 32px rgba(108, 92, 210, 0.25);
}

.start-workout-content h3 {
    font-size: 1.8em;
    margin-bottom: 8px;
    font-weight: 700;
}

.start-workout-content p {
    font-size: 1.1em;
    opacity: 0.9;
}

.btn-large {
    padding: 15px 30px !important;
    font-size: 1.1em !important;
    white-space: nowrap;
}

/* ========================================
   MINI CALENDAR SECTION
   ======================================== */

.calendar-section {
    margin-bottom: 28px;
    background: var(--card-bg);
    border-radius: 14px;
    padding: 24px;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.calendar-section h3 {
    color: var(--text-dark);
    margin-bottom: 20px;
    font-size: 1.2em;
    font-weight: 600;
}

/* .workout-calendar replaced by .cal-grid */

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.calendar-day:hover {
    transform: scale(1.05);
}

.calendar-day.worked-out {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.4);
}

.calendar-day.no-workout {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}

.calendar-day.future {
    background: rgba(255,255,255,0.04);
    color: var(--text-light);
    border-color: rgba(255,255,255,0.07);
}

.calendar-day.planned {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.45);
    cursor: pointer;
}

.calendar-day.planned:hover {
    background: rgba(99, 102, 241, 0.32);
    border-color: #818cf8;
}

.calendar-day.today .calendar-day-number {
    background: var(--primary-blue);
    color: #ffffff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2px;
}

.calendar-day.faded {
    background: transparent;
    opacity: 0.25;
    pointer-events: none;
}

.calendar-day-number {
    font-size: 0.8em;
}

.mini-cal-plan {
    display: block;
    font-size: 0.58em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #a5b4fc;
    margin-top: 2px;
    line-height: 1.2;
}

/* ========================================
   PROGRESS CHART SECTION
   ======================================== */

.progress-chart-section {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 24px;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    margin-bottom: 28px;
}

.progress-chart-section h2 {
    margin-bottom: 20px;
}

.progress-chart-container {
    position: relative;
    width: 100%;
    height: 280px;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

.progress-chart-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.progress-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-light);
    font-size: 1.1em;
}

/* ========================================
   WORKOUT LAYOUT MODAL
   ======================================== */

.workout-layout-modal {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2000 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.workout-layout-modal.hidden {
    display: none !important;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1999;
}

.modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    width: auto;
    min-width: 350px;
    max-width: 600px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2001;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    background: var(--primary-blue);
    color: white;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px 12px 0 0;
}

.modal-header h2 {
    color: white;
    margin: 0;
    font-size: 1.5em;
    font-weight: 600;
}

.btn-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.btn-close:hover {
    opacity: 0.8;
}

.modal-body {
    padding: 30px;
}

.layout-options {
    display: grid;
    gap: 20px;
}

.layout-option {
    background: var(--bg-deep, #0a0918);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.layout-option h3 {
    color: #ffffff;
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 0;
}

.layout-option p {
    color: var(--text-light);
    font-size: 0.95em;
    margin-bottom: 15px;
    margin-top: 0;
}

.past-workouts-list {
    display: grid;
    gap: 10px;
}

.past-workout-item {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.past-workout-item:hover {
    background: #2a2840;
    border-color: var(--primary-blue);
}

.past-workout-item-name {
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.past-workout-item-exercises {
    font-size: 0.85em;
    color: var(--text-light);
}

.empty-message {
    text-align: center;
    color: #9CA3AF;
    padding: 20px;
    font-style: italic;
}

.layout-divider {
    text-align: center;
    color: #6B7280;
    font-weight: 600;
    padding: 10px 0;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
}

.past-workouts-list {
    display: grid;
    gap: 10px;
}

.past-workout-item {
    background: var(--card-bg);
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.past-workout-item:hover {
    border-color: var(--primary-blue);
    background: rgba(0, 71, 171, 0.05);
    transform: translateX(5px);
}

.past-workout-item-name {
    font-weight: 700;
    color: #ffffff;
}

.past-workout-item-exercises {
    font-size: 0.85em;
    color: var(--text-light);
    margin-top: 4px;
}

.layout-divider {
    text-align: center;
    color: var(--text-light);
    font-weight: 600;
    padding: 10px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

@media (max-width: 768px) {
    .start-workout-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .start-workout-content h3 {
        font-size: 1.5em;
    }

    .start-workout-content p {
        font-size: 1em;
    }

    .progress-chart-container {
        height: 300px;
    }

    .workout-calendar {
        grid-template-columns: repeat(7, 1fr);
    }

    .modal-content {
        max-width: 90vw;
    }

    .modal-body {
        padding: 20px;
    }

    .layout-options {
        gap: 15px;
    }
}

/* ========================================
   PAGE NAVIGATION
   ======================================== */

.page {
    width: 100%;
}

.section-description {
    color: var(--text-light);
    font-size: 0.9em;
    margin-bottom: 20px;
}

/* ========================================
   WORKOUT STATISTICS PAGE
   ======================================== */

.stats-page-section {
    padding: 20px 0;
}

.muscle-group-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.muscle-group-total-change {
    font-size: 1.8em;
    font-weight: 700;
    margin: 8px 0 12px;
}

.muscle-group-total-change.positive { color: #22c55e; }
.muscle-group-total-change.negative { color: #ef4444; }

.muscle-group-exercises-breakdown {
    border-top: 1px solid var(--border-light);
    padding-top: 10px;
    margin-top: 4px;
}

.exercise-change-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.85em;
    border-bottom: 1px solid #f3f4f6;
}

.exercise-change-name {
    color: var(--text-dark);
    flex: 1;
    margin-right: 10px;
}

.exercise-change-value {
    font-weight: 600;
    white-space: nowrap;
}

.exercise-change-value.positive { color: #22c55e; }
.exercise-change-value.negative { color: #ef4444; }

/* ========================================
   ACHIEVEMENTS PAGE — PERSONAL RECORDS
   ======================================== */

.pr-muscle-group {
    margin-bottom: 30px;
}

.pr-muscle-title {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--primary-blue);
    border-bottom: 2px solid var(--primary-blue);
    padding-bottom: 6px;
    margin-bottom: 12px;
}

.pr-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.pr-exercise-name {
    font-weight: 600;
    font-size: 1em;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.pr-label {
    background: var(--primary-blue);
    color: white;
    font-size: 0.7em;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.pr-set {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--text-dark);
    margin: 4px 0;
}

.pr-estimated {
    font-size: 0.85em;
    color: var(--text-light);
    margin-top: 2px;
}

/* ========================================
   CALENDAR PAGE
   ======================================== */

.calendar-page-section {
    padding: 20px 0;
}

/* Stat sublabel (e.g. "over 14 days") */
.stat-sublabel {
    font-size: 0.8em;
    color: var(--text-light);
    margin-top: 4px;
    font-weight: 400;
}

/* Sidebar items are clickable via onclick */
.sidebar-menu-item {
    cursor: pointer;
}

/* Chart section header with emoji icon */
.chart-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.chart-section-header h2 {
    margin-bottom: 4px;
}

.chart-emoji-icon {
    width: 44px;
    height: 44px;
    background: #6c5cd2;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    flex-shrink: 0;
}

.chart-subtitle {
    font-size: 0.85em;
    color: var(--text-light);
    margin: 0;
}

/* Workout history card action buttons */
.workout-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.btn-start-history {
    background: #6c5cd2;
    color: white;
    padding: 8px 14px;
    font-size: 0.85em;
    white-space: nowrap;
}

.btn-start-history:hover {
    background: #5a4bbf;
    transform: translateY(-1px);
}

/* ========================================
   FULL CALENDAR PAGE
   ======================================== */

.calendar-page-section {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 28px;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.cal-nav h2 { margin: 0; font-size: 1.25em; color: #ffffff; }

.btn-cal-nav {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-light);
    width: 36px; height: 36px;
    border-radius: 8px;
    font-size: 1.5em;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}
.btn-cal-nav:hover { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}
.cal-weekdays div {
    text-align: center;
    font-size: 0.72em;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 0;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 20px;
}

.cal-day {
    min-height: 76px;
    border-radius: 10px;
    padding: 8px;
    border: 1px solid transparent;
    transition: transform 0.15s, box-shadow 0.15s;
    overflow: hidden;
}
.cal-blank { background: transparent; border: none; pointer-events: none; }

.cal-grey  { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.07); }
.cal-green { background: rgba(34,197,94,0.14);   border-color: rgba(34,197,94,0.35); }
.cal-red   { background: rgba(239,68,68,0.11);   border-color: rgba(239,68,68,0.28); }
.cal-blue  { background: rgba(99,102,241,0.16);  border-color: rgba(99,102,241,0.45); }

.cal-day:not(.cal-blank):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.cal-green:hover { border-color: #22c55e; }
.cal-red:hover   { border-color: #ef4444; }
.cal-blue:hover  { border-color: #818cf8; }
.cal-grey:hover  { border-color: var(--primary-blue); }

.cal-day-number {
    font-size: 0.82em;
    font-weight: 600;
    color: var(--text-dark);
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    margin-bottom: 4px;
}
.cal-today .cal-day-number {
    background: var(--primary-blue);
    color: #ffffff;
}

.cal-event-label {
    font-size: 0.68em;
    padding: 2px 5px;
    border-radius: 4px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.cal-label-green { background: rgba(34,197,94,0.22);  color: #86efac; }
.cal-label-blue  { background: rgba(99,102,241,0.25); color: #a5b4fc; }

.cal-legend {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 4px;
}
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.8em; color: var(--text-light); }
.legend-dot  { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.legend-green { background: #22c55e; }
.legend-red   { background: #ef4444; }
.legend-blue  { background: #818cf8; }
.legend-grey  { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); }

/* ========================================
   PLAN WORKOUT MODAL
   ======================================== */

.plan-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.plan-modal.hidden { display: none; }

.plan-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
}

.plan-modal-content {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    width: 480px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.55);
}

.plan-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
}
.plan-modal-header h2 { margin: 0; font-size: 1.15em; color: #ffffff; }

.plan-modal-body { padding: 24px; }

.plan-exercise-picker {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.plan-exercise-picker select { flex: 1; }

.plan-exercise-list { display: flex; flex-direction: column; gap: 6px; }

.plan-exercise-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-deep, #0a0918);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    font-size: 0.88em;
    color: var(--text-dark);
}

.btn-remove-plan-ex {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.9em;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}
.btn-remove-plan-ex:hover { background: rgba(239,68,68,0.15); }

.plan-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* Plan modal — past workout template picker */
.plan-past-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
}

.btn-plan-template {
    background: var(--bg-deep, #0a0918);
    border: 1px solid var(--border-light);
    color: var(--text-light);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-plan-template:hover {
    border-color: var(--primary-blue);
    color: #ffffff;
}

.btn-plan-template.selected {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #ffffff;
}

.plan-divider-text {
    text-align: center;
    font-size: 0.78em;
    color: var(--text-light);
    margin: 14px 0;
    position: relative;
}

.plan-optional {
    font-size: 0.78em;
    color: var(--text-light);
    font-weight: 400;
}

/* ========================================
   ANIMATIONS
   ======================================== */

/* 1. Workout history card slides in from top when saved */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.workout-item-new {
    animation: slideInFromTop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 5. Calendar day pulses when a plan is saved */
@keyframes calPulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(99,102,241,0.7); }
    40%  { transform: scale(1.07); box-shadow: 0 0 0 10px rgba(99,102,241,0); }
    70%  { transform: scale(1.03); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}

.cal-pulse {
    animation: calPulse 0.65s ease-out;
}

/* Mini chart inside muscle group stat cards */
.muscle-mini-chart {
    display: block;
    width: 100%;
    height: 72px;
    margin: 12px 0 8px;
    border-radius: 6px;
    background: transparent;
}

/* ========================================
   LIGHT MODE OVERRIDES
   ======================================== */

body.light-mode {
    --light-bg:    #f3f4f6;
    --card-bg:     #ffffff;
    --text-dark:   #1f2937;
    --text-light:  #6b7280;
    --border-light:#e5e7eb;
    --sidebar-bg:  #ffffff;
    --bg-deep:     #f9fafb;
}

body.light-mode .sidebar {
    box-shadow: 2px 0 12px rgba(0,0,0,0.08);
}

body.light-mode .sidebar-logo { color: #1f2937; }

body.light-mode .sidebar-menu-item:hover {
    background: rgba(108,92,210,0.08);
    color: var(--primary-blue);
}

body.light-mode header {
    background: #ffffff;
    border-bottom-color: #e5e7eb;
}

body.light-mode footer {
    background: #f9fafb;
    border-top-color: #e5e7eb;
}

body.light-mode .start-workout-card {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border-color: rgba(108,92,210,0.3);
    box-shadow: 0 8px 32px rgba(108,92,210,0.12);
}

body.light-mode .start-workout-card h3,
body.light-mode .start-workout-card p { color: #3730a3; }

body.light-mode .progress-chart-container { background: #ffffff; }

body.light-mode .muscle-mini-chart { background: transparent; }

body.light-mode .btn-cal-nav {
    background: #f9fafb;
    color: #6b7280;
    border-color: #e5e7eb;
}

body.light-mode .cal-grey  { background: rgba(0,0,0,0.04); border-color: #e5e7eb; }
body.light-mode .cal-green { background: rgba(34,197,94,0.12); }
body.light-mode .cal-red   { background: rgba(239,68,68,0.10); }
body.light-mode .cal-blue  { background: rgba(99,102,241,0.12); }

body.light-mode .plan-modal-content,
body.light-mode .workout-detail-content,
body.light-mode .exercise-detail-content,
body.light-mode .modal-content { background: #ffffff; border-color: #e5e7eb; }

body.light-mode .past-workout-item,
body.light-mode .workout-item,
body.light-mode .stat-card,
body.light-mode .muscle-group-card,
body.light-mode .pr-card { background: #ffffff; border-color: #e5e7eb; }

body.light-mode .stat-value { color: #1f2937; }

body.light-mode input[type="text"],
body.light-mode input[type="number"],
body.light-mode input[type="date"],
body.light-mode input[type="time"],
body.light-mode select {
    background: #f9fafb;
    color: #1f2937;
    border-color: #e5e7eb;
}

body.light-mode .workout-setup-form,
body.light-mode .add-exercise-form,
body.light-mode .exercise-sets-container,
body.light-mode .current-workout-display,
body.light-mode .calendar-section,
body.light-mode .progress-chart-section,
body.light-mode .stats-page-section,
body.light-mode .calendar-page-section,
body.light-mode .records-section { background: #ffffff; }

body.light-mode .exercise-set-input-group { background: #f9fafb; }

body.light-mode .plan-exercise-item,
body.light-mode .btn-plan-template { background: #f9fafb; border-color: #e5e7eb; }

body.light-mode .current-exercise-item { background: #f3f4f6; }

/* Calendar event labels readable in light mode */
body.light-mode .cal-label-green { color: #15803d; background: rgba(34,197,94,0.18); }
body.light-mode .cal-label-blue  { color: #3730a3; background: rgba(99,102,241,0.15); }

/* Past workout template buttons in light mode */
body.light-mode .btn-plan-template {
    color: #374151;
}

body.light-mode .btn-plan-template.selected {
    background: #22c55e;
    border-color: #22c55e;
    color: #ffffff;
}

body.light-mode .btn-plan-template:hover {
    background: #f0fdf4;
    border-color: #22c55e;
    color: #15803d;
}

/* ========================================
   NEW FEATURES CSS
   ======================================== */

/* Streak stat badge */
.stat-badge-orange { background: rgba(251,146,60,0.2); }

/* History controls row */
.history-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.history-search-input {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-deep, #0a0918);
    color: var(--text-dark);
    font-size: 0.9em;
}

.history-search-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(108,92,210,0.2);
}

.history-btn-group {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Export button */
.btn-export {
    background: #059669;
    color: white;
    padding: 10px 18px;
    font-size: 0.88em;
}
.btn-export:hover { background: #047857; transform: translateY(-1px); }

/* Edit button on history cards */
.btn-edit-history {
    background: #4f46e5;
    color: white;
    padding: 8px 14px;
    font-size: 0.85em;
    white-space: nowrap;
}
.btn-edit-history:hover { background: #4338ca; transform: translateY(-1px); }

/* PR toast notification */
.pr-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: var(--card-bg);
    border: 1.5px solid #22c55e;
    border-radius: 14px;
    padding: 18px 22px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 24px rgba(34,197,94,0.2);
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
    min-width: 270px;
    max-width: 360px;
}
.pr-toast.pr-toast-show { transform: translateX(0); }
.pr-toast.pr-toast-hide {
    transform: translateX(120%);
    transition: transform 0.3s ease-in;
}

.pr-toast-header {
    font-size: 1em;
    font-weight: 700;
    color: #22c55e;
    margin-bottom: 10px;
}

.pr-toast-item {
    font-size: 0.85em;
    color: var(--text-dark);
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pr-toast-1rm {
    font-size: 0.78em;
    color: var(--text-light);
    font-style: italic;
}

/* Light mode overrides for new features */
body.light-mode .history-search-input { background: #f9fafb; color: #1f2937; }
body.light-mode .pr-toast { background: #ffffff; }

/* ========================================
   SEARCHABLE EXERCISE DROPDOWN
   ======================================== */

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

.exercise-search-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-deep, #0a0918);
    color: var(--text-dark);
    font-size: 1em;
    transition: border-color 0.2s;
}
.exercise-search-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(108,92,210,0.25);
}

.exercise-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 2000;
    box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.exercise-dropdown.hidden { display: none; }

.exercise-dropdown-group {
    padding: 8px 12px 4px;
    font-size: 0.7em;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    position: sticky;
    top: 0;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-light);
}

.exercise-dropdown-item {
    padding: 9px 14px;
    font-size: 0.88em;
    color: var(--text-dark);
    cursor: pointer;
    transition: background 0.15s;
}
.exercise-dropdown-item:hover {
    background: rgba(108,92,210,0.18);
    color: #ffffff;
}

/* ========================================
   EDITABLE SET ROWS IN WORKOUT DISPLAY
   ======================================== */

.current-sets-edit { margin-top: 10px; }

.current-set-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}

.set-label {
    font-size: 0.78em;
    color: var(--text-light);
    font-weight: 600;
    min-width: 42px;
}

.set-weight-edit,
.set-reps-edit {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-deep, #0a0918);
    color: var(--text-dark);
    font-size: 0.88em;
    text-align: center;
    transition: border-color 0.15s;
}
.set-weight-edit:focus,
.set-reps-edit:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(108,92,210,0.2);
}

.set-unit { font-size: 0.78em; color: var(--text-light); }

/* Light mode */
body.light-mode .exercise-search-input { background: #f9fafb; color: #1f2937; }
body.light-mode .exercise-dropdown { background: #ffffff; }
body.light-mode .exercise-dropdown-group { background: #ffffff; }
body.light-mode .exercise-dropdown-item { color: #1f2937; }
body.light-mode .exercise-dropdown-item:hover { background: rgba(108,92,210,0.1); color: #1f2937; }
body.light-mode .set-weight-edit,
body.light-mode .set-reps-edit { background: #f9fafb; color: #1f2937; }

/* Fix editable set rows — prevent global width:100% from stacking inputs */
.current-set-edit-row {
    flex-wrap: nowrap;
}

.current-set-edit-row .set-weight-edit,
.current-set-edit-row .set-reps-edit {
    width: 80px !important;
    flex-shrink: 0;
    min-width: 0;
}

/* Make the exercise list scrollable so all sets are reachable */
.current-exercises-list {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Workout notes textarea */
.workout-notes-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-deep, #0a0918);
    color: var(--text-dark);
    font-size: 0.9em;
    font-family: inherit;
    resize: vertical;
    min-height: 64px;
    transition: border-color 0.2s;
}
.workout-notes-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(108,92,210,0.2);
}
body.light-mode .workout-notes-input { background: #f9fafb; color: #1f2937; }

/* Notes shown in history cards and detail modal */
.workout-notes-display {
    font-size: 0.82em;
    color: var(--text-light);
    margin-top: 6px;
    font-style: italic;
}
.workout-detail-notes {
    font-size: 0.9em;
    color: var(--text-light);
    font-style: italic;
    margin: 6px 0 14px;
    padding: 8px 12px;
    background: rgba(108,92,210,0.08);
    border-radius: 6px;
    border-left: 3px solid var(--primary-blue);
}

/* Undo delete toast */
.undo-toast {
    position: fixed;
    bottom: 28px;
    left: 28px;
    background: var(--card-bg);
    border: 1.5px solid var(--primary-blue);
    border-radius: 14px;
    padding: 16px 20px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    transform: translateX(-120%);
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
    min-width: 260px;
    max-width: 340px;
}
.undo-toast.undo-toast-show { transform: translateX(0); }
.undo-toast.undo-toast-hide {
    transform: translateX(-120%);
    transition: transform 0.3s ease-in;
}

.undo-toast-msg {
    font-size: 0.88em;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.undo-toast-btn {
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 7px 18px;
    font-size: 0.88em;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.undo-toast-btn:hover { background: var(--secondary-blue); }

.undo-progress-bar {
    margin-top: 10px;
    height: 3px;
    background: var(--border-light);
    border-radius: 2px;
    overflow: hidden;
}
.undo-progress-fill {
    height: 100%;
    width: 100%;
    background: var(--primary-blue);
    border-radius: 2px;
}

body.light-mode .undo-toast { background: #ffffff; }

/* PR toast clickable link */
.pr-toast-link {
    font-size: 0.78em;
    color: #22c55e;
    margin-top: 10px;
    text-align: right;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ========================================
   MOBILE / RESPONSIVE
   ======================================== */

/* Hamburger button — hidden on desktop */
.hamburger-btn {
    display: none;
    background: none;
    border: 1px solid var(--border-light);
    color: var(--text-dark);
    width: 38px;
    height: 38px;
    border-radius: 8px;
    font-size: 1.2em;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}
.hamburger-btn:hover { background: var(--border-light); }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 999;
}
.sidebar-overlay.sidebar-overlay-open { display: block; }

/* ── Tablet (769 – 1024 px): icon-only sidebar ── */
@media (max-width: 1024px) and (min-width: 769px) {
    .sidebar { width: 72px; }
    .sidebar-logo { padding: 0; justify-content: center; }
    .sidebar-logo span { display: none; }
    .sidebar-menu { padding: 0 8px; }
    .sidebar-menu-item { justify-content: center; padding: 13px 8px; gap: 0; }
    .sidebar-menu-item span:not(.sidebar-icon) { display: none; }
    .sidebar-menu-item.active { border-radius: 10px; padding-left: 8px; }
    .sidebar-bottom { padding: 0 8px 12px; }
    #themeLabel { display: none; }
}

/* ── Mobile (≤ 768 px): slide-in sidebar ── */
@media (max-width: 768px) {
    .hamburger-btn { display: flex; }

    .sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        z-index: 1000;
        width: 240px;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        max-height: 100vh;
    }
    .sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: 6px 0 24px rgba(0,0,0,0.45);
    }

    /* Main content fills full width */
    .container { flex-direction: column; }
    div[style*="flex: 1"] { width: 100%; }

    header { padding: 10px 14px; height: auto; min-height: 56px; }

    main { padding: 18px 14px; }

    /* Stats: 2 columns on phone */
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 18px;
    }
    .stat-card { padding: 16px 14px; }
    .stat-value { font-size: 1.8em; }

    /* Chart shorter */
    .progress-chart-container { height: 200px; }

    /* Start workout card stacks */
    .start-workout-card {
        flex-direction: column;
        gap: 14px;
        text-align: center;
        padding: 24px 18px;
    }
    .btn-large { width: 100%; }

    /* Calendar cells smaller */
    .cal-day { min-height: 48px; padding: 5px; }
    .cal-day-number { font-size: 0.75em; width: 20px; height: 20px; }
    .cal-event-label { font-size: 0.58em; padding: 1px 4px; }
    .cal-weekdays div { font-size: 0.65em; padding: 4px 0; }

    /* History card stacks */
    .workout-item { flex-direction: column; gap: 10px; }
    .workout-card-actions { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .workout-card-actions .btn { flex: 1; text-align: center; }

    /* History controls stack */
    .history-controls { flex-direction: column; gap: 10px; }
    .history-search-input { width: 100%; }
    .history-btn-group { width: 100%; }
    .history-btn-group .btn { flex: 1; }

    /* Exercise form */
    .exercise-form-actions { flex-direction: column; gap: 8px; }
    .exercise-form-actions .btn { width: 100%; }
    .workout-save-actions { flex-direction: column; gap: 8px; }
    .workout-save-actions .btn { width: 100%; }

    /* Current set rows: narrower inputs */
    .current-set-edit-row { gap: 5px; }
    .current-set-edit-row .set-weight-edit,
    .current-set-edit-row .set-reps-edit { width: 64px !important; }

    /* PR and undo toasts full-width on small screens */
    .pr-toast, .undo-toast {
        left: 12px; right: 12px;
        bottom: 12px;
        min-width: unset;
        max-width: unset;
    }
    .pr-toast { transform: translateY(120%); }
    .pr-toast.pr-toast-show { transform: translateY(0); }
    .pr-toast.pr-toast-hide { transform: translateY(120%); }
    .undo-toast { transform: translateY(120%); }
    .undo-toast.undo-toast-show { transform: translateY(0); }
    .undo-toast.undo-toast-hide { transform: translateY(120%); }

    /* Modals full-screen on mobile */
    .plan-modal-content,
    .workout-detail-content,
    .exercise-detail-content {
        width: 100%;
        max-width: 100vw;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .plan-modal,
    .workout-detail-modal,
    .exercise-detail-modal { align-items: flex-end; }

    /* Stats page: single column */
    .muscle-group-stats-container { grid-template-columns: 1fr; }

    /* PR cards: full width */
    .records-container { grid-template-columns: 1fr; }

    /* Section descriptions smaller */
    .section-description { font-size: 0.82em; }
}

/* ── Very small phones (≤ 400 px) ── */
@media (max-width: 400px) {
    .stats-container { grid-template-columns: 1fr; }
    .stat-value { font-size: 2em; }
}

/* ========================================
   CALENDAR DAY TOOLTIP
   ======================================== */

.cal-tooltip {
    position: fixed;
    z-index: 3000;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 14px 16px;
    min-width: 200px;
    max-width: 280px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    pointer-events: none;
    font-size: 0.84em;
    line-height: 1.5;
    animation: ttFadeIn 0.15s ease;
}

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

.cal-tt-date {
    font-size: 0.75em;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}

.cal-tt-workout { margin-bottom: 6px; }

.cal-tt-workout-name {
    font-weight: 700;
    color: #22c55e;
    margin-bottom: 3px;
}

.cal-tt-stats {
    font-size: 0.82em;
    color: var(--text-light);
    margin-bottom: 5px;
}

.cal-tt-exercises {
    font-size: 0.8em;
    color: var(--text-dark);
    opacity: 0.85;
}

.cal-tt-plan { margin-bottom: 6px; }

.cal-tt-plan-name {
    font-weight: 700;
    color: #818cf8;
    margin-bottom: 3px;
}

.cal-tt-time {
    font-size: 0.82em;
    color: var(--text-light);
    margin-bottom: 4px;
}

.cal-tt-rest {
    color: var(--text-light);
    font-style: italic;
}

.cal-tt-empty {
    color: var(--text-light);
    line-height: 1.7;
}

.cal-tt-hint {
    font-size: 0.78em;
    color: var(--primary-blue);
    margin-top: 7px;
    font-style: italic;
    display: block;
}

body.light-mode .cal-tooltip { background: #ffffff; box-shadow: 0 8px 28px rgba(0,0,0,0.15); }

/* ========================================
   WEEKLY VOLUME LANDMARKS
   ======================================== */

.volume-landmarks-section { margin-top: 10px; }

/* Summary card */
.vol-summary-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.vol-summary-title {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.vol-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.vol-sum-item { text-align: left; }

.vol-sum-label {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.vol-sum-value {
    font-size: 1.8em;
    font-weight: 700;
    color: #22c55e;
    line-height: 1.1;
}

.vol-sum-text { font-size: 1em; color: var(--text-dark); }

/* Muscle card grid */
.volume-muscle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1024px) { .volume-muscle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .volume-muscle-grid { grid-template-columns: 1fr; } .vol-summary-grid { grid-template-columns: repeat(2,1fr); } }

/* Individual muscle card */
.vol-muscle-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}
.vol-muscle-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.vmc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 6px;
}

.vmc-name { font-weight: 700; font-size: 1em; color: var(--text-dark); }

.vmc-badge {
    font-size: 0.72em;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.vs-none     { background: rgba(156,163,175,0.18); color: #9ca3af; }
.vs-under    { background: rgba(239,68,68,0.18);   color: #f87171; }
.vs-min      { background: rgba(234,179,8,0.18);   color: #fbbf24; }
.vs-optimal  { background: rgba(34,197,94,0.18);   color: #4ade80; }
.vs-high     { background: rgba(59,130,246,0.18);  color: #60a5fa; }
.vs-excessive{ background: rgba(168,85,247,0.18);  color: #c084fc; }

.vmc-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 14px;
}

.vmc-stat { flex: 1; }
.vmc-stat-label { font-size: 0.7em; color: var(--text-light); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.vmc-stat-val   { font-size: 1.25em; font-weight: 700; color: var(--text-dark); }

/* Progress bar */
.vmc-bar-wrap { margin-bottom: 10px; }
.vmc-bar {
    height: 8px;
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
    overflow: hidden;
}
.vmc-bar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0%;
}

/* Range + info icon */
.vmc-range {
    font-size: 0.75em;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}

.info-icon {
    display: inline-flex;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: var(--border-light);
    color: var(--text-light);
    font-size: 0.68em;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    cursor: help;
    position: relative;
    font-style: italic;
    flex-shrink: 0;
}
.info-icon::after {
    content: attr(data-tip);
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 10px 12px;
    width: 240px;
    font-size: 1.3em;
    color: var(--text-dark);
    z-index: 500;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    line-height: 1.5;
    text-align: left;
    pointer-events: none;
    font-style: normal;
    font-weight: 400;
    white-space: normal;
}
.info-icon:hover::after { display: block; }

.vmc-msg { font-size: 0.78em; color: var(--text-light); font-style: italic; }

/* Coaching insights */
.coaching-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.coaching-title {
    font-size: 1em;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}

.coaching-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.88em;
    color: var(--text-dark);
    line-height: 1.5;
}
.coaching-row:last-child { border-bottom: none; }

.coaching-icon { flex-shrink: 0; font-size: 1em; }

.coaching-good { color: #4ade80; }
.coaching-good .coaching-icon { color: #22c55e; }
.coaching-warn { color: var(--text-dark); }
.coaching-fire { color: var(--text-dark); }

body.light-mode .vol-summary-card,
body.light-mode .vol-muscle-card,
body.light-mode .coaching-card { background: #ffffff; }
body.light-mode .vmc-bar { background: rgba(0,0,0,0.08); }
body.light-mode .info-icon::after { background: #ffffff; }

/* Volume Landmarks v2 — summary header, badge, coaching sentence */
.vol-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.vol-summary-title { margin: 0; font-size: 1.05em; font-weight: 700; color: var(--text-dark); border: none; padding: 0; }

.vol-summary-badge {
    font-size: 0.78em;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.vol-coaching-sentence {
    font-size: 0.88em;
    color: var(--text-light);
    font-style: italic;
    margin-bottom: 18px;
    line-height: 1.5;
}

/* Below-optimal badge (new status tier) */
.vs-below { }

/* Red warning icon in coaching insights */
.coaching-warn .coaching-icon { color: #ef4444; }

/* ========================================
   MUSCLE DEVELOPMENT RADAR
   ======================================== */

.radar-section { margin-bottom: 28px; }

.radar-card {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 24px;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.radar-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: center;
    margin: 20px 0;
}

.radar-chart-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 420px;
}

#muscleRadarChart {
    width: 100%;
    height: 100%;
    display: block;
}

.radar-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
    font-style: italic;
    line-height: 1.8;
}

/* Insights panel */
.radar-insights-panel { height: 100%; }

.radar-insights-card {
    background: var(--bg-deep, #0a0918);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 18px 20px;
    height: 100%;
    box-sizing: border-box;
}

.radar-insights-title {
    font-size: 0.95em;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}

.ri-item {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ri-item:last-child { border-bottom: none; padding-bottom: 0; }

.ri-label {
    font-size: 0.7em;
    color: var(--text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.ri-value {
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-dark);
}

.ri-sub {
    font-size: 0.78em;
    margin-top: 2px;
    color: var(--text-light);
}

.ri-recommendation {
    background: rgba(108,92,210,0.08);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 8px;
    border-bottom: none !important;
}

.ri-rec-text {
    font-size: 0.84em;
    color: var(--text-dark);
    font-style: italic;
    line-height: 1.55;
    margin-top: 4px;
}

/* Legend */
.radar-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
    font-size: 0.78em;
    color: var(--text-light);
}

.radar-legend-dot {
    width: 10px; height: 10px;
    background: #39ff8a;
    border-radius: 50%;
    flex-shrink: 0;
}

.radar-legend-label { font-weight: 600; color: var(--text-dark); }

/* Hover tooltip */
.radar-tooltip {
    position: fixed;
    z-index: 3000;
    background: var(--card-bg);
    border: 1.5px solid #39ff8a;
    border-radius: 10px;
    padding: 10px 14px;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 14px rgba(57,255,138,0.15);
    min-width: 120px;
}

.rtt-name { font-weight: 700; font-size: 0.88em; color: var(--text-dark); margin-bottom: 3px; }
.rtt-val  { font-size: 1.3em; font-weight: 700; color: #39ff8a; line-height: 1.1; }
.rtt-note { font-size: 0.7em; color: var(--text-light); margin-top: 3px; font-style: italic; }

/* Responsive */
@media (max-width: 900px) {
    .radar-body { grid-template-columns: 1fr; }
    .radar-chart-wrapper { max-width: 340px; margin: 0 auto; }
}

/* Light mode */
body.light-mode .radar-insights-card { background: #f9fafb; }
body.light-mode .radar-tooltip { background: #ffffff; }
body.light-mode .ri-item { border-bottom-color: rgba(0,0,0,0.06); }

/* Keep equal padding inside the recommendation box */
.ri-recommendation { padding-bottom: 10px !important; }

/* ========================================
   EXERCISE TYPE SYSTEM
   ======================================== */

/* Mode toggle (shown for optional weighted exercises) */
.exercise-mode-toggle { margin-bottom: 16px; }

.mode-toggle-group {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.mode-btn {
    flex: 1;
    padding: 9px 16px;
    border: 1.5px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-deep, #0a0918);
    color: var(--text-light);
    font-size: 0.88em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.mode-btn:hover { border-color: var(--primary-blue); color: var(--text-dark); }

.mode-btn-active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #ffffff;
    font-weight: 600;
}

/* Bodyweight label inside set input group */
.bw-mode-label {
    grid-column: 1 / -1;
    font-size: 0.8em;
    color: var(--primary-blue);
    font-weight: 600;
    margin-bottom: 4px;
    font-style: italic;
}

/* Timed inputs side by side */
.timed-input { flex: 1; }

.exercise-set-input-group.timed-group {
    grid-template-columns: auto 1fr 1fr;
}

/* Light mode */
body.light-mode .mode-btn { background: #f9fafb; color: #374151; }
body.light-mode .mode-btn-active { background: var(--primary-blue); color: #fff; }

/* ========================================
   PR HISTORY TIMELINE
   ======================================== */

.pr-timeline-toggle {
    margin-top: 12px;
    background: none;
    border: 1px solid var(--border-light);
    color: var(--text-light);
    font-size: 0.78em;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 7px;
}
.pr-timeline-toggle:hover { border-color: #39ff8a; color: #39ff8a; }
.pr-tl-arrow { font-size: 0.7em; }

.pr-timeline-drawer { margin-top: 10px; }

.pr-tl-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0;
}

.pr-tl-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    position: relative;
    padding-bottom: 14px;
}
.pr-tl-item:last-child { padding-bottom: 0; }

.pr-tl-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--border-light);
    flex-shrink: 0;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}
.pr-tl-dot-current { background: #39ff8a; box-shadow: 0 0 8px rgba(57,255,138,0.5); }

.pr-tl-line {
    position: absolute;
    left: 4px;
    top: 14px;
    bottom: 0;
    width: 2px;
    background: var(--border-light);
}

.pr-tl-content { flex: 1; }

.pr-tl-value {
    font-size: 0.88em;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pr-tl-badge {
    background: #39ff8a;
    color: #0a2a18;
    font-size: 0.65em;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 800;
}

.pr-tl-sub {
    font-size: 0.75em;
    color: var(--text-light);
    margin-top: 1px;
}

.pr-tl-meta {
    font-size: 0.72em;
    color: var(--text-light);
    opacity: 0.7;
    margin-top: 1px;
}

.pr-tl-empty {
    font-size: 0.8em;
    color: var(--text-light);
    font-style: italic;
    padding: 8px 0;
    opacity: 0.7;
}

/* ========================================
   WORKOUT TEMPLATES PAGE
   ======================================== */

.template-controls {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.template-search-wrap { flex: 1; min-width: 200px; }

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

/* Template card */
.template-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 3px 14px rgba(0,0,0,0.22);
    transition: all 0.22s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.template-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.38);
    border-color: rgba(57,255,138,0.25);
}

.tc-name { font-size: 1.05em; font-weight: 700; color: var(--text-dark); margin: 0; }
.tc-desc { font-size: 0.82em; color: var(--text-light); margin: 3px 0 0; }

.tc-muscles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tc-muscle-tag {
    background: rgba(108,92,210,0.18);
    color: #a5b4fc;
    font-size: 0.72em;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
}

.tc-stats {
    display: flex;
    gap: 14px;
    font-size: 0.8em;
    color: var(--text-light);
}

.tc-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.tc-btn-start { flex: 1; font-size: 0.85em; padding: 8px 12px; }
.tc-btn { font-size: 0.78em; padding: 7px 11px; }
.tc-btn-dup { background: rgba(108,92,210,0.2); color: var(--primary-blue); }
.tc-btn-dup:hover { background: var(--primary-blue); color: #fff; }

/* Template empty state */
.template-empty {
    text-align: center;
    padding: 60px 20px;
    grid-column: 1 / -1;
}
.template-empty-icon { font-size: 3em; margin-bottom: 14px; }
.template-empty h3 { color: var(--text-dark); margin-bottom: 10px; }
.template-empty p { color: var(--text-light); margin-bottom: 20px; font-size: 0.9em; line-height: 1.7; }

/* Template Editor Modal */
.template-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.template-editor-modal.hidden { display: none; }

.te-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
}

.te-content {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    width: 560px;
    max-width: 96vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}

.te-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    background: var(--card-bg);
    z-index: 1;
}
.te-header h2 { margin: 0; font-size: 1.1em; }

.te-body { padding: 22px 24px; }

.te-exercises-list {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.te-ex-empty { font-size: 0.85em; color: var(--text-light); font-style: italic; }

.te-ex-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-deep, #0a0918);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 10px 14px;
}
.te-ex-name { font-weight: 600; font-size: 0.88em; color: var(--text-dark); }
.te-ex-meta { font-size: 0.75em; color: var(--text-light); margin-top: 2px; }

.te-add-exercise-form {
    background: rgba(108,92,210,0.06);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 18px;
}
.te-add-title { font-size: 0.85em; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }

.te-set-defaults { margin: 10px 0; }

.te-actions {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}

/* Save as Template button in history */
.btn-save-template {
    background: rgba(57,255,138,0.12);
    color: #39ff8a;
    border: 1px solid rgba(57,255,138,0.3);
    padding: 8px 13px;
    font-size: 0.82em;
    border-radius: 8px;
}
.btn-save-template:hover {
    background: rgba(57,255,138,0.22);
    border-color: #39ff8a;
}

/* Responsive */
@media (max-width: 768px) {
    .templates-grid { grid-template-columns: 1fr; }
    .tc-actions { flex-direction: column; }
    .tc-btn-start { flex: none; }
}

body.light-mode .template-card { background: #ffffff; }
body.light-mode .te-content { background: #ffffff; }
body.light-mode .te-header { background: #ffffff; }
body.light-mode .te-ex-item { background: #f9fafb; }
body.light-mode .te-add-exercise-form { background: rgba(108,92,210,0.04); }
body.light-mode .tc-muscle-tag { background: rgba(108,92,210,0.1); color: var(--primary-blue); }

/* ================================================
   LIGHT MODE FIXES (from PDF review)
   ================================================ */

/* a. Calendar month/weekday labels — dark text in light mode */
body.light-mode .cal-nav h2,
body.light-mode #dashCalMonthYear,
body.light-mode #calendarMonthYear { color: #1f2937 !important; }

body.light-mode .cal-weekdays div { color: #374151; }

body.light-mode .cal-day-number { color: #1f2937; }

body.light-mode .cal-grey  { color: #6b7280; }
body.light-mode .cal-red   { color: #b91c1c; }
body.light-mode .cal-green { color: #166534; }
body.light-mode .cal-blue  { color: #3730a3; }

/* b. Achievements PR cards — more breathing room */
body.light-mode .pr-card {
    padding: 22px 24px;
    margin-bottom: 12px;
}

body.light-mode .pr-muscle-group { margin-bottom: 24px; }

body.light-mode .records-container {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

body.light-mode .pr-set { color: #111827; }
body.light-mode .pr-exercise-name { color: #111827; }
body.light-mode .pr-estimated { color: #6b7280; }

/* c. Statistics muscle group cards — more inner padding */
body.light-mode .muscle-group-card {
    padding: 22px 24px;
    gap: 12px;
}

body.light-mode .muscle-group-card-name { color: #111827; font-size: 1.05em; }
body.light-mode .exercise-change-name   { color: #374151; }
body.light-mode .exercise-change-row    { border-bottom-color: rgba(0,0,0,0.06); }

body.light-mode .vol-summary-card,
body.light-mode .vol-muscle-card { padding: 22px 24px; }
body.light-mode .vol-muscle-card  { color: #111827; }
body.light-mode .vmc-name         { color: #111827; }
body.light-mode .vmc-stat-val     { color: #111827; }
body.light-mode .vmc-msg          { color: #6b7280; }
body.light-mode .vmc-range        { color: #6b7280; }
body.light-mode .vol-sum-value    { color: #111827; }

/* d. Create workout modal — fix white text on light backgrounds */
body.light-mode .layout-option h3 { color: #1f2937; }
body.light-mode .layout-option p  { color: #4b5563; }

body.light-mode .modal-header h2,
body.light-mode .workout-detail-header h2,
body.light-mode .exercise-detail-header h2 { color: #111827; }

/* Past workout template section title */
body.light-mode .workout-layout-modal h2 { color: #111827; }

/* Start workout card headings in light mode */
body.light-mode .start-workout-content h3 { color: #1e1b4b; }

/* Create workout section headings */
body.light-mode .create-workout-section h2 { color: #111827; }
body.light-mode .add-exercise-form h3       { color: #111827; }
body.light-mode .current-workout-display h3 { color: #111827; }

/* Exercise set number labels */
body.light-mode .exercise-set-number { color: #6d28d9; }
body.light-mode .set-label           { color: #374151; }
body.light-mode .set-unit            { color: #6b7280; }
body.light-mode .bw-mode-label       { color: #6d28d9; }

/* Current exercise item in light mode */
body.light-mode .current-exercise-item-details h4 { color: #111827; }
body.light-mode .current-exercise-item-muscle      { color: #6d28d9; }

/* e. Workout history cards — more room, better text contrast */
body.light-mode .workout-item {
    padding: 18px 22px;
    margin-bottom: 12px;
}

body.light-mode .workout-details h3  { color: #111827; }
body.light-mode .workout-details p   { color: #6b7280; }

/* History controls */
body.light-mode .history-section h2 { color: #111827; }

/* Section headings across all pages in light mode */
body.light-mode h2 { color: #111827; }
body.light-mode h3 { color: #111827; }
body.light-mode label { color: #374151; }

/* ================================================================
   LIGHT MODE — TARGETED PADDING & TEXT COLOR FIXES
   Only fixing actual contrast/spacing problems.
   No global layout changes.
   ================================================================ */

/* ── Status badge text: pastel colours are unreadable on white ── */
body.light-mode .vs-none      { background: rgba(107,114,128,0.10); color: #374151; }
body.light-mode .vs-under     { background: rgba(239,68,68,0.10);   color: #b91c1c; }
body.light-mode .vs-below     { background: rgba(249,115,22,0.10);  color: #c2410c; }
body.light-mode .vs-min       { background: rgba(234,179,8,0.10);   color: #92400e; }
body.light-mode .vs-optimal   { background: rgba(34,197,94,0.10);   color: #15803d; }
body.light-mode .vs-high      { background: rgba(59,130,246,0.10);  color: #1d4ed8; }
body.light-mode .vs-excessive { background: rgba(168,85,247,0.10);  color: #6b21a8; }

/* ── Coaching insights: light green (#4ade80) on white fails ── */
body.light-mode .coaching-good              { color: #14532d; }
body.light-mode .coaching-good .coaching-icon { color: #16a34a; }
body.light-mode .coaching-row               { border-bottom-color: rgba(0,0,0,0.05); }

/* ── Template muscle group tags: #a5b4fc on white fails ── */
body.light-mode .tc-muscle-tag {
    background: rgba(79,70,229,0.10);
    color: #3730a3;
}

/* ── Plan modal header: h2 is white but panel has no background ── */
body.light-mode .plan-modal-header         { background: #f9fafb; }
body.light-mode .plan-modal-header h2      { color: #111827; }

/* ── Exercise / Workout detail headers: h2 is white on white card ── */
body.light-mode .workout-detail-header     { background: #f9fafb; }
body.light-mode .workout-detail-header h2  { color: #111827; }
body.light-mode .exercise-detail-header    { background: #f9fafb; }
body.light-mode .exercise-detail-header h2 { color: #111827; }

/* ── PR timeline: neon hover & dot on white ── */
body.light-mode .pr-timeline-toggle        { color: #374151; border-color: #d1d5db; }
body.light-mode .pr-timeline-toggle:hover  { color: #15803d; border-color: #16a34a; }
body.light-mode .pr-tl-dot-current         { background: #16a34a; box-shadow: 0 0 6px rgba(22,163,74,0.4); }
body.light-mode .pr-tl-badge               { background: #16a34a; color: #f0fdf4; }
body.light-mode .pr-tl-value              { color: #111827; }
body.light-mode .pr-tl-sub                { color: #6b7280; }
body.light-mode .pr-tl-meta               { color: #9ca3af; opacity: 1; }

/* ── Vol summary badge: inline colours may use --neon on white ── */
body.light-mode .vol-summary-badge { font-weight: 700; }

/* ── Section / widget description text: too faint at 0.75 opacity ── */
body.light-mode .section-description { color: #6b7280; opacity: 1; }
body.light-mode .chart-subtitle      { color: #6b7280; opacity: 1; }
body.light-mode .radar-legend-note   { color: #6b7280; }

/* ── Plan modal divider text ── */
body.light-mode .plan-divider-text { color: #6b7280; }
body.light-mode .plan-optional     { color: #9ca3af; }

/* ── Radar tooltip on light background ── */
body.light-mode .rtt-val  { color: #15803d; }
body.light-mode .rtt-name { color: #111827; }
body.light-mode .rtt-note { color: #6b7280; }

/* ── Calendar tooltip on light background ── */
body.light-mode .cal-tooltip         { background: #ffffff; }
body.light-mode .cal-tt-date         { color: #6b7280; }
body.light-mode .cal-tt-workout-name { color: #15803d; }
body.light-mode .cal-tt-plan-name    { color: #3730a3; }
body.light-mode .cal-tt-stats        { color: #6b7280; }
body.light-mode .cal-tt-exercises    { color: #374151; }
body.light-mode .cal-tt-rest         { color: #6b7280; }
body.light-mode .cal-tt-empty        { color: #6b7280; }
body.light-mode .cal-tt-hint         { color: #4338ca; }

/* ── Template editor: headings inside modal ── */
body.light-mode .te-add-title { color: #374151; }
body.light-mode .te-ex-name   { color: #111827; }
body.light-mode .te-ex-meta   { color: #6b7280; }

/* ── PADDING: PR timeline drawer needs breathing room inside white card ── */
body.light-mode .pr-timeline-drawer { padding: 4px 2px 4px 4px; }

/* ── PADDING: Vol weekly summary grid items — label too close to value ── */
body.light-mode .vol-sum-item { padding: 6px 4px; }

/* ── PADDING: Coaching insight card rows — text too close to edges ── */
body.light-mode .coaching-card   { padding: 22px 24px; }
body.light-mode .coaching-row    { padding: 9px 0; }

/* ── PADDING: Template cards — buttons touching bottom edge ── */
body.light-mode .template-card   { padding: 22px 22px 20px; }

/* ── PADDING: Vol muscle cards — content touching side edges ── */
body.light-mode .vol-muscle-card { padding: 20px 22px; }

/* ── PADDING: Stats page weekly landmark summary — cramped grid ── */
body.light-mode .vol-summary-card { padding: 24px; }
body.light-mode .vol-summary-grid { gap: 18px; }

/* ================================================================
   LIGHT MODE — CONSISTENT SECTION BACKGROUNDS
   In dark mode, section wrappers blend with the page background.
   In light mode they were becoming white cards wrapping white cards.
   This makes section containers transparent so only individual
   data cards (muscle cards, vol cards, etc.) appear as white panels.
   ================================================================ */

/* Statistics page — section wrapper that wraps muscle group cards */
body.light-mode .stats-page-section {
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

/* Achievements page — section wrapper that wraps PR cards */
body.light-mode .records-section {
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

/* Calendar page — outer section wrapper */
body.light-mode .calendar-page-section {
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

/* Dashboard — progress chart section */
body.light-mode .progress-chart-section {
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}
/* Keep the chart container itself white so the canvas draws correctly */
body.light-mode .progress-chart-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

/* Dashboard — calendar section wrapper */
body.light-mode .calendar-section {
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

/* Dashboard — history section wrapper */
body.light-mode .history-section {
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

/* Dashboard — radar section wrapper */
body.light-mode .radar-section {
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

/* The actual radar card inside the radar section keeps its white card */
body.light-mode .radar-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

/* Volume landmarks section wrapper */
body.light-mode .volume-landmarks-section {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Stats page section wrapper for the top Percent Increase section */
body.light-mode .stats-page-section h2,
body.light-mode .records-section h2,
body.light-mode .calendar-page-section h2 { color: #111827; }

/* Ensure individual data cards remain as white panels */
body.light-mode .muscle-group-card,
body.light-mode .vol-summary-card,
body.light-mode .vol-muscle-card,
body.light-mode .coaching-card,
body.light-mode .pr-card,
body.light-mode .template-card,
body.light-mode .stat-card,
body.light-mode .workout-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

/* ================================================================
   TARGETED FIXES: Weekly Volume Landmarks + Past Workout Names
   ================================================================ */

/* Fix 1: Past workout template names are white (#ffffff) in both
   rule sets — override to dark text for light mode */
body.light-mode .past-workout-item-name      { color: #111827 !important; }
body.light-mode .past-workout-item-exercises { color: #6b7280 !important; }

/* Also ensure the past workout item card itself has good contrast */
body.light-mode .past-workout-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #111827;
}

/* Fix 2: Weekly Volume Landmarks — vol-summary-card inner padding
   was reduced to 24px and the coaching sentence was cramped against
   the card edges in light mode. Restore generous horizontal padding. */
body.light-mode .vol-summary-card {
    padding: 24px 28px;
}

body.light-mode .vol-coaching-sentence {
    padding: 10px 16px;
    margin-left: 0;
    margin-right: 0;
    background: rgba(108,92,210,0.07);
    border-left: 3px solid var(--primary-blue);
    border-radius: 0 6px 6px 0;
    color: #374151;
}

/* Ensure the section description paragraph above the landmarks
   is just plain readable text with no inherited card/input styling */
body.light-mode .volume-landmarks-section .section-description {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
    color: #6b7280;
}

/* ================================================================
   TARGETED FIXES: Volume Landmarks title pill + Calendar card
   ================================================================ */

/* Fix 1 — Volume Landmarks heading pill:
   ui-polish.css applies box-shadow + border-radius to all children
   of .volume-landmarks-section via the "> *" selector, including h2.
   Remove that card effect from the heading and description only. */
body.light-mode .volume-landmarks-section > h2,
body.light-mode .volume-landmarks-section > p {
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Also kill it in dark mode — the h2 pill looks wrong there too */
.volume-landmarks-section > h2,
.volume-landmarks-section > p {
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Fix 2 — Calendar: restore a subtle card background in light mode
   so the calendar grid has a distinct surface like in dark mode.
   Keep the day-cell colours (green/red/blue) unchanged. */
body.light-mode .calendar-page-section {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    padding: 24px !important;
}

body.light-mode .calendar-section {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    padding: 24px !important;
}

/* ========================================
   PLAN OPTIONS MODAL (Start or Delete)
   ======================================== */

.plan-options-modal {
    position: fixed;
    inset: 0;
    z-index: 3500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.po-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}

.po-content {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 22px 24px;
    min-width: 270px;
    max-width: 340px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), opacity 0.22s ease;
}

.plan-options-modal.po-visible .po-content {
    transform: scale(1);
    opacity: 1;
}

.po-name {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.po-time {
    font-size: 0.82em;
    color: var(--text-light);
    margin-bottom: 6px;
}

.po-exercises {
    font-size: 0.8em;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 4px;
}

.po-header { margin-bottom: 18px; }

.po-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.po-actions .btn { text-align: center; width: 100%; }

body.light-mode .po-content { background: #ffffff; }

/* Calendar tooltip plan action buttons */
.cal-tt-plan-btns {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.cal-tt-btn {
    padding: 5px 12px;
    border: none;
    border-radius: 7px;
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.cal-tt-btn:hover { opacity: 0.85; }

.cal-tt-btn-start { background: var(--primary-blue); color: #fff; }
.cal-tt-btn-edit  { background: #4f46e5;             color: #fff; }
.cal-tt-btn-del   { background: #ef4444;             color: #fff; }

body.light-mode .cal-tt-btn-start { background: var(--primary-blue); }

/* ============================================================
   FAST WORKOUT LOGGING UI
   Optimised for speed and one-thumb mobile use.
   ============================================================ */

/* ── Rest timer bar ── */
.rest-timer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--bg-deep, #0a0918);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

#restTimerDisplay {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.02em;
    min-width: 110px;
}

.rest-timer-bar.rest-timer-running #restTimerDisplay { color: #22c55e; }
.rest-timer-bar.rest-timer-done   #restTimerDisplay { color: #ef4444; animation: timerDone 0.5s ease 3; }

@keyframes timerDone {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.rest-timer-controls { display: flex; align-items: center; gap: 8px; }

.rest-btn {
    padding: 6px 14px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-dark);
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.rest-btn:hover { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }

.rest-select {
    padding: 5px 8px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-dark);
    font-size: 0.82em;
    cursor: pointer;
}

/* ── Exercise card ── */
.active-exercise-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

.active-ex-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.active-ex-name {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--text-dark);
    flex: 1;
}

.active-ex-muscle {
    font-size: 0.72em;
    font-weight: 600;
    background: rgba(108,92,210,0.18);
    color: #a5b4fc;
    padding: 3px 9px;
    border-radius: 20px;
}

.remove-ex-x {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1em;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.remove-ex-x:hover { background: rgba(239,68,68,0.15); color: #ef4444; }

/* ── Last time row ── */
.last-time-row {
    font-size: 0.78em;
    color: var(--text-light);
    margin-bottom: 12px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    border-left: 3px solid var(--primary-blue);
    line-height: 1.5;
}

/* ── Set rows ── */
.active-sets-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

.active-set-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-light);
    flex-wrap: wrap;
    transition: background 0.2s, border-color 0.2s;
}

.active-set-row.set-row-done {
    background: rgba(34,197,94,0.08);
    border-color: rgba(34,197,94,0.3);
}

.set-num-label {
    font-size: 0.75em;
    font-weight: 700;
    color: var(--text-light);
    min-width: 36px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.set-row-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    flex-wrap: wrap;
}

/* Fast inputs — large tap targets */
.fast-input {
    width: 72px !important;
    padding: 8px 6px !important;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-deep, #0a0918);
    color: var(--text-dark);
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}
.fast-input::-webkit-inner-spin-button,
.fast-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fast-input:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 2px rgba(108,92,210,0.25); }

/* Quick +/- buttons */
.quick-adj {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.quick-adj button {
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: 7px;
    background: var(--card-bg);
    color: var(--text-light);
    font-size: 0.75em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.quick-adj button:hover { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }

.bw-pill {
    padding: 4px 10px;
    background: rgba(108,92,210,0.2);
    color: #a5b4fc;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 700;
}

/* Complete set button */
.complete-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    background: transparent;
    color: var(--text-light);
    font-size: 1.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
.complete-btn:hover { border-color: #22c55e; color: #22c55e; }
.complete-btn.complete-done {
    background: #22c55e;
    border-color: #22c55e;
    color: #052e16;
    font-weight: 900;
}

/* Remove set × */
.remove-set-x {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--text-light);
    font-size: 0.85em;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.remove-set-x:hover { background: rgba(239,68,68,0.15); color: #ef4444; }

/* Add Set button */
.add-set-btn-fast {
    width: 100%;
    padding: 10px;
    border: 1.5px dashed var(--border-light);
    border-radius: 10px;
    background: transparent;
    color: var(--text-light);
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.03em;
}
.add-set-btn-fast:hover {
    border-color: #39ff8a;
    color: #39ff8a;
    background: rgba(57,255,138,0.05);
}

/* ── Mobile optimisations ── */
@media (max-width: 768px) {
    .fast-input  { width: 64px !important; font-size: 1.05em !important; }
    .complete-btn { width: 44px; height: 44px; font-size: 1.2em; }
    .quick-adj button { padding: 7px 11px; font-size: 0.8em; }
    .active-set-row { padding: 10px 8px; }
    .add-set-btn-fast { padding: 13px; font-size: 0.9em; }
}

/* ── Light mode ── */
body.light-mode .rest-timer-bar   { background: #f9fafb; }
body.light-mode .rest-btn         { background: #ffffff; color: #374151; }
body.light-mode .rest-select      { background: #ffffff; color: #374151; }
body.light-mode .active-exercise-card { background: #ffffff; border-color: #e5e7eb; }
body.light-mode .active-set-row   { background: #f9fafb; border-color: #e5e7eb; }
body.light-mode .active-set-row.set-row-done { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.25); }
body.light-mode .fast-input       { background: #ffffff; color: #111827; border-color: #d1d5db; }
body.light-mode .quick-adj button { background: #f9fafb; color: #374151; border-color: #d1d5db; }
body.light-mode .last-time-row    { background: rgba(0,0,0,0.03); color: #6b7280; }
body.light-mode .add-set-btn-fast { color: #9ca3af; border-color: #d1d5db; }
body.light-mode .add-set-btn-fast:hover { color: #15803d; border-color: #16a34a; background: rgba(22,163,74,0.05); }
body.light-mode .active-ex-muscle { background: rgba(108,92,210,0.1); color: #4338ca; }

/* ── Rest timer updates ── */

/* Two-row layout */
.rest-top-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.rest-bottom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
}

.rest-row-hidden { display: none; }

/* ON/OFF toggle button */
.rest-toggle {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border-light);
    font-size: 0.82em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.rest-toggle-on  { background: rgba(34,197,94,0.15);  color: #22c55e; border-color: rgba(34,197,94,0.4); }
.rest-toggle-off { background: rgba(156,163,175,0.1); color: var(--text-light); }
.rest-toggle:hover { filter: brightness(1.15); }

/* Custom time inputs */
.rest-time-input {
    width: 52px !important;
    padding: 5px 6px !important;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-deep, #0a0918);
    color: var(--text-dark);
    font-size: 0.88em;
    text-align: center;
    -moz-appearance: textfield;
}
.rest-time-input::-webkit-inner-spin-button,
.rest-time-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.rest-unit { font-size: 0.78em; color: var(--text-light); }
.rest-cfg-label { font-size: 0.78em; color: var(--text-light); font-weight: 600; white-space: nowrap; }

.rest-presets { display: flex; gap: 4px; flex-wrap: wrap; }

.rest-preset {
    padding: 5px 10px;
    border: 1px solid var(--border-light);
    border-radius: 7px;
    background: var(--card-bg);
    color: var(--text-light);
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.rest-preset:hover { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }

/* Rest time saved per set */
.set-rest-info {
    font-size: 0.72em;
    color: var(--primary-blue);
    font-style: italic;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(108,92,210,0.1);
}

/* Light mode */
body.light-mode .rest-time-input   { background: #ffffff; color: #111827; border-color: #d1d5db; }
body.light-mode .rest-preset       { background: #f9fafb; color: #374151; border-color: #d1d5db; }
body.light-mode .rest-toggle-off   { background: #f3f4f6; color: #6b7280; }
body.light-mode .set-rest-info     { color: var(--primary-blue); background: rgba(108,92,210,0.08); }
body.light-mode .rest-bottom-row   { border-top-color: #e5e7eb; }

/* ============================================================
   WORKOUT TIMING & REST TIMER v2
   ============================================================ */

/* ── Workout type selector (Start Now / Log Past) ── */
.workout-type-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.workout-type-btn {
    flex: 1;
    padding: 11px 16px;
    border: 1.5px solid var(--border-light);
    border-radius: 10px;
    background: var(--bg-deep, #0a0918);
    color: var(--text-light);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.workout-type-btn:hover { border-color: var(--primary-blue); color: var(--text-dark); }
.workout-type-btn.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #ffffff;
}

/* Duration preview text */
.duration-preview {
    font-size: 0.85em;
    margin-top: 8px;
    font-weight: 600;
    min-height: 20px;
}
.duration-ok    { color: #22c55e; }
.duration-error { color: #ef4444; }

/* ── Live workout duration bar ── */
.live-duration-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(108,92,210,0.12);
    border: 1px solid rgba(108,92,210,0.3);
    border-radius: 10px;
    padding: 8px 16px;
    margin-bottom: 14px;
}

.live-duration-past {
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.2);
}

.live-dur-label { font-size: 0.82em; color: var(--text-light); font-weight: 600; }
.live-dur-time  { font-size: 1.05em; font-weight: 700; color: var(--text-dark); letter-spacing: 0.04em; }

/* ── Pre-set rest row ── */
.pre-set-rest {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.start-rest-btn {
    padding: 7px 16px;
    border: 1.5px dashed var(--border-light);
    border-radius: 8px;
    background: transparent;
    color: var(--text-light);
    font-size: 0.84em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}
.start-rest-btn:hover { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,0.06); }

/* ── Rest row (after each set) ── */
.rest-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin: 4px 0 6px;
    border-radius: 8px;
    flex-wrap: wrap;
    font-size: 0.85em;
}

.rest-running-row { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.25); }
.rest-saved-row   { background: rgba(108,92,210,0.06); border: 1px solid rgba(108,92,210,0.18); }
.past-rest-row    { background: rgba(99,102,241,0.06); border: 1px dashed var(--border-light); }

.rest-running-label { font-weight: 600; color: var(--text-dark); }
.rest-count         { color: #22c55e; font-size: 1.1em; font-weight: 800; min-width: 48px; display: inline-block; }
.rest-saved-label   { color: var(--primary-blue); font-weight: 600; }
.rest-label-small   { font-size: 0.82em; color: var(--text-light); white-space: nowrap; }

/* Stop Rest button */
.stop-rest-btn {
    padding: 5px 14px;
    border: none;
    border-radius: 7px;
    background: #ef4444;
    color: #fff;
    font-size: 0.8em;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}
.stop-rest-btn:hover { opacity: 0.85; }

/* Manual rest inputs (past workouts) */
.rest-manual-input {
    width: 52px !important;
    padding: 4px 6px !important;
    border: 1px solid var(--border-light);
    border-radius: 7px;
    background: var(--bg-deep, #0a0918);
    color: var(--text-dark);
    font-size: 0.88em;
    text-align: center;
    -moz-appearance: textfield;
}
.rest-manual-input::-webkit-inner-spin-button,
.rest-manual-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.rest-manual-input:focus { outline: none; border-color: var(--primary-blue); }

/* Mobile */
@media (max-width: 768px) {
    .workout-type-btn { font-size: 0.84em; padding: 10px 12px; }
    .start-rest-btn   { font-size: 0.88em; padding: 9px 16px; }
    .stop-rest-btn    { font-size: 0.85em; padding: 7px 16px; }
    .rest-count       { font-size: 1.2em; }
}

/* Light mode */
body.light-mode .workout-type-btn            { background: #f9fafb; color: #374151; border-color: #d1d5db; }
body.light-mode .workout-type-btn.active     { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); }
body.light-mode .live-duration-bar           { background: rgba(108,92,210,0.07); border-color: rgba(108,92,210,0.2); }
body.light-mode .rest-running-row            { background: rgba(34,197,94,0.06); }
body.light-mode .rest-saved-row              { background: rgba(108,92,210,0.05); }
body.light-mode .past-rest-row               { background: #f9fafb; border-color: #d1d5db; }
body.light-mode .rest-manual-input           { background: #ffffff; color: #111827; border-color: #d1d5db; }
body.light-mode .start-rest-btn              { color: #6b7280; border-color: #d1d5db; }
body.light-mode .start-rest-btn:hover        { color: #15803d; border-color: #16a34a; }

/* Inline exercise add at the bottom of the workout */
.inline-add-exercise {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-light);
}

.inline-ex-search {
    font-size: 0.95em !important;
    padding: 11px 14px !important;
    border-radius: 12px !important;
    border-style: dashed !important;
}
.inline-ex-search:focus {
    border-style: solid !important;
    border-color: #39ff8a !important;
    box-shadow: 0 0 0 3px rgba(57,255,138,0.15) !important;
}
.inline-ex-search::placeholder { color: var(--text-light); opacity: 0.7; }

body.light-mode .inline-add-exercise { border-top-color: #d1d5db; }
body.light-mode .inline-ex-search::placeholder { color: #9ca3af; }

/* Inline search at the top of the exercise list */
.inline-add-top {
    border-top: none;
    border-bottom: 1px dashed var(--border-light);
    margin-top: 0;
    margin-bottom: 14px;
    padding-top: 0;
    padding-bottom: 12px;
}
body.light-mode .inline-add-top { border-bottom-color: #d1d5db; }

/* Inline search below the last exercise's + Set button */
.inline-add-after-set {
    border-top: 1px dashed var(--border-light);
    border-bottom: none;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 0;
}
body.light-mode .inline-add-after-set { border-top-color: #d1d5db; }

/* Simple rest toggle button in the workout duration bar */
.rest-toggle-simple {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border-light);
    font-size: 0.8em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    margin-left: auto;
}
.rest-toggle-on  { background: rgba(34,197,94,0.15); color: #22c55e; border-color: rgba(34,197,94,0.4); }
.rest-toggle-off { background: rgba(156,163,175,0.12); color: var(--text-light); }
.rest-toggle-simple:hover { filter: brightness(1.15); }

body.light-mode .rest-toggle-off  { background: #f3f4f6; color: #6b7280; border-color: #d1d5db; }
body.light-mode .rest-toggle-on   { background: rgba(34,197,94,0.1); }

/* Space between Workout label and live timer */
.live-dur-label { margin-right: 8px; }

/* ============================================================
   WORKOUT COMPLETE SUMMARY MODAL
   ============================================================ */

.workout-summary-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.workout-summary-modal.sum-visible { opacity: 1; }

.sum-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
}

.sum-content {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 24px 32px;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
    transform: translateY(40px);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.workout-summary-modal.sum-visible .sum-content { transform: translateY(0); }

/* Header */
.sum-header { text-align: center; margin-bottom: 20px; }
.sum-celebration { font-size: 2.8em; margin-bottom: 8px; }
.sum-title { font-size: 1.4em; font-weight: 800; color: var(--text-dark); margin: 0 0 4px; }
.sum-date  { font-size: 0.85em; color: var(--text-light); margin: 0; }

/* Stats row */
.sum-stats {
    display: flex;
    gap: 0;
    background: var(--bg-deep, #0a0918);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}
.sum-stat {
    flex: 1;
    text-align: center;
    padding: 14px 8px;
    border-right: 1px solid var(--border-light);
}
.sum-stat:last-child { border-right: none; }
.sum-stat-val   { font-size: 1.2em; font-weight: 800; color: var(--text-dark); }
.sum-stat-label { font-size: 0.7em; color: var(--text-light); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.sum-stat-pr .sum-stat-val { color: #39ff8a; }

/* Exercise cards */
.sum-exercise-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }

.sum-exercise-card {
    background: var(--bg-deep, #0a0918);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 14px 16px;
}

.sum-ex-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 6px;
}
.sum-ex-name   { font-size: 0.95em; font-weight: 700; color: var(--text-dark); }
.sum-ex-muscle {
    font-size: 0.7em;
    font-weight: 600;
    background: rgba(108,92,210,0.18);
    color: #a5b4fc;
    padding: 2px 8px;
    border-radius: 20px;
}

.sum-set-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.85em;
    flex-wrap: wrap;
}
.sum-set-row:last-of-type { border-bottom: none; }
.sum-set-label { color: var(--text-light); font-weight: 600; min-width: 38px; font-size: 0.8em; text-transform: uppercase; }
.sum-set-val   { color: var(--text-dark); font-weight: 600; flex: 1; }
.sum-rest      { font-size: 0.78em; color: var(--primary-blue); font-style: italic; }

.sum-pr-badge {
    margin-top: 10px;
    padding: 6px 12px;
    background: rgba(57,255,138,0.1);
    border: 1px solid rgba(57,255,138,0.3);
    border-radius: 8px;
    color: #39ff8a;
    font-size: 0.82em;
    font-weight: 700;
}

/* Close button */
.sum-close-btn {
    width: 100%;
    padding: 14px;
    background: var(--primary-blue);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}
.sum-close-btn:hover { opacity: 0.88; }

/* Mobile */
@media (max-width: 640px) {
    .sum-content { padding: 22px 16px 28px; border-radius: 20px 20px 0 0; }
    .sum-stat-val { font-size: 1em; }
}

/* Light mode */
body.light-mode .sum-content          { background: #ffffff; }
body.light-mode .sum-stats            { background: #f9fafb; }
body.light-mode .sum-exercise-card    { background: #f9fafb; border-color: #e5e7eb; }
body.light-mode .sum-set-row          { border-bottom-color: rgba(0,0,0,0.05); }
body.light-mode .sum-ex-muscle        { background: rgba(108,92,210,0.1); color: #4338ca; }

/* Rest time as its own row below each set in the summary */
.sum-rest-row {
    font-size: 0.78em;
    color: var(--primary-blue);
    font-style: italic;
    padding: 3px 0 6px 46px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sum-rest-row:last-child { border-bottom: none; }
body.light-mode .sum-rest-row { border-bottom-color: rgba(0,0,0,0.05); }

/* ── Mobile: cleaner set row layout ──
   Desktop keeps everything inline on one row (see .set-row-inputs above).
   On mobile the row splits into two lines:
     Line 1 → "Set N" label, then complete/remove pinned to the right
     Line 2 → the inputs box, full width — which internally wraps its own
               quick-adjust buttons (-5/+5/-1r/+1r) onto a third line
   Kept as two real nested flex boxes (no display:contents) so bare text
   nodes in the timed-set markup ("1 m 30 s") lay out in normal reading
   order instead of becoming stray anonymous flex items.                  */
@media (max-width: 600px) {
    .active-set-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        padding: 10px 8px;
    }

    .set-num-label {
        order: 1;
        flex: 0 0 auto;
        font-size: 0.7em;
    }

    .complete-btn { order: 2; margin-left: auto; width: 38px; height: 38px; font-size: 1em; flex-shrink: 0; }
    .remove-set-x { order: 3; width: 26px; height: 26px; flex-shrink: 0; }

    /* Full-width second line holding the inputs (and, nested inside, quick-adjust) */
    .set-row-inputs {
        order: 4;
        flex: 0 0 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .set-row-inputs .fast-input { width: 62px !important; font-size: 1em !important; }

    /* Redundant with input placeholders at this width — drop to keep the input line from wrapping */
    .set-row-inputs > .input-unit-label,
    .set-row-inputs > .set-unit { display: none; }

    /* Quick-adjust: forced onto its own full-width line within the inputs box */
    .quick-adj {
        flex: 0 0 100%;
        display: flex;
        gap: 6px;
        margin-top: 2px;
    }

    .quick-adj button {
        flex: 1;
        padding: 8px 4px;
        font-size: 0.8em;
        text-align: center;
    }

    /* Add-set button full width on mobile */
    .add-set-btn-fast { font-size: 0.9em; padding: 12px; }

    /* Stat time value can be smaller on narrow screens */
    .sum-stat-time { font-size: 0.85em !important; }
}

/* lbs / reps labels next to inputs */
.input-unit-label {
    font-size: 0.75em;
    color: var(--text-light);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
body.light-mode .input-unit-label { color: #6b7280; }