:root {
    --background: #f4f5f7;
    --surface: #ffffff;
    --text: #17191c;
    --muted: #73777d;
    --border: #e2e4e7;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --danger: #dc2626;
    --success: #16a34a;
    --dark: #111827;
    --radius: 12px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--background);
    color: var(--text);
}

body {
    min-height: 100vh;
}

a {
    color: var(--primary);
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.container {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
}

/* Navigation */

.admin-header {
    background: var(--dark);
    color: white;
    margin-bottom: 32px;
}

.nav {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.logo {
    color: white;
    font-weight: 800;
    font-size: 20px;
}

.nav nav {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav nav a {
    color: #d1d5db;
    font-size: 14px;
}

.nav nav a:hover {
    color: white;
}

/* Buttons */

.button {
    border: 1px solid var(--border);
    background: white;
    color: var(--text);
    border-radius: 8px;
    padding: 10px 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: #f8fafc;
}

.button.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.button.primary:hover {
    background: var(--primary-dark);
}

.button.danger {
    color: white;
    background: var(--danger);
    border-color: var(--danger);
}

.button.small {
    padding: 7px 11px;
    font-size: 13px;
}

.button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.inline {
    display: inline;
}

/* Forms */

label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-weight: 600;
    margin-bottom: 18px;
}

input,
textarea,
select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: white;
    color: var(--text);
}

textarea {
    resize: vertical;
}

.form-card {
    max-width: 800px;
}

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

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

/* Cards */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
}

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.page-heading h1,
.page-heading h2 {
    margin: 0 0 5px;
}

.page-heading p {
    margin: 0;
    color: var(--muted);
}

.muted {
    color: var(--muted);
    font-size: 14px;
}

.actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Alerts */

.alert {
    border-radius: 8px;
    padding: 13px 16px;
    margin-bottom: 20px;
}

.alert.success {
    color: #166534;
    background: #dcfce7;
}

.alert.error {
    color: #991b1b;
    background: #fee2e2;
}

/* Tables */

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
}

/* Dashboard */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.stat-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-card span {
    color: var(--muted);
}

.stat-card strong {
    font-size: 28px;
}

/* Workouts */

.workout-list {
    display: grid;
    gap: 16px;
}

.workout-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

.workout-card h2 {
    margin: 0 0 8px;
}

.workout-card p {
    color: var(--muted);
    margin: 0 0 10px;
}

.badge {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 800;
}

.badge.active {
    color: #166534;
    background: #dcfce7;
}

.badge.video {
    color: #991b1b;
    background: #fee2e2;
}

/* Days */

.days-list {
    display: grid;
    gap: 14px;
}

.day-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

.day-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.day-card h2 {
    margin: 4px 0 0;
}

.day-number {
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
}

/* Exercise administration */

.exercise-admin-list {
    display: grid;
    gap: 16px;
    margin-bottom: 30px;
}

.exercise-admin-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

.exercise-admin-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.exercise-admin-title span {
    color: var(--muted);
}

/* Login */

.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.login-box {
    width: min(420px, 100%);
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
}

.login-box h1 {
    margin-top: 0;
}

/* Public workout */

.workout-page {
    background: #0b0d10;
    color: white;
}

.workout-header {
    max-width: 1200px;
    width: calc(100% - 40px);
    margin: 0 auto;
    padding: 32px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.workout-header h1 {
    margin: 4px 0 0;
    font-size: clamp(24px, 4vw, 40px);
}

.eyebrow {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .15em;
}

.admin-link {
    color: #9ca3af;
}

.workout-container {
    width: min(1000px, calc(100% - 40px));
    margin: 0 auto;
    padding-bottom: 60px;
}

.day-selector {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 30px;
}

.day-selector a {
    background: #171a1f;
    color: #9ca3af;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    border: 1px solid #252a31;
}

.day-selector a.selected {
    color: white;
    background: var(--primary);
    border-color: var(--primary);
}

.day-selector span,
.day-selector strong {
    display: block;
}

.day-selector span {
    font-size: 10px;
    opacity: .7;
}

.day-selector strong {
    font-size: 12px;
    margin-top: 4px;
}

.current-day {
    background: #111419;
    border: 1px solid #252a31;
    border-radius: 20px;
    padding: clamp(24px, 5vw, 50px);
}

.day-heading {
    text-align: center;
    margin-bottom: 30px;
}

.day-heading > span {
    color: #60a5fa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}

.day-heading h2 {
    margin: 6px 0;
    font-size: clamp(25px, 5vw, 40px);
}

.exercise-slider {
    position: relative;
}

.exercise-slide {
    display: none;
    text-align: center;
}

.exercise-slide.visible {
    display: block;
}

.exercise-number {
    color: #6b7280;
    margin-bottom: 10px;
}

.superset-badge {
    display: inline-block;
    color: #111419;
    background: #f59e0b;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    margin-bottom: 8px;
}

.superset-instruction {
    color: #fbbf24;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 14px;
}

.superset-slide {
    text-align: center;
}

.superset-exercises {
    display: grid;
    gap: 18px;
    max-width: 760px;
    margin: 0 auto 30px;
}

.superset-exercise {
    background: #191d23;
    border: 1px solid #272d35;
    border-radius: 16px;
    padding: 22px 24px;
}

.superset-exercise .youtube-exercise-button {
    appearance: none;
    border: 1px solid #3b82f6;
    background: transparent;
    color: #60a5fa;
    border-radius: 8px;
    padding: 9px 14px;
    margin: 0 auto 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.youtube-exercise-button:hover,
.youtube-exercise-button:focus-visible {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
}

.exercise-description {
    max-width: 650px;
    margin: 0 auto 14px;
    color: #d1d5db;
    line-height: 1.6;
    font-size: 15px;
}

.youtube-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.youtube-modal.visible {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

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

.youtube-modal-dialog {
    position: relative;
    width: min(900px, 100%);
    background: #111419;
    border: 1px solid #252a31;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .5);
}

.youtube-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 18px;
}

.youtube-modal-header h2 {
    margin: 0;
    font-size: 18px;
}

.youtube-modal-close {
    border: 0;
    background: transparent;
    color: #d1d5db;
    font-size: 32px;
    line-height: 1;
    padding: 2px 8px;
    cursor: pointer;
}

.youtube-video-wrapper {
    aspect-ratio: 16 / 9;
    background: #000;
}

.youtube-video-wrapper iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.exercise-meta {
    color: #9ca3af;
    margin-bottom: 35px;
}

.exercise-stats {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.exercise-stats > div {
    background: #191d23;
    border: 1px solid #272d35;
    border-radius: 12px;
    padding: 18px 30px;
    min-width: 120px;
}

.exercise-stats span {
    display: block;
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
}

.exercise-stats strong {
    display: block;
    font-size: 28px;
    margin-top: 5px;
}

.exercise-notes {
    max-width: 600px;
    margin: 0 auto 30px;
    color: #d1d5db;
    line-height: 1.6;
}

.rest-timer {
    max-width: 350px;
    margin: 30px auto;
    padding: 20px;
    background: #191d23;
    border-radius: 15px;
}

.timer-label {
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
}

.timer-value {
    font-size: 48px;
    font-weight: 800;
    margin: 5px 0 15px;
}

.timer-button {
    width: 100%;
    border: 0;
    background: var(--primary);
    color: white;
    padding: 12px;
    border-radius: 8px;
}

.timer-complete {
    background: #14532d;
}

.exercise-navigation {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 35px;
}

.exercise-navigation .button {
    min-width: 130px;
}

/* Empty state */

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.empty-card {
    background: #191d23;
    padding: 30px;
    border-radius: 12px;
    color: #9ca3af;
}

/* Mobile */

@media (max-width: 800px) {

    .nav {
        flex-direction: column;
        padding: 16px 0;
    }

    .nav nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .workout-card,
    .day-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .day-selector {
        grid-template-columns: repeat(2, 1fr);
    }

    table {
        font-size: 13px;
    }

    th:nth-child(3),
}

@media (max-width: 500px) {

    .container,
    .workout-container,
    .workout-header {
        width: calc(100% - 24px);
    }

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

    .day-selector {
        grid-template-columns: 1fr 1fr;
    }

    .exercise-stats > div {
        min-width: 100px;
        padding: 14px;
    }

    .exercise-slide h3 {
        font-size: 40px;
    }
}
.target-time {
    display: none;
}

/* Exercise performance logging */

.exercise-log-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 auto 25px;
}

.exercise-log-actions .button {
    min-width: 145px;
}

.history-exercise-button {
    background: #272d35;
    color: #d1d5db;
    border: 1px solid #4b5563;
}

.history-exercise-button:hover,
.history-exercise-button:focus-visible {
    background: #343a43;
    color: #ffffff;
}

.history-exercise-button:disabled {
    background: #20242b;
    color: #9ca3af;
    border-color: #3b414b;
    opacity: 1;
}

.exercise-log-modal,
.exercise-history-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
}

.exercise-log-modal.visible,
.exercise-history-modal.visible {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.exercise-log-modal-backdrop,
.exercise-history-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .82);
}

.exercise-log-modal-dialog,
.exercise-history-modal-dialog {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    background: #111419;
    border: 1px solid #252a31;
    border-radius: 16px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .5);
}

.exercise-history-modal-dialog {
    width: min(760px, 100%);
}

.exercise-log-form {
    padding: 8px 20px 22px;
}

.exercise-log-form .form-group {
    margin-bottom: 16px;
}

.exercise-log-form label {
    display: block;
    margin-bottom: 7px;
    color: #d1d5db;
    font-size: 14px;
    font-weight: 700;
}

.exercise-log-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 13px;
    border: 1px solid #3a4049;
    border-radius: 8px;
    background: #191d23;
    color: #f9fafb;
    font: inherit;
}

.exercise-log-form input:focus {
    outline: none;
    border-color: #4f63e8;
    box-shadow: 0 0 0 3px rgba(79, 99, 232, .18);
}

.exercise-log-form-message {
    min-height: 22px;
    margin: 5px 0 10px;
    color: #fca5a5;
    font-size: 14px;
}

.exercise-log-form-message.success {
    color: #86efac;
}

.exercise-log-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.history-content {
    padding: 0 20px 24px;
}

.history-loading,
.history-empty {
    padding: 25px 10px;
    text-align: center;
    color: #9ca3af;
}

.history-table-wrap {
    overflow-x: auto;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
}

.history-table th,
.history-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #272d35;
    text-align: left;
    white-space: nowrap;
}

.history-table th {
    color: #9ca3af;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.history-table td {
    color: #f3f4f6;
}

@media (max-width: 500px) {
    .exercise-log-form-actions {
        flex-direction: column-reverse;
    }

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

    .history-table th,
    .history-table td {
        padding: 10px 7px;
        font-size: 13px;
    }
}

.history-date-mobile {
    display: none;
}

