/* ===== CSS Variables ===== */

:root {
    --primary: #6366f1;
    --primary-light: #818cf8;
    --primary-dark: #4f46e5;
    --violet: #8b5cf6;
    --purple: #a855f7;
    --purple-dark: #7e22ce;
    --primary-3d: #4338ca;
    --success-3d: #15803d;
    --grad-primary: linear-gradient(135deg, #6366f1 0%, #7c5cf6 55%, #8b5cf6 100%);
    --grad-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    --side-left: #6366f1;
    --side-right: #a855f7;
    --grad-side-left: linear-gradient(135deg, #6366f1, #818cf8);
    --grad-side-right: linear-gradient(135deg, #a855f7, #c084fc);
    --challenge: #7c3aed;
    --challenge-light: #c4b5fd;
    --challenge-dark: #4c1d95;
    --challenge-tint: #f5f3ff;
    --success: #22c55e;
    --success-light: #86efac;
    --warning: #ff9700;
    --warning-light: #fcd34d;
    --danger: #ef4444;
    --danger-light: #fca5a5;
    
    --bg: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --card-bg: #ffffff;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05);
    --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08);
    
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
}

/* ===== Reset & Base ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

#app {
    height: 100%;
    overflow: hidden;
}

/* ===== Screens ===== */

.screen {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.screen.active {
    display: flex;
}

/* ===== XP Bar ===== */

.xp-bar {
    height: 8px;
    background: var(--bg-tertiary);
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    margin: 12px 0 8px 0;
}

.xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    width: 0%;
    transition: width 0.5s ease;
    border-radius: 4px;
}

/* ===== Headers ===== */

.header-home {
    padding: calc(var(--safe-top) + 8px) 20px 16px;
    background: var(--bg);
}

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

.header-top h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ===== Streak Card ===== */

.streak-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 252, 0.94) 100%);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--radius-xl);
    min-height: 164px;
    margin-bottom: 16px;
    position: relative;
    overflow: clip;
    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* ===== Week Prediction ===== */

.week-prediction {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
}

.week-prediction.prediction-ontrack {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.week-prediction.prediction-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
}

.week-prediction.prediction-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    animation: dangerShake 0.5s ease;
}

@keyframes dangerShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.prediction-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.prediction-message {
    flex: 1;
    line-height: 1.4;
}

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

.header-session {
    gap: 12px;
    padding: calc(var(--safe-top) + 10px) 16px 14px;
    background:
        radial-gradient(circle at top center, rgba(99, 102, 241, 0.09), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.94));
    border-bottom: 1px solid rgba(99, 102, 241, 0.08);
    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.header-center {
    flex: 1;
    text-align: center;
}

.header-center h1 {
    font-size: 18px;
    font-weight: 600;
}

.header-spacer {
    width: 44px;
}

.exercise-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 44px;
    min-width: 44px;
}

.session-timer {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 8px;
}

.header-session .header-center {
    min-width: 0;
}

.header-session .header-center h1 {
    margin-bottom: 6px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.header-session .session-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    padding: 7px 16px;
    border-radius: 999px;
    color: var(--text-secondary);
    background:
        rgb(159 161 255 / 10%);
}

.exercise-slot-label {
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

/* ===== Buttons ===== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
}

.btn:active {
    transform: scale(0.97);
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #6d72ff 0%, #585df6 45%, #4338ca 100%);
    color: white;
    border: none;
    box-shadow: 0 14px 28px rgba(79, 70, 229, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 6px rgba(49, 46, 129, 0.24);
    transform: translateY(0);
}

.btn-primary::before {
    content: "";
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: -28%;
    width: 30%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0));
    transform: skewX(-18deg);
    animation: ctaSweep 3.1s ease-in-out infinite;
    pointer-events: none;
}

.btn-primary::after {
    content: "";
    position: absolute;
    inset: -18%;
    background: radial-gradient(circle at 50% 50%, rgba(147, 197, 253, 0.22) 0%, transparent 66%);
    opacity: 0.55;
    animation: ctaAura 2.8s ease-in-out infinite;
    pointer-events: none;
}

.btn-primary:active {
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.3);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--border);
    color: var(--text-primary);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    padding: 8px 12px;
}

.btn-large {
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.2px;
    border-radius: var(--radius-lg);
}

.btn-compact {
    padding: 9px 12px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

#btn-start-session,
.btn-launch,
.btn-launch-superset {
    position: relative;
    isolation: isolate;
    animation: ctaHoverPulse 2.6s ease-in-out infinite;
}

#btn-start-session {
    min-height: 58px;
}

.btn-launch,
.btn-launch-superset {
    font-weight: 800;
    letter-spacing: 0.2px;
}

@keyframes ctaSweep {
    0%, 20% {
        transform: translateX(0) skewX(-18deg);
        opacity: 0;
    }
    40% {
        opacity: 0.95;
    }
    64%, 100% {
        transform: translateX(420%) skewX(-18deg);
        opacity: 0;
    }
}

@keyframes ctaAura {
    0%, 100% {
        opacity: 0.42;
        transform: scale(0.94);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.04);
    }
}

@keyframes ctaHoverPulse {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-1px) scale(1.015);
    }
}

.btn-finish {
    background: linear-gradient(135deg, var(--success), #16a34a);
    color: white;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    transition: all 0.2s ease;
}

.header-session .btn-finish {
    min-height: 48px;
    padding: 12px 20px;
    border-radius: 16px;
    white-space: nowrap;
    box-shadow:
        0 14px 24px rgba(34, 197, 94, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.btn-finish:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(34, 197, 94, 0.3);
}

.btn-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-md);
}

.header-session .btn-back {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(99, 102, 241, 0.08);
    box-shadow:
        0 10px 20px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.btn-back:active {
    background: var(--bg-tertiary);
}

.header-session .btn-back:active {
    background: rgba(241, 245, 249, 0.96);
    transform: scale(0.97);
}

.btn-icon {
    font-size: 18px;
}

.btn svg {
    flex-shrink: 0;
}

/* ===== Home Content ===== */

.home-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}

.suggested-session-card {
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--card-shadow);
}

.session-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.session-name {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.session-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 14px;
}

.meta-icon {
    font-size: 16px;
}

.last-session {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.session-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.session-actions .btn {
    width: 100%;
}

.home-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-actions .btn-outline {
    width: 100%;
}

.backup-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* ===== Session Content ===== */

.session-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: calc(var(--safe-bottom) + 50px);
    -webkit-overflow-scrolling: touch;
}

.slots-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== Slot Cards ===== */

.slot-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.slot-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--border);
    transition: background 0.3s ease;
}

.slot-card:active {
    transform: scale(0.98);
}

.slot-card.completed {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.07));
    border: 1px solid rgba(34, 197, 94, 0.28);
    box-shadow:
        0 12px 28px rgba(34, 197, 94, 0.18),
        0 4px 14px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.slot-card.completed::before {
    background: linear-gradient(180deg, var(--success), #16a34a);
    width: 5px;
}

.slot-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.slot-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
}

.slot-id {
    background: var(--primary);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
}

.slot-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}

@keyframes statusPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.slot-details {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.slot-detail {
    font-size: 13px;
    color: var(--text-secondary);
}

.slot-detail strong {
    color: var(--text-primary);
    font-weight: 600;
}

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

.slot-actions .btn:not(.btn-secondary):not(.btn-pool-trigger):not(.btn-edit-slot) {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
}

.btn-pool-trigger {
    width: 44px;
    flex: none !important;
    padding: 10px !important;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.btn-pool-trigger:active {
    background: rgba(99, 102, 241, 0.2);
}

.btn-edit-slot {
    width: 44px;
    flex: none !important;
    padding: 10px !important;
    background: var(--bg-tertiary);
}

.completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(22, 163, 74, 0.92));
    color: white;
    font-weight: 700;
    font-size: 12px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.3);
    box-shadow:
        0 8px 16px rgba(34, 197, 94, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

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

.completed-badge svg {
    width: 16px;
    height: 16px;
}

.slot-card.completed .slot-name {
    color: #14532d;
    font-weight: 650;
}

.slot-card.completed .slot-id {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.96), rgba(22, 163, 74, 0.88));
    color: white;
    border: 1px solid rgba(34, 197, 94, 0.24);
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.18);
}

.slot-card.challenge-target {
    border: 1.5px solid rgba(124, 58, 237, 0.24);
    box-shadow:
        0 14px 30px rgba(124, 58, 237, 0.12),
        0 5px 14px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
    animation: challengeCardPulse 2.4s ease-in-out infinite;
}

.slot-card.challenge-target::before {
    width: 5px;
    background: linear-gradient(180deg, var(--challenge), var(--challenge-light));
}

.slot-card.challenge-target.completed {
    animation: none;
}

.challenge-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.13);
    color: var(--challenge);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.challenge-badge.completed {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}

.challenge-badge svg {
    width: 13px;
    height: 13px;
}

.slot-challenge-note {
    margin-top: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(196, 181, 253, 0.14), var(--challenge-tint));
    border: 1px solid rgba(124, 58, 237, 0.16);
    color: var(--challenge-dark);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

@keyframes challengeCardPulse {
    0%, 100% {
        transform: translateY(0);
        box-shadow:
            0 14px 30px rgba(124, 58, 237, 0.1),
            0 5px 14px rgba(15, 23, 42, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.84);
    }
    50% {
        transform: translateY(-1px);
        box-shadow:
            0 18px 36px rgba(124, 58, 237, 0.16),
            0 7px 18px rgba(15, 23, 42, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }
}

/* ===== Exercise Content ===== */

.exercise-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    padding-bottom: calc(var(--safe-bottom) + 50px);
    -webkit-overflow-scrolling: touch;
}

.exercise-info-card {
    background: #f8fafc;
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow:
        0 10px 22px rgba(79, 70, 229, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    margin-bottom: 16px;
    border: 1px solid rgba(129, 140, 248, 0.2);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 18px;
}

.info-item {
    text-align: center;
    padding: 4px 6px;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.info-label {
    display: block;
    font-size: 10px;
    color: #8a97af;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
    font-weight: 700;
}

.info-value {
    font-size: clamp(20px, 4vw, 30px);
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1.02;
}

.exercise-challenge-card {
    position: relative;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    padding: 13px 14px;
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(196, 181, 253, 0.18), rgba(245, 243, 255, 0.96)),
        #ffffff;
    border: 1px solid rgba(124, 58, 237, 0.16);
    box-shadow:
        0 14px 30px rgba(124, 58, 237, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    animation: exerciseChallengeFloat 3s ease-in-out infinite;
}

.exercise-challenge-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--challenge), var(--challenge-light));
}

.exercise-challenge-icon {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.12);
    color: var(--challenge);
    animation: challengeCrownFloat 1.9s ease-in-out infinite;
}

.exercise-challenge-icon svg {
    width: 21px;
    height: 21px;
}

.exercise-challenge-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.exercise-challenge-kicker {
    margin-bottom: 2px;
    color: var(--challenge);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.exercise-challenge-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
}

.exercise-challenge-target {
    margin-top: 4px;
    color: var(--challenge-dark);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
}

.exercise-challenge-progress {
    margin-top: 8px;
    color: #155e75;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.exercise-challenge-card.completed {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(196, 181, 253, 0.1));
    border-color: rgba(34, 197, 94, 0.26);
    animation: none;
}

@keyframes exerciseChallengeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes challengeCrownFloat {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50% { transform: rotate(2deg) translateY(-2px); }
}

@media (max-width: 520px) {
    .info-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .info-item {
        padding: 2px 4px;
    }

    .info-label {
        font-size: 9px;
        margin-bottom: 5px;
    }
}

/* ===== Series List ===== */

.series-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.series-card {
    position: relative;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--card-shadow);
    overflow: visible;
}

.series-card.quality-menu-open,
.superset-series-card-new.quality-menu-open,
.unilateral-series-card.quality-menu-open {
    z-index: 50;
}

.series-card.next-up {
    border: 1.5px solid rgba(99, 102, 241, 0.18);
    box-shadow: 0 14px 30px rgba(99, 102, 241, 0.08);
}

.series-card.completed {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.06));
    border: 1px solid rgba(34, 197, 94, 0.28);
    position: relative;
    transform: scale(1);
    box-shadow:
        0 12px 28px rgba(34, 197, 94, 0.18),
        0 4px 14px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

@keyframes seriesComplete {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.series-card.completed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, var(--success), #16a34a);
    box-shadow: 2px 0 10px rgba(34, 197, 94, 0.24);
}

.series-card.completed::after {
    content: '';
    position: absolute;
    top: -26%;
    right: -18%;
    width: 72%;
    height: 78%;
    background: radial-gradient(circle, rgba(134, 239, 172, 0.24) 0%, transparent 68%);
    pointer-events: none;
}

.series-card.challenge-series,
.superset-series-card-new.challenge-series,
.unilateral-series-card.challenge-series {
    border: 1.5px solid rgba(124, 58, 237, 0.2);
    box-shadow:
        0 12px 28px rgba(124, 58, 237, 0.08),
        0 4px 12px rgba(15, 23, 42, 0.04);
}

.series-challenge-inline {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: -2px 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(196, 181, 253, 0.14), rgba(245, 243, 255, 0.96));
    border: 1px solid rgba(124, 58, 237, 0.14);
    animation: challengeReminderGlow 2.8s ease-in-out infinite;
}

.series-challenge-inline-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.13);
    color: var(--challenge);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.series-challenge-inline-badge svg {
    width: 13px;
    height: 13px;
}

.series-challenge-inline-text {
    color: var(--challenge-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

@keyframes challengeReminderGlow {
    0%, 100% {
        box-shadow: 0 0 0 rgba(124, 58, 237, 0);
    }
    50% {
        box-shadow: 0 8px 18px rgba(124, 58, 237, 0.12);
    }
}

/* ===== Neutral insights ===== */

.live-adaptation-card.is-insight {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.09), rgba(255, 255, 255, 0.97));
    border-color: rgba(99, 102, 241, 0.2);
}

.is-insight .live-adaptation-badge {
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary-dark);
}

.series-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.series-number {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

.series-card.completed .series-number {
    color: #166534;
}

.series-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--success), #16a34a);
    border: 1px solid rgba(34, 197, 94, 0.24);
    border-radius: 999px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    box-shadow:
        0 8px 16px rgba(34, 197, 94, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

@keyframes checkPop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.series-inputs {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: flex-start;
}

.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.input-group label {
    display: flex;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    min-height: 28px;
}

.input-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 18px;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
    transition: border-color 0.2s;
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary);
}

.series-card.completed .input-group input {
    background: rgba(255, 255, 255, 0.76);
    border-color: rgba(34, 197, 94, 0.22);
    color: #166534;
    font-weight: 700;
    font-size: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.series-card.completed .input-group label {
    color: var(--text-secondary);
    font-weight: 600;
}

.series-check-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.series-result {
    font-size: 14px;
    font-weight: 700;
    color: #166534;
    background: rgba(255, 255, 255, 0.68);
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.2);
    box-shadow:
        0 4px 10px rgba(34, 197, 94, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

.suggested-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
    padding: 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    line-height: 1.1;
}

.input-group.suggested input {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.03);
}

.input-group.coaching-suggested input,
.superset-input-group.coaching-suggested input {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.05);
}

.input-group.coaching-suggested .suggested-label,
.superset-input-group.coaching-suggested .suggested-label {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.series-coach-inline {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: -2px 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background:  rgba(99, 102, 241, 0.08);
}

.series-coach-inline-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.series-coach-inline-text {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.series-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-cardio-timer {
    width: 100%;
}

.superset-input-group.suggested input {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.03);
}

/* Edit validated set button */

.btn-edit-set {
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s;
    border-radius: 4px;
}

.btn-edit-set:hover,
.btn-edit-set:active {
    opacity: 1;
    color: var(--primary);
}

.btn-edit-set.disabled,
.btn-edit-set:disabled {
    opacity: 0.22;
    color: var(--text-muted);
    cursor: not-allowed;
    pointer-events: none;
}

.series-card.editing,
.superset-series-card-new.editing,
.unilateral-series-card.editing {
    border-color: rgba(99, 102, 241, 0.4);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(99, 102, 241, 0.02));
}

.btn-save-edit,
.btn-save-edit-superset,
.btn-save-edit-unilateral {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: var(--primary) !important;
}

/* Continue sets card (deload override) */

.series-continue-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.03));
    border: 1px dashed rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.series-continue-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.series-continue-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

.series-continue-sublabel {
    font-size: 11px;
    color: var(--text-muted);
}

.finish-modal-quick-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    margin-bottom: 20px;
    padding: 18px 12px;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.finish-quick-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    position: relative;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    min-width: 0;
}

.finish-quick-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: rgba(226, 232, 240, 1);
}