@media (max-width: 600px) {
    .history-date-full {
        display: none;
    }

    .history-date-mobile {
        display: inline;
    }

    .history-table {
        table-layout: fixed;
        width: 100%;
    }

    .history-table th,
    .history-table td {
        white-space: nowrap;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .history-table th:nth-child(1),
    .history-table td:nth-child(1) {
        width: 31%;
    }

    .history-table th:nth-child(2),
    .history-table td:nth-child(2) {
        width: 36%;
    }

    .history-table th:nth-child(3),
    .history-table td:nth-child(3) {
        width: 33%;
    }
}


/* User profile and settings */
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:wrap; }
.user-profile-link { display:inline-flex; align-items:center; gap:8px; color:#d1d5db; text-decoration:none; font-size:14px; }
.user-profile-link:hover { color:#fff; }
.profile-avatar { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; overflow:hidden; border-radius:50%; background:#2a3038; color:#f3f4f6; font-weight:800; border:1px solid #4b5563; object-fit:cover; }
.profile-avatar.small { width:36px; height:36px; font-size:14px; }
.profile-avatar.large { width:120px; height:120px; font-size:42px; }
.profile-preview { display:flex; justify-content:center; align-items:flex-start; }
.settings-container { max-width:900px; padding-bottom:60px; }
.settings-card { padding:clamp(22px,4vw,40px); }
.profile-settings { display:grid; grid-template-columns:150px 1fr; gap:30px; align-items:start; }
.settings-card hr { border:0; border-top:1px solid var(--border); margin:32px 0; }
.checkbox-label { flex-direction:row; align-items:center; gap:8px; }
.checkbox-label input { width:auto; }
@media (max-width:700px) { .user-profile-link > span:last-child { display:none; } .profile-settings { grid-template-columns:1fr; } .profile-preview { justify-content:flex-start; } }

.admin-profile-preview { margin: 10px 0; }
.profile-avatar.medium { width: 90px; height: 90px; font-size: 28px; }

/* User list profile pictures */
.user-list-name {
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-list-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.user-list-avatar-placeholder {
    background: #e9ecef;
    color: #495057;
    font-weight: 600;
    font-size: 14px;
}

/* Keep all View History columns visible on mobile. */
@media (max-width: 800px) {
    .history-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* Exercise images and media modals */
.exercise-overview-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exercise-image-thumbnail-button {
    border: 0;
    padding: 0;
    background: transparent;
    line-height: 0;
    cursor: zoom-in;
    flex: 0 0 auto;
}

.exercise-image-thumbnail {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #3b414b;
    display: block;
}

.workout-exercise-image {
    margin: 0 auto 18px;
}

.youtube-badge-button {
    cursor: pointer;
    border: 0;
    font: inherit;
}

.media-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.media-modal.visible {
    display: flex;
}

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

.media-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(900px, 96vw);
    max-height: 92vh;
    overflow: auto;
    background: #111419;
    color: #fff;
    border: 1px solid #343a43;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 24px 80px rgba(0,0,0,.55);
}

.media-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.exercise-image-large {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    width: auto;
    height: auto;
    margin: 16px auto 0;
    border-radius: 12px;
}

.video-responsive {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 16px;
}

.video-responsive iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 10px;
}

.exercise-image-admin-preview img {
    max-width: 220px;
    max-height: 180px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

@media (max-width: 700px) {
    .exercise-image-thumbnail {
        width: 54px;
        height: 54px;
    }

    .media-modal-dialog {
        padding: 18px;
    }
}


.exercise-image-placeholder {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8dce3;
    border-radius: 10px;
    background: #f2f3f5;
    color: #a0a6b0;
}

.exercise-image-placeholder svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

@media (max-width: 700px) {
    .exercise-image-placeholder {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }
}


/* =========================================================
   Mobile workout redesign - Clean & Focused
   ========================================================= */

.user-profile-menu {
    position: relative;
}

.user-profile-trigger {
    width: 44px;
    height: 44px;
    border: 2px solid #3b4657;
    border-radius: 50%;
    padding: 0;
    overflow: hidden;
    background: #242a33;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.user-profile-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-profile-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 1500;
    min-width: 210px;
    padding: 8px;
    border: 1px solid #303744;
    border-radius: 14px;
    background: #171b21;
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.user-profile-dropdown.open {
    display: block;
}

.user-profile-dropdown-name {
    padding: 10px 11px 12px;
    border-bottom: 1px solid #303744;
    margin-bottom: 5px;
}

.user-profile-dropdown-name strong,
.user-profile-dropdown-name small {
    display: block;
}

.user-profile-dropdown-name small {
    color: #8f98a8;
    margin-top: 3px;
}

.user-profile-dropdown a {
    display: block;
    padding: 11px;
    border-radius: 9px;
    color: #eef2f7;
}

.user-profile-dropdown a:hover {
    background: #252b34;
}

.user-profile-dropdown .logout-item {
    color: #fca5a5;
}

.superset-then {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #7f8ba1;
    font-size: 10px;
    letter-spacing: .14em;
    margin: -7px 0;
}

.superset-then span {
    font-size: 19px;
    line-height: 1;
}

@media (max-width: 800px) {
    .workout-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        max-width: none;
        padding: 12px 16px;
        background: rgba(11,13,16,.96);
        border-bottom: 1px solid #252a31;
        backdrop-filter: blur(12px);
    }

    .workout-header .eyebrow {
        display: none;
    }

    .workout-header h1 {
        font-size: 17px;
        margin: 0;
        max-width: 230px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .workout-container {
        width: min(100% - 24px, 640px);
        padding-top: 18px;
    }

    .day-selector {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        margin-bottom: 16px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .day-selector::-webkit-scrollbar {
        display: none;
    }

    .day-selector a {
        flex: 0 0 auto;
        min-width: 84px;
        padding: 10px 14px;
        border-radius: 999px;
    }

    .day-selector a span {
        display: none;
    }

    .day-selector a strong {
        margin: 0;
        font-size: 12px;
    }

    .current-day {
        border: 0;
        background: transparent;
        padding: 0;
    }

    .day-heading {
        text-align: left;
        margin: 8px 2px 14px;
    }

    .day-heading h2 {
        font-size: 16px;
        margin: 0;
        color: #aab3c2;
    }

    .exercise-slide {
        text-align: left;
    }

    .exercise-number {
        text-align: left;
        margin: 0 2px 10px;
        font-size: 12px;
    }

    .superset-slide {
        border: 1px solid #2e3540;
        border-radius: 18px;
        padding: 14px;
        background: #11151a;
        text-align: left;
    }

    .superset-badge {
        background: rgba(74,99,255,.16);
        color: #8ea1ff;
        margin-bottom: 5px;
    }

    .superset-instruction {
        color: #8791a3;
        font-weight: 500;
        margin-bottom: 14px;
    }

    .superset-exercises {
        gap: 14px;
        margin-bottom: 18px;
    }

    .superset-exercise {
        padding: 14px;
        border-radius: 15px;
        background: #191e25;
        border-color: #303743;
        text-align: left;
    }

    .superset-exercise-number {
        color: #727d90;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .1em;
        margin-bottom: 7px;
    }

    .superset-exercise h3,
    .exercise-slide > h3 {
        margin: 5px 0 8px;
        font-size: 21px;
        line-height: 1.15;
    }

    .exercise-description {
        margin: 0 0 12px;
        font-size: 14px;
        line-height: 1.5;
        color: #b9c0cb;
        text-align: left;
    }

    .workout-exercise-image {
        margin: 0 0 12px;
    }

    .exercise-image-thumbnail {
        width: 82px;
        height: 82px;
        border-radius: 13px;
    }

    .exercise-meta {
        margin-bottom: 16px;
        text-align: left;
        font-size: 13px;
    }

    .exercise-stats {
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 16px;
    }

    .exercise-stats > div {
        min-width: 0;
        flex: 1;
        padding: 12px 10px;
        text-align: center;
        border-radius: 11px;
    }

    .exercise-stats strong {
        font-size: 20px;
    }

    .exercise-notes {
        margin: 0 0 16px;
        text-align: left;
        font-size: 13px;
    }

    .youtube-exercise-button {
        margin: 0 0 12px !important;
    }

    .exercise-log-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .exercise-log-actions .button,
    .exercise-log-actions button {
        width: 100%;
    }

    .exercise-navigation {
        gap: 8px;
        margin-top: 18px;
    }

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

    .rest-timer {
        max-width: none;
        margin: 18px 0;
    }
}

/* =========================================================
   Responsive admin redesign
   ========================================================= */

.admin-body {
    background: #f4f6f8;
}

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 240px;
    background: #11161d;
    color: #fff;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    z-index: 1200;
}

.admin-brand {
    padding: 4px 10px 22px;
    border-bottom: 1px solid #2a313b;
}

.admin-brand a {
    color: #fff;
    font-size: 19px;
    font-weight: 800;
}

.admin-brand span {
    display: block;
    margin-top: 4px;
    color: #747f90;
    font-size: 10px;
    letter-spacing: .14em;
}

.admin-side-nav {
    display: grid;
    gap: 5px;
    margin-top: 18px;
}

.admin-side-nav a,
.admin-side-footer a {
    padding: 11px 12px;
    border-radius: 9px;
    color: #c8d0dc;
}

.admin-side-nav a:hover,
.admin-side-footer a:hover {
    background: #222934;
    color: #fff;
}

.admin-side-footer {
    display: grid;
    gap: 4px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #2a313b;
}

.admin-page {
    margin-left: 240px;
    min-height: 100vh;
}

.admin-topbar {
    height: 66px;
    position: sticky;
    top: 0;
    z-index: 900;
    padding: 0 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1px solid #e1e5ea;
}

.admin-topbar a {
    font-size: 13px;
}

.admin-menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    font-size: 23px;
}

.admin-content {
    width: min(1260px, calc(100% - 44px));
    margin: 0 auto;
    padding: 28px 0 48px;
}

.admin-content .card,
.admin-content .workout-card {
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
}

.admin-content .page-heading h1 {
    margin-bottom: 4px;
}

@media (max-width: 900px) {
    .admin-sidebar {
        transform: translateX(-102%);
        transition: transform .2s ease;
        box-shadow: 20px 0 60px rgba(0,0,0,.25);
    }

    .admin-sidebar.open {
        transform: translateX(0);
    }

    .admin-page {
        margin-left: 0;
    }

    .admin-menu-toggle {
        display: inline-flex;
    }

    .admin-topbar {
        padding: 0 15px;
    }

    .admin-content {
        width: min(100% - 26px, 1260px);
        padding-top: 20px;
    }

    .admin-content .card {
        overflow-x: auto;
    }
}


/* =========================================================
   User workout redesign - full responsive layout
   Applies to desktop and mobile
   ========================================================= */

.workout-page {
    background: #f5f7fb;
    color: #111827;
}

.workout-header {
    max-width: 1180px;
    width: calc(100% - 40px);
    margin: 0 auto;
    padding: 24px 0 18px;
    color: #111827;
}

.workout-header .eyebrow {
    color: #64748b;
}

.workout-header h1 {
    color: #111827;
    font-size: clamp(26px, 3vw, 38px);
}

.workout-container {
    width: min(1040px, calc(100% - 40px));
}

.day-selector {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-bottom: 20px;
    scrollbar-width: none;
}

.day-selector::-webkit-scrollbar {
    display: none;
}

.day-selector a {
    flex: 0 0 auto;
    min-width: 120px;
    background: #fff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 11px 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,.03);
}

.day-selector a.selected {
    background: #3157e8;
    color: #fff;
    border-color: #3157e8;
}

.day-selector a span {
    display: none;
}

.day-selector a strong {
    margin: 0;
    font-size: 13px;
}

.current-day {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.day-heading {
    text-align: left;
    margin: 6px 0 16px;
}

.day-heading h2 {
    color: #475569;
    font-size: 18px;
    margin: 0;
}

.exercise-slider {
    position: relative;
}

.exercise-slide {
    text-align: left;
}

.exercise-slide.visible {
    display: block;
}

.exercise-number {
    color: #94a3b8;
    font-size: 12px;
    margin-bottom: 10px;
}

.superset-slide {
    background: #fff;
    border: 1px solid #dbe2ea;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 10px 35px rgba(15,23,42,.06);
}

.superset-badge {
    color: #3157e8;
    background: #eef2ff;
    border: 1px solid #dbe2ff;
    padding: 7px 11px;
    font-size: 11px;
}

.superset-instruction {
    color: #64748b;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 18px;
}

.superset-exercises {
    display: grid;
    gap: 12px;
    max-width: none;
    margin: 0 0 18px;
}

.superset-exercise {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px;
    color: #111827;
}

.superset-exercise-number {
    color: #94a3b8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}

.superset-exercise h3,
.exercise-slide > h3 {
    color: #111827;
    margin: 6px 0 10px;
    font-size: clamp(22px, 3vw, 30px);
}

.superset-then {
    color: #64748b;
    margin: -3px 0;
}

.superset-then span {
    color: #3157e8;
}

.exercise-description {
    color: #475569;
    margin: 0 0 14px;
    max-width: 700px;
    text-align: left;
}

.exercise-meta {
    color: #64748b;
    margin-bottom: 18px;
    text-align: left;
}

.exercise-stats {
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 18px;
}

.exercise-stats > div {
    min-width: 130px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 1px 2px rgba(15,23,42,.03);
}

.superset-exercise .exercise-stats > div {
    background: #fff;
}

.exercise-stats span {
    color: #94a3b8;
}

.exercise-stats strong {
    color: #111827;
    font-size: 24px;
}

.exercise-notes {
    color: #475569;
    text-align: left;
    margin: 0 0 18px;
}

.youtube-exercise-button,
.superset-exercise .youtube-exercise-button {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #dc2626;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 14px;
}

.youtube-exercise-button:hover,
.youtube-exercise-button:focus-visible {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

.exercise-image-thumbnail {
    width: 94px;
    height: 94px;
    border-radius: 15px;
    border-color: #dbe2ea;
}

.workout-exercise-image {
    margin: 0 0 14px;
}

.exercise-log-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.exercise-log-actions .button,
.exercise-log-actions button {
    min-height: 44px;
}

.exercise-log-actions .button.primary,
.exercise-log-actions button.primary {
    background: #3157e8;
    border-color: #3157e8;
}

.history-exercise-button {
    background: #fff;
    color: #334155;
    border-color: #d7dee8;
}

.rest-timer {
    background: #f8fafc;
    color: #111827;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    max-width: none;
    margin: 18px 0;
}

.timer-label {
    color: #64748b;
}

.timer-button {
    background: #3157e8;
}

.exercise-navigation {
    justify-content: space-between;
    margin-top: 20px;
}

.exercise-navigation .button {
    min-width: 140px;
}

.user-profile-trigger {
    border-color: #d9e0ea;
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 4px rgba(15,23,42,.1);
}

.user-profile-dropdown {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 18px 50px rgba(15,23,42,.18);
}

.user-profile-dropdown-name {
    border-color: #e2e8f0;
}

.user-profile-dropdown-name strong {
    color: #111827;
}

.user-profile-dropdown-name small {
    color: #64748b;
}

.user-profile-dropdown a {
    color: #334155;
}

.user-profile-dropdown a:hover {
    background: #f1f5f9;
}

.user-profile-dropdown .logout-item {
    color: #dc2626;
}

/* Single, non-superset exercise: turn it into a focused white card too */
.exercise-slide:not(.superset-slide) {
    background: #fff;
    border: 1px solid #dbe2ea;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 10px 35px rgba(15,23,42,.06);
}

/* Modal colors remain dark enough for media focus */
.youtube-modal-dialog,
.media-modal-dialog,
.exercise-log-modal .modal-dialog,
.history-modal .modal-dialog {
    color: #fff;
}

@media (max-width: 800px) {
    .workout-header {
        width: 100%;
        max-width: none;
        padding: 11px 14px;
        background: rgba(255,255,255,.96);
        border-bottom: 1px solid #e2e8f0;
        box-shadow: 0 1px 6px rgba(15,23,42,.05);
    }

    .workout-header h1 {
        color: #111827;
        font-size: 16px;
        max-width: 230px;
    }

    .workout-container {
        width: min(100% - 20px, 640px);
        padding-top: 14px;
    }

    .day-selector {
        margin-bottom: 14px;
    }

    .day-selector a {
        min-width: 76px;
        padding: 9px 13px;
    }

    .day-heading {
        margin: 4px 2px 12px;
    }

    .superset-slide,
    .exercise-slide:not(.superset-slide) {
        padding: 14px;
        border-radius: 18px;
    }

    .superset-exercise {
        padding: 14px;
        border-radius: 15px;
    }

    .superset-exercise h3,
    .exercise-slide > h3 {
        font-size: 20px;
    }

    .exercise-image-thumbnail {
        width: 78px;
        height: 78px;
    }

    .exercise-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .exercise-stats > div {
        min-width: 0;
        padding: 11px 8px;
    }

    .exercise-stats strong {
        font-size: 19px;
    }

    .exercise-log-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

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


/* =========================================================
   Mobile Option 1 refinement — closer to approved mockup
   ========================================================= */

.mobile-workout-estimate,
.mobile-exercise-summary,
.mobile-last-performance,
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 800px) {
    .workout-page {
        background: #f7f8fb;
        padding-bottom: 82px;
    }

    .workout-header {
        height: 64px;
        padding: 10px 14px;
    }

    .workout-header > div:first-child {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .workout-header h1 {
        font-size: 15px;
        font-weight: 800;
        max-width: 210px;
    }

    .user-profile-trigger {
        width: 38px;
        height: 38px;
    }

    .workout-container {
        width: 100%;
        padding: 12px 12px 0;
    }

    .day-selector {
        gap: 9px;
        margin-bottom: 8px;
        padding: 0 2px 4px;
    }

    .day-selector a {
        min-width: 72px;
        padding: 9px 14px;
        background: #f0f2f5;
        border-color: transparent;
        box-shadow: none;
        color: #334155;
    }

    .day-selector a.selected {
        background: #2f5be7;
        color: white;
        border-color: transparent;
        box-shadow: 0 6px 16px rgba(47,91,231,.25);
    }

    .mobile-workout-estimate {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #64748b;
        font-size: 12px;
        margin: 4px 4px 12px;
    }

    .day-heading {
        display: none;
    }

    .exercise-number {
        display: none;
    }

    .superset-slide,
    .exercise-slide:not(.superset-slide) {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .superset-badge {
        display: inline-flex;
        border: 0;
        background: transparent;
        color: #475569;
        padding: 0;
        font-size: 10px;
        letter-spacing: .07em;
        margin: 0 0 3px 2px;
    }

    .superset-instruction {
        color: #94a3b8;
        font-size: 11px;
        font-weight: 500;
        margin: 0 0 10px 2px;
    }

    .superset-exercises {
        gap: 8px;
        margin-bottom: 12px;
    }

    .superset-exercise {
        position: relative;
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr) 18px;
        column-gap: 11px;
        row-gap: 2px;
        align-items: center;
        padding: 10px;
        min-height: 92px;
        background: #fff;
        border: 1px solid #e5e9ef;
        border-radius: 13px;
        box-shadow: 0 2px 8px rgba(15,23,42,.04);
    }

    .superset-exercise::after {
        content: "›";
        grid-column: 3;
        grid-row: 1 / span 5;
        align-self: center;
        color: #94a3b8;
        font-size: 22px;
        font-weight: 400;
    }

    .superset-exercise-number {
        display: none;
    }

    .superset-exercise .workout-exercise-image {
        grid-column: 1;
        grid-row: 1 / span 5;
        margin: 0;
        align-self: stretch;
    }

    .superset-exercise .exercise-image-thumbnail {
        width: 72px;
        height: 72px;
        border-radius: 10px;
    }

    .superset-exercise h3 {
        grid-column: 2;
        margin: 0;
        font-size: 14px;
        line-height: 1.2;
        font-weight: 800;
    }

    .mobile-exercise-summary {
        display: flex;
        grid-column: 2;
        gap: 4px;
        color: #64748b;
        font-size: 11px;
    }

    .mobile-last-performance {
        display: block;
        grid-column: 2;
        width: fit-content;
        margin-top: 3px;
        padding: 4px 7px;
        border-radius: 6px;
        background: #eef2ff;
        color: #4f63b8;
        font-size: 10px;
    }

    .superset-exercise .exercise-description,
    .superset-exercise .youtube-exercise-button,
    .superset-exercise .exercise-meta,
    .superset-exercise .exercise-stats,
    .superset-exercise .exercise-notes,
    .superset-exercise .exercise-log-actions,
    .superset-exercise .rest-timer {
        display: none;
    }

    .superset-then {
        height: 18px;
        margin: -2px 0;
        gap: 0;
        justify-content: center;
        flex-direction: row;
        font-size: 9px;
    }

    .superset-then span {
        font-size: 16px;
        margin-right: 5px;
    }

    .exercise-navigation {
        position: static;
        margin: 12px 0 0;
        gap: 8px;
    }

    .exercise-navigation .button {
        min-height: 44px;
        border-radius: 10px;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        height: 64px;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        padding: 6px 8px max(6px, env(safe-area-inset-bottom));
        background: rgba(255,255,255,.97);
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -4px 18px rgba(15,23,42,.06);
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        border: 0;
        background: transparent;
        color: #7b8493;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 17px;
        text-decoration: none;
    }

    .mobile-bottom-nav small {
        font-size: 9px;
        font-weight: 600;
    }

    .mobile-bottom-nav .active {
        color: #3157e8;
    }

    /* Non-superset slides remain focused cards */
    .exercise-slide:not(.superset-slide) {
        background: #fff;
        border: 1px solid #e5e9ef;
        border-radius: 15px;
        padding: 14px;
        box-shadow: 0 2px 10px rgba(15,23,42,.04);
    }

    .exercise-slide:not(.superset-slide) > h3 {
        font-size: 21px;
    }
}


/* Mobile workout: show the whole day at once */
.workout-image-placeholder {
    color: #94a3b8;
    background: #eef2f6;
    border: 1px solid #dfe5ec;
}

.workout-image-placeholder svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

@media (max-width: 800px) {
    /* All workout groups are visible; the day no longer behaves like a slider. */
    .exercise-slider {
        display: grid;
        gap: 14px;
    }

    .exercise-slide,
    .exercise-slide.visible {
        display: block;
    }

    .exercise-navigation {
        display: none;
    }

    .workout-image-placeholder {
        width: 72px;
        height: 72px;
        flex: 0 0 72px;
        border-radius: 10px;
        align-items: center;
        justify-content: center;
    }

    .superset-exercise .workout-image-placeholder {
        grid-column: 1;
        grid-row: 1 / span 5;
        display: inline-flex;
        margin: 0;
        align-self: stretch;
    }

    /* Each non-superset exercise becomes another compact row in the day overview. */
    .exercise-slide:not(.superset-slide) {
        position: relative;
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) 18px;
        column-gap: 11px;
        row-gap: 2px;
        align-items: center;
        min-height: 92px;
        padding: 10px;
        background: #fff;
        border: 1px solid #e5e9ef;
        border-radius: 13px;
        box-shadow: 0 2px 8px rgba(15,23,42,.04);
    }

    .exercise-slide:not(.superset-slide)::after {
        content: "›";
        grid-column: 3;
        grid-row: 1 / span 5;
        align-self: center;
        color: #94a3b8;
        font-size: 22px;
    }

    .exercise-slide:not(.superset-slide) .workout-exercise-image {
        grid-column: 1;
        grid-row: 1 / span 5;
        margin: 0;
    }

    .exercise-slide:not(.superset-slide) h3 {
        grid-column: 2;
        margin: 0;
        font-size: 14px;
        line-height: 1.2;
    }

    .exercise-slide:not(.superset-slide) .mobile-exercise-summary,
    .exercise-slide:not(.superset-slide) .mobile-last-performance {
        grid-column: 2;
    }

    .exercise-slide:not(.superset-slide) .exercise-description,
    .exercise-slide:not(.superset-slide) .youtube-exercise-button,
    .exercise-slide:not(.superset-slide) .exercise-meta,
    .exercise-slide:not(.superset-slide) .exercise-stats,
    .exercise-slide:not(.superset-slide) .exercise-notes,
    .exercise-slide:not(.superset-slide) .exercise-log-actions,
    .exercise-slide:not(.superset-slide) .rest-timer {
        display: none;
    }
}


/* =========================================================
   Final compact workout + expanded detail refinement
   ========================================================= */

.mobile-bottom-nav.mobile-bottom-nav-three {
    grid-template-columns: repeat(3, 1fr);
}

.mobile-bottom-nav .mobile-logout {
    color: #dc2626;
}

.mobile-exercise-expand,
.mobile-exercise-detail-panel {
    display: none;
}

@media (max-width: 800px) {
    /* No previous / next; the full day remains visible. */
    .exercise-navigation {
        display: none !important;
    }

    .superset-exercise::after,
    .exercise-slide:not(.superset-slide)::after {
        display: none !important;
    }

    .mobile-exercise-expand {
        display: inline-flex;
        grid-column: 3;
        grid-row: 1 / span 5;
        align-self: center;
        justify-self: end;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 42px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #7d8ba0;
        font-size: 22px;
        cursor: pointer;
    }

    .mobile-exercise-detail-panel {
        display: none;
    }

    .superset-exercise.mobile-expanded,
    .exercise-slide:not(.superset-slide).mobile-expanded {
        position: relative;
        display: block !important;
        padding: 0;
        overflow: hidden;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        box-shadow: 0 12px 32px rgba(15,23,42,.10);
    }

    .mobile-expanded > .superset-exercise-number,
    .mobile-expanded > .workout-exercise-image,
    .mobile-expanded > h3,
    .mobile-expanded > .mobile-exercise-summary,
    .mobile-expanded > .mobile-last-performance,
    .mobile-expanded > .mobile-exercise-expand,
    .mobile-expanded > .exercise-description,
    .mobile-expanded > .youtube-exercise-button,
    .mobile-expanded > .exercise-meta,
    .mobile-expanded > .exercise-stats,
    .mobile-expanded > .exercise-notes,
    .mobile-expanded > .exercise-log-actions,
    .mobile-expanded > .rest-timer,
    .mobile-expanded > .exercise-number {
        display: none !important;
    }

    .mobile-expanded > .mobile-exercise-detail-panel {
        display: block;
    }

    .mobile-detail-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 14px 10px;
    }

    .mobile-detail-back {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 50%;
        background: #f1f5f9;
        color: #334155;
        font-size: 26px;
        line-height: 1;
    }

    .mobile-detail-header strong {
        display: block;
        color: #111827;
        font-size: 15px;
    }

    .mobile-detail-header small {
        display: block;
        color: #94a3b8;
        margin-top: 2px;
        font-size: 10px;
    }

    .mobile-detail-hero {
        margin: 0 14px;
        border-radius: 14px;
        overflow: hidden;
        background: #eef2f6;
        aspect-ratio: 16 / 10;
    }

    .mobile-detail-hero img,
    .mobile-detail-image-placeholder {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .mobile-detail-image-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
    }

    .mobile-detail-image-placeholder svg {
        width: 62px;
        height: 62px;
        fill: currentColor;
    }

    .mobile-detail-description {
        padding: 14px 14px 4px;
        color: #475569;
        font-size: 13px;
        line-height: 1.55;
    }

    .mobile-detail-media {
        display: grid;
        gap: 8px;
        padding: 10px 14px 4px;
    }

    .mobile-detail-video,
    .mobile-detail-image {
        min-height: 44px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 12px;
    }

    .mobile-detail-video {
        border: 1px solid #fecaca;
        background: #fff1f2;
        color: #dc2626;
    }

    .mobile-detail-image {
        border: 1px solid #dbe2ea;
        background: #fff;
        color: #334155;
    }

    .mobile-detail-section-title {
        padding: 14px 14px 8px;
        color: #111827;
        font-size: 12px;
        font-weight: 800;
    }

    .mobile-detail-performance {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 0 14px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }

    .mobile-detail-performance > div {
        padding: 12px;
        text-align: center;
    }

    .mobile-detail-performance > div + div {
        border-left: 1px solid #e2e8f0;
    }

    .mobile-detail-performance strong,
    .mobile-detail-performance span {
        display: block;
    }

    .mobile-detail-performance strong {
        color: #111827;
        font-size: 16px;
    }

    .mobile-detail-performance span {
        margin-top: 3px;
        color: #94a3b8;
        font-size: 9px;
        font-weight: 800;
    }

    .mobile-detail-log,
    .mobile-detail-history {
        width: calc(100% - 28px);
        margin: 0 14px 8px;
        min-height: 44px;
        border-radius: 10px;
    }

    .mobile-detail-log {
        background: #3157e8 !important;
        border-color: #3157e8 !important;
        color: #fff !important;
    }

    .mobile-detail-history {
        margin-bottom: 14px;
        background: #fff;
        color: #334155;
        border-color: #dbe2ea;
    }

    body.exercise-detail-open .mobile-bottom-nav {
        opacity: .98;
    }

    /* Settings now follows the same clean mobile shell. */
    .settings-redesign-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        padding: 10px 14px;
        background: rgba(255,255,255,.97);
        border-bottom: 1px solid #e5e7eb;
    }

    .settings-redesign-header h1 {
        margin: 0;
        font-size: 15px;
        color: #111827;
    }

    .settings-container {
        width: 100%;
        max-width: 620px;
        padding: 14px 10px 82px;
    }

    .settings-card {
        border-radius: 15px;
        border: 1px solid #e5e9ef;
        box-shadow: 0 2px 10px rgba(15,23,42,.04);
    }
}


/* =========================================================
   Desktop + tablet workout redesign
   Mirrors the compact mobile overview and expandable detail view
   ========================================================= */

@media (min-width: 801px) {
    .workout-page {
        background: #f7f8fb;
        color: #111827;
    }

    .workout-header {
        width: min(1180px, calc(100% - 48px));
        padding: 24px 0 18px;
        color: #111827;
    }

    .workout-header .eyebrow {
        color: #64748b;
    }

    .workout-header h1 {
        color: #111827;
        font-size: 32px;
    }

    .workout-container {
        width: min(1080px, calc(100% - 48px));
        padding-bottom: 90px;
    }

    .day-selector {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        margin-bottom: 18px;
    }

    .day-selector a {
        flex: 0 0 auto;
        min-width: 105px;
        background: #fff;
        color: #475569;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        padding: 10px 16px;
        box-shadow: 0 1px 3px rgba(15,23,42,.04);
    }

    .day-selector a.selected {
        background: #3157e8;
        color: #fff;
        border-color: #3157e8;
        box-shadow: 0 7px 18px rgba(49,87,232,.2);
    }

    .day-selector a span {
        display: none;
    }

    .day-selector a strong {
        margin: 0;
        font-size: 13px;
    }

    .current-day {
        padding: 0;
        border: 0;
        background: transparent;
    }

    .day-heading {
        text-align: left;
        margin: 4px 0 14px;
    }

    .day-heading h2 {
        margin: 0;
        color: #475569;
        font-size: 18px;
    }

    .exercise-slider {
        display: grid;
        gap: 16px;
    }

    .exercise-slide,
    .exercise-slide.visible {
        display: block;
    }

    .exercise-navigation {
        display: none;
    }

    .exercise-number {
        display: none;
    }

    .superset-slide {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
        text-align: left;
    }

    .superset-badge {
        display: inline-flex;
        padding: 0;
        margin: 0 0 3px 2px;
        border: 0;
        background: transparent;
        color: #475569;
        font-size: 11px;
        letter-spacing: .08em;
    }

    .superset-instruction {
        margin: 0 0 10px 2px;
        color: #94a3b8;
        font-size: 12px;
        font-weight: 500;
    }

    .superset-exercises {
        display: grid;
        gap: 9px;
        max-width: none;
        margin: 0;
    }

    .superset-exercise,
    .exercise-slide:not(.superset-slide) {
        position: relative;
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr) 34px;
        column-gap: 16px;
        row-gap: 3px;
        align-items: center;
        min-height: 112px;
        padding: 12px;
        background: #fff;
        border: 1px solid #e4e9ef;
        border-radius: 15px;
        box-shadow: 0 3px 12px rgba(15,23,42,.045);
        color: #111827;
        text-align: left;
    }

    .superset-exercise-number {
        display: none;
    }

    .superset-exercise .workout-exercise-image,
    .exercise-slide:not(.superset-slide) .workout-exercise-image,
    .superset-exercise .workout-image-placeholder,
    .exercise-slide:not(.superset-slide) .workout-image-placeholder {
        grid-column: 1;
        grid-row: 1 / span 5;
        width: 92px;
        height: 88px;
        margin: 0;
        align-self: center;
    }

    .superset-exercise .exercise-image-thumbnail,
    .exercise-slide:not(.superset-slide) .exercise-image-thumbnail {
        width: 92px;
        height: 88px;
        object-fit: cover;
        border-radius: 11px;
    }

    .superset-exercise h3,
    .exercise-slide:not(.superset-slide) > h3 {
        grid-column: 2;
        margin: 0;
        color: #111827;
        font-size: 17px;
        line-height: 1.2;
    }

    .mobile-exercise-summary,
    .mobile-last-performance {
        display: flex;
        grid-column: 2;
    }

    .mobile-exercise-summary {
        gap: 5px;
        color: #64748b;
        font-size: 12px;
    }

    .mobile-last-performance {
        width: fit-content;
        margin-top: 2px;
        padding: 4px 8px;
        border-radius: 6px;
        background: #eef2ff;
        color: #4f63b8;
        font-size: 11px;
    }

    .superset-exercise > .exercise-description,
    .superset-exercise > .youtube-exercise-button,
    .superset-exercise > .exercise-meta,
    .superset-exercise > .exercise-stats,
    .superset-exercise > .exercise-notes,
    .superset-exercise > .exercise-log-actions,
    .superset-exercise > .rest-timer,
    .exercise-slide:not(.superset-slide) > .exercise-description,
    .exercise-slide:not(.superset-slide) > .youtube-exercise-button,
    .exercise-slide:not(.superset-slide) > .exercise-meta,
    .exercise-slide:not(.superset-slide) > .exercise-stats,
    .exercise-slide:not(.superset-slide) > .exercise-notes,
    .exercise-slide:not(.superset-slide) > .exercise-log-actions,
    .exercise-slide:not(.superset-slide) > .rest-timer {
        display: none;
    }

    .mobile-exercise-expand {
        display: inline-flex;
        grid-column: 3;
        grid-row: 1 / span 5;
        align-self: center;
        justify-self: center;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #7d8ba0;
        font-size: 27px;
        cursor: pointer;
    }

    .superset-then {
        height: 22px;
        margin: -2px 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 5px;
        color: #7f8ba1;
        font-size: 9px;
        letter-spacing: .14em;
    }

    .superset-then span {
        color: #3157e8;
        font-size: 17px;
    }

    .mobile-exercise-detail-panel {
        display: none;
    }

    .superset-exercise.mobile-expanded,
    .exercise-slide:not(.superset-slide).mobile-expanded {
        display: block !important;
        padding: 0;
        overflow: hidden;
        border-radius: 18px;
        box-shadow: 0 14px 38px rgba(15,23,42,.10);
    }

    .mobile-expanded > .superset-exercise-number,
    .mobile-expanded > .workout-exercise-image,
    .mobile-expanded > h3,
    .mobile-expanded > .mobile-exercise-summary,
    .mobile-expanded > .mobile-last-performance,
    .mobile-expanded > .mobile-exercise-expand,
    .mobile-expanded > .exercise-description,
    .mobile-expanded > .youtube-exercise-button,
    .mobile-expanded > .exercise-meta,
    .mobile-expanded > .exercise-stats,
    .mobile-expanded > .exercise-notes,
    .mobile-expanded > .exercise-log-actions,
    .mobile-expanded > .rest-timer,
    .mobile-expanded > .exercise-number {
        display: none !important;
    }

    .mobile-expanded > .mobile-exercise-detail-panel {
        display: block;
    }

    .mobile-detail-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 18px 20px 12px;
    }

    .mobile-detail-back {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 50%;
        background: #f1f5f9;
        color: #334155;
        font-size: 28px;
    }

    .mobile-detail-header strong {
        display: block;
        color: #111827;
        font-size: 18px;
    }

    .mobile-detail-header small {
        display: block;
        color: #94a3b8;
        margin-top: 2px;
        font-size: 11px;
    }

    .mobile-detail-hero {
        margin: 0 20px;
        max-height: 520px;
        border-radius: 15px;
        overflow: hidden;
        background: #eef2f6;
        aspect-ratio: 16 / 7;
    }

    .mobile-detail-hero img,
    .mobile-detail-image-placeholder {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .mobile-detail-image-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
    }

    .mobile-detail-image-placeholder svg {
        width: 74px;
        height: 74px;
        fill: currentColor;
    }

    .mobile-detail-description {
        max-width: 820px;
        padding: 18px 20px 4px;
        color: #475569;
        font-size: 14px;
        line-height: 1.6;
    }

    .mobile-detail-media {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px 20px 4px;
    }

    .mobile-detail-video,
    .mobile-detail-image {
        min-height: 46px;
        border-radius: 10px;
        font-weight: 700;
    }

    .mobile-detail-video {
        border: 1px solid #fecaca;
        background: #fff1f2;
        color: #dc2626;
    }

    .mobile-detail-image {
        border: 1px solid #dbe2ea;
        background: #fff;
        color: #334155;
    }

    .mobile-detail-section-title {
        padding: 18px 20px 8px;
        color: #111827;
        font-size: 13px;
        font-weight: 800;
    }

    .mobile-detail-performance {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 220px));
        gap: 0;
        width: fit-content;
        min-width: 420px;
        margin: 0 20px 14px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }

    .mobile-detail-performance > div {
        padding: 14px 24px;
        text-align: center;
    }

    .mobile-detail-performance > div + div {
        border-left: 1px solid #e2e8f0;
    }

    .mobile-detail-performance strong,
    .mobile-detail-performance span {
        display: block;
    }

    .mobile-detail-performance strong {
        color: #111827;
        font-size: 18px;
    }

    .mobile-detail-performance span {
        margin-top: 3px;
        color: #94a3b8;
        font-size: 9px;
        font-weight: 800;
    }

    .mobile-detail-log,
    .mobile-detail-history {
        min-width: 220px;
        margin: 0 0 18px 20px;
        min-height: 46px;
        border-radius: 10px;
    }

    .mobile-detail-log {
        background: #3157e8 !important;
        border-color: #3157e8 !important;
        color: #fff !important;
    }

    .mobile-detail-history {
        margin-left: 8px;
        background: #fff;
        color: #334155;
        border-color: #dbe2ea;
    }

    /* Desktop uses the profile dropdown too, but not the bottom navigation. */
    .mobile-bottom-nav {
        display: none !important;
    }
}

@media (max-width: 800px) {
    .mobile-bottom-nav.mobile-bottom-nav-three {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .mobile-bottom-nav.mobile-bottom-nav-three .mobile-logout {
        color: #dc2626;
    }
}
@media (min-width: 801px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* =========================================================
   Superset group hierarchy
   Makes the start/end of supersets unmistakable and keeps
   standalone exercises visually separate.
   ========================================================= */

@media (max-width: 800px) {
    .exercise-slider {
        gap: 22px;
    }

    .superset-slide {
        margin: 0 !important;
        padding: 12px !important;
        background: #f3f5ff !important;
        border: 1px solid #dfe4f5 !important;
        border-radius: 17px !important;
        box-shadow: 0 2px 10px rgba(49, 87, 232, .035) !important;
    }

    .superset-slide .superset-badge {
        display: inline-flex;
        margin: 0 0 4px;
        padding: 4px 8px;
        background: #e4e8ff;
        border-radius: 999px;
        color: #3148c9;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .07em;
    }

    .superset-slide .superset-instruction {
        margin: 0 0 10px;
        color: #7b8498;
    }

    .superset-slide .superset-exercise {
        background: #fff;
        border-color: #dde3ec;
    }

    .superset-slide .superset-then {
        margin: 0;
        height: 22px;
    }

    .exercise-slide:not(.superset-slide) {
        margin: 8px 0 4px !important;
    }

    .exercise-slide:not(.superset-slide)::before {
        content: "SINGLE EXERCISE";
        position: absolute;
        top: -17px;
        left: 4px;
        color: #16834b;
        font-size: 8px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: .08em;
    }
}

@media (min-width: 801px) {
    .exercise-slider {
        gap: 30px;
    }

    .superset-slide {
        margin: 0 !important;
        padding: 18px !important;
        background: #f3f5ff !important;
        border: 1px solid #dce2f3 !important;
        border-radius: 20px !important;
        box-shadow: 0 3px 14px rgba(49, 87, 232, .035) !important;
    }

    .superset-slide .superset-badge {
        display: inline-flex;
        margin: 0 0 5px;
        padding: 5px 10px;
        background: #e4e8ff;
        border-radius: 999px;
        color: #3148c9;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .07em;
    }

    .superset-slide .superset-instruction {
        margin: 0 0 13px;
        color: #7b8498;
    }

    .superset-slide .superset-exercise {
        background: #fff;
        border-color: #dce2ea;
        box-shadow: 0 3px 12px rgba(15, 23, 42, .035);
    }

    .superset-slide .superset-then {
        margin: 0;
        height: 28px;
        gap: 7px;
    }

    .superset-slide .superset-then::before,
    .superset-slide .superset-then::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #d7ddef;
    }

    .exercise-slide:not(.superset-slide) {
        margin: 12px 0 6px !important;
    }

    .exercise-slide:not(.superset-slide)::before {
        content: "SINGLE EXERCISE";
        position: absolute;
        top: -23px;
        left: 3px;
        padding: 4px 8px;
        background: #eaf8ef;
        border-radius: 999px;
        color: #16834b;
        font-size: 9px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: .07em;
    }
}


/* Click the expanded exercise image to open the full-size image modal. */
.mobile-detail-hero-button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.mobile-detail-hero-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.history-note-row td {
    border-top: 0;
}

.history-note {
    padding-top: 0 !important;
    color: #64748b;
    font-size: 12px;
    font-style: italic;
    white-space: normal !important;
}


/* Admin users list */
.users-list-card {
    padding: 0;
    overflow: hidden;
}

.users-list {
    display: grid;
}

.admin-user-row {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) minmax(180px, .9fr) 180px 90px auto;
    align-items: center;
    gap: 18px;
    min-height: 72px;
    padding: 12px 16px;
    border-bottom: 1px solid #edf0f4;
}

.admin-user-row:last-child {
    border-bottom: 0;
}

.admin-user-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.admin-user-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #dfe5ec;
    background: #eef2f6;
}

.admin-user-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-weight: 800;
}

.admin-user-identity {
    min-width: 0;
}

.admin-user-identity strong,
.admin-user-login {
    display: block;
}

.admin-user-identity strong {
    overflow: hidden;
    color: #111827;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-login {
    margin-top: 3px;
    color: #94a3b8;
    font-size: 11px;
}

.admin-user-workout {
    color: #475569;
    font-size: 13px;
}

.admin-user-created {
    color: #64748b;
    font-size: 12px;
}

.admin-user-role {
    text-align: center;
}

.user-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.user-role-badge-user {
    background: #e9f8ef;
    color: #18864c;
}

.admin-user-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

.icon-action-button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #dfe5ec;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
}

.icon-action-button:hover {
    background: #f8fafc;
    color: #111827;
}

.icon-action-button.danger {
    color: #dc2626;
    border-color: #fecaca;
}

.icon-action-button.danger:hover {
    background: #fff1f2;
}

.admin-user-empty {
    padding: 24px;
}

@media (max-width: 800px) {
    .users-list-card {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .admin-user-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        min-height: 62px;
        gap: 10px;
        padding: 10px 8px;
        background: #fff;
    }

    .admin-user-avatar {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .admin-user-identity strong {
        font-size: 13px;
    }

    /* Mobile: hide login name and created date as requested. */
    .admin-user-login,
    .admin-user-created,
    .admin-user-workout {
        display: none;
    }

    .admin-user-role {
        grid-column: 2;
    }

    .admin-user-actions {
        grid-column: 3;
        gap: 5px;
    }

    .icon-action-button {
        width: 32px;
        height: 32px;
        border-radius: 7px;
    }
}


/* =========================================================
   Custom 404 pages
   ========================================================= */
.error-page {
    min-height: 100vh;
    margin: 0;
    background: #f7f8fb;
    color: #111827;
}

.error-page-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.error-card {
    width: min(520px, 100%);
    padding: 48px 36px;
    text-align: center;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .08);
}