.finish-quick-stat-label {
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.finish-quick-stat-value {
    font-size: 24px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.finish-modal-helper {
    margin: 0;
    padding: 4px 12px 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
    background: transparent;
    border: none;
    overflow-wrap: anywhere;
}

.finish-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.94) 32%, rgba(255, 255, 255, 1));
}

.btn-continue-sets {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: var(--radius-md);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-continue-sets:active {
    transform: scale(0.97);
    background: rgba(99, 102, 241, 0.15);
}

.input-group input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 14px;
}

.btn-series-done {
    width: 100%;
    background: linear-gradient(135deg, var(--success), #16a34a);
    color: white;
}

.btn-series-done:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Exercise Notes ===== */

.exercise-notes {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-top: auto;
}

.exercise-note-editor {
    margin-top: 14px;
}

.exercise-note-editor label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.exercise-note-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    resize: vertical;
    min-height: 72px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg);
}

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

.exercise-note-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.exercise-note-chip {
    border: none;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.coach-decision-card,
.exercise-progress-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.coach-decision-header,
.exercise-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.coach-decision-header h4,
.exercise-progress-title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
}

.exercise-progress-kicker {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.coach-decision-confidence,
.exercise-progress-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
}

.coach-decision-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.coach-decision-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.coach-decision-item strong {
    color: var(--text-primary);
}

.coach-decision-item-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}

.coach-decision-item-value {
    color: var(--text-primary);
    font-weight: 600;
}

.exercise-progress-badge.positive {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.exercise-progress-badge.negative {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.exercise-progress-badge.neutral {
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary);
}

.exercise-progress-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.exercise-progress-body canvas {
    width: 100%;
    height: 56px;
    display: block;
}

.exercise-progress-meta {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ===== Timer Overlay ===== */

.timer-overlay {
    --timer-accent: #a855f7;
    --timer-accent-soft: #d8b4fe;
    --timer-accent-deep: #7e22ce;
    --timer-accent-rgb: 168, 85, 247;
    --timer-orbit-duration: 10.4s;
    --timer-drift-duration: 5.6s;
    --timer-spark-duration: 3.2s;
    --timer-confetti-duration: 5.8s;
    --timer-ambient-opacity: 0.2;
    --timer-ornament-scale: 1;
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 50% 12%, rgba(var(--timer-accent-rgb), 0.16) 0%, rgba(var(--timer-accent-rgb), 0.08) 22%, transparent 48%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.97) 100%);
    display: none;
    align-items: center;
    justify-content: center;
    padding:
        calc(var(--safe-top) + 18px)
        18px
        calc(var(--safe-bottom) + 18px);
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}

.timer-overlay::before,
.timer-overlay::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    z-index: 0;
}

.timer-overlay::before {
    top: 9%;
    left: 8%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(var(--timer-accent-rgb), 0.18) 0%, rgba(var(--timer-accent-rgb), 0.04) 44%, transparent 74%);
    filter: blur(18px);
    opacity: var(--timer-ambient-opacity);
    animation: timerAmbientFloat var(--timer-drift-duration) ease-in-out infinite;
}

.timer-overlay::after {
    right: 6%;
    bottom: 10%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(var(--timer-accent-rgb), 0.14) 0%, rgba(var(--timer-accent-rgb), 0.03) 42%, transparent 72%);
    filter: blur(22px);
    opacity: calc(var(--timer-ambient-opacity) * 0.85);
    animation: timerAmbientFloatAlt var(--timer-orbit-duration) ease-in-out infinite;
}

.timer-overlay.active {
    display: flex;
    animation: timerFadeIn 0.3s ease;
}

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

.timer-overlay[data-theme="iris"] {
    --timer-accent: #b248ff;
    --timer-accent-soft: #e5b8ff;
    --timer-accent-deep: #7d17db;
    --timer-accent-rgb: 178, 72, 255;
}

.timer-overlay[data-theme="amethyst"] {
    --timer-accent: #9a5bff;
    --timer-accent-soft: #d9c0ff;
    --timer-accent-deep: #6826f0;
    --timer-accent-rgb: 154, 91, 255;
}

.timer-overlay[data-theme="violet"] {
    --timer-accent: #a223ff;
    --timer-accent-soft: #dd9cff;
    --timer-accent-deep: #7000ff;
    --timer-accent-rgb: 162, 35, 255;
}

.timer-overlay[data-theme="plum"] {
    --timer-accent: #f561e2;
    --timer-accent-soft: #ffc4f5;
    --timer-accent-deep: #d61cb2;
    --timer-accent-rgb: 245, 97, 226;
}

.timer-overlay[data-theme="orchid"] {
    --timer-accent: #ff45d6;
    --timer-accent-soft: #ffb8f1;
    --timer-accent-deep: #d700a8;
    --timer-accent-rgb: 255, 69, 214;
}

.timer-overlay[data-theme="indigo"] {
    --timer-accent: #6f7fff;
    --timer-accent-soft: #c8d1ff;
    --timer-accent-deep: #3648ff;
    --timer-accent-rgb: 111, 127, 255;
}

@keyframes timerAmbientFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(12px, -10px, 0) scale(1.06); }
}

@keyframes timerAmbientFloatAlt {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-14px, 12px, 0) scale(1.08); }
}

.timer-content {
    position: relative;
    z-index: 1;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(100%, 360px);
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 36px);
    overflow-y: auto;
    padding-right: 2px;
}

.timer-context-card {
    width: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.timer-context-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.timer-context-kicker,
.timer-context-progress {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(184, 194, 220, 0.82);
}

.timer-context-title {
    max-width: 320px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: rgba(248, 250, 252, 0.94);
    text-wrap: balance;
}

.timer-context-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.timer-context-metric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    border: none;
}

.timer-context-metric-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(184, 194, 220, 0.74);
}

.timer-context-metric-value {
    font-size: 13px;
    font-weight: 700;
    color: rgba(248, 250, 252, 0.96);
}

.timer-context-note {
    display: none;
}

.timer-context-note:empty {
    display: none;
}

.timer-rest-suggestion {
    width: min(100%, 340px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 4px;
    padding: 9px 10px;
    border: 1px solid rgba(var(--timer-accent-rgb), 0.24);
    border-radius: 14px;
    background: rgba(var(--timer-accent-rgb), 0.08);
    color: rgba(248, 250, 252, 0.82);
    font-size: 11px;
    line-height: 1.35;
}

.timer-rest-suggestion[hidden] {
    display: none;
}

.timer-rest-suggestion > span {
    flex: 1 1 170px;
}

.btn-timer-suggestion {
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(var(--timer-accent-rgb), 0.28);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(248, 250, 252, 0.96);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.btn-timer-suggestion:hover {
    background: rgba(var(--timer-accent-rgb), 0.18);
}

.timer-ring {
    position: relative;
    width: 232px;
    height: 232px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    flex-shrink: 0;
}

.timer-ring::before,
.timer-ring::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.timer-ring::before {
    inset: -10px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(var(--timer-accent-rgb), 0.22) 0%, rgba(var(--timer-accent-rgb), 0.09) 42%, rgba(var(--timer-accent-rgb), 0) 72%);
    filter: blur(16px);
    opacity: 0.26;
    animation: timerAura 3s ease-in-out infinite;
    z-index: 0;
}

.timer-ring::after {
    inset: 10px;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg,
            transparent 0deg 64deg,
            rgba(var(--timer-accent-rgb), 0.44) 84deg 92deg,
            transparent 110deg 212deg,
            rgba(var(--timer-accent-rgb), 0.28) 228deg 236deg,
            transparent 252deg 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 13px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 13px));
    opacity: 0.2;
    z-index: 2;
}

.timer-ring-svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.timer-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.09);
    stroke-width: 12;
}

.timer-ring-progress {
    fill: none;
    stroke: var(--timer-accent);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 565.48;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.12s linear, filter 0.25s ease, stroke-width 0.25s ease, transform 0.25s ease;
    filter: drop-shadow(0 0 12px rgba(var(--timer-accent-rgb), 0.24));
    opacity: 1;
}

.timer-ring-ornaments {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.timer-ornament {
    --tx: 0px;
    --ty: 0px;
    --angle: 0deg;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty));
}

.timer-ornament::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
}

.timer-ornament-1 {
    --tx: -52px;
    --ty: -116px;
    --angle: -24deg;
}

.timer-ornament-2 {
    --tx: 56px;
    --ty: -110px;
    --angle: 18deg;
}

.timer-ornament-3 {
    --tx: 112px;
    --ty: -18px;
    --angle: 28deg;
}

.timer-ornament-4 {
    --tx: 96px;
    --ty: 94px;
    --angle: 70deg;
}

.timer-ornament-5 {
    --tx: -92px;
    --ty: 92px;
    --angle: -68deg;
}

.timer-ornament-6 {
    --tx: -116px;
    --ty: 6px;
    --angle: -36deg;
}

.timer-overlay[data-ornament="sparkles"] .timer-ornament,
.timer-overlay[data-ornament="confetti"] .timer-ornament,
.timer-overlay[data-ornament="dots"] .timer-ornament,
.timer-overlay[data-ornament="comets"] .timer-ornament,
.timer-overlay[data-ornament="markers"] .timer-ornament,
.timer-overlay[data-ornament="bursts"] .timer-ornament,
.timer-overlay[data-ornament="glitter"] .timer-ornament,
.timer-overlay[data-ornament="ribbons"] .timer-ornament,
.timer-overlay[data-ornament="petals"] .timer-ornament,
.timer-overlay[data-ornament="shards"] .timer-ornament {
    opacity: 0.95;
}

.timer-overlay[data-ornament="sparkles"] .timer-ornament::before {
    width: calc(10px * var(--timer-ornament-scale));
    height: calc(10px * var(--timer-ornament-scale));
    background: rgba(var(--timer-accent-rgb), 0.92);
    clip-path: polygon(50% 0%, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0% 50%, 40% 38%);
    box-shadow: 0 0 14px rgba(var(--timer-accent-rgb), 0.28);
    animation: timerSparkle var(--timer-spark-duration) ease-in-out infinite;
}

.timer-overlay[data-ornament="confetti"] .timer-ornament::before {
    width: calc(6px * var(--timer-ornament-scale));
    height: calc(14px * var(--timer-ornament-scale));
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(var(--timer-accent-rgb), 0.95) 0%, rgba(255, 255, 255, 0.24) 100%);
    box-shadow: 0 0 12px rgba(var(--timer-accent-rgb), 0.24);
    animation: timerConfettiFloat var(--timer-confetti-duration) ease-in-out infinite;
}

.timer-overlay[data-ornament="dots"] .timer-ornament::before {
    width: calc(8px * var(--timer-ornament-scale));
    height: calc(8px * var(--timer-ornament-scale));
    border-radius: 50%;
    background: rgba(var(--timer-accent-rgb), 0.9);
    box-shadow: 0 0 12px rgba(var(--timer-accent-rgb), 0.28);
    animation: timerDotPulse var(--timer-spark-duration) ease-in-out infinite;
}

.timer-overlay[data-ornament="comets"] .timer-ornament::before {
    width: calc(18px * var(--timer-ornament-scale));
    height: calc(3px * var(--timer-ornament-scale));
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--timer-accent-rgb), 0) 0%, rgba(var(--timer-accent-rgb), 0.26) 28%, rgba(var(--timer-accent-rgb), 0.92) 100%);
    transform: rotate(var(--angle));
    transform-origin: center;
    box-shadow: 0 0 12px rgba(var(--timer-accent-rgb), 0.22);
    animation: timerCometDrift var(--timer-orbit-duration) ease-in-out infinite;
}

.timer-overlay[data-ornament="markers"] .timer-ornament::before {
    width: calc(8px * var(--timer-ornament-scale));
    height: calc(8px * var(--timer-ornament-scale));
    border-radius: 2px;
    border: 1.5px solid rgba(var(--timer-accent-rgb), 0.88);
    background: rgba(var(--timer-accent-rgb), 0.14);
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(var(--timer-accent-rgb), 0.18);
    animation: timerMarkerBlink var(--timer-spark-duration) ease-in-out infinite;
}

.timer-overlay[data-ornament="bursts"] .timer-ornament::before {
    width: calc(16px * var(--timer-ornament-scale));
    height: calc(16px * var(--timer-ornament-scale));
    background:
        linear-gradient(90deg, transparent 0%, rgba(var(--timer-accent-rgb), 0.9) 24%, rgba(var(--timer-accent-rgb), 0.9) 76%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(var(--timer-accent-rgb), 0.9) 24%, rgba(var(--timer-accent-rgb), 0.9) 76%, transparent 100%);
    transform: rotate(var(--angle));
    box-shadow: 0 0 12px rgba(var(--timer-accent-rgb), 0.18);
    animation: timerBurstBlink var(--timer-spark-duration) ease-in-out infinite;
}

.timer-overlay[data-ornament="glitter"] .timer-ornament::before {
    width: calc(5px * var(--timer-ornament-scale));
    height: calc(5px * var(--timer-ornament-scale));
    border-radius: 50%;
    background: rgba(var(--timer-accent-rgb), 0.98);
    box-shadow:
        0 0 0 3px rgba(var(--timer-accent-rgb), 0.08),
        0 0 16px rgba(var(--timer-accent-rgb), 0.3);
    animation: timerGlitterBlink var(--timer-spark-duration) ease-in-out infinite;
}

.timer-overlay[data-ornament="ribbons"] .timer-ornament::before {
    width: calc(14px * var(--timer-ornament-scale));
    height: calc(5px * var(--timer-ornament-scale));
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--timer-accent-rgb), 0.12) 0%, rgba(var(--timer-accent-rgb), 0.95) 46%, rgba(255, 255, 255, 0.2) 100%);
    transform: rotate(var(--angle));
    box-shadow: 0 0 12px rgba(var(--timer-accent-rgb), 0.24);
    animation: timerRibbonSwing var(--timer-confetti-duration) ease-in-out infinite;
}

.timer-overlay[data-ornament="petals"] .timer-ornament::before {
    width: calc(10px * var(--timer-ornament-scale));
    height: calc(16px * var(--timer-ornament-scale));
    border-radius: 999px 999px 999px 999px / 70% 70% 30% 30%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(var(--timer-accent-rgb), 0.98) 36%, rgba(var(--timer-accent-rgb), 0.12) 100%);
    transform: rotate(var(--angle));
    box-shadow: 0 0 14px rgba(var(--timer-accent-rgb), 0.24);
    animation: timerPetalFloat calc(var(--timer-drift-duration) * 0.92) ease-in-out infinite;
}

.timer-overlay[data-ornament="shards"] .timer-ornament::before {
    width: calc(12px * var(--timer-ornament-scale));
    height: calc(12px * var(--timer-ornament-scale));
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(var(--timer-accent-rgb), 0.96) 56%, rgba(var(--timer-accent-rgb), 0.18) 100%);
    clip-path: polygon(50% 0%, 100% 36%, 72% 100%, 28% 100%, 0% 36%);
    transform: rotate(var(--angle));
    box-shadow: 0 0 14px rgba(var(--timer-accent-rgb), 0.22);
    animation: timerShardFlash var(--timer-spark-duration) ease-in-out infinite;
}

.timer-ornament-1::before { animation-delay: 0s; }

.timer-ornament-2::before { animation-delay: 0.45s; }

.timer-ornament-3::before { animation-delay: 0.9s; }

.timer-ornament-4::before { animation-delay: 1.35s; }

.timer-ornament-5::before { animation-delay: 1.8s; }

.timer-ornament-6::before { animation-delay: 2.25s; }

.timer-ring-core-fx {
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
    opacity: 0.92;
}

.timer-ring-core-fx::before,
.timer-ring-core-fx::after {
    content: '';
    position: absolute;
    inset: 0;
}

.timer-ring-core-fx::before {
    background:
        radial-gradient(circle at 35% 35%, rgba(var(--timer-accent-rgb), 0.22) 0%, rgba(var(--timer-accent-rgb), 0.08) 18%, transparent 42%),
        radial-gradient(circle at 68% 72%, rgba(var(--timer-accent-rgb), 0.14) 0%, rgba(var(--timer-accent-rgb), 0.04) 16%, transparent 38%);
    animation: timerCoreGlow calc(var(--timer-drift-duration) * 1.08) ease-in-out infinite;
}

.timer-ring-core-fx::after {
    inset: -18%;
    background: linear-gradient(115deg, transparent 12%, rgba(var(--timer-accent-rgb), 0.08) 36%, rgba(255, 255, 255, 0.09) 49%, rgba(var(--timer-accent-rgb), 0.1) 62%, transparent 84%);
    transform: translate3d(-24%, -18%, 0) rotate(10deg);
    animation: timerCoreSweep calc(var(--timer-orbit-duration) * 0.9) linear infinite;
    opacity: 0.72;
}