.error-code {
    margin-bottom: 8px;
    color: #3157e8;
    font-size: clamp(64px, 12vw, 104px);
    line-height: .95;
    font-weight: 900;
    letter-spacing: -.06em;
}

.error-eyebrow {
    margin-bottom: 8px;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.error-card h1 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 27px;
}

.error-card p {
    max-width: 390px;
    margin: 0 auto;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}

.error-actions {
    margin-top: 24px;
}

.error-actions .button {
    min-width: 170px;
}

.admin-error-page .error-code {
    color: #475569;
}

@media (max-width: 600px) {
    .error-page-shell {
        padding: 18px;
    }

    .error-card {
        padding: 38px 22px;
        border-radius: 18px;
    }

    .error-card h1 {
        font-size: 23px;
    }

    .error-actions .button {
        width: 100%;
    }
}


/* Admin sidebar icons */
.admin-side-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
}

.admin-nav-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: currentColor;
    opacity: .9;
}

.admin-side-nav a:hover .admin-nav-icon {
    opacity: 1;
}

@media (max-width: 900px) {
    .admin-nav-icon {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }
}

.history-page{background:#f7f8fb;color:#111827;min-height:100vh;padding-bottom:76px}.history-shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:8px 0 56px}.history-tabs{display:inline-flex;gap:4px;padding:4px;margin-bottom:16px;background:#eef2f6;border-radius:12px}.history-tabs a{padding:9px 14px;border-radius:9px;color:#64748b;font-size:13px;font-weight:700}.history-tabs a.active{background:#fff;color:#3157e8;box-shadow:0 1px 4px rgba(15,23,42,.08)}.history-calendar-layout{display:grid;grid-template-columns:minmax(320px,.75fr) minmax(480px,1.25fr);gap:16px}.history-panel,.exercise-progress-summary{background:#fff;border:1px solid #e3e8ef;border-radius:18px;box-shadow:0 4px 18px rgba(15,23,42,.045)}.calendar-panel,.day-log-panel,.exercises-history-panel,.exercise-progress-table-panel{padding:18px}.calendar-toolbar{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;margin-bottom:18px}.calendar-toolbar strong{text-align:center}.calendar-toolbar a{display:flex;align-items:center;justify-content:center;font-size:24px}.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-weekdays span{text-align:center;color:#64748b;font-size:10px;font-weight:800}.calendar-day,.calendar-empty{aspect-ratio:1}.calendar-day{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#334155;font-size:12px}.calendar-day.has-logs i{position:absolute;bottom:11%;width:5px;height:5px;border-radius:50%;background:#3157e8}.calendar-day.selected{background:#3157e8;color:#fff}.calendar-day.selected i{background:#fff}.calendar-legend{display:flex;align-items:center;gap:7px;margin-top:14px;padding-top:14px;border-top:1px solid #edf0f4;color:#64748b;font-size:11px}.calendar-legend i{width:7px;height:7px;border-radius:50%;background:#3157e8}.history-panel-heading{display:flex;justify-content:space-between;gap:16px;margin-bottom:14px}.history-panel-heading h2{margin:0 0 4px;font-size:18px}.history-panel-heading p{margin:0;color:#64748b;font-size:12px}.day-log-list,.exercise-history-list{display:grid;gap:9px}.day-log-row,.exercise-history-row{display:grid;align-items:center;gap:12px;padding:10px;border:1px solid #e5e9ef;border-radius:13px;background:#fff;color:inherit}.day-log-row{grid-template-columns:58px minmax(0,1fr) auto 20px}.exercise-history-row{grid-template-columns:58px minmax(0,1fr) auto 110px 20px}.day-log-row img,.exercise-history-row img,.history-thumb-placeholder{width:58px;height:58px;border-radius:10px;object-fit:cover;background:#eef2f6;border:1px solid #dfe5ec}.history-thumb-placeholder{display:flex;align-items:center;justify-content:center;color:#94a3b8}.history-thumb-placeholder.large{width:72px;height:72px}.day-log-main strong,.exercise-history-main strong{display:block;color:#111827;font-size:14px}.day-log-main small,.exercise-history-main small{display:block;margin-top:2px;color:#94a3b8;font-size:10px}.day-log-stats{display:flex;gap:7px;flex-wrap:wrap;margin-top:5px;color:#475569;font-size:11px}.day-log-main p{margin:5px 0 0;color:#64748b;font-size:11px}.day-log-row time{color:#94a3b8;font-size:10px}.history-row-arrow{color:#7c8ba0;font-size:22px}.history-empty-state{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#64748b;text-align:center}.history-search{margin-bottom:12px}.pb-badge{display:inline-flex;padding:4px 6px;border-radius:6px;background:#ede9fe;color:#4f46e5;font-size:9px;font-weight:900}.exercise-pb-summary{text-align:right}.exercise-pb-summary strong,.exercise-pb-summary small{display:block}.exercise-pb-summary small{color:#64748b;font-size:10px}.exercise-progress-shell{max-width:980px}.exercise-progress-summary{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:18px;margin-bottom:16px}.exercise-progress-title{display:flex;align-items:center;gap:14px}.exercise-progress-title img{width:72px;height:72px;object-fit:cover;border-radius:12px}.exercise-progress-pb{display:grid;grid-template-columns:repeat(2,minmax(110px,1fr));border:1px solid #e3e8ef;border-radius:12px;overflow:hidden}.exercise-progress-pb>div{padding:12px 16px;text-align:center}.exercise-progress-pb span,.exercise-progress-pb strong{display:block}.exercise-progress-pb span{font-size:9px;color:#94a3b8}.exercise-progress-table-wrap{overflow-x:auto}.history-pagination{display:flex;justify-content:center;gap:5px;margin-top:16px}.history-pagination a{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid #dfe5ec;border-radius:8px}.history-pagination a.active{background:#3157e8;color:#fff;border-color:#3157e8}@media(max-width:800px){.history-shell{width:100%;padding:12px 10px 84px}.history-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.history-tabs a{text-align:center}.history-calendar-layout{grid-template-columns:1fr}.calendar-panel,.day-log-panel,.exercises-history-panel,.exercise-progress-table-panel{padding:14px}.day-log-row{grid-template-columns:50px minmax(0,1fr) auto 16px}.exercise-history-row{grid-template-columns:50px minmax(0,1fr) 16px}.day-log-row img,.exercise-history-row img,.history-thumb-placeholder{width:50px;height:50px}.exercise-history-row .pb-badge,.exercise-pb-summary{display:none}.exercise-progress-summary{flex-direction:column;align-items:stretch}.exercise-progress-pb{width:100%}}

@media (max-width: 800px) {
    .mobile-bottom-nav.mobile-bottom-nav-three {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }
    .mobile-bottom-nav.mobile-bottom-nav-three a {
        display: flex !important;
    }
}
@media (min-width: 801px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

.workout-session-summary{margin:0 0 16px;padding:14px 16px;background:#fff;border:1px solid #e3e8ef;border-radius:14px}.workout-session-summary-row{display:flex;justify-content:space-between;align-items:center;gap:14px}.workout-session-summary-row strong,.workout-session-summary-row span{display:block}.workout-session-summary-row span{margin-top:3px;color:#64748b;font-size:11px}.workout-session-progress{height:7px;margin-top:11px;background:#eef2f6;border-radius:999px;overflow:hidden}.workout-session-progress i{display:block;height:100%;background:#3157e8}.workout-session-summary.completed{border-color:#bbf7d0;background:#f0fdf4}.log-previous-performance{margin:0 0 12px;padding:10px 12px;background:#eef2ff;border-radius:10px;color:#4f63b8}.log-previous-performance span,.log-previous-performance strong{display:block}.log-previous-performance span{font-size:9px;font-weight:800}.log-previous-performance strong{margin-top:3px;font-size:13px}.global-rest-timer{position:fixed;right:18px;bottom:82px;z-index:1600;display:flex;align-items:center;gap:10px;padding:12px;background:#111827;color:#fff;border-radius:14px;box-shadow:0 14px 40px rgba(15,23,42,.3)}.global-rest-timer[hidden]{display:none}.global-rest-timer span,.global-rest-timer strong{display:block}.global-rest-timer span{font-size:9px;color:#94a3b8}.global-rest-timer strong{font-size:22px}.exercise-alternatives{margin:10px 14px 4px;padding:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px}.exercise-alternatives strong{display:block;font-size:11px}.exercise-alternatives div{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.exercise-alternatives span{padding:5px 8px;background:#eef2ff;color:#4f63b8;border-radius:999px;font-size:10px}.progress-chart-panel{padding:18px;margin-bottom:16px}.progress-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.progress-chart-card{padding:12px;border:1px solid #e5e9ef;border-radius:12px;background:#fff}.progress-chart-card strong{display:block;margin-bottom:8px}.progress-chart-card svg{width:100%;height:150px;overflow:visible}.progress-chart-card polyline{fill:none;stroke:#3157e8;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.user-dashboard-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}.dashboard-primary,.dashboard-stat,.dashboard-recent{padding:20px}.dashboard-primary span,.dashboard-stat span{color:#64748b;font-size:10px;font-weight:800}.dashboard-primary h2{margin:8px 0 18px}.dashboard-stat strong{display:block;font-size:30px;margin-top:8px}.dashboard-stat small{color:#64748b}.dashboard-recent{grid-column:1/-1}.dashboard-recent div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #edf0f4}.dashboard-recent div:last-child{border-bottom:0}@media(max-width:800px){.workout-session-summary-row{align-items:flex-start}.workout-session-summary-row .button{font-size:11px;padding:8px 10px}.global-rest-timer{left:10px;right:10px;bottom:76px;justify-content:space-between}.user-dashboard-grid{grid-template-columns:1fr}.dashboard-recent{grid-column:auto}.progress-chart-grid{grid-template-columns:1fr}}

/* =========================================================
   Stígsson Workout Tracker branding
   ========================================================= */
.admin-brand-logo img {
    display: block;
    width: 185px;
    max-width: 100%;
    height: auto;
}

.admin-brand-logo > span {
    margin-top: 8px;
    padding-left: 4px;
}

.login-brand-logo {
    display: block;
    width: min(290px, 85%);
    height: auto;
    margin: 0 auto 26px;
}

.workout-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.workout-brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
}

.history-header .workout-brand-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

@media (max-width: 800px) {
    .workout-brand-mark {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .history-header .workout-brand-mark {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .workout-header-brand {
        gap: 8px;
    }

    .admin-brand-logo img {
        width: 175px;
    }
}

/* =========================================================
   Refined Stígsson branding
   ========================================================= */
:root{
    --brand-primary:#3157E8;
    --brand-accent:#5A49F1;
    --brand-navy:#07162F;
    --brand-ink:#0F172A;
}

.admin-sidebar{
    background:linear-gradient(180deg,#07162F 0%,#071A35 100%);
}

.admin-brand-logo{
    padding-top:2px;
}

.admin-brand-logo img{
    display:block;
    width:190px;
    height:auto;
}

.admin-brand-logo>span{
    margin-top:8px;
    padding-left:6px;
    color:#7E8DB0;
    font-size:9px;
    letter-spacing:.18em;
}

.admin-side-nav a:hover{
    background:rgba(255,255,255,.08);
}

.admin-side-nav a.active,
.admin-side-nav a[aria-current="page"]{
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));
    color:#fff;
}

.login-brand-logo{
    display:block;
    width:min(310px,88%);
    height:auto;
    margin:0 auto 26px;
}

.workout-brand-mark{
    width:40px;
    height:40px;
    flex:0 0 40px;
}

.workout-brand-mark.standalone{
    margin-right:10px;
}

.workout-header{
    align-items:center;
}

.workout-header>.workout-brand-mark.standalone{
    order:-1;
}

.button.primary,
.day-selector a.selected,
.history-pagination a.active{
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));
    border-color:var(--brand-primary);
}

.mobile-bottom-nav .active{
    color:var(--brand-primary);
}

.pb-badge,
.superset-slide .superset-badge{
    color:var(--brand-primary);
}

@media(max-width:800px){
    .workout-brand-mark{
        width:31px;
        height:31px;
        flex-basis:31px;
    }
    .workout-brand-mark.standalone{
        margin-right:6px;
    }
    .admin-brand-logo img{
        width:178px;
    }
}


/* =========================================================
   User dashboard redesign
   ========================================================= */

.user-dashboard-page {
    padding: 0;
    background: #f7f8fb;
}

.user-dashboard-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 270px;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #07162f 0%, #071a35 100%);
    color: #fff;
    z-index: 1100;
}