.timer-core-orb {
    position: absolute;
    display: block;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(var(--timer-accent-rgb), 0.94) 0%, rgba(var(--timer-accent-rgb), 0.18) 42%, transparent 72%);
    filter: blur(0.2px);
    opacity: 0.58;
}

.timer-core-orb-1 {
    width: 10px;
    height: 10px;
    top: 24%;
    left: 24%;
    animation: timerCoreOrbOne calc(var(--timer-drift-duration) * 0.92) ease-in-out infinite;
}

.timer-core-orb-2 {
    width: 7px;
    height: 7px;
    top: 66%;
    left: 66%;
    animation: timerCoreOrbTwo calc(var(--timer-orbit-duration) * 0.55) ease-in-out infinite;
}

.timer-core-orb-3 {
    width: 5px;
    height: 5px;
    top: 40%;
    left: 70%;
    animation: timerCoreOrbThree calc(var(--timer-spark-duration) * 1.4) ease-in-out infinite;
}

.timer-ring-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    z-index: 3;
}

.timer-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(242, 232, 255, 0.9);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    margin: 0;
    text-shadow: none;
}

.timer-label::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--timer-accent-soft);
    box-shadow: 0 0 10px rgba(var(--timer-accent-rgb), 0.32);
}

.timer-countdown {
    position: relative;
    z-index: 1;
    font-size: 76px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
    color: #f8fafc;
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
    filter: none;
    will-change: transform, opacity, filter;
}

.timer-countdown.ending {
    color: var(--timer-accent-soft);
    text-shadow: 0 0 22px rgba(var(--timer-accent-rgb), 0.24);
    animation: timerCountdownWarm 1.2s ease-in-out infinite;
}

.timer-countdown.critical {
    text-shadow: 0 0 30px rgba(var(--timer-accent-rgb), 0.38);
    animation: timerCountdownCritical 0.78s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.timer-countdown.tick-boost {
    animation: timerCountdownTickBoost 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.timer-ring.tick-boost .timer-ring-inner {
    animation: timerInnerTickBoost 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.timer-ring.tick-boost .timer-ring-progress {
    animation: timerRingTickBoost 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes timerAura {
    0%, 100% { transform: scale(0.98); opacity: 0.16; }
    50% { transform: scale(1.03); opacity: 0.3; }
}

@keyframes timerAuraDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.98); opacity: 0.16; }
    50% { transform: translate3d(6px, -4px, 0) scale(1.05); opacity: 0.34; }
}

@keyframes timerAuraBloom {
    0%, 100% { transform: scale(0.98); opacity: 0.14; }
    50% { transform: scale(1.08); opacity: 0.38; }
}

@keyframes timerRingFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -7px, 0); }
}

@keyframes timerRingTilt {
    0%, 100% { transform: rotate(-1.5deg) translateY(0); }
    50% { transform: rotate(1.5deg) translateY(-4px); }
}

@keyframes timerStrokePulse {
    0%, 100% { stroke-width: 12; filter: drop-shadow(0 0 12px rgba(var(--timer-accent-rgb), 0.2)); }
    50% { stroke-width: 13.5px; filter: drop-shadow(0 0 18px rgba(var(--timer-accent-rgb), 0.34)); }
}

@keyframes timerStrokeBloom {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(var(--timer-accent-rgb), 0.22)); }
    50% { filter: drop-shadow(0 0 22px rgba(var(--timer-accent-rgb), 0.38)); }
}

@keyframes timerOrnamentsOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes timerSparkle {
    0%, 100% { opacity: 0.2; transform: scale(0.7) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.15) rotate(18deg); }
}

@keyframes timerConfettiFloat {
    0%, 100% { opacity: 0.16; transform: translateY(4px) rotate(-10deg); }
    50% { opacity: 1; transform: translateY(-8px) rotate(8deg); }
}

@keyframes timerDotPulse {
    0%, 100% { opacity: 0.22; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes timerCometDrift {
    0%, 100% { opacity: 0.24; transform: rotate(var(--angle)) translateX(0); }
    50% { opacity: 1; transform: rotate(var(--angle)) translateX(5px); }
}

@keyframes timerMarkerBlink {
    0%, 100% { opacity: 0.3; transform: rotate(45deg) scale(0.9); }
    50% { opacity: 1; transform: rotate(45deg) scale(1.05); }
}

@keyframes timerBurstBlink {
    0%, 100% { opacity: 0.18; transform: rotate(var(--angle)) scale(0.88); }
    50% { opacity: 1; transform: rotate(var(--angle)) scale(1.06); }
}

@keyframes timerGlitterBlink {
    0%, 100% { opacity: 0.18; transform: scale(0.7); }
    50% { opacity: 1; transform: scale(1.16); }
}

@keyframes timerRibbonSwing {
    0%, 100% { opacity: 0.24; transform: rotate(calc(var(--angle) - 8deg)) translateX(0); }
    50% { opacity: 1; transform: rotate(calc(var(--angle) + 8deg)) translateX(4px); }
}

@keyframes timerPetalFloat {
    0%, 100% { opacity: 0.2; transform: rotate(var(--angle)) translateY(0) scale(0.88); }
    50% { opacity: 1; transform: rotate(calc(var(--angle) + 12deg)) translateY(-6px) scale(1.04); }
}

@keyframes timerShardFlash {
    0%, 100% { opacity: 0.18; transform: rotate(var(--angle)) scale(0.84); }
    50% { opacity: 1; transform: rotate(calc(var(--angle) + 14deg)) scale(1.08); }
}

@keyframes timerCoreGlow {
    0%, 100% { transform: scale(1) translate3d(0, 0, 0); opacity: 0.82; }
    50% { transform: scale(1.04) translate3d(3px, -2px, 0); opacity: 1; }
}

@keyframes timerCoreSweep {
    0% { transform: translate3d(-24%, -18%, 0) rotate(10deg); opacity: 0; }
    10% { opacity: 0.7; }
    52% { opacity: 0.92; }
    100% { transform: translate3d(26%, 20%, 0) rotate(10deg); opacity: 0; }
}

@keyframes timerCoreOrbOne {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.92); opacity: 0.44; }
    50% { transform: translate3d(10px, 14px, 0) scale(1.18); opacity: 0.92; }
}

@keyframes timerCoreOrbTwo {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0.32; }
    50% { transform: translate3d(-14px, -12px, 0) scale(1.14); opacity: 0.82; }
}

@keyframes timerCoreOrbThree {
    0%, 100% { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0.28; }
    50% { transform: translate3d(-9px, 8px, 0) scale(1.12); opacity: 0.72; }
}

@keyframes timerCountdownWarm {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1px) scale(1.03); }
}

@keyframes timerCountdownCritical {
    0%, 100% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-3px) scale(1.08); }
    60% { transform: translateY(0) scale(0.98); }
}

@keyframes timerCountdownTickBoost {
    0% { transform: scale(0.9); filter: blur(1px); }
    55% { transform: scale(1.12); filter: blur(0); }
    100% { transform: scale(1); filter: none; }
}

@keyframes timerInnerTickBoost {
    0% { transform: scale(0.96); }
    55% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

@keyframes timerRingTickBoost {
    0% {
        stroke-width: 12;
        filter: drop-shadow(0 0 12px rgba(var(--timer-accent-rgb), 0.22));
    }
    55% {
        stroke-width: 16;
        filter: drop-shadow(0 0 26px rgba(var(--timer-accent-rgb), 0.42));
    }
    100% {
        stroke-width: 14;
        filter: drop-shadow(0 0 16px rgba(var(--timer-accent-rgb), 0.3));
    }
}

@keyframes timerSegmentSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes timerOrnamentsWarning {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(10deg) scale(1.02); }
}

@keyframes timerOrnamentsCritical {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(360deg) scale(1.05); }
}

.timer-overlay[data-motion="float"] .timer-ring {
    animation: timerRingFloat var(--timer-drift-duration) ease-in-out infinite;
}

.timer-overlay[data-motion="tilt"] .timer-ring {
    animation: timerRingTilt var(--timer-drift-duration) ease-in-out infinite;
}

.timer-overlay[data-motion="orbit"] .timer-ring-ornaments {
    animation: timerOrnamentsOrbit var(--timer-orbit-duration) linear infinite;
}

.timer-overlay[data-motion="pulse"] .timer-ring-progress {
    animation: timerStrokePulse var(--timer-spark-duration) ease-in-out infinite;
}

.timer-overlay[data-motion="drift"] .timer-ring::before {
    animation: timerAuraDrift var(--timer-drift-duration) ease-in-out infinite;
}

.timer-overlay[data-motion="bloom"] .timer-ring::before {
    animation: timerAuraBloom var(--timer-drift-duration) ease-in-out infinite;
}

.timer-overlay[data-motion="bloom"] .timer-ring-progress {
    animation: timerStrokeBloom var(--timer-spark-duration) ease-in-out infinite;
}

.timer-overlay.ending::before {
    opacity: calc(var(--timer-ambient-opacity) + 0.08);
    filter: blur(22px);
}

.timer-overlay.ending::after {
    opacity: calc(var(--timer-ambient-opacity) + 0.04);
}

.timer-overlay.ending .timer-ring::after {
    opacity: 0.34;
    animation: timerSegmentSpin 5.2s linear infinite;
}

.timer-overlay.ending .timer-ring-core-fx::after {
    animation-duration: calc(var(--timer-orbit-duration) * 0.55);
    opacity: 0.88;
}

.timer-overlay.ending .timer-core-orb {
    opacity: 0.74;
}

.timer-overlay.ending .timer-ring-ornaments {
    animation: timerOrnamentsWarning 2.4s ease-in-out infinite;
}

.timer-overlay.ending .timer-ornament::before {
    animation-duration: 1.9s;
}

.timer-overlay.critical::before {
    opacity: calc(var(--timer-ambient-opacity) + 0.16);
    filter: blur(26px);
}

.timer-overlay.critical::after {
    opacity: calc(var(--timer-ambient-opacity) + 0.12);
}

.timer-overlay.critical .timer-ring::after {
    opacity: 0.48;
    animation: timerSegmentSpin 1.8s linear infinite;
}

.timer-overlay.critical .timer-ring-core-fx::after {
    animation-duration: 1.35s;
    opacity: 1;
}

.timer-overlay.critical .timer-core-orb {
    opacity: 0.92;
}

.timer-overlay.critical .timer-ring-ornaments {
    animation: timerOrnamentsCritical 1.25s linear infinite;
}

.timer-overlay.critical .timer-ornament::before {
    animation-duration: 1.1s;
}

.timer-ring.ending::before {
    opacity: 0.52;
}

.timer-ring.ending .timer-ring-progress {
    stroke-width: 14;
    filter: drop-shadow(0 0 16px rgba(var(--timer-accent-rgb), 0.32));
}

.timer-ring.critical .timer-ring-progress {
    stroke-width: 15.5px;
    filter: drop-shadow(0 0 26px rgba(var(--timer-accent-rgb), 0.4));
}

.timer-ring.go-ready {
    animation: timerGoRing 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

.timer-ring.go-ready::before {
    animation: timerGoAura 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

.timer-ring.go-ready::after {
    opacity: 0.34;
}

.timer-ring.go-ready .timer-ring-progress {
    animation: timerGoStroke 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

.timer-countdown.go-ready {
    animation: timerGoText 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes timerGoRing {
    0% {
        transform: scale(0.82);
    }
    45% {
        transform: scale(1.08);
    }
    72% {
        transform: scale(0.97);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes timerGoAura {
    0% {
        transform: scale(0.82);
        opacity: 0;
    }
    45% {
        transform: scale(1.12);
        opacity: 0.52;
    }
    100% {
        transform: scale(1);
        opacity: 0.22;
    }
}

@keyframes timerGoStroke {
    0% {
        stroke-width: 10;
        filter: drop-shadow(0 0 0 rgba(var(--timer-accent-rgb), 0));
    }
    45% {
        stroke-width: 18;
        filter: drop-shadow(0 0 20px rgba(var(--timer-accent-rgb), 0.38));
    }
    100% {
        stroke-width: 14;
        filter: drop-shadow(0 0 14px rgba(var(--timer-accent-rgb), 0.26));
    }
}

@keyframes timerGoText {
    0% {
        opacity: 0;
        transform: scale(0.88);
        letter-spacing: -6px;
    }
    100% {
        opacity: 1;
        transform: scale(1);
        letter-spacing: -2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .timer-overlay::before,
        .timer-overlay::after,
        .timer-ring::before,
        .timer-ring::after,
        .timer-ring,
        .timer-ring-progress,
        .timer-ring-ornaments,
        .timer-ornament::before,
        .timer-ring-core-fx::before,
        .timer-ring-core-fx::after,
        .timer-core-orb,
        .timer-ring.go-ready,
        .timer-ring.go-ready::before,
        .timer-ring.go-ready .timer-ring-progress,
        .timer-countdown.go-ready,
        .timer-countdown.ending,
        .timer-countdown.critical,
        .timer-countdown.tick-boost,
        .timer-ring.tick-boost .timer-ring-inner,
        .timer-ring.tick-boost .timer-ring-progress {
        animation: none;
    }
}

.timer-controls {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.btn-timer {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(248, 250, 252, 0.88);
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 700;
    border: 1px solid rgba(var(--timer-accent-rgb), 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-timer:active {
    background: rgba(var(--timer-accent-rgb), 0.12);
    transform: scale(0.95);
}

.btn-timer:disabled {
    opacity: 0.45;
    transform: none;
    box-shadow: none;
}

.btn-timer-skip {
    background: linear-gradient(135deg, rgba(var(--timer-accent-rgb), 0.22) 0%, rgba(var(--timer-accent-rgb), 0.12) 100%);
    color: #fff;
    border-color: rgba(var(--timer-accent-rgb), 0.34);
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(var(--timer-accent-rgb), 0.14);
}

.btn-timer-skip:active {
    transform: scale(0.95);
}

.btn-timer-stop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: rgba(148, 163, 184, 0.78);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 2px 0 0;
    transition: color 0.2s;
}

.btn-timer-stop:active {
    color: rgba(226, 232, 240, 0.88);
}

.timer-done {
    animation: none;
}

.timer-overlay.ready .timer-label {
    color: var(--timer-accent-soft);
}

.timer-overlay.ready .timer-label::before {
    background: var(--timer-accent-soft);
    box-shadow: 0 0 12px rgba(var(--timer-accent-rgb), 0.42);
}

.timer-overlay.ready .timer-countdown {
    color: var(--timer-accent-soft);
    text-shadow: 0 0 18px rgba(var(--timer-accent-rgb), 0.22);
}

.timer-overlay.ready .timer-ring::before {
    opacity: 0.34;
}

.timer-overlay.ready .timer-ring-progress {
    stroke-width: 14;
    filter: drop-shadow(0 0 18px rgba(var(--timer-accent-rgb), 0.3));
}

.timer-overlay.ready #btn-timer-minus {
    opacity: 0.45;
    pointer-events: none;
}

.timer-overlay.ready #btn-timer-plus {
    border-color: rgba(var(--timer-accent-rgb), 0.18);
    color: rgba(255, 255, 255, 0.92);
}

.timer-overlay.ready .btn-timer-skip {
    background: linear-gradient(135deg, var(--timer-accent), var(--timer-accent-deep));
    color: #fff;
    border-color: transparent;
}

/* ===== RPE (Timer Overlay) ===== */

.rpe-section {
    background: none;
    border-radius: 0;
    padding: 4px 0 0;
    width: 100%;
    max-width: 320px;
    backdrop-filter: none;
    border: none;
    animation: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.rpe-question {
    font-size: 10px;
    font-weight: 700;
    color: rgba(184, 194, 220, 0.78);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.rpe-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
}

.rpe-choices {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
}

.rpe-chip {
    width: 100%;
    border: 1px solid rgba(var(--timer-accent-rgb), 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: white;
    border-radius: 999px;
    padding: 0 8px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.rpe-chip:active {
    transform: scale(0.97);
}

.rpe-chip.active {
    border-color: rgba(var(--timer-accent-rgb), 0.34);
    background: rgba(var(--timer-accent-rgb), 0.14);
}

.rpe-chip-icon {
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.68);
}

.rpe-chip svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rpe-chip.active .rpe-chip-icon {
    color: rgba(255, 255, 255, 0.94);
}

.rpe-chip-label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.rpe-feedback {
    text-align: center;
    min-height: 14px;
    padding-top: 0;
}

.rpe-value {
    display: none;
}

.rpe-description {
    display: block;
    font-size: 12px;
    color: rgba(184, 194, 220, 0.86);
    font-weight: 600;
}

@media (max-width: 640px) {
    .timer-overlay {
        padding:
            calc(var(--safe-top) + 12px)
            14px
            calc(var(--safe-bottom) + 14px);
    }

    .timer-content {
        gap: 12px;
        width: 100%;
    }

    .timer-context-card {
        gap: 5px;
    }

    .timer-context-header {
        justify-content: center;
        gap: 6px;
    }

    .timer-context-title {
        font-size: 14px;
    }

    .timer-context-metrics {
        display: flex;
        flex-wrap: wrap;
    }

    .timer-context-metric {
        min-width: 0;
    }

    .timer-ring {
        width: 200px;
        height: 200px;
    }

    .timer-ring-ornaments {
        inset: 0;
    }

    .timer-ring-core-fx {
        inset: 24px;
    }

    .timer-countdown {
        font-size: 62px;
    }

    .timer-controls {
        gap: 8px;
    }

    .rpe-section {
        padding-top: 2px;
    }

    .rpe-choices {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .rpe-chip {
        min-height: 36px;
        padding: 0 6px;
        gap: 4px;
    }

    .rpe-chip-icon {
        width: 11px;
        height: 11px;
    }

    .rpe-chip-label {
        font-size: 9px;
    }
}

/* ===== Exercise Summary ===== */

.exercise-summary {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.99) 100%);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 100;
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.exercise-summary.active {
    display: flex;
    animation: summaryFadeIn 0.4s ease;
}

@keyframes summaryFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.summary-content {
    text-align: center;
    max-width: 340px;
    width: 100%;
    margin: auto 0;
    padding: max(8px, env(safe-area-inset-top)) 0 calc(12px + var(--safe-bottom));
}

.summary-icon {
    font-size: 72px;
    margin-bottom: 16px;
    animation: summaryIconBounce 0.6s ease;
}

@keyframes summaryIconBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.summary-content h3 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.summary-stats {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 24px;
}

.stat {
    text-align: center;
    background: var(--bg-tertiary);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    flex: 1;
}

.stat-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
}

/* Summary Comparison */

.summary-comparison {
    margin-bottom: 24px;
}

.summary-pr-list {
    display: grid;
    gap: 10px;
    margin-bottom: 0;
}

.summary-pr-card {
    text-align: left;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(251, 191, 36, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.12);
}

.summary-pr-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.summary-pr-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b45309;
}

.summary-pr-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
}

.summary-pr-detail {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.summary-badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(15, 23, 42, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.summary-badge-chip.record {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
}

.summary-badge-chip.progress {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.summary-badge-chip.neutral {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-secondary);
}

.summary-badge-icon {
    font-size: 16px;
}

.summary-badge-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.summary-badge-text {
    font-weight: 700;
}

.summary-badge-value {
    font-weight: 800;
    color: currentColor;
}

.comparison-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.comparison-card.positive {
    background: rgba(34, 197, 94, 0.1);
}

.comparison-card.negative {
    background: rgba(239, 68, 68, 0.1);
}

.comparison-card.neutral {
    background: rgba(245, 158, 11, 0.1);
}

.comparison-icon {
    font-size: 24px;
}

.comparison-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.comparison-text span {
    font-weight: 800;
}

.comparison-card.positive .comparison-text { color: var(--success); }

.comparison-card.negative .comparison-text { color: var(--danger); }

.comparison-card.neutral .comparison-text { color: var(--warning); }

/* ===== Logbook Card ===== */

.logbook-card {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

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

.logbook-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
}

.logbook-title svg {
    opacity: 1;
    color: var(--primary);
    flex-shrink: 0;
}

.logbook-date {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 700;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    padding: 6px 10px;
    white-space: nowrap;
}

.logbook-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.logbook-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    padding: 12px 4px 6px;
}

.logbook-set {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 8px 10px;
}

.logbook-set-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
    border-radius: 999px;
}

.logbook-set-data {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.logbook-value {
    font-size: 14px;
    color: var(--text-secondary);
}

.logbook-value strong {
    color: var(--text-primary);
    font-weight: 700;
}

.logbook-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border-light);
}

.logbook-summary-item {
    flex: 1 1 120px;
    min-width: 0;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    padding: 10px 8px;
    border-radius: 10px;
}

.logbook-summary-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.logbook-summary-value {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
}

.logbook-summary-item-derived {
    background: rgba(99, 102, 241, 0.06);
}

.logbook-session-annotations {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.logbook-session-annotations span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.045);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}

/* Multi-session logbook */

.logbook-session {
    margin-bottom: 12px;
    padding-bottom: 10px;
}

.logbook-session:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}

.logbook-session-older {
    opacity: 0.78;
    border-top: 1px solid rgba(99, 102, 241, 0.08);
    padding-top: 12px;
}

.logbook-session-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.logbook-session-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
}

.logbook-session-older .logbook-session-label {
    color: var(--text-secondary);
}

.logbook-session-date {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.logbook-session-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.logbook-session-sets {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.logbook-trend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px;
    border: 1px solid transparent;
}

.logbook-trend-positive {
    background: #22c55e1a;
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.14);
}

.logbook-trend-negative {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.14);
}

.logbook-trend-neutral {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.14);
}

.logbook-trend-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.logbook-trend-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.logbook-trend-text {
    font-size: 12px;
    line-height: 1.45;
}

.logbook-card-superset .logbook-title {
    gap: 8px;
}

.logbook-card-superset .logbook-title span {
    font-weight: 600;
}

/* ===== Modals ===== */

.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.modal.active {
    display: flex;
}

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

.modal-content {
    position: relative;
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: 24px;
    width: 100%;
    max-width: 340px;
    text-align: center;
}

.modal-content h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.modal-content p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.modal-app-dialog {
    max-width: 380px;
}

.app-dialog-icon {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 12px;
}

.app-dialog-message {
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.55;
}

.modal-actions {
    display: flex;
    gap: 12px;
}

.modal-actions .btn {
    flex: 1;
}

.modal-import-mode {
    max-width: 420px;
}

.import-mode-message {
    text-align: left;
}

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

.import-mode-actions .btn {
    width: 100%;
}

.import-mode-destructive-note {
    margin: -2px 0 2px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.finish-modal-content {
    width: min(100%, 460px);
    max-width: 460px;
    max-height: min(calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px), 760px);
    padding: 28px 24px;
    text-align: left;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    border: none;
    border-radius: 36px;
    box-shadow:
        0 28px 80px rgba(15, 23, 42, 0.16),
        0 12px 32px rgba(99, 102, 241, 0.1);
}

#modal-finish {
    align-items: flex-start;
    padding:
        max(18px, calc(var(--safe-top) + 12px))
        16px
        max(18px, calc(var(--safe-bottom) + 12px));
}

#modal-finish .modal-backdrop {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.finish-modal-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    top: -80px;
    right: -50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0) 65%);
    pointer-events: none;
    filter: blur(30px);
}

.finish-modal-hero {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.finish-modal-icon-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.finish-modal-icon-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.1);
}

.finish-modal-icon-ring::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.finish-modal-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 36px;
    line-height: 1;
    animation: finishIconFloat 3s ease-in-out infinite;
}

.finish-modal-copy {
    min-width: 0;
}

.finish-modal-summary {
    position: relative;
    z-index: 1;
    padding: 24px 20px;
    margin-bottom: 20px;
    border-radius: 28px;
    background: #f8fafc;
    border: none;
    box-shadow: none;
}

.finish-modal-content h3 {
    margin-bottom: 8px;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.finish-modal-content p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-secondary);
    font-weight: 500;
}

.finish-modal-progress-block {
    position: relative;
    z-index: 1;
    padding: 0;
    margin-bottom: 16px;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.finish-modal-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.finish-modal-progress-value {
    color: var(--primary);
    font-weight: 800;
}

.finish-modal-progress-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(99, 102, 241, 0.08);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.finish-modal-progress-fill {
    position: relative;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
}

.finish-modal-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    animation: finishProgressShimmer 2s ease-in-out infinite;
}

.finish-modal-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.finish-stat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 16px 14px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.finish-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.finish-stat-value {
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--text-primary), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.finish-stat-note {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary);
    font-weight: 500;
}

.finish-modal-wins {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.finish-win-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    animation: finishChipRise 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    border: none;
    box-shadow: none;
}

.finish-win-chip:nth-child(2) {
    animation-delay: 0.06s;
}

.finish-win-chip:nth-child(3) {
    animation-delay: 0.12s;
}

.finish-win-chip:nth-child(4) {
    animation-delay: 0.18s;
}

.finish-win-icon {
    font-size: 15px;
}

.finish-modal-note {
    position: relative;
    z-index: 1;
    padding: 16px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(99, 102, 241, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.12);
    color: var(--primary-dark);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;
}

#modal-finish.active .finish-modal-content {
    animation: finishModalPop 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

#modal-finish.active .finish-stat-card {
    animation: finishCardReveal 0.45s ease both;
}

#modal-finish.active .finish-stat-card:nth-child(2) {
    animation-delay: 0.06s;
}

#modal-finish.active .finish-stat-card:nth-child(3) {
    animation-delay: 0.12s;
}

@keyframes finishModalPop {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes finishRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes finishIconFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.02); }
}

@keyframes finishBadgePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes finishProgressShimmer {
    0% { transform: translateX(-100%); }
    60%, 100% { transform: translateX(120%); }
}

@keyframes finishCardReveal {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes finishChipRise {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== Bottom Sheets ===== */

.bottom-sheet {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 150;
}

.bottom-sheet.active {
    display: block;
}

.sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    animation: fadeIn 0.2s ease;
}

.sheet-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 16px 20px calc(var(--safe-bottom) + 20px);
    max-height: 70vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
}

.sheet-content-large {
    max-height: 85vh;
}

.sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto 16px;
}

.sheet-content h3 {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

.sheet-titlebar {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.sheet-titlebar h3 {
    margin-bottom: 0;
    min-width: 0;
}

.sheet-back-button {
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.sheet-titlebar-spacer {
    width: 40px;
    height: 40px;
}

.exercise-insights-titlebar {
    margin-bottom: 8px;
}

.exercise-insights-heading {
    min-width: 0;
    text-align: center;
}

.exercise-insights-heading h3 {
    margin: 0;
}

.exercise-insights-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.exercise-insights-close {
    width: 40px;
    height: 40px;
}

/* ===== Edit Session List ===== */

.edit-session-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.edit-sessions-header {
    margin-bottom: 8px;
}

.edit-sessions-header .btn {
    width: 100%;
}

.edit-sessions-subtitle {
    margin: 10px 2px 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
}

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

.session-reorder-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 12px;
    box-shadow: var(--card-shadow);
    cursor: move;
    transition: all 0.2s;
}

.session-reorder-item:active {
    cursor: grabbing;
    box-shadow: var(--card-shadow-hover);
}

.drag-handle {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

.session-reorder-content {
    flex: 1;
    cursor: pointer;
}

.session-reorder-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.session-reorder-meta {
    font-size: 13px;
    color: var(--text-secondary);
}

.session-reorder-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.session-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.edit-session-item {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 16px;
}

.edit-session-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

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

.edit-slot-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--card-bg);
    border-radius: var(--radius-sm);
}

.edit-slot-id {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    min-width: 28px;
}

.edit-slot-name {
    flex: 1;
    font-size: 14px;
}

/* ===== Animations ===== */

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

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes confetti {
    0% { 
        transform: translateY(0) rotate(0deg) scale(1); 
        opacity: 1; 
    }
    100% { 
        transform: translateY(-150px) rotate(720deg) scale(0); 
        opacity: 0; 
    }
}

.confetti {
    position: fixed;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    animation: confetti 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none;
    z-index: 300;
}

.confetti:nth-child(odd) {
    border-radius: 50%;
}

.confetti:nth-child(3n) {
    width: 8px;
    height: 8px;
}

.confetti:nth-child(5n) {
    width: 6px;
    height: 14px;
}

/* ===== Form Elements ===== */

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

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s;
    background: var(--bg);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

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

.form-row {
    display: flex;
    gap: 12px;
}

.form-row .form-group {
    flex: 1;
}

.edit-slot-form {
    padding: 0 4px;
}

.edit-slot-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}

.edit-slot-summary-card > div {
    min-width: 0;
}

.edit-slot-summary-kicker {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
}

.edit-slot-summary-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.edit-slot-summary-meta {
    font-size: 12px;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.edit-slot-helper {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--primary) 8%, white);
    border: 1px solid color-mix(in srgb, var(--primary) 16%, white);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.edit-slot-block {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    padding: 14px;
    margin-bottom: 12px;
}

.edit-slot-advanced {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 0;
    margin-bottom: 12px;
}

.edit-slot-advanced summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    cursor: pointer;
    padding: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.edit-slot-advanced summary::-webkit-details-marker {
    display: none;
}

.edit-slot-advanced summary span {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.edit-slot-advanced-content {
    border-top: 1px solid var(--border-light);
    padding: 14px;
}

.edit-slot-caption {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ===== Pool Editor ===== */

.pool-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

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

.pool-input {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
    background: var(--bg);
}

.pool-input:focus {
    outline: none;
    border-color: var(--primary);
}

.btn-remove-pool-item {
    flex-shrink: 0;
    color: var(--danger);
}

.btn-remove-pool-item:hover {
    background: rgba(239, 68, 68, 0.1);
}

.btn-add-pool-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    font-size: 14px;
    width: 100%;
}

/* ===== Edit Session Detail ===== */

.edit-session-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

.edit-session-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.edit-session-topbar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

.btn-back-edit-sessions {
    background: var(--bg);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.edit-session-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-session-name-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 18px;
    font-weight: 700;
    font-family: inherit;
    transition: border-color 0.2s;
    background: var(--bg);
}

.edit-session-name-input:focus {
    outline: none;
    border-color: var(--primary);
}

.btn-save-session-name {
    padding: 12px;
    color: var(--success);
}

.btn-save-session-name:hover {
    background: rgba(34, 197, 94, 0.1);
}

.edit-session-header .btn-outline {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 14px;
    white-space: nowrap;
    width: 100%;
    justify-content: center;
}

.edit-session-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.edit-session-metric-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.session-edit-empty {
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 16px;
    text-align: center;
    background: var(--bg-tertiary);
}

.session-edit-empty p {
    margin-bottom: 12px;
    color: var(--text-secondary);
    font-size: 14px;
}

.edit-slots-detail-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.edit-slot-detail-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 14px;
    cursor: grab;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--border-light);
}

.edit-slot-detail-card.is-dragging {
    opacity: 0.6;
}

.edit-slot-detail-card:active {
    cursor: grabbing;
    box-shadow: var(--card-shadow-hover);
}

.drag-handle-slot {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    cursor: grab;
}

.drag-handle-slot:active {
    cursor: grabbing;
}

.slot-detail-content {
    flex: 1;
}

.slot-detail-main {
    cursor: pointer;
}

.slot-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.slot-detail-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.slot-id-badge {
    display: inline-block;
    background: var(--primary);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 5px;
    margin-right: 8px;
}

.slot-detail-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-icon-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: var(--bg);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-secondary);
}

.btn-icon-small:active {
    background: var(--border);
}

.btn-icon-small svg {
    width: 16px;
    height: 16px;
}

.btn-delete-slot {
    color: var(--danger);
}

.slot-detail-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.slot-detail-metric {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.slot-detail-hint {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.exercise-library-toolbar {
    margin-bottom: 14px;
}

.exercise-library-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 14px;
}

.exercise-library-filter {
    flex-shrink: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.exercise-library-filter.active {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.35);
    color: var(--primary);
}

.exercise-library-custom {
    margin-bottom: 14px;
}

.exercise-library-custom .btn {
    width: 100%;
}

.exercise-library-custom .btn[aria-disabled="true"] {
    opacity: 0.78;
}

.exercise-library-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.exercise-library-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.exercise-library-item-main {
    flex: 1;
    min-width: 0;
}

.exercise-library-item-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

.exercise-library-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.exercise-library-item-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.exercise-library-item-instructions {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.35;
}

.exercise-library-item-variants {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.exercise-library-item-action {
    flex-shrink: 0;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
}

.exercise-library-empty {
    padding: 18px 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    text-align: center;
    font-size: 14px;
    line-height: 1.45;
}

.edit-session-item {
    cursor: pointer;
    transition: background 0.2s;
}

.edit-session-item:hover {
    background: var(--bg-secondary);
}

/* ===== Pool Sheet ===== */

.pool-header {
    margin-bottom: 12px;
}

.pool-alert {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
    border: 2px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.pool-alert-icon {
    font-size: 20px;
}

.pool-alert-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--danger);
}

.pool-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 20px;
}

.pool-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.pool-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.pool-item:active {
    transform: scale(0.98);
}

.pool-item.current {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.05);
}

.pool-item-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.pool-item-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
    padding: 3px 8px;
    border-radius: 6px;
}

.pool-item .btn {
    padding: 8px 16px;
    font-size: 13px;
}