.user-dashboard-brand img {
    width: 210px;
    max-width: 100%;
    height: auto;
}

.user-dashboard-nav {
    display: grid;
    gap: 8px;
    margin-top: 34px;
}

.user-dashboard-nav a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    border-radius: 10px;
    color: #dbe4f3;
    font-weight: 600;
}

.user-dashboard-nav a.active {
    background: linear-gradient(135deg, #3157e8, #5a49f1);
    color: #fff;
    box-shadow: 0 8px 20px rgba(49,87,232,.25);
}

.user-nav-icon {
    width: 26px;
    text-align: center;
    font-size: 22px;
}

.user-dashboard-sidebar-footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.12);
}

.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
}

.sidebar-profile img,
.sidebar-profile > span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
}

.sidebar-profile img {
    object-fit: cover;
}

.sidebar-profile > span {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #243753;
    font-weight: 800;
}

.sidebar-profile strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.sidebar-logout {
    color: #dbe4f3;
    font-size: 13px;
}

.user-dashboard-main {
    min-height: 100vh;
    margin-left: 270px;
}

.user-dashboard-topbar {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 28px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #e3e8ef;
    position: sticky;
    top: 0;
    z-index: 900;
    backdrop-filter: blur(10px);
}

.user-dashboard-mobile-brand {
    display: none;
}