.pool-ignore {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

/* ===== Session Progress Bar ===== */

.session-progress-container {
    padding: 12px 16px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
}

.session-progress-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.session-progress-bar {
    position: relative;
    height: 8px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: 20px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.session-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a, #22c55e);
    background-size: 200% 100%;
    width: 0%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    animation: shimmer 2s infinite;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
    border-radius: 20px;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== Stats Section ===== */

.stats-section {
    margin-top: 24px;
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.stats-header {
    margin-bottom: 16px;
}

.stats-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.stats-motivation {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.stats-motivation-icon {
    font-size: 28px;
}

.stats-motivation-text {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.stat-card {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 14px 8px;
    text-align: center;
    border: 1px solid rgba(99, 102, 241, 0.08);
    transition: all 0.2s;
}

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

.stat-card-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.stat-card-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.stats-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.stats-insight-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 14px;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-insight-card.positive {
    border-color: rgba(99, 102, 241, 0.18);
    background: var(--bg-tertiary);
}

.stats-insight-card.warning {
    border-color: rgba(245, 158, 11, 0.22);
    background: var(--bg-tertiary);
}

.stats-insight-card.danger {
    border-color: rgba(239, 68, 68, 0.22);
    background: var(--bg-tertiary);
}

.stats-insight-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-muted);
}

.stats-insight-value {
    font-size: 24px;
    line-height: 1;
    font-weight: 900;
    color: var(--text-primary);
}

.stats-insight-note {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.stats-detail-panel {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
}

.stats-detail-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 8px;
    padding: 14px;
}

.stats-detail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.stats-detail-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
}

.stats-detail-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
    white-space: nowrap;
}

.stats-detail-list {
    display: grid;
    gap: 8px;
}

.stats-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid rgba(226, 232, 240, 0.72);
}

.stats-detail-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.stats-detail-row:last-child {
    padding-bottom: 0;
}

.stats-detail-main {
    min-width: 0;
}

.stats-detail-name {
    display: block;
    font-size: 13px;
    font-weight: 750;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-detail-meta {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-muted);
}

.stats-detail-value {
    font-size: 13px;
    font-weight: 900;
    color: var(--text-primary);
    white-space: nowrap;
}

.stats-detail-value.positive {
    color: #16a34a;
}

.stats-detail-value.warning {
    color: #d97706;
}

.stats-detail-empty {
    padding: 14px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 520px) {
    .stats-section {
        padding: 18px;
    }

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

    .stats-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .stat-card {
        padding: 12px 6px;
    }

    .stat-card-value {
        font-size: 20px;
    }

    .stats-insight-card {
        min-height: 0;
    }
}

.chart-container {
    margin-bottom: 20px;
}

.chart-container:last-child {
    margin-bottom: 0;
}

.chart-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.chart-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.chart-title::before {
    content: '';
    width: 3px;
    height: 14px;
    background: var(--primary);
    border-radius: 2px;
}

.chart-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.chart-subtitle {
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.chart-wrapper {
    position: relative;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 16px 14px 14px;
    border: 1px solid rgba(99, 102, 241, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    overflow: hidden;
}

.chart-wrapper-volume {
    min-height: 188px;
}

.chart-wrapper-frequency {
    min-height: 164px;
}

.chart-wrapper canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100% !important;
    max-width: 100%;
}

#volume-chart {
    height: 158px !important;
}

#frequency-chart {
    height: 134px !important;
}

/* ===== SuperSet Styling ===== */

.slot-card.superset-start {
    margin-bottom: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--superset-accent, var(--primary)) 22%, white);
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--superset-accent, var(--primary)) 12%, transparent),
        var(--card-shadow);
    overflow: hidden;
}

.slot-card.superset-end {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--superset-accent, var(--primary)) 22%, white);
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--superset-accent, var(--primary)) 12%, transparent),
        var(--card-shadow);
    overflow: hidden;
}

.slot-card.superset-start::before,
.slot-card.superset-end::before {
    background: linear-gradient(180deg, var(--superset-accent, var(--primary)), color-mix(in srgb, var(--superset-accent, var(--primary)) 70%, white));
}

.slot-card.superset-start::after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 0;
    border-bottom: 2px dashed color-mix(in srgb, var(--superset-accent, var(--primary)) 66%, white);
    pointer-events: none;
    z-index: 2;
}

.superset-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.superset-badge svg {
    width: 12px;
    height: 12px;
}

.superset-badge.color-0 {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.superset-badge.color-1 {
    background: linear-gradient(135deg, #ec4899, #f472b6);
}

.superset-badge.color-2 {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.superset-badge.color-3 {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.superset-badge.color-4 {
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
}

.superset-badge.color-5 {
    background: linear-gradient(135deg, #ef4444, #f87171);
}

/* SuperSet Exercise Screen */

.superset-exercise-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.superset-exercise-block {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--card-shadow);
    position: relative;
}

.superset-exercise-block.exercise-a {
    border-left: 4px solid var(--side-left);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.superset-exercise-block.exercise-b {
    border-left: 4px solid var(--side-right);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px dashed var(--border);
}

.superset-exercise-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.superset-exercise-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.superset-exercise-color.color-a {
    background: var(--side-left);
}

.superset-exercise-color.color-b {
    background: var(--side-right);
}

.superset-exercise-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.superset-series-inputs {
    display: flex;
    gap: 10px;
}

.superset-series-inputs .input-group {
    flex: 1;
}

.superset-series-inputs .input-group.exercise-a input {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.03);
}

.superset-series-inputs .input-group.exercise-a input:focus {
    border-color: var(--side-left);
}

.superset-series-inputs .input-group.exercise-b input {
    border-color: rgba(168, 85, 247, 0.3);
    background: rgba(168, 85, 247, 0.03);
}

.superset-series-inputs .input-group.exercise-b input:focus {
    border-color: var(--side-right);
}

.superset-series-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--card-shadow);
    margin-bottom: 12px;
}

.superset-series-card.completed {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04));
    border: 2px solid rgba(34, 197, 94, 0.25);
}

.superset-exercise-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.superset-exercise-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-md);
}

.superset-exercise-row.row-a {
    background: rgba(99, 102, 241, 0.15);
}

.superset-exercise-row.row-b {
    background: rgba(168, 85, 247, 0.15);
}

.superset-exercise-row .exercise-label {
    font-size: 12px;
    font-weight: 700;
    min-width: 80px;
    color: var(--text-secondary);
}

.superset-exercise-row.row-a .exercise-label {
    color: var(--side-left);
}

.superset-exercise-row.row-b .exercise-label {
    color: var(--side-right);
}

.superset-exercise-row .input-group {
    flex: 1;
}

.superset-exercise-row .input-group input {
    padding: 10px;
    font-size: 16px;
}

/* SuperSet Link Button in Edit */

.superset-link-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.superset-link-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    border: 2px dashed var(--primary);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.superset-link-btn:hover {
    background: rgba(99, 102, 241, 0.15);
}

.superset-link-btn.linked {
    background: var(--primary);
    color: white;
    border-style: solid;
}

.superset-linked-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-md);
    margin-top: 8px;
}

.superset-linked-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.btn-unlink-superset {
    padding: 6px 12px;
    font-size: 12px;
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

/* SuperSet Link Button */

.btn-link-superset {
    color: var(--primary);
}

.btn-link-superset.linked {
    background: var(--primary);
    color: white;
}

.btn-link-superset:hover {
    background: rgba(99, 102, 241, 0.1);
}

.btn-link-superset.linked:hover {
    background: var(--primary-dark);
}

/* Edit slot detail card superset styling */

.edit-slot-detail-card.superset-start {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    border-bottom: 2px dashed var(--primary);
    border-left: 4px solid var(--primary);
}

.edit-slot-detail-card.superset-end {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
    border-left: 4px solid var(--primary);
}

/* Launch superset button */

.btn-launch-superset {
    background: linear-gradient(135deg, #36377a 0%, #4f46e5 56%, #6d72ff 100%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-launch-superset svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Launch individual button for superset exercises */

.btn-launch-individual {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(238,242,255,0.98) 100%);
    border: 1px solid rgba(99, 102, 241, 0.18);
    box-shadow: 0 8px 18px rgba(99, 102, 241, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    min-width: 44px;
    width: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-launch-individual:hover,
.btn-primary:hover {
    transform: translateY(-1px);
}

.btn-launch-individual svg {
    margin: 0;
}

/* ===== Settings Button ===== */

.header-top-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-settings:active {
    background: var(--border);
    transform: scale(0.95);
}

.btn-settings svg {
    transition: transform 0.3s ease;
}

.btn-settings:hover svg {
    transform: rotate(45deg);
}

/* ===== Settings Sheet ===== */

.session-cycle-preview {
    margin-top: 8px;
    margin-bottom: 16px;
    color: rgba(100, 116, 139, 0.82);
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

/* ===== Coaching Advice Card ===== */

.coaching-advice {
    margin-top: 16px;
    padding: 16px;
    background: #efeffe;
    border-radius: var(--radius-lg);
}

.coaching-advice-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.coaching-advice-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.coaching-advice-heading-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.coaching-advice-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, #6366f1), color-mix(in srgb, var(--primary) 82%, #312e81));
    border: 1px solid color-mix(in srgb, var(--primary) 38%, white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    position: relative;
    overflow: visible;
    box-shadow:
        0 16px 28px color-mix(in srgb, var(--primary) 26%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.coaching-advice-icon svg {
    width: 30px;
    height: 30px;
    stroke-width: 2.6;
    filter: drop-shadow(0 2px 0 rgba(15, 23, 42, 0.18));
    animation: coachIconFloat 2.6s ease-in-out infinite;
}

.coaching-advice-icon::after {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 22px;
    background: radial-gradient(circle, currentColor 0%, transparent 68%);
    opacity: 0.16;
    transform: scale(0.92);
    animation: coachPulse 2.8s ease-in-out infinite;
}

.coaching-advice-icon::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.coaching-advice-title {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    line-height: 1.2;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.coaching-advice-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(129, 140, 248, 0.18);
    color: #4f46e5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.coaching-advice-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    color: var(--text-secondary);
}

.coaching-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.coaching-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
}

.coaching-status-pill.fatigue-high {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
}

.coaching-status-pill.fatigue-moderate {
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning);
}

.coaching-status-pill.fatigue-low {
    background: rgba(34, 197, 94, 0.12);
    color: var(--success);
}

.coaching-info-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 0px solid rgba(99, 102, 241, 0.16);
    background: #fff;
    color: #4f46e5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.coaching-info-btn svg {
    width: 15px;
    height: 15px;
}

.coaching-summary-primary {
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.coaching-advice-note {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
}

.coaching-advice-summary strong {
    color: var(--text-primary);
    font-weight: 800;
}

.coaching-advice-drawer {
    margin-top: 12px;
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
}

.coaching-drawer-toggle {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.coaching-drawer-chevron {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.coaching-advice-drawer.is-open .coaching-drawer-chevron {
    transform: rotate(180deg);
}

.coaching-advice-drawer-body {
    margin-top: 10px;
}

.coaching-message-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.coaching-message-block {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(199, 210, 254, 0.68);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.coaching-message-plan {
    background: rgba(255, 247, 237, 0.96);
    border-color: rgba(251, 146, 60, 0.18);
}

.coaching-message-reading {
    background: rgba(239, 246, 255, 0.96);
    border-color: rgba(96, 165, 250, 0.18);
}

.coaching-message-rest {
    background: rgba(236, 253, 245, 0.96);
    border-color: rgba(52, 211, 153, 0.2);
}

.coaching-message-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    flex-shrink: 0;
    font-size: 14px;
    background: rgba(129, 140, 248, 0.14);
}

.coaching-message-copy {
    min-width: 0;
}

.coaching-message-kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.coaching-advice-message p {
    margin: 0;
}

.coaching-advice-message strong {
    color: var(--text-primary);
    font-weight: 800;
}

.coaching-progress-meta {
    margin-top: 0;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.coaching-progress-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.coaching-mode-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    border: 1px solid rgba(129, 140, 248, 0.22);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.coaching-mode-note {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
    max-width: 340px;
}

.coaching-progress-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(129, 140, 248, 0.28);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
    min-width: min(100%, 220px);
}

.coaching-progress-toggle:active {
    transform: scale(0.985);
}

.coaching-progress-toggle.is-active {
    border-color: rgba(99, 102, 241, 0.34);
    box-shadow: 0 8px 16px rgba(99, 102, 241, 0.12);
}

.coaching-progress-toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.coaching-progress-toggle-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.coaching-progress-toggle-status {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.coaching-progress-toggle.is-active .coaching-progress-toggle-status {
    color: var(--primary);
}

.coaching-toggle-switch {
    flex-shrink: 0;
}

.coaching-advice.advice-increase .coaching-advice-title {
    color: var(--success);
}

.coaching-advice.advice-increase .coaching-advice-icon {
    background: linear-gradient(180deg, color-mix(in srgb, var(--success) 94%, #22c55e), color-mix(in srgb, var(--success) 82%, #166534));
    border-color: color-mix(in srgb, var(--success) 42%, white);
    color: #fff;
    box-shadow: 0 16px 28px rgba(34, 197, 94, 0.28), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -4px 10px rgba(22, 101, 52, 0.24);
}

.coaching-advice.advice-maintain .coaching-advice-title {
    color: var(--primary);
}

.coaching-advice.advice-maintain .coaching-advice-icon {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary) 92%, #6366f1),
        color-mix(in srgb, var(--primary) 82%, #312e81)
    );
    border-color: color-mix(in srgb, var(--primary) 38%, white);
    color: #fff;
    box-shadow:
        0 16px 28px rgba(99, 102, 241, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 -4px 10px rgba(49, 46, 129, 0.24);
}

.coaching-advice.advice-decrease .coaching-advice-title {
    color: var(--danger);
}

.coaching-advice.advice-decrease .coaching-advice-icon {
    background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 94%, #ef4444), color-mix(in srgb, var(--danger) 82%, #991b1b));
    border-color: color-mix(in srgb, var(--danger) 42%, white);
    color: #fff;
    box-shadow: 0 16px 28px rgba(239, 68, 68, 0.28), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -4px 10px rgba(153, 27, 27, 0.24);
}

.coaching-advice.advice-switch .coaching-advice-title {
    color: var(--danger);
}

.coaching-advice.advice-switch .coaching-advice-icon {
    background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 94%, #ef4444), color-mix(in srgb, var(--danger) 82%, #991b1b));
    border-color: color-mix(in srgb, var(--danger) 42%, white);
    color: #fff;
    box-shadow: 0 16px 28px rgba(239, 68, 68, 0.28), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -4px 10px rgba(153, 27, 27, 0.24);
}

.coaching-advice.advice-new .coaching-advice-title {
    color: var(--primary);
}

.coaching-advice.advice-new .coaching-advice-icon {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, #6366f1), color-mix(in srgb, var(--primary) 82%, #312e81));
    border-color: color-mix(in srgb, var(--primary) 38%, white);
    color: #fff;
    box-shadow: 0 16px 28px rgba(99, 102, 241, 0.28), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -4px 10px rgba(49, 46, 129, 0.24);
}

.coaching-advice.advice-volume_up .coaching-advice-title {
    color: #7c3aed;
}

.coaching-advice.advice-volume_up .coaching-advice-icon {
    background: linear-gradient(180deg, color-mix(in srgb, #7c3aed 94%, #8b5cf6), color-mix(in srgb, #7c3aed 82%, #581c87));
    border-color: color-mix(in srgb, #7c3aed 42%, white);
    color: #fff;
    box-shadow: 0 16px 28px rgba(124, 58, 237, 0.28), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -4px 10px rgba(88, 28, 135, 0.24);
}

.coaching-advice.advice-deload .coaching-advice-title {
    color: #a855f7;
}

.coaching-advice.advice-deload .coaching-advice-icon {
    background: linear-gradient(180deg, color-mix(in srgb, #a855f7 94%, #c084fc), color-mix(in srgb, #a855f7 82%, #7e22ce));
    border-color: color-mix(in srgb, #a855f7 42%, white);
    color: #fff;
    box-shadow: 0 16px 28px rgba(168, 85, 247, 0.28), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -4px 10px rgba(126, 34, 206, 0.22);
}

.coaching-advice.advice-reactive_deload .coaching-advice-title {
    color: #8b5cf6;
}

.coaching-advice.advice-reactive_deload .coaching-advice-icon {
    background: linear-gradient(180deg, color-mix(in srgb, #8b5cf6 94%, #a78bfa), color-mix(in srgb, #8b5cf6 82%, #5b21b6));
    border-color: color-mix(in srgb, #8b5cf6 42%, white);
    color: #fff;
    box-shadow: 0 16px 28px rgba(139, 92, 246, 0.28), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -4px 10px rgba(91, 33, 182, 0.22);
}

.coaching-advice.advice-deload_mini .coaching-advice-title {
    color: #9333ea;
}

.coaching-advice.advice-deload_mini .coaching-advice-icon {
    background: linear-gradient(180deg, color-mix(in srgb, #9333ea 94%, #c084fc), color-mix(in srgb, #9333ea 82%, #6b21a8));
    border-color: color-mix(in srgb, #9333ea 42%, white);
    color: #fff;
    box-shadow: 0 16px 28px rgba(147, 51, 234, 0.28), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -4px 10px rgba(107, 33, 168, 0.22);
}

.coaching-advice.advice-intensify .coaching-advice-title {
    color: #f97316;
}

.coaching-advice.advice-intensify .coaching-advice-icon {
    background: linear-gradient(180deg, color-mix(in srgb, #f97316 94%, #fb923c), color-mix(in srgb, #f97316 82%, #c2410c));
    border-color: color-mix(in srgb, #f97316 42%, white);
    color: #fff;
    box-shadow: 0 16px 28px rgba(249, 115, 22, 0.28), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -4px 10px rgba(194, 65, 12, 0.22);
}

.coaching-advice.advice-force_increase .coaching-advice-title,
.coaching-advice.advice-amrap_test .coaching-advice-title {
    color: #a855f7;
}

.coaching-advice.advice-force_increase .coaching-advice-icon,
.coaching-advice.advice-amrap_test .coaching-advice-icon {
    background: linear-gradient(180deg, color-mix(in srgb, #a855f7 94%, #c084fc), color-mix(in srgb, #a855f7 82%, #7e22ce));
    border-color: color-mix(in srgb, #a855f7 42%, white);
    color: #fff;
    box-shadow: 0 16px 28px rgba(168, 85, 247, 0.28), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -4px 10px rgba(126, 34, 206, 0.22);
}

.coaching-suggestion-row {
    display: grid;
    gap: 10px;
}

.coaching-suggestion-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coaching-suggestion-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coaching-suggestion {
    flex: 1;
    position: relative;
    background: rgba(255, 255, 255, 0.78);
    border-radius: 14px;
    padding: 12px;
    text-align: left;
    border: 1px solid rgba(199, 210, 254, 0.65);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.coaching-suggestion::before {
    display: none;
}

.coaching-suggestion-weight::before {
    background: rgba(239, 68, 68, 0.1);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.08);
}

.coaching-suggestion-reps::before {
    background: rgba(59, 130, 246, 0.1);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.08);
}

.coaching-suggestion-volume::before {
    background: rgba(168, 85, 247, 0.1);
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.08);
}

.coaching-suggestion-backoff::before {
    background: rgba(16, 185, 129, 0.1);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.08);
}

.coaching-suggestion-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.coaching-suggestion-value {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}

.coaching-suggestion-subnote {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

/* Weight trend arrows */

.coaching-weight-trend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: #f8fafc;
}

.coaching-weight-trend svg {
    width: 15px;
    height: 15px;
}

.coaching-weight-trend.trend-up {
    background: rgba(34, 197, 94, 0.12);
}

.coaching-weight-trend.trend-up svg {
    color: var(--success);
}

.coaching-weight-trend.trend-same {
    background: rgba(245, 158, 11, 0.1);
}

.coaching-weight-trend.trend-same svg {
    color: var(--warning);
}

.coaching-weight-trend.trend-down {
    background: rgba(239, 68, 68, 0.1);
}

.coaching-weight-trend.trend-down svg {
    color: var(--danger);
}

.coaching-action-strip {
    margin-top: 10px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(129, 140, 248, 0.24);
    background: rgba(99, 102, 241, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.coaching-action-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.coaching-action-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.coaching-action-note {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.3;
}

.coaching-action-strip .btn-continue-sets {
    flex-shrink: 0;
    min-width: 144px;
    white-space: nowrap;
}

.series-card-ghost {
    border-style: dashed;
    border-color: rgba(99, 102, 241, 0.26);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.03), rgba(99, 102, 241, 0.015));
}

.series-ghost-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.series-ghost-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 12px;
}

.series-ghost-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}

.series-ghost-note {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
}

.series-ghost-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.series-ghost-actions .btn {
    flex: 1 1 180px;
}

.coach-fatigue-sheet-header {
    margin-bottom: 16px;
}

.coach-fatigue-sheet-header h3 {
    margin-bottom: 8px;
}

.coach-fatigue-sheet-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-secondary);
    text-align: center;
}

.coach-fatigue-sheet-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    margin: 0 auto 16px;
}

.coach-fatigue-sheet-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.coach-fatigue-sheet-item {
    padding: 12px;
    border-radius: 14px;
    background: var(--bg-tertiary);
}

.coach-fatigue-sheet-item-label {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.coach-fatigue-sheet-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary);
}

@keyframes coachPulse {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.08;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.14;
    }
}

@keyframes coachIconFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-1.5px);
    }
}

/* ===== Type Selector (Compound/Isolation) ===== */

.type-selector {
    display: flex;
    gap: 12px;
}

.type-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.type-btn:active {
    transform: scale(0.97);
}

.type-btn.active {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
}

.type-icon {
    font-size: 24px;
}

.app-icon {
    --icon-size: 20px;
    display: inline-flex;
    width: var(--icon-size);
    height: var(--icon-size);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.app-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.type-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.type-btn.active .type-label {
    color: var(--primary);
}

/* ===== Coach Toast ===== */

.coach-toast {
    position: fixed;
    bottom: calc(88px + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(440px, calc(100vw - 32px));
    padding: 14px 16px;
    border-radius: 20px;
    background: #ffffff;
    border: 2px solid #ececfb;
    box-shadow: 0 4px 0 #e4e4f7, 0 16px 32px rgba(79, 70, 229, 0.12);
    color: var(--text-primary);
    z-index: 10002;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.coach-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.coach-toast-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--primary);
}

.coach-toast.hot .coach-toast-icon {
    color: var(--success);
}

.coach-toast.warning .coach-toast-icon,
.coach-toast.backoff .coach-toast-icon {
    color: #f59e0b;
}

.coach-toast-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-primary);
}

/* Over the always-dark screens (rest timer, exercise recap) */

.coach-toast.on-dark {
    background: #2a2160;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 0 #120c33, 0 16px 32px rgba(0, 0, 0, 0.35);
}

.coach-toast.on-dark .coach-toast-text {
    color: #ffffff;
}

.coach-toast.on-dark.hot .coach-toast-icon {
    color: #4ade80;
}

.coach-toast.on-dark.cold .coach-toast-icon,
.coach-toast.on-dark.neutral .coach-toast-icon {
    color: #c4b5fd;
}

@media (max-width: 640px) {
    .coach-toast {
        bottom: calc(78px + var(--safe-bottom));
    }

    .coaching-progress-meta {
        align-items: stretch;
    }

    .coaching-progress-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .coaching-advice-header,
        .coaching-action-strip {
        flex-direction: column;
        align-items: stretch;
    }

    .coaching-suggestion-grid {
        grid-template-columns: 1fr;
    }

    .coaching-action-strip .btn-continue-sets {
        width: 100%;
        min-width: 0;
    }
}

/* ===== Stimulus Score Overlay ===== */

.stimulus-score-overlay {
    position: fixed;
    inset: 0;
    padding:
        max(12px, calc(var(--safe-top) + 8px))
        12px
        max(12px, calc(var(--safe-bottom) + 8px));
    background:
        radial-gradient(circle at top right, rgba(99, 102, 241, 0.15), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.99) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.stimulus-score-overlay.visible {
    opacity: 1;
}

.stimulus-score-shell {
    width: 100%;
    max-width: 680px;
    margin: auto;
    padding: 0;
}

.stimulus-score-content {
    color: var(--text-primary);
    padding: 32px 24px 22px;
    width: 100%;
    max-height: min(calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px), 920px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 32px;
    background: #ffffff;
    border: 1px solid rgba(99, 102, 241, 0.15);
    box-shadow: 
        0 24px 64px rgba(99, 102, 241, 0.08),
        0 12px 32px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    position: relative;
    isolation: isolate;
}

.stimulus-score-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(16px);
    opacity: 0.6;
    pointer-events: none;
    z-index: -1;
}

.stimulus-score-orb-a {
    width: 160px;
    height: 160px;
    top: -40px;
    right: -30px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.25), rgba(99, 102, 241, 0));
    animation: scoreOrbFloat 7s ease-in-out infinite;
}

.stimulus-score-orb-b {
    width: 140px;
    height: 140px;
    bottom: 100px;
    left: -20px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.25), rgba(167, 139, 250, 0));
    animation: scoreOrbFloat 9s ease-in-out infinite reverse;
}

@keyframes scoreOrbFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -10px, 0) scale(1.06); }
}

.stimulus-score-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.stimulus-score-header-copy {
    min-width: 0;
}

.stimulus-score-kicker {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 12px;
}

.stimulus-score-emoji {
    font-size: 56px;
    line-height: 1;
    animation: scoreEmojiBounce 0.6s ease 0.3s both;
}

@keyframes scoreEmojiBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.stimulus-score-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--primary);
    margin-bottom: 10px;
}

.stimulus-score-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    margin-bottom: 28px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.8));
    border: 1px solid rgba(99, 102, 241, 0.15);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 12px 32px rgba(99, 102, 241, 0.06);
}

.stimulus-score-hero-copy {
    min-width: 0;
    flex: 1;
}

.stimulus-score-hero-title {
    font-size: 24px;
    font-weight: 900;
    line-height: 1.15;
    color: var(--text-primary);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.stimulus-score-hero-note {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    font-weight: 500;
}

.stimulus-score-gauge {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(99, 102, 241, 0.1),
        0 12px 32px rgba(99, 102, 241, 0.12);
}

.stimulus-score-gauge-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.stimulus-score-gauge-track,
.stimulus-score-gauge-progress {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}

.stimulus-score-gauge-track {
    stroke: rgba(226, 232, 240, 1);
}

.stimulus-score-gauge-progress {
    stroke: url(#stimulus-gradient);
    transition: stroke-dashoffset 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.stimulus-score-gauge.excellent .stimulus-score-gauge-progress { stroke: #22c55e; }

.stimulus-score-gauge.good .stimulus-score-gauge-progress { stroke: var(--primary); }

.stimulus-score-gauge.ok .stimulus-score-gauge-progress { stroke: #f59e0b; }

.stimulus-score-gauge.low .stimulus-score-gauge-progress { stroke: #64748b; }

.stimulus-score-value {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
}

.stimulus-score-value .score-number {
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    animation: scoreCountUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
}

@keyframes scoreCountUp {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

.stimulus-score-value.excellent .score-number { color: #16a34a; }

.stimulus-score-value.good .score-number { color: var(--primary); }

.stimulus-score-value.ok .score-number { color: #d97706; }

.stimulus-score-value.low .score-number { color: #475569; }

.stimulus-score-message {
    font-size: 28px;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 10px;
    color: var(--text-primary);
    opacity: 0;
    animation: scoreFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
}

.stimulus-score-summary {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.55;
    opacity: 0;
    font-weight: 500;
    animation: scoreFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.95s both;
}

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

.stimulus-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    margin-bottom: 28px;
    opacity: 0;
    animation: scoreFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
    background: rgba(226, 232, 240, 0.6);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
}

.stimulus-metric-card {
    padding: 20px;
    min-width: 0;
    background: #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stimulus-metric-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.stimulus-metric-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.stimulus-metric-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.6);
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12);
    animation: metricDotPulse 2.5s ease-in-out infinite;
}

.stimulus-metric-value {
    font-size: 28px;
    font-weight: 900;
    line-height: 1.05;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.stimulus-metric-note {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
    line-height: 1.45;
    font-weight: 500;
}

.stimulus-metric-card.duration .stimulus-metric-dot { background: #38bdf8; box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15); }

.stimulus-metric-card.sets .stimulus-metric-dot,
.stimulus-micro-chip.reps .stimulus-micro-chip-icon { background: var(--primary); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); }

.stimulus-metric-card.volume .stimulus-metric-dot,
.stimulus-metric-card.cardio .stimulus-metric-dot,
.stimulus-micro-chip.volume .stimulus-micro-chip-icon { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15); }

.stimulus-metric-card.record .stimulus-metric-dot,
.stimulus-micro-chip.focus .stimulus-micro-chip-icon { background: #facc15; box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.15); }

.stimulus-metric-card.intensity .stimulus-metric-dot { background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.15); }

.stimulus-achievement-section {
    margin-bottom: 28px;
    opacity: 0;
    animation: scoreFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
}

.stimulus-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.stimulus-section-pill {
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
}

.stimulus-achievement-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.stimulus-achievement-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 1));
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.stimulus-achievement-card.record {
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.6), rgba(255, 251, 235, 1));
    border-color: rgba(250, 204, 21, 0.3);
}

.stimulus-achievement-card.progress {
    background: linear-gradient(135deg, rgba(224, 231, 255, 0.6), rgba(238, 242, 255, 1));
    border-color: rgba(99, 102, 241, 0.2);
}

.stimulus-achievement-medal {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    padding: 2px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.stimulus-achievement-medal-core {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 24px;
    background: var(--bg-tertiary);
    animation: scoreMedalPulse 2.4s ease-in-out infinite;
}

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

@keyframes metricDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.85; }
}

.stimulus-achievement-copy {
    min-width: 0;
}

.stimulus-achievement-label {
    font-size: 15px;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.stimulus-achievement-note {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    font-weight: 500;
}

.stimulus-micro-wins {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
    opacity: 0;
    animation: scoreFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.3s both;
}

.stimulus-micro-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
}

.stimulus-micro-chip-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bg-tertiary);
    font-size: 13px;
}

.stimulus-micro-chip.focus { background: rgba(250, 204, 21, 0.1); border-color: rgba(250, 204, 21, 0.2); }

.stimulus-micro-chip.reps { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.2); }

.stimulus-micro-chip.volume { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.2); }

.stimulus-score-comparison {
    padding: 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 28px;
    opacity: 0;
    animation: scoreFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.25s both;
    background: linear-gradient(135deg, rgba(248, 250, 252, 1), rgba(241, 245, 249, 0.6));
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
    overflow-wrap: anywhere;
}

.stimulus-score-comparison-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.stimulus-score-comparison.positive {
    background: rgba(34, 197, 94, 0.08);
    color: #166534;
}

.stimulus-score-comparison.warning {
    background: rgba(245, 158, 11, 0.08);
    color: #92400e;
}

.stimulus-score-comparison.neutral {
    color: var(--text-primary);
}

.stimulus-score-panels {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 28px;
    opacity: 0;
    animation: scoreFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.35s both;
}

.stimulus-score-panel {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.stimulus-score-panel-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.stimulus-trend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

.stimulus-trend-row + .stimulus-trend-row {
    margin-top: 12px;
    padding-top: 16px;
    border-top: none;
}

.stimulus-trend-main {
    min-width: 0;
}

.stimulus-trend-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

.stimulus-trend-note {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.5;
    font-weight: 500;
}

.stimulus-trend-pill {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.stimulus-trend-pill.positive {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.stimulus-trend-pill.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.stimulus-score-progress {
    margin-top: 16px;
}

.stimulus-score-progress-track {
    height: 12px;
    width: 100%;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(226, 232, 240, 0.8);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}

.stimulus-score-progress-fill {
    position: relative;
    height: 100%;
    width: 0;
    border-radius: inherit;
    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stimulus-score-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    animation: scoreProgressSweep 2.2s ease-in-out 1.1s infinite;
}

@keyframes scoreProgressSweep {
    0% { transform: translateX(-100%); }
    55%, 100% { transform: translateX(100%); }
}

.stimulus-score-progress-fill.excellent { background: linear-gradient(90deg, #22c55e, #4ade80); }

.stimulus-score-progress-fill.good { background: linear-gradient(90deg, var(--primary), var(--primary-light)); }

.stimulus-score-progress-fill.ok { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

.stimulus-score-progress-fill.low { background: linear-gradient(90deg, #64748b, #94a3b8); }

.stimulus-score-progress-label {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.stimulus-panel-empty {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.stimulus-score-footer {
    position: relative;
    margin-top: 8px;
}

.stimulus-score-footer-note {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 28px;
    font-weight: 500;
    opacity: 0;
    animation: scoreFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.4s both;
    text-align: center;
}

.stimulus-score-action-bar {
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 28%, #ffffff);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.stimulus-score-btn {
    opacity: 0;
    animation: scoreFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.5s both;
    width: 100%;
    box-shadow: 0 12px 24px rgba(99, 102, 241, 0.25);
    background: var(--primary);
    color: #ffffff;
    font-weight: 800;
    padding: 16px;
    border-radius: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

@media (min-width: 640px) {
    .stimulus-score-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .finish-modal-content {
        padding: 20px;
        max-height: min(calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px), 100%);
    }

    .finish-modal-hero {
        align-items: flex-start;
        gap: 14px;
    }

    .finish-modal-icon-wrap {
        width: 56px;
        height: 56px;
    }

    .finish-modal-icon {
        width: 48px;
        height: 48px;
        font-size: 28px;
    }

    .finish-modal-content h3 {
        font-size: 22px;
    }

    .finish-modal-content p {
        font-size: 13px;
    }

    .finish-modal-progress-block {
        padding: 14px;
        margin-bottom: 18px;
    }

    .finish-modal-quick-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        padding: 16px 8px;
    }

    .finish-quick-stat-value {
        font-size: 20px;
    }

    .finish-modal-helper {
        padding: 14px;
        font-size: 12px;
    }

    .finish-modal-actions {
        flex-direction: column-reverse;
    }
}

@media (max-width: 520px) {
    .stimulus-score-shell {
        max-width: 100%;
    }

    .stimulus-score-content {
        padding: 22px 16px 18px;
        max-height: min(calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px), 100%);
        border-radius: 28px;
    }

    .stimulus-score-header {
        align-items: center;
    }

    .stimulus-score-message {
        font-size: 24px;
    }

    .stimulus-score-hero {
        gap: 16px;
        padding: 18px;
        flex-direction: column;
        align-items: flex-start;
    }

    .stimulus-score-gauge {
        width: 120px;
        height: 120px;
    }

    .stimulus-score-value .score-number {
        font-size: 42px;
    }

    .stimulus-score-emoji {
        font-size: 48px;
    }

    .stimulus-metrics-grid {
        grid-template-columns: 1fr;
    }

    .stimulus-achievement-grid {
        grid-template-columns: 1fr;
    }

    .stimulus-score-action-bar {
        margin: 0 -16px -18px;
        padding: 16px 16px max(18px, calc(env(safe-area-inset-bottom) + 12px));
    }

    .stimulus-trend-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .stimulus-trend-pill {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .finish-modal-icon-ring,
        .finish-modal-icon,
        .finish-modal-progress-fill::after,
        #modal-finish.active .finish-modal-content,
        #modal-finish.active .finish-stat-card,
        .finish-win-chip {
        animation: none;
    }

    .finish-modal-progress-fill,
        .stimulus-score-overlay,
        .stimulus-score-content,
        .stimulus-score-orb,
        .stimulus-score-message,
        .stimulus-score-summary,
        .stimulus-metrics-grid,
        .stimulus-achievement-grid,
        .stimulus-micro-wins,
        .stimulus-score-comparison,
        .stimulus-score-panels,
        .stimulus-score-footer-note,
        .stimulus-score-btn,
        .stimulus-achievement-medal-core,
        .stimulus-score-progress-fill::after {
        transition: none;
        animation: none;
    }
}

/* ===== Modal Resume Session ===== */

.resume-icon,
.quit-icon {
    font-size: 48px;
    margin-bottom: 12px;
    text-align: center;
}

#modal-resume-session .modal-content,
#modal-quit-session .modal-content {
    text-align: center;
    max-width: 360px;
}

#modal-resume-session h3,
#modal-quit-session h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

#modal-resume-session p,
#modal-quit-session p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.resume-progress {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 20px;
}

.resume-progress span {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.resume-progress-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.resume-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

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

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

/* ===== Modal Deload ===== */

.modal-deload {
    max-width: 400px;
    text-align: center;
}

.deload-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.modal-deload h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.deload-reason {
    margin-bottom: 20px;
}

.deload-reason-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.deload-reason-badge.cyclique {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
}

.deload-reason-badge.fatigue {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.deload-reason p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.deload-explanation {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 20px;
    text-align: left;
}

.deload-explanation p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
}

.deload-explanation p:first-child {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.deload-changes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.deload-change {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--text-secondary);
}

.deload-change .change-icon {
    font-size: 16px;
}

.deload-change strong {
    color: var(--primary);
    font-weight: 700;
}

/* ===== Settings Additions ===== */

.settings-toggle-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-tertiary);
    transition: 0.3s;
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ===== Form Select ===== */

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* ===== Volume Badge ===== */

.volume-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.volume-badge.low {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.volume-badge.optimal {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.volume-badge.high {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
}

.volume-badge.excessive {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

/* ===== Muscle Stats Section ===== */

.muscle-stats-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

.muscle-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}

.muscle-stats-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.muscle-stats-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.muscle-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.muscle-stat-item {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
    border: 1.5px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.muscle-stat-item.has-volume {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(139, 92, 246, 0.02));
    border-color: rgba(99, 102, 241, 0.12);
}

.muscle-stat-item.has-volume.low {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.03));
    border-color: rgba(245, 158, 11, 0.15);
}

.muscle-stat-item.optimal {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
    border-color: rgba(34, 197, 94, 0.18);
}

.muscle-stat-item.excessive {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
    border-color: rgba(239, 68, 68, 0.18);
}

/* New header structure */

.muscle-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    min-height: 20px;
}

.muscle-stat-name {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0;
    line-height: 1.2;
}

.muscle-stat-status {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.muscle-stat-item.optimal .muscle-stat-status {
    background: rgba(34, 197, 94, 0.15);
    color: #15803d;
}

.muscle-stat-item.excessive .muscle-stat-status {
    background: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
}

.muscle-stat-item.has-volume.low .muscle-stat-status {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

/* Value display */

.muscle-stat-value {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-bottom: 8px;
    min-width: 0;
    flex-wrap: nowrap;
}

.muscle-stat-sets {
    min-width: 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-muted);
    letter-spacing: -0.5px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.muscle-stat-unit {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.7;
}

.muscle-stat-thresholds {
    margin: -2px 0 8px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.muscle-stat-item.has-volume .muscle-stat-sets {
    color: var(--primary);
}

.muscle-stat-item.has-volume.low .muscle-stat-sets {
    color: var(--warning);
}

.muscle-stat-item.optimal .muscle-stat-sets {
    color: var(--success);
}

.muscle-stat-item.excessive .muscle-stat-sets {
    color: var(--danger);
}

/* Progress bar */

.muscle-stat-bar {
    height: 5px;
    background: rgba(148, 163, 184, 0.12);
    border-radius: 10px;
    overflow: hidden;
}

.muscle-stat-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(148, 163, 184, 0.3);
}

.muscle-stat-item.has-volume .muscle-stat-fill {
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}

.muscle-stat-item.has-volume.low .muscle-stat-fill {
    background: linear-gradient(90deg, var(--warning), #fbbf24);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.muscle-stat-item.optimal .muscle-stat-fill {
    background: linear-gradient(90deg, var(--success), #4ade80);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

.muscle-stat-item.excessive .muscle-stat-fill {
    background: linear-gradient(90deg, var(--danger), #f87171);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

/* Empty state */

.muscle-stats-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.muscle-stats-empty-icon {
    display: block;
    margin: 0 auto 12px;
    opacity: 0.4;
    color: var(--text-muted);
}

/* ===== Confetti Animation ===== */

.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation: confettiFall 3s ease-out forwards;
}

.confetti.circle {
    border-radius: 50%;
}

.confetti.square {
    border-radius: 2px;
}

.confetti.triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid currentColor;
    background: none !important;
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(-20px) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg) scale(0.5);
    }
}

/* ===== Achievement Toast ===== */

.achievement-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    border-radius: var(--radius-xl);
    padding: 32px 40px;
    text-align: center;
    z-index: 10000;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.achievement-toast.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.achievement-toast-icon {
    font-size: 64px;
    margin-bottom: 16px;
    animation: achievementBounce 0.6s ease 0.2s both;
}

@keyframes achievementBounce {
    0% { transform: scale(0) rotate(-10deg); }
    50% { transform: scale(1.3) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.achievement-toast-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.achievement-toast-message {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.achievement-toast-xp {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-block;
}

/* Session indicator fill animation */

.session-indicator.just-filled {
    animation: indicatorPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes indicatorPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ===== DUAL EXERCISE COACHING (Superset & Unilateral) ===== */

.coaching-dual-exercise {
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(199, 210, 254, 0.62);
    box-shadow: 0 8px 16px rgba(79, 70, 229, 0.06);
}

.coaching-dual-exercise:last-of-type {
    margin-bottom: 0;
}

.coaching-exercise-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.coaching-exercise-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
    color: white;
}

.coaching-exercise-badge.badge-a {
    background: var(--grad-side-left);
}

.coaching-exercise-badge.badge-b {
    background: var(--grad-side-right);
}

.coaching-exercise-badge.badge-left {
    background: var(--grad-side-left);
}

.coaching-exercise-badge.badge-right {
    background: var(--grad-side-right);
}

.coaching-exercise-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}

.coaching-dual-summary {
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.coaching-advice-superset {
    border-color: rgba(129, 140, 248, 0.24);
    margin-bottom: 18px;
}

.coaching-advice-superset .coaching-advice-header {
    margin-bottom: 12px;
}

.coaching-advice-superset .coaching-advice-icon {
    background: linear-gradient(180deg, #818cf8, #6366f1);
    border-color: rgba(99, 102, 241, 0.44);
    color: #fff;
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
}

.coaching-advice-superset .coaching-advice-icon::after {
    opacity: 0.1;
}

.coaching-advice-superset .coaching-suggestion-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coaching-advice-superset .coaching-summary-primary {
    font-size: 13px;
}

.coaching-advice-superset .coaching-advice-note {
    font-size: 11px;
}

.coaching-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 16px 0;
}

/* Superset Logbook Container */

.superset-logbook-container {
    background:
        radial-gradient(circle at top right, rgba(129, 140, 248, 0.16), transparent 32%),
        linear-gradient(160deg, rgba(15, 23, 42, 0.05), rgba(79, 70, 229, 0.04));
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.superset-logbook-header {
    margin-bottom: 14px;
}

.superset-logbook-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
}

.superset-logbook-exercise {
    background: rgba(255, 255, 255, 0.76);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
}

.superset-logbook-exercise:last-child {
    margin-bottom: 0;
}

.superset-logbook-exercise.exercise-a {
    border-left: 4px solid var(--side-left);
}

.superset-logbook-exercise.exercise-b {
    border-left: 4px solid var(--side-right);
}

.superset-logbook-exercise-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.superset-logbook-exercise-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}

.superset-logbook-date {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    padding: 5px 9px;
}

.superset-logbook-sets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.superset-logbook-set {
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Superset & Unilateral multi-session logbook */

.superset-logbook-session,
.unilateral-logbook-session {
    margin-bottom: 12px;
}

.superset-logbook-session-older,
.unilateral-logbook-session-older {
    opacity: 0.78;
    border-top: 1px solid rgba(99, 102, 241, 0.08);
    padding-top: 12px;
    margin-top: 8px;
}

.superset-logbook-session-header,
.unilateral-logbook-session-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.superset-progress-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.exercise-progress-card-superset {
    margin: 0;
}

.coach-decision-card-superset {
    margin-top: 0;
}

.superset-decision-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.superset-decision-panel {
    background: rgba(255, 255, 255, 0.78);
    border-radius: 16px;
    padding: 14px;
    box-shadow: none;
}

.superset-decision-panel .superset-input-badge {
    box-shadow: none;
}

.superset-decision-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.superset-decision-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
}

@media (max-width: 720px) {
    .superset-progress-grid,
        .superset-decision-grid {
        grid-template-columns: 1fr;
    }
}

/* NEW Superset Series Card */

.superset-series-card-new {
    position: relative;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--card-shadow);
    margin-bottom: 16px;
    border: 2px solid transparent;
    overflow: visible;
}

.superset-series-card-new.completed {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
    border-color: rgba(34, 197, 94, 0.2);
}

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

.superset-series-number {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
}

.superset-series-target {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 12px;
}

.superset-series-check {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--success), #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 3px 12px rgba(34, 197, 94, 0.4);
}

/* Superset Input Block - Clean design without border-left */

.superset-input-block {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
}

.superset-input-block.block-a {
    background: var(--bg);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.superset-input-block.block-b {
    background: var(--bg);
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.superset-input-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* Replace dots with badges */

.superset-input-badge {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.superset-input-badge.badge-a {
    background: var(--grad-side-left);
}

.superset-input-badge.badge-b {
    background: var(--grad-side-right);
}

/* Legacy dots - kept for compatibility */

.superset-input-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.superset-input-dot.dot-a {
    background: #6366f1;
}

.superset-input-dot.dot-b {
    background: var(--side-right);
}

.superset-input-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.superset-input-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.superset-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.superset-input-group label {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
    min-height: 22px;
    line-height: 1.1;
}

.superset-input {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 18px;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    background: var(--bg);
    transition: all 0.2s ease;
}

.superset-input:focus {
    outline: none;
    border-color: var(--primary);
}

.block-a .superset-input:focus {
    border-color: #6366f1;
}

.block-b .superset-input:focus {
    border-color: var(--side-right);
}

.superset-static-value {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 18px;
    font-weight: 800;
    background: var(--bg);
    color: var(--text-primary);
}

.superset-input-hidden {
    display: none;
}

.superset-coach-inline {
    margin-top: 10px;
    margin-bottom: 0;
}

/* Superset Link Visual */

.superset-link-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    color: var(--text-muted);
    opacity: 0.5;
}

.superset-link-visual svg {
    transform: rotate(90deg);
}

/* Superset Validate Button */

.btn-superset-validate {
    width: 100%;
    margin-top: 16px;
    padding: 14px 20px;
    background: var(--grad-side-left);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.btn-superset-validate:active {
    transform: scale(0.97);
}

/* Superset Completed Results - Clean design */

.superset-completed-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.superset-completed-exercise {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--bg);
    border: 1px solid var(--border);
}

.superset-completed-exercise.exercise-a {
    border-color: rgba(99, 102, 241, 0.25);
}

.superset-completed-exercise.exercise-b {
    border-color: rgba(168, 85, 247, 0.25);
}

/* Completed badges instead of dots */

.superset-completed-badge {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.superset-completed-badge.badge-a {
    background: var(--grad-side-left);
}

.superset-completed-badge.badge-b {
    background: var(--grad-side-right);
}

/* Legacy dots - kept for compatibility */

.superset-completed-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.superset-completed-dot.dot-a {
    background: #6366f1;
}

.superset-completed-dot.dot-b {
    background: var(--side-right);
}

.superset-completed-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    flex: 1;
}

.superset-completed-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--success);
    background: rgba(34, 197, 94, 0.1);
    padding: 4px 12px;
    border-radius: 8px;
}

/* ===== UNILATERAL EXERCISE UI ===== */

/* Unilateral Logbook Container */

.unilateral-logbook-container {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.03));
    border: 2px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
}

.unilateral-logbook-header {
    margin-bottom: 14px;
}

.unilateral-logbook-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}

.unilateral-logbook-exercise {
    background: var(--bg);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
}

.unilateral-logbook-exercise:last-child {
    margin-bottom: 0;
}

.unilateral-logbook-exercise.side-left {
    border-color: rgba(99, 102, 241, 0.25);
}

.unilateral-logbook-exercise.side-right {
    border-color: rgba(168, 85, 247, 0.25);
}

.unilateral-logbook-exercise-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.unilateral-logbook-exercise-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}

.unilateral-logbook-date {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.unilateral-logbook-sets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.unilateral-logbook-set {
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Unilateral Series Card */

.unilateral-series-card {
    position: relative;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--card-shadow);
    margin-bottom: 16px;
    border: 2px solid transparent;
    overflow: visible;
}

.unilateral-series-card.completed {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.03));
    border-color: rgba(34, 197, 94, 0.2);
}

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

.unilateral-series-number {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
}

.unilateral-series-target {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: 12px;
}

.unilateral-series-check {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--success), #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 3px 12px rgba(34, 197, 94, 0.4);
}

/* Unilateral Input Block - Clean design without border-left */

.unilateral-input-block {
    background: var(--bg);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
}

.unilateral-input-block.block-left {
    border-color: rgba(99, 102, 241, 0.25);
}

.unilateral-input-block.block-right {
    border-color: rgba(168, 85, 247, 0.25);
}

.unilateral-input-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* Unilateral badges instead of dots */

.unilateral-input-badge {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.unilateral-input-badge.badge-left {
    background: var(--grad-side-left);
}

.unilateral-input-badge.badge-right {
    background: var(--grad-side-right);
}

/* Legacy dots - kept for compatibility */

.unilateral-input-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.unilateral-input-dot.dot-left {
    background: var(--side-left);
}

.unilateral-input-dot.dot-right {
    background: var(--side-right);
}

.unilateral-input-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}

.unilateral-side-done {
    color: var(--success);
    font-weight: 700;
    font-size: 16px;
}

.unilateral-side-result {
    font-size: 14px;
    font-weight: 700;
    color: var(--success);
    background: rgba(34, 197, 94, 0.1);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    text-align: center;
}

.unilateral-input-row {
    display: flex;
    gap: 12px;
}

.unilateral-input-group {
    flex: 1;
}

.unilateral-input-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.unilateral-input {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 18px;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    background: var(--bg);
    transition: all 0.2s ease;
}

.unilateral-input:focus {
    outline: none;
    border-color: var(--primary);
}

.block-left .unilateral-input:focus {
    border-color: var(--side-left);
}

.block-right .unilateral-input:focus {
    border-color: var(--side-right);
}

/* Switch Sides Visual */

.unilateral-switch-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.unilateral-switch-visual svg {
    opacity: 0.6;
}

/* Unilateral Validate Button */

.btn-unilateral-validate {
    width: 100%;
    margin-top: 16px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.btn-unilateral-validate:active {
    transform: scale(0.97);
}

/* Unilateral Completed Results */

.unilateral-completed-results {
    display: flex;
    gap: 10px;
}

.unilateral-completed-side {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--bg);
}

.unilateral-completed-side.side-left {
    border-left: 4px solid var(--side-left);
}

.unilateral-completed-side.side-right {
    border-left: 4px solid var(--side-right);
}

.unilateral-completed-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.unilateral-completed-dot.dot-left {
    background: var(--side-left);
}

.unilateral-completed-dot.dot-right {
    background: var(--side-right);
}

.unilateral-completed-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.unilateral-completed-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--success);
    margin-left: auto;
}

/* ===== LMS (Local Muscle Soreness) System ===== */

.lms-header {
    text-align: center;
    margin-bottom: 20px;
}

.lms-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.lms-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
}

.lms-muscle-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.cycle-checkin-card {
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.cycle-checkin-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cycle-checkin-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.cycle-checkin-card h4 {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.cycle-checkin-phase {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
}

.cycle-checkin-phase.is-deload {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.cycle-checkin-objective,
.cycle-checkin-note {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

.cycle-checkin-objective {
    margin-bottom: 12px;
}

.cycle-checkin-progress {
    display: flex;
    gap: 7px;
    margin-bottom: 12px;
}

.cycle-checkin-progress-dot {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.96);
    overflow: hidden;
    position: relative;
}

.cycle-checkin-progress-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.92), rgba(129, 140, 248, 0.92));
    transition: opacity 0.2s ease;
}

.cycle-checkin-progress-dot.is-complete::after,
.cycle-checkin-progress-dot.is-current::after {
    opacity: 1;
}

.cycle-checkin-progress-dot.is-current {
    transform: scaleY(1.1);
}

.cycle-checkin-progress-dot.is-deload::after {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.92), rgba(251, 191, 36, 0.92));
}