.user-dashboard-content {
    width: min(1180px, calc(100% - 44px));
    margin: 0 auto;
    padding: 30px 0 50px;
}

.dashboard-welcome {
    margin-bottom: 20px;
}

.dashboard-welcome h1 {
    margin: 0;
    color: #0f172a;
    font-size: 30px;
}

.dashboard-welcome p {
    margin: 6px 0 0;
    color: #64748b;
}

.dashboard-widget-grid {
    display: grid;
    grid-template-columns: 1.15fr .8fr .95fr;
    gap: 16px;
}

.dashboard-widget {
    padding: 18px;
    min-width: 0;
}

.dashboard-active-workout {
    grid-column: span 2;
}

.dashboard-month-widget {
    grid-column: span 1;
}

.dashboard-last-workout {
    grid-column: span 1;
}

.dashboard-pb-widget {
    grid-column: span 2;
}

.dashboard-weekly-widget {
    grid-column: span 2;
}

.dashboard-streak-widget {
    grid-column: span 1;
}

.dashboard-widget-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.dashboard-widget-heading h2 {
    margin: 0;
    color: #111827;
    font-size: 16px;
}

.dashboard-day-badge,
.dashboard-complete-badge,
.dashboard-metric-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
}

.dashboard-day-badge {
    background: #eef2ff;
    color: #4f46e5;
}

.dashboard-complete-badge {
    background: #eaf8ef;
    color: #18864c;
}

.dashboard-metric-chip {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.active-workout-body {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: end;
}

.active-workout-body > div strong,
.active-workout-body > div span {
    display: block;
}

.active-workout-body > div strong {
    color: #111827;
    font-size: 18px;
}

.active-workout-body > div span {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
}

.active-workout-percent {
    color: #3157e8;
    font-size: 16px;
}

.dashboard-progress-bar {
    height: 8px;
    margin: 12px 0 14px;
    background: #edf1f5;
    border-radius: 999px;
    overflow: hidden;
}

.dashboard-progress-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(135deg, #3157e8, #5a49f1);
}

.dashboard-continue-button {
    width: 100%;
    justify-content: center;
}

.dashboard-big-number,
.dashboard-streak-number {
    margin-top: 22px;
    text-align: center;
    color: #0f172a;
    font-size: 44px;
    font-weight: 800;
}

.dashboard-month-widget p,
.dashboard-streak-widget p {
    margin: 5px 0 0;
    text-align: center;
    color: #64748b;
    font-size: 12px;
}

.dashboard-last-workout h3 {
    margin: 10px 0;
    color: #111827;
    font-size: 17px;
}

.dashboard-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #64748b;
    font-size: 12px;
}