.cycle-checkin-deload {
    display: grid;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    margin-bottom: 10px;
}

.cycle-checkin-deload.is-suggested {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.16);
}

.cycle-checkin-deload.is-manual {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.14);
}

.cycle-checkin-deload-copy strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.cycle-checkin-deload-copy p {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
    margin: 0;
}

.cycle-deload-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cycle-deload-option {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: white;
    color: var(--text-secondary);
    border-radius: 14px;
    padding: 12px 10px;
    font-size: 14px;
    font-weight: 700;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.cycle-deload-option.is-active {
    transform: translateY(-1px);
}

.cycle-checkin-deload.is-manual .cycle-deload-option.is-active {
    border-color: rgba(79, 70, 229, 0.35);
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
}

.cycle-checkin-deload.is-suggested .cycle-deload-option.is-active {
    border-color: rgba(245, 158, 11, 0.32);
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.cycle-deload-option:active {
    transform: scale(0.99);
}

.lms-muscle-item {
    background: var(--bg);
    border-radius: var(--radius-lg);
    padding: 16px;
    border: 2px solid var(--border);
}

.lms-muscle-name {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 12px;
}

.lms-muscle-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.lms-slider-container {
    position: relative;
}

.lms-slider {
    width: 100%;
    height: 12px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, #22c55e 0%, #84cc16 33%, #f59e0b 66%, #ef4444 100%);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}

.lms-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.lms-slider::-webkit-slider-thumb:active {
    transform: scale(1.15);
}

.lms-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 4px;
}

.lms-labels span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.5;
}

.lms-labels span.active {
    opacity: 1;
    transform: scale(1.2);
}

.lms-labels span small {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

.lms-label-icon {
    color: var(--text-secondary);
}

.lms-labels span.active .lms-label-icon {
    color: var(--primary);
}

.lms-feedback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.lms-feedback-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.lms-feedback-desc {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

.lms-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.lms-title-icon {
    display: inline-flex;
    color: var(--primary);
}

@media (max-width: 520px) {
    .cycle-checkin-top {
        flex-direction: column;
    }

    .cycle-checkin-phase {
        align-self: flex-start;
    }
}

/* ===== Adaptation Bar (Recovery Gamification) ===== */

.modal-adaptation {
    text-align: center;
}

.adaptation-header {
    margin-bottom: 20px;
}

.adaptation-icon {
    display: block;
    margin-bottom: 8px;
    color: var(--primary);
}

.adaptation-icon .app-icon {
    --icon-size: 48px;
}

.adaptation-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.adaptation-bar-container {
    margin-bottom: 20px;
}

.adaptation-bar {
    height: 16px;
    background: linear-gradient(90deg, 
        #ef4444 0%, 
        #f59e0b 40%, 
        #22c55e 70%, 
        #22c55e 85%,
        #94a3b8 100%
    );
    border-radius: 8px;
    position: relative;
    overflow: visible;
}

.adaptation-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: rgba(255,255,255,0.3);
    border-radius: 8px 0 0 8px;
    transition: width 0.5s ease;
}

.adaptation-bar-marker {
    position: absolute;
    top: -6px;
    width: 4px;
    height: 28px;
    background: var(--text-primary);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: left 0.5s ease;
}

.adaptation-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.adaptation-message {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.adaptation-recommendation {
    margin-bottom: 16px;
}

.adaptation-recommendation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    background: #6366f11c;
}

.adaptation-recommendation-icon {
    color: var(--primary);
}

.adaptation-recommendation-icon-svg {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.adaptation-recommendation-icon-svg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.adaptation-recommendation-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-align: left;
}

.modal-session-challenge {
    max-width: 382px;
    text-align: left;
    overflow: hidden;
    border: 1px solid rgba(124, 58, 237, 0.18);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.modal-session-challenge::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--challenge), var(--challenge-light));
}