.dashboard-link {
    display: inline-block;
    margin-top: 18px;
    color: #3157e8;
    font-size: 12px;
    font-weight: 700;
}

.dashboard-trophy {
    color: #3157e8;
}

.dashboard-pb-list {
    display: grid;
}

.dashboard-pb-list a {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    color: inherit;
    border-bottom: 1px solid #edf0f4;
}

.dashboard-pb-list a:last-child {
    border-bottom: 0;
}

.dashboard-pb-list img,
.dashboard-pb-placeholder {
    width: 38px;
    height: 38px;
    border-radius: 8px;
}

.dashboard-pb-list img {
    object-fit: cover;
}

.dashboard-pb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2f6;
    color: #94a3b8;
}

.dashboard-pb-list strong,
.dashboard-pb-list small {
    display: block;
}

.dashboard-pb-list strong {
    color: #111827;
    font-size: 13px;
}

.dashboard-pb-list small {
    margin-top: 2px;
    color: #64748b;
    font-size: 10px;
}

.dashboard-pb-list time {
    color: #94a3b8;
    font-size: 10px;
}

.dashboard-week-chart {
    height: 190px;
    display: grid;
    grid-template-columns: repeat(7,1fr);
    align-items: end;
    gap: 12px;
    padding-top: 6px;
}

.dashboard-week-bar {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 7px;
}

.dashboard-week-bar-track {
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(180deg, #fafbff, #f4f6fb);
    overflow: hidden;
}

.dashboard-week-bar-track i {
    display: block;
    width: 54%;
    min-height: 4px;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, #5a49f1, #3157e8);
}

.dashboard-week-bar span {
    text-align: center;
    color: #64748b;
    font-size: 10px;
}

.dashboard-week-dots {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 6px;
    margin-top: 22px;
}

.dashboard-week-dots span {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 1px solid #dfe5ec;
    border-radius: 50%;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
}

.dashboard-week-dots span.active {
    background: linear-gradient(135deg, #3157e8, #5a49f1);
    border-color: transparent;
    color: #fff;
}

@media (max-width: 980px) {
    .user-dashboard-sidebar {
        display: none;
    }

    .user-dashboard-main {
        margin-left: 0;
    }

    .user-dashboard-topbar {
        height: 64px;
        padding: 0 14px;
        justify-content: space-between;
    }

    .user-dashboard-mobile-brand {
        display: block;
    }

    .user-dashboard-mobile-brand img {
        width: 175px;
        height: auto;
    }

    .user-dashboard-content {
        width: 100%;
        padding: 18px 12px 86px;
    }

    .dashboard-welcome h1 {
        font-size: 24px;
    }

    .dashboard-widget-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-active-workout,
    .dashboard-pb-widget,
    .dashboard-weekly-widget {
        grid-column: span 2;
    }

    .dashboard-month-widget,
    .dashboard-last-workout,
    .dashboard-streak-widget {
        grid-column: span 1;
    }
}

@media (max-width: 640px) {
    .dashboard-widget-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-active-workout,
    .dashboard-month-widget,
    .dashboard-last-workout,
    .dashboard-pb-widget,
    .dashboard-weekly-widget,
    .dashboard-streak-widget {
        grid-column: span 1;
    }

    .dashboard-widget {
        padding: 15px;
    }

    .dashboard-week-chart {
        height: 155px;
        gap: 7px;
    }

    .dashboard-big-number,
    .dashboard-streak-number {
        font-size: 38px;
        margin-top: 14px;
    }
}


/* Shared user sidebar on desktop */
@media (min-width: 981px) {
    .user-sidebar-page {
        padding-left: 270px;
    }

    .user-sidebar-page .user-shared-sidebar {
        display: flex;
    }

    .user-sidebar-page .workout-header,
    .user-sidebar-page .history-header {
        width: min(1180px, calc(100% - 48px));
        max-width: none;
    }

    .user-sidebar-page .workout-container,
    .user-sidebar-page .history-shell,
    .user-sidebar-page .settings-container {
        width: min(1180px, calc(100% - 48px));
        max-width: none;
    }

    .user-sidebar-page .mobile-bottom-nav {
        display: none !important;
    }
}

@media (max-width: 980px) {
    .user-shared-sidebar {
        display: none !important;
    }

    .user-sidebar-page {
        padding-left: 0;
    }
}

/* Edit logged exercise */
.history-log-actions {
    width: 48px;
    text-align: right;
}
.history-day-edit {
    justify-self: end;
}
.edit-log-shell {
    max-width: 760px;
}
.edit-log-card {
    padding: 20px;
}
.edit-log-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.edit-log-heading img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
}
.edit-log-heading h2 {
    margin: 0;
}
.edit-log-heading p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
}
@media (max-width:800px) {
    .exercise-progress-table th:last-child,
    .exercise-progress-table td:last-child {
        width: 42px;
    }
    .day-log-row {
        grid-template-columns: 50px minmax(0,1fr) auto 20px 36px !important;
    }
}

/* Admin dashboard redesign */
.admin-dashboard-welcome{margin-bottom:18px}.admin-dashboard-welcome h1{margin:0;font-size:28px;color:#0f172a}.admin-dashboard-welcome p{margin:5px 0 0;color:#64748b}
.admin-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.admin-kpi-card{display:flex;align-items:center;gap:14px;min-height:128px;padding:18px;background:#fff;border:1px solid #e3e8ef;border-radius:16px;box-shadow:0 3px 14px rgba(15,23,42,.04);color:inherit}.admin-kpi-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex:0 0 48px;border-radius:50%;background:#eef2ff;font-size:21px}.admin-kpi-card span,.admin-kpi-card strong,.admin-kpi-card small{display:block}.admin-kpi-card span{color:#334155;font-size:11px;font-weight:800;text-transform:uppercase}.admin-kpi-card strong{margin-top:3px;color:#0f172a;font-size:30px}.admin-kpi-card small{margin-top:5px;color:#64748b;font-size:10px}
.admin-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.admin-dashboard-card{padding:18px}.admin-dashboard-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.admin-dashboard-card-heading h2{margin:0;color:#111827;font-size:16px}.admin-dashboard-card-heading p{margin:3px 0 0;color:#64748b;font-size:10px}.admin-dashboard-chip{padding:5px 8px;border:1px solid #e2e8f0;border-radius:8px;color:#475569;font-size:10px}
.admin-line-chart{height:210px;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:end}.admin-line-chart-day{height:100%;display:grid;grid-template-rows:1fr auto auto;gap:4px;text-align:center}.admin-line-chart-track{display:flex;align-items:end;justify-content:center;min-height:130px;border-radius:8px;background:linear-gradient(180deg,#fafbff,#f4f6fb);overflow:hidden}.admin-line-chart-track i{display:block;width:46%;min-height:5px;border-radius:999px 999px 4px 4px;background:linear-gradient(180deg,#5a49f1,#3157e8)}.admin-line-chart-day strong{color:#3157e8;font-size:10px}.admin-line-chart-day span{color:#64748b;font-size:9px}
.admin-attention-list a{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:10px;align-items:center;min-height:48px;padding:8px 0;border-bottom:1px solid #edf0f4;color:#334155;font-size:12px}.admin-attention-list b{min-width:28px;padding:5px 8px;text-align:center;border-radius:999px;background:#fff1f2;color:#dc2626;font-size:10px}.admin-attention-list em{color:#94a3b8;font-style:normal;font-size:20px}
.admin-activity-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:55px;padding:8px 0;border-bottom:1px solid #edf0f4}.admin-activity-row img,.admin-activity-avatar,.admin-ranking-list img{width:38px;height:38px;border-radius:50%;object-fit:cover}.admin-activity-avatar{display:flex;align-items:center;justify-content:center;background:#eef2f6;color:#475569;font-weight:800}.admin-activity-row strong,.admin-activity-row small{display:block}.admin-activity-row strong{font-size:12px}.admin-activity-row small{margin-top:2px;color:#64748b;font-size:10px}.admin-activity-row time{color:#94a3b8;font-size:9px}
.admin-ranking-list>div{display:grid;grid-template-columns:28px 38px minmax(0,1fr) auto;gap:9px;align-items:center;min-height:52px;border-bottom:1px solid #edf0f4}.admin-rank{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#eef2ff;color:#3157e8;font-size:10px;font-weight:800}.admin-ranking-list strong{font-size:12px}.admin-ranking-list b{color:#3157e8;font-size:12px}
.admin-bar-list{display:grid;gap:12px}.admin-bar-list>div{display:grid;grid-template-columns:minmax(120px,.9fr) minmax(140px,1.5fr) 32px;gap:10px;align-items:center}.admin-bar-list span{font-size:11px}.admin-bar-list>div>div{height:7px;border-radius:999px;background:#eef2f6;overflow:hidden}.admin-bar-list i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3157e8,#5a49f1)}.admin-bar-list b{text-align:right;color:#64748b;font-size:10px}
@media(max-width:1100px){.admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-kpi-card{min-height:112px;padding:13px;gap:10px}.admin-kpi-icon{width:40px;height:40px;flex-basis:40px;font-size:18px}.admin-kpi-card strong{font-size:25px}.admin-dashboard-grid{grid-template-columns:1fr}.admin-dashboard-card{padding:14px}.admin-line-chart{height:180px;gap:7px}.admin-bar-list>div{grid-template-columns:110px minmax(90px,1fr) 28px}}

/* Lucide icon consistency */
.user-nav-svg{width:18px;height:18px;display:block}.mobile-bottom-nav .user-nav-svg{width:18px;height:18px;margin:0 auto}.admin-kpi-svg{width:22px;height:22px;display:block}.dashboard-heading-icon{width:18px;height:18px;display:inline-block;vertical-align:-3px}.dashboard-trophy .dashboard-heading-icon{width:22px;height:22px}


/* Shared Lucide-style action icons */
.lucide-icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.icon-action-button .lucide-icon {
    width: 16px;
    height: 16px;
}

.icon-action-button.danger .lucide-icon {
    stroke: currentColor;
}


/* Admin workout/exercise text buttons with Lucide icons */
.admin-body .button,
.admin-body button.button,
.admin-body a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.admin-body .button .lucide-icon,
.admin-body button.button .lucide-icon,
.admin-body a.button .lucide-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.admin-body .button span,
.admin-body button.button span,
.admin-body a.button span {
    line-height: 1;
}

.admin-body .icon-only-action{width:40px;min-width:40px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center}.admin-body .icon-only-action .lucide-icon{width:17px;height:17px;margin:0}

/* Admin exercise icon-only actions */
.admin-body .icon-only-action{width:40px;min-width:40px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center}.admin-body .icon-only-action .lucide-icon{width:17px;height:17px;margin:0}


/* User frontend Lucide icon cleanup */
.user-sidebar-page .lucide-icon,
.history-page .lucide-icon,
.workout-page .lucide-icon,
.user-dashboard-page .lucide-icon,
.settings-page .lucide-icon,
.login-page .lucide-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
    pointer-events: none;
}

.mobile-bottom-nav .lucide-icon {
    width: 18px;
    height: 18px;
}

.history-row-arrow .lucide-icon,
.mobile-exercise-expand .lucide-icon {
    width: 19px;
    height: 19px;
}

.media-modal-close .lucide-icon,
.mobile-detail-back .lucide-icon {
    width: 20px;
    height: 20px;
}

.youtube-exercise-button,
.exercise-log-actions button,
.dashboard-link,
.history-row-arrow,
.mobile-bottom-nav a,
.mobile-detail-video {
    align-items: center;
    gap: 6px;
}

.then-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.then-icon .lucide-icon {
    width: 15px;
    height: 15px;
}


/* Synced user profile dropdown navigation */
.user-profile-dropdown > a {
    display: flex;
    align-items: center;
    gap: 9px;
}

.user-profile-dropdown > a .lucide-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.user-profile-dropdown > a span {
    line-height: 1.2;
}

/* Stretching feature */
.mobile-bottom-nav.mobile-bottom-nav-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stretch-program-header{margin-bottom:14px;padding:18px;background:linear-gradient(135deg,#eef2ff,#f5f3ff);border:1px solid #e0e4ff;border-radius:16px}.stretch-program-header span{font-size:9px;font-weight:800;color:#5a49f1;letter-spacing:.1em}.stretch-program-header h2{margin:5px 0}.stretch-program-header p{margin:0;color:#64748b}
.stretch-day-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px}.stretch-day-tabs a{min-width:120px;padding:10px 12px;background:#fff;border:1px solid #e3e8ef;border-radius:10px;color:#475569;font-weight:700}.stretch-day-tabs a small{display:block;margin-top:2px;font-size:9px;color:#94a3b8}.stretch-day-tabs a.active{background:linear-gradient(135deg,#3157e8,#5a49f1);color:#fff}.stretch-day-tabs a.active small{color:#dbeafe}
.stretch-list{display:grid;gap:12px}.stretch-card{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;padding:12px;background:#fff;border:1px solid #e3e8ef;border-radius:15px}.stretch-card-media button{width:130px;height:110px;padding:0;border:0;background:none}.stretch-card-media img{width:100%;height:100%;object-fit:cover;border-radius:11px}.stretch-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:90px;background:#eef2f6;border-radius:10px;color:#94a3b8}.stretch-card-title{display:flex;justify-content:space-between;gap:12px}.stretch-card-title strong,.stretch-card-title small{display:block}.stretch-card-title small{margin-top:3px;color:#64748b;font-size:11px}.stretch-card-main p{color:#64748b;font-size:12px;line-height:1.5}.stretch-difficulty{padding:4px 7px;height:max-content;background:#eef2ff;color:#4f46e5;border-radius:999px;font-size:9px;font-weight:800}.stretch-card-actions{display:flex;gap:8px;flex-wrap:wrap}
.stretch-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.stretch-library-card{display:grid;grid-template-columns:74px 1fr;gap:10px;padding:10px;background:#fff;border:1px solid #e3e8ef;border-radius:13px}.stretch-library-card img,.stretch-library-card>.stretch-placeholder{width:74px;height:74px;object-fit:cover}.stretch-library-card strong,.stretch-library-card small{display:block}.stretch-library-card small{margin:3px 0 8px;color:#64748b;font-size:10px}
.stretch-timer-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(7,22,47,.65)}.stretch-timer-modal[hidden]{display:none}.stretch-timer-card{position:relative;width:min(420px,100%);padding:28px;text-align:center;background:#fff;border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.25)}.stretch-timer-close{position:absolute;right:12px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#f1f5f9}.stretch-timer-label{font-size:9px;font-weight:800;color:#5a49f1;letter-spacing:.12em}.stretch-timer-card h2{margin:8px 0}.stretch-side{color:#64748b;font-size:12px}.stretch-timer-value{margin:18px 0;font-size:64px;font-weight:800;color:#0f172a}.stretch-timer-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stretching-empty{padding:30px;text-align:center}.stretch-history-row{border-left:3px solid #5a49f1}.dashboard-stretch-widget small{display:block;text-align:center;margin-top:8px;color:#94a3b8}
@media(max-width:800px){.stretch-card{grid-template-columns:82px minmax(0,1fr)}.stretch-card-media button{width:82px;height:82px}.stretch-card-main p{display:none}.stretch-card-actions .button{font-size:10px;padding:8px}.stretch-timer-value{font-size:50px}.mobile-bottom-nav.mobile-bottom-nav-four small{font-size:9px}}


/* Final synced user navigation */
.mobile-bottom-nav.mobile-bottom-nav-four {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mobile-bottom-nav.mobile-bottom-nav-four a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.mobile-bottom-nav.mobile-bottom-nav-four .lucide-icon {
    width: 19px;
    height: 19px;
}

.user-profile-dropdown > a {
    display: flex;
    align-items: center;
    gap: 9px;
}

.user-profile-dropdown > a .lucide-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.user-dashboard-nav .user-nav-icon .lucide-icon {
    width: 20px;
    height: 20px;
}


/* Standardized stretch thumbnails to match Admin > Exercises */
.admin-body .exercise-overview-name .exercise-list-thumbnail {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 9px;
    object-fit: cover;
}

.admin-body .exercise-overview-name .exercise-list-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef2f6;
    border: 1px solid #dfe5ec;
    color: #94a3b8;
}

.admin-body .exercise-overview-name .exercise-list-placeholder .lucide-icon {
    width: 20px;
    height: 20px;
}

.admin-body .exercise-image-trigger {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    overflow: hidden;
}


/* Admin list search/filter toolbar */
.admin-list-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(190px, 260px);
    gap: 12px;
    align-items: center;
    margin: 0 0 16px;
}

.admin-list-search {
    position: relative;
}

.admin-list-search .lucide-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.admin-list-search input {
    padding-left: 39px;
    margin: 0;
}

.admin-list-toolbar select {
    margin: 0;
}

.admin-filter-empty {
    padding: 24px !important;
    text-align: center;
}

@media (max-width: 700px) {
    .admin-list-toolbar {
        grid-template-columns: 1fr;
        gap: 9px;
    }
}


/* Finish-workout feedback */
.workout-session-summary.completed {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.workout-session-summary.finish-error {
    border-color: #fecaca;
    background: #fef2f2;
}

.workout-session-summary [data-finish-session].finished {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.workout-session-finish-message {
    margin-top: 10px;
    color: #15803d;
    font-size: 12px;
    font-weight: 700;
}

.workout-session-finish-message.error {
    color: #b91c1c;
}


/* Stretch Programs admin page */
.stretch-program-list {
    display: grid;
    gap: 14px;
}

.stretch-program-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
}

.stretch-program-card > div:first-child {
    min-width: 0;
}

.stretch-program-card h3 {
    margin: 0 0 6px;
    color: #111827;
    font-size: 18px;
}

.stretch-program-card p {
    margin: 0 0 10px;
    color: #64748b;
    font-size: 13px;
}

.stretch-program-card small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 11px;
}

.stretch-program-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.stretch-program-actions .inline {
    display: inline-flex;
    margin: 0;
}

.stretch-program-actions .button {
    min-width: 88px;
}

@media (max-width: 700px) {
    .stretch-program-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }

    .stretch-program-actions {
        width: 100%;
    }

    .stretch-program-actions .button,
    .stretch-program-actions .inline {
        flex: 1 1 0;
    }

    .stretch-program-actions .button {
        width: 100%;
    }
}


/* Explicit Start Workout flow */
.workout-session-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workout-session-summary.not-started {
    border-style: dashed;
    background: #fafbff;
}

.workout-session-summary.is-active {
    border-color: #c7d2fe;
    background: #f7f8ff;
}

.workout-session-start-hint {
    margin-top: 9px;
    color: #64748b;
    font-size: 11px;
}

[data-log-exercise][disabled] {
    opacity: .48;
    cursor: not-allowed;
    filter: grayscale(.15);
}

@media (max-width: 700px) {
    .workout-session-summary-row {
        align-items: flex-start;
    }

    .workout-session-actions {
        flex: 0 0 auto;
    }

    .workout-session-actions .button {
        padding: 8px 10px;
        white-space: nowrap;
    }
}


/* Workout schedule/duration types */
.workout-schedule-settings {
    margin: 6px 0 20px;
    padding: 16px;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    background: #f8fafc;
}

.workout-schedule-settings .form-help {
    color: #64748b;
    font-size: 11px;
    font-weight: 400;
}

.workout-schedule-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.workout-schedule-badge.ongoing {
    background: #eef2ff;
    color: #4f46e5;
}

.workout-schedule-badge.fixed {
    background: #ecfdf5;
    color: #047857;
}

.workout-schedule-user-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: #475569;
}

.workout-schedule-user-note > span {
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 10px;
    font-weight: 800;
}

.workout-schedule-user-note small {
    color: #64748b;
    font-size: 10px;
}

@media (max-width: 700px) {
    .workout-schedule-user-note {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}


/* Dashboard next-workout-day flow */
.dashboard-program-complete {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #bbf7d0;
    border-radius: 9px;
    background: #f0fdf4;
    color: #15803d;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   Mobile modal/nav overlap fix
   The bottom navigation previously shared z-index 1100 with the
   exercise modal, allowing taps near Save to hit History underneath.
   ========================================================= */

.exercise-log-modal,
.exercise-history-modal {
    z-index: 2200;
}

.exercise-log-modal-dialog,
.exercise-history-modal-dialog {
    z-index: 1;
}

/* Prevent the page underneath a logging/history modal from scrolling. */
body.exercise-modal-open {
    overflow: hidden;
}

/* The fixed user navigation should never be interactive above a modal. */
body.exercise-modal-open .mobile-bottom-nav {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 800px) {
    .exercise-log-modal.visible,
    .exercise-history-modal.visible {
        align-items: flex-end;
        padding:
            12px
            12px
            max(12px, env(safe-area-inset-bottom));
    }

    .exercise-log-modal-dialog,
    .exercise-history-modal-dialog {
        width: 100%;
        max-height: min(88dvh, 720px);
        border-radius: 18px 18px 12px 12px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * Keep Cancel / Save in view while the fields above scroll.
     * This is particularly useful on smaller phones and when the
     * on-screen keyboard is visible.
     */
    .exercise-log-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin: 14px -20px -22px;
        padding:
            12px
            20px
            max(14px, env(safe-area-inset-bottom));
        background: #111419;
        border-top: 1px solid #252a31;
    }

    .exercise-log-form-actions .button {
        min-height: 44px;
        flex: 1;
    }
}


/* Shared user bottom navigation - single source of truth */
.mobile-bottom-nav.mobile-bottom-nav-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mobile-bottom-nav.mobile-bottom-nav-four > a {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

.mobile-bottom-nav.mobile-bottom-nav-four .user-nav-svg {
    width: 19px;
    height: 19px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-bottom-nav.mobile-bottom-nav-four small {
    line-height: 1;
    white-space: nowrap;
}


/* Shared user sidebar partial */
.sidebar-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sidebar-logout .user-nav-svg {
    width: 16px;
    height: 16px;
}


/* Admin changelog / application version */
.admin-version-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding: 8px 10px !important;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 9px;
    color: inherit;
    text-decoration: none;
}

.admin-version-link span {
    font-size: 10px;
    opacity: .7;
}

.admin-version-link strong {
    font-size: 11px;
}

.changelog-heading {
    align-items: center;
}

.app-version-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font-size: 11px;
}

.app-version-badge strong {
    color: #4f46e5;
}

.admin-changelog {
    display: grid;
    gap: 14px;
}

.changelog-release {
    padding: 20px;
}

.changelog-release.current {
    border-color: #c7d2fe;
}

.changelog-release-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e8edf3;
}

.changelog-release-header h2 {
    margin: 0;
    font-size: 20px;
}

.changelog-release-header p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
}

.changelog-release-header time {
    color: #94a3b8;
    font-size: 11px;
    white-space: nowrap;
}

.changelog-version-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.changelog-current-badge {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.changelog-items {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.changelog-items li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    color: #475569;
    font-size: 12px;
    line-height: 1.5;
}

.changelog-check-icon {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: #4f46e5;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

@media (max-width: 700px) {
    .changelog-heading,
    .changelog-release-header {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* v0.1.1 workout session controls */
.workout-session-actions .button,
.workout-bottom-finish .button {
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.workout-session-actions .button:disabled,
.workout-bottom-finish .button:disabled {
    opacity: 1;
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #94a3b8;
    cursor: not-allowed;
}

.workout-bottom-finish {
    display: flex;
    justify-content: center;
    margin: 22px 0 10px;
}

.workout-bottom-finish-button {
    width: min(420px, 100%);
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.workout-bottom-finish-button .lucide-icon {
    width: 17px;
    height: 17px;
}

/* Stretch media interaction */
.stretch-card-media button,
.stretch-library-image-button {
    cursor: zoom-in;
}

.stretch-library-image-button {
    width: 74px;
    height: 74px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    overflow: hidden;
}

.stretch-library-image-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stretch-library-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stretch-placeholder .lucide-icon {
    width: 24px;
    height: 24px;
}