.challenge-modal-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.12);
    color: var(--challenge);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 12px;
}

.modal-session-challenge h3 {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1.15;
}

.challenge-modal-title-exercise {
    color: var(--challenge);
}

.challenge-modal-target {
    padding: 12px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(196, 181, 253, 0.12), var(--challenge-tint));
    border: 1px solid rgba(124, 58, 237, 0.16);
    color: var(--challenge-dark);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 12px;
}

.modal-session-challenge p {
    margin-bottom: 14px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

.challenge-modal-reward {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 16px;
}

.challenge-success-pulse {
    animation: challengeSuccessPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.challenge-accepted-pop {
    animation: challengeAcceptedPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes challengeSuccessPop {
    0% { transform: scale(0.96); }
    55% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes challengeAcceptedPop {
    0% { transform: scale(1); }
    55% { transform: scale(1.035); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .slot-card.challenge-target,
        .exercise-challenge-card,
        .exercise-challenge-icon,
        .series-challenge-inline,
        .challenge-success-pulse,
        .challenge-accepted-pop {
        animation: none;
    }
}

/* Volume adjustment badge */

.volume-adjustment-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.volume-adjustment-badge.increase {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.volume-adjustment-badge.decrease {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.volume-adjustment-badge.maintain {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
}

/* LMS indicator on exercise card */

.lms-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}

.lms-status-indicator.fresh {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.lms-status-indicator.ready {
    background: rgba(132, 204, 22, 0.15);
    color: #65a30d;
}

.lms-status-indicator.sore {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.lms-status-indicator.wrecked {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* ===== Utilities ===== */

.hidden {
    display: none !important;
}

/* ===== Free exercise control & live adaptations ===== */

.exercise-control-card,
.live-adaptation-card {
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    box-shadow: var(--card-shadow);
}

.exercise-control-card[hidden],
.live-adaptation-card[hidden],
.live-adaptation-actions button[hidden],
#btn-timer-notification[hidden] {
    display: none !important;
}

.exercise-control-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.09), rgba(255, 255, 255, 0.94));
    border: 1px solid rgba(99, 102, 241, 0.16);
}

.exercise-control-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

#exercise-volume-value {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 850;
}

#exercise-volume-note {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
}

.exercise-control-actions,
.live-adaptation-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.btn-control-step {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border: 1px solid rgba(99, 102, 241, 0.18);
    background: rgba(255, 255, 255, 0.82);
    color: var(--primary-dark);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.btn-control-step:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
}

.btn-skip-exercise {
    min-height: 40px;
    padding: 9px 13px;
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.live-adaptation-card {
    padding: 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(245, 158, 11, 0.24);
}

.live-adaptation-card.is-fatigue {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.11), rgba(255, 255, 255, 0.97));
    border-color: rgba(239, 68, 68, 0.22);
}

.live-adaptation-card.is-adjusted,
.live-adaptation-card.is-positive {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(255, 255, 255, 0.97));
    border-color: rgba(34, 197, 94, 0.2);
}

.live-adaptation-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.live-adaptation-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.live-adaptation-header strong {
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.25;
}

.live-adaptation-badge {
    flex-shrink: 0;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
}

.is-fatigue .live-adaptation-badge {
    background: rgba(239, 68, 68, 0.13);
    color: #b91c1c;
}

.is-adjusted .live-adaptation-badge,
.is-positive .live-adaptation-badge {
    background: rgba(34, 197, 94, 0.13);
    color: #15803d;
}

.live-adaptation-message {
    margin-bottom: 13px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.live-adaptation-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.live-adaptation-metric {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.64);
}

.live-adaptation-metric small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-adaptation-metric strong {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-adaptation-actions .btn {
    min-height: 38px;
    padding: 9px 12px;
    font-size: 12px;
}

/* A skipped exercise stays visible as an intentional, reversible choice. */

.slot-card.skipped {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.1), rgba(255, 255, 255, 0.9));
    border: 1px dashed rgba(100, 116, 139, 0.28);
}

.slot-card.skipped::before {
    width: 4px;
    background: #94a3b8;
}

.slot-skipped-note {
    margin-bottom: 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Optional native notification opt-in inside the dark timer surface. */

.btn-timer-notification {
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(var(--timer-accent-rgb), 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(226, 232, 240, 0.88);
    font-size: 12px;
    font-weight: 700;
}

.btn-timer-notification:hover:not(:disabled) {
    background: rgba(var(--timer-accent-rgb), 0.12);
    border-color: rgba(var(--timer-accent-rgb), 0.34);
}

.btn-timer-notification:disabled {
    opacity: 0.7;
    cursor: default;
}

@media (max-width: 520px) {
    .exercise-control-card {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .exercise-control-actions {
        display: grid;
        grid-template-columns: 40px 40px minmax(0, 1fr);
        justify-content: stretch;
    }

    .btn-skip-exercise {
        width: 100%;
    }

    .live-adaptation-header {
        flex-direction: column;
        gap: 8px;
    }

    .live-adaptation-badge {
        align-self: flex-start;
    }

    .live-adaptation-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .live-adaptation-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .live-adaptation-actions .btn {
        width: 100%;
    }

    .live-adaptation-actions #btn-live-dismiss {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .exercise-control-card,
        .live-adaptation-card,
        .btn-control-step,
        .btn-timer-notification {
        transition: none;
    }
}

.set-quality-details {
    position: relative;
    margin-left: 4px;
    z-index: 60;
}

.set-quality-details summary {
    padding: 3px 6px;
    border: 1px solid rgba(99, 102, 241, 0.14);
    border-radius: 999px;
    color: var(--primary-dark);
    font-size: 9px;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}

.set-quality-details summary::-webkit-details-marker { display: none; }

.set-quality-menu {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    width: min(260px, 74vw);
    padding: 7px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.set-quality-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 5px 7px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.9);
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 750;
    text-align: left;
}

.set-quality-tag.is-selected {
    border-color: rgba(99, 102, 241, 0.32);
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary-dark);
}

.unilateral-completed-side .set-quality-details {
    align-self: center;
}

.pool-item-warning {
    margin-top: 4px;
    color: #b45309;
    font-size: 10px;
    line-height: 1.3;
}

.exercise-change-equivalence {
    display: grid;
    gap: 3px;
    margin: 12px 0 14px;
    padding: 10px 11px;
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 11px;
    background: rgba(99, 102, 241, 0.06);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.35;
}

.exercise-change-equivalence strong {
    color: var(--primary-dark);
    font-size: 12px;
}

.exercise-change-warning {
    color: #b45309;
}

.summary-analysis-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(99, 102, 241, 0.14);
    border-radius: 11px;
    background: rgba(99, 102, 241, 0.06);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
}

.summary-analysis-note-icon {
    flex-shrink: 0;
}

/* ===== Exercise identity and optional coaching metadata ===== */

.exercise-header-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: min(92vw, 520px);
    margin: 6px auto 0;
}

.exercise-header-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 23px;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.84);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.2;
}

.exercise-header-tag-muscle {
    border-color: rgba(99, 102, 241, 0.18);
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary-dark);
}

.exercise-header-tag-format {
    border-color: rgba(16, 185, 129, 0.2);
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
}

.coaching-advice-unilateral {
    background:
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.12), transparent 36%),
        linear-gradient(145deg, #f3f2ff, #faf5ff);
    border: 1px solid rgba(99, 102, 241, 0.13);
}

.coaching-advice-unilateral .coaching-advice-icon {
    background: var(--grad-primary);
    border-color: rgba(99, 102, 241, 0.24);
    font-size: 25px;
    font-weight: 900;
    line-height: 1;
}

.coaching-advice-unilateral .coaching-advice-chip {
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary-dark);
}

.coaching-advice-unilateral .coaching-dual-exercise {
    box-shadow: 0 8px 16px rgba(99, 102, 241, 0.05);
}

.slot-muscle-tag,
.slot-format-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.slot-muscle-tag {
    border: 1px solid rgba(99, 102, 241, 0.16);
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary-dark);
}

.slot-format-tag {
    border: 1px solid rgba(16, 185, 129, 0.16);
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
}

.slot-substitution-tag {
    border-color: rgba(245, 158, 11, 0.18);
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
}

.slot-title {
    flex-wrap: wrap;
    row-gap: 6px;
}

.slot-name {
    min-width: 120px;
}

/* A single completed side is a valid intermediate state, not an error. */

.unilateral-series-card.partial {
    border-color: rgba(168, 85, 247, 0.32);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.09), rgba(255, 255, 255, 0.96));
}

.unilateral-series-card.partial .unilateral-series-number {
    color: var(--purple-dark);
}

.unilateral-series-card.partial .unilateral-side-done {
    color: var(--purple-dark);
}

/* ===== Pool sheet: readable compatibility without forcing a change ===== */

.pool-header:empty {
    display: none;
}

.pool-alert {
    border-width: 1px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.11), rgba(255, 251, 235, 0.92));
    border-color: rgba(245, 158, 11, 0.22);
}

.pool-alert-text {
    color: #92400e;
    font-size: 13px;
    line-height: 1.4;
}

.pool-subtitle {
    max-width: 520px;
    margin: 0 auto 18px;
    line-height: 1.45;
}

.pool-item {
    align-items: flex-start;
    gap: 12px;
    padding: 13px 14px;
}

.pool-item-main {
    flex: 1;
    min-width: 0;
}

.pool-item-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.pool-item-title-row svg {
    flex: 0 0 auto;
    color: var(--primary);
}

.pool-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pool-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.pool-item-chip {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 3px 7px;
    border: 1px solid rgba(148, 163, 184, 0.17);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
}

.pool-item-compatibility {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.pool-item-compatibility.is-compatible {
    color: #047857;
}

.pool-item-compatibility.is-different {
    color: #b45309;
}

.pool-item.compatible:not(.current) {
    border-color: rgba(16, 185, 129, 0.12);
}

.pool-item.different-focus {
    border-color: rgba(245, 158, 11, 0.14);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(255, 255, 255, 0.94));
}

.pool-item > .btn,
.pool-item > .pool-item-badge {
    align-self: center;
    flex-shrink: 0;
}

@media (max-width: 520px) {
    .exercise-header-meta {
        gap: 4px;
        margin-top: 4px;
    }

    .exercise-header-tag {
        font-size: 9px;
    }

    .pool-item {
        gap: 9px;
    }

    .pool-item > .btn {
        padding: 8px 10px;
    }

    .pool-item-meta {
        gap: 4px;
    }
}