/* ========================================
   Page-Specific Styles
   ======================================== */

/* ----------------------------------------
   Welcome Screen
   ---------------------------------------- */
.welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height) - var(--nav-height) - var(--space-xl));
    text-align: center;
    padding: var(--space-lg);
}

.welcome-logo {
    font-size: 4rem;
    margin-bottom: var(--space-md);
}

.welcome-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-sm);
}

.welcome-subtitle {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
}

.welcome-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    max-width: 300px;
}

.welcome-option {
    padding: var(--space-lg);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.welcome-option-primary {
    background: rgba(255, 107, 44, 0.08);
    border-color: rgba(255, 107, 44, 0.20);
    color: rgba(255, 107, 44, 0.6);
}

.welcome-option-primary .welcome-option-desc {
    color: var(--color-primary);
    opacity: 0.8;
}

.welcome-option-highlight .welcome-option-title {
    color: var(--color-primary);
}

.welcome-option-ghost {
    background: transparent;
    border-style: dashed;
}

/* Snake border animation for AI button */
@property --ai-snake-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.welcome-option-ai {
    position: relative;
    overflow: visible;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.welcome-option-ai::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--ai-snake-angle, 0deg),
        transparent 0deg,
        transparent 270deg,
        var(--color-primary) 310deg,
        #a78bfa 340deg,
        var(--color-primary) 355deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: ai-snake-rotate 2.5s linear infinite;
}

.welcome-option-ai .welcome-option-title {
    color: var(--color-primary);
}

@keyframes ai-snake-rotate {
    from { --ai-snake-angle: 0deg; }
    to   { --ai-snake-angle: 360deg; }
}

/* Snake border for checkout container */
.checkout-snake-border {
    position: relative;
    border: 1px solid var(--color-primary);
    background-clip: padding-box;
}

.checkout-snake-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    z-index: 1;
    background: conic-gradient(
        from var(--ai-snake-angle, 0deg),
        transparent 0deg,
        transparent 250deg,
        rgba(245, 158, 11, 0.6) 300deg,
        rgba(251, 191, 36, 0.7) 330deg,
        rgba(245, 158, 11, 0.6) 355deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: ai-snake-rotate 2.5s linear infinite;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.5));
}

.welcome-divider {
    display: flex;
    align-items: center;
    margin: var(--space-md) 0;
    width: 100%;
}

.welcome-divider::before,
.welcome-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.welcome-divider span {
    padding: 0 var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.welcome-option:hover {
    border-color: var(--color-primary);
}

.welcome-option-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-xs);
}

.welcome-option-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   Dashboard
   ---------------------------------------- */
.dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.today-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--glass-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.today-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}

.today-date {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.today-workout-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-xs);
}

.today-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.today-exercises {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

.week-progress {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.week-day {
    flex: 1;
    height: 4px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
}

.week-day.completed {
    background: var(--color-success);
}

.week-day.current {
    background: var(--color-primary);
}

.week-day.rest {
    background: var(--color-text-muted);
    opacity: 0.3;
}

/* Rest Day Card */
.rest-day-card {
    text-align: center;
    padding: var(--space-xl);
}

.rest-day-icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
}

.rest-day-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-sm);
}

.rest-day-subtitle {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

.rest-suggestions {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    text-align: left;
}

.rest-suggestions h4 {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.rest-suggestions ul {
    list-style: none;
    font-size: var(--font-size-sm);
}

.rest-suggestions li {
    padding: var(--space-xs) 0;
    color: var(--color-text-secondary);
}

/* Stats Card */
.stats-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--glass-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stats-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.trend-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.trend-header .stats-title {
    margin-bottom: 0;
    flex: 1;
}

.trend-nav {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.trend-nav:hover {
    background: var(--color-bg-input);
    border-color: var(--color-primary);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

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

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.stat-unit {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

.stat-trend {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    margin-top: 2px;
}

.trend-up { color: var(--color-success); }
.trend-down { color: var(--color-error); }
.trend-same { color: var(--color-text-muted); }

.stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Status Banner — In Progress */
.status-in-progress {
    border-left: 4px solid var(--color-primary);
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

.status-dot.pulse {
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.status-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.progress-bar-container {
    height: 6px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.progress-bar-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.progress-detail {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

/* Status Banner — Done */
.status-done {
    border-left: 4px solid var(--color-success);
}

.status-done .status-text {
    color: var(--color-success);
}

.status-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-success);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.done-summary {
    display: flex;
    gap: var(--space-lg);
    margin: var(--space-md) 0;
}

.done-stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
}

.done-stat-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.done-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.next-up {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-sm);
}

.ai-feedback-locked {
    text-align: center;
}

.ai-feedback-hint {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

.ai-analysis-loading {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    justify-content: center;
    padding: var(--space-md);
}

.ai-analysis-result {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.ai-analysis-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-sm);
    color: var(--color-accent);
}

.ai-analysis-text {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-primary);
    margin: 0;
}

/* Body Weight Trend Chart */
.bw-trend-chart {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
}

.bw-range {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    min-width: 32px;
    text-align: right;
}

.bw-chart-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.bw-svg {
    width: 100%;
    height: 60px;
    overflow: visible;
}

.bw-line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bw-circle {
    fill: var(--color-primary);
}

.bw-labels {
    display: flex;
    justify-content: space-between;
}

.bw-label {
    font-size: 9px;
    color: var(--color-text-muted);
    text-align: center;
    flex: 1;
}

/* Tip of the Day Card — slow snake border */
@property --tip-snake-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.tip-card {
    position: relative;
    overflow: visible;
    border-left: none;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.tip-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--tip-snake-angle, 0deg),
        transparent 0deg,
        transparent 270deg,
        var(--color-primary) 320deg,
        rgba(255, 107, 44, 0.4) 345deg,
        var(--color-primary) 355deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: tip-snake-rotate 7.5s linear infinite;
}

@keyframes tip-snake-rotate {
    from { --tip-snake-angle: 0deg; }
    to   { --tip-snake-angle: 360deg; }
}

.tip-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-style: italic;
    margin: 0;
}

.coach-review-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
    font-style: normal;
}

/* ----------------------------------------
   Workout Page
   ---------------------------------------- */
.workout-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-bottom: 80px;
}

/* Done summary (workout tab when done for today) */
.done-summary-banner {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.done-summary-banner .status-check {
    color: var(--color-success);
    font-size: var(--font-size-xl);
}

.done-summary-workout {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.done-summary-workout-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-sm);
}

.done-summary-workout-header h3 {
    margin: 0;
    font-size: var(--font-size-md);
}

.done-summary-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.done-summary-stats {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.done-summary-stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
}

.done-summary-stat-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.done-summary-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.done-summary-exercises {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.done-summary-exercise {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--font-size-sm);
}

.done-summary-exercise-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.done-summary-exercise-sets {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* Next workout preview */
.next-workout-preview {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    opacity: 0.7;
}

.next-preview-header {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.next-preview-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-sm);
}

.next-preview-exercises {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.next-preview-exercise {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 2px var(--space-sm);
    border-radius: var(--radius-sm);
}

.next-preview-more {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    padding: 2px var(--space-sm);
}

.workout-header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.workout-day-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.workout-week-badge {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
}

/* Pre-Workout Overview */
.overview-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.overview-header h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.overview-stats {
    display: flex;
    justify-content: space-around;
    padding: var(--space-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.overview-stat {
    text-align: center;
}

.overview-stat-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    display: block;
}

.overview-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.overview-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-sm);
}

.overview-exercise-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.overview-exercise {
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.overview-exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.overview-exercise-name {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.overview-exercise-sets {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.overview-exercise-last {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Pre-workout Options */
.preworkout-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.preworkout-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.preworkout-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Weight Input */
.weight-input-track {
    cursor: default;
    touch-action: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

.weight-input {
    width: 4em;
    padding: var(--space-xs) var(--space-sm);
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
    -moz-appearance: textfield;
}

.weight-input::-webkit-outer-spin-button,
.weight-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.weight-input:focus {
    outline: none;
}

.weight-input-unit {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.weight-input-alt {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin-left: var(--space-xs);
}

/* Pill Slider (custom drag-based) */
.pill-slider-track {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 107, 44, 0.3) 0%, rgba(255, 107, 44, 0.1) 50%, rgba(255, 107, 44, 0.25) 100%);
    border: 1px solid rgba(255, 107, 44, 0.3);
    border-radius: var(--radius-full);
    padding: 2px;
    min-width: 150px;
    cursor: pointer;
    touch-action: none;
    overflow: hidden;
}

.pill-slider-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5em;
    padding: var(--space-xs) var(--space-xs);
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-bg-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    border-radius: var(--radius-full);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.workout-progress-container {
    margin-bottom: var(--space-md);
}

.workout-progress-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-xs);
}

/* Exercise Card */
.exercise-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--glass-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-fast);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.exercise-card.completed {
    border-color: var(--color-success);
}

.exercise-card.completed .exercise-header {
    opacity: 0.7;
}

/* Collapsed state for completed exercises */
.exercise-card.collapsed .exercise-sets,
.exercise-card.collapsed .exercise-notes {
    display: none;
}

.exercise-card.collapsed .exercise-header {
    opacity: 1;
}

/* Progress-based colors for collapsed cards */
.exercise-card.collapsed.no-progress .exercise-name {
    color: var(--color-danger);
}

.exercise-card.collapsed.partial-progress .exercise-name {
    color: var(--color-warning);
}

.exercise-card.collapsed.completed .exercise-name {
    color: var(--color-success);
}

.exercise-collapse-indicator {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    transition: transform var(--transition-fast);
}

.exercise-card.collapsed .exercise-collapse-indicator {
    transform: rotate(-90deg);
}

/* Collapsing animation */
.exercise-card.collapsing {
    animation: collapseCard 0.5s ease-out forwards;
    overflow: hidden;
}

@keyframes collapseCard {
    0% {
        opacity: 1;
        max-height: 300px;
    }
    50% {
        opacity: 0.5;
        max-height: 60px;
    }
    100% {
        opacity: 0;
        max-height: 0;
        padding: 0;
        margin: 0;
        border: none;
    }
}

/* Appearing at bottom animation */
.exercise-card.appearing {
    animation: appearCard 0.4s ease-out forwards;
}

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

.exercise-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-md);
    cursor: pointer;
}

.exercise-info {
    flex: 1;
}

.exercise-name {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-xs);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.weak-point-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: var(--color-warning);
    color: #000;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* Swap persistence modal */
.swap-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.swap-row {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.substituted-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: var(--color-primary);
    color: #fff;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.extra-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: var(--color-success);
    color: #fff;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.exercise-original {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: 2px;
}

.exercise-target {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.exercise-actions {
    display: flex;
    gap: var(--space-xs);
}

.exercise-actions .video-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.exercise-previous {
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.exercise-previous strong {
    color: var(--color-primary);
}

.exercise-sets {
    padding: var(--space-md);
    padding-top: 0;
}

.set-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xs) 0;
}

.set-controls .btn-sm {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.set-controls .btn-sm:disabled {
    opacity: 0.3;
    pointer-events: none;
}

.set-controls-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 3em;
    text-align: center;
}

.remove-exercise-btn {
    font-size: 0.85rem;
    opacity: 0.5;
}

.remove-exercise-btn:hover {
    opacity: 1;
    color: var(--danger);
}

.set-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.set-left {
    min-width: 70px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.set-number {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.set-prev {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.set-row.pr-set {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 193, 7, 0.1));
    border: 1px solid var(--color-warning);
    animation: pr-glow 1s ease-out;
}

.set-row.pr-set .set-check.checked {
    background: linear-gradient(135deg, var(--color-warning), #f59e0b);
    border-color: var(--color-warning);
    font-size: var(--font-size-base);
    color: white;
    animation: pr-bounce 0.6s ease-out;
}

@keyframes pr-glow {
    0% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.3);
    }
    100% {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
    }
}

@keyframes pr-bounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.4); }
    50% { transform: scale(0.9); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.set-inputs {
    display: flex;
    gap: var(--space-sm);
    flex: 1;
}

.set-input-group {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.set-input-group label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    min-width: 30px;
}

.set-input-group input {
    width: 60px;
    padding: var(--space-xs) var(--space-sm);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    text-align: center;
}

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

/* Activity inputs */
.activity-inputs {
    gap: var(--space-sm);
}

.intensity-select {
    width: auto;
    min-width: 60px;
    padding: var(--space-xs) var(--space-sm);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    text-align: center;
}

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

.set-check {
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-bg-input);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--font-size-lg);
    color: transparent;
    overflow: hidden;
}

.set-check:hover {
    border-color: var(--color-primary);
}

.set-check.checked {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
    animation: set-pulse 0.3s ease-out;
}

.set-check .blob-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

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

.exercise-notes {
    padding: var(--space-md);
    padding-top: 0;
}

.exercise-notes-content {
    padding: var(--space-sm);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Workout Observations Section */
.workout-observations-section {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: var(--space-md);
}

.workout-observations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    transition: background var(--transition-fast);
}

.workout-observations-header:hover {
    background: var(--color-bg-tertiary);
}

.workout-observations-toggle {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.workout-observations-body {
    padding: 0 var(--space-md) var(--space-md);
}

.workout-observations-body textarea {
    width: 100%;
    resize: vertical;
    min-height: 80px;
}

.workout-actions {
    position: sticky;
    bottom: var(--nav-height);
    padding: var(--space-lg) 0;
    padding-bottom: var(--space-xl);
    margin-top: var(--space-md);
    background: linear-gradient(transparent, var(--color-bg-primary) 30%);
}

/* ----------------------------------------
   Exercise Library
   ---------------------------------------- */
.library-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.library-search {
    margin-bottom: var(--space-sm);
}

.library-filters {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.library-filters::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    padding: var(--space-xs) var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-family: var(--font-family-display);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.filter-chip:hover,
.filter-chip.active {
    background: rgba(255, 107, 44, 0.10);
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(255, 107, 44, 0.12);
}

.exercise-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Type filter chips */
.type-filter-chips {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.type-filter-chips .chip {
    padding: 4px 12px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.type-filter-chips .chip:hover,
.type-filter-chips .chip.active {
    background: rgba(255, 107, 44, 0.10);
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(255, 107, 44, 0.12);
}

/* Exercise type badges */
.exercise-type-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    margin-left: 6px;
}

.badge-expert {
    background: rgba(255, 107, 44, 0.10);
    color: #818cf8;
}

.badge-custom {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

/* Expert detail view */
.expert-detail .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.expert-detail .detail-label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.expert-detail .detail-value {
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    text-align: right;
    max-width: 60%;
}

/* ----------------------------------------
   Split Builder
   ---------------------------------------- */
.splits-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Program Limit Bar — second row in header */
.program-limit-bar {
    width: 100%;
    padding-top: var(--space-sm);
}

.program-limit-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

.program-limit-info .program-limit-track {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: 0 6px;
}

/* Splits page standalone track */
.program-limit-track {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: 0 var(--space-sm);
}

.program-limit-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), rgba(255, 107, 44, 0.15));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.program-limit-fill.limit-warning {
    background: linear-gradient(90deg, var(--color-warning, #f59e0b), rgba(245, 158, 11, 0.3));
}

.program-limit-fill.limit-danger {
    background: linear-gradient(90deg, var(--color-danger, #ef4444), rgba(239, 68, 68, 0.3));
}

.upgrade-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-xs);
}

/* Split Editor */
.split-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.block-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.block-item {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--glass-bg);
    cursor: pointer;
}

.block-title {
    font-weight: var(--font-weight-semibold);
}

.block-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.day-list {
    padding: var(--space-sm);
}

.day-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-xs);
    background: var(--glass-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.day-item:hover {
    background: var(--glass-bg-heavy);
}

.day-item.rest-day {
    opacity: 0.6;
}

.day-name {
    flex: 1;
    font-size: var(--font-size-sm);
}

.day-exercise-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   Progress Page
   ---------------------------------------- */
.progress-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.progress-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.progress-filters .form-group {
    margin-bottom: 0;
}

.time-range-filters {
    display: flex;
    gap: 2px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    padding: 2px;
}

.time-range-filters .filter-chip {
    flex: 1;
    text-align: center;
    border: none;
    border-radius: var(--radius-sm);
}

/* Analytics Mode Toggle */
.analytics-mode-toggle {
    display: flex;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    padding: 2px;
    gap: 2px;
    margin-bottom: var(--space-md);
}

.mode-toggle-btn {
    flex: 1;
    padding: var(--space-xs) var(--space-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-family: var(--font-family-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mode-toggle-btn:hover {
    color: var(--color-text-primary);
}

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

.chart-container {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    height: 300px;
    position: relative;
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.chart-container.day-progress-chart {
    height: 350px;
}

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

/* Day Progress Legend */
.day-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.day-legend-title {
    width: 100%;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.day-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.day-legend-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.day-legend-name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
}

.day-legend-sessions {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.pr-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.pr-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pr-card-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}

.pr-card-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.pr-card-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

/* Body Analytics - 2 top, 3 bottom layout */
.body-stats-cards {
    grid-template-columns: repeat(6, 1fr);
}

.body-stats-cards .pr-card:nth-child(1),
.body-stats-cards .pr-card:nth-child(2) {
    grid-column: span 3;
}

.body-stats-cards .pr-card:nth-child(3),
.body-stats-cards .pr-card:nth-child(4),
.body-stats-cards .pr-card:nth-child(5) {
    grid-column: span 2;
}

/* ----------------------------------------
   Settings Page
   ---------------------------------------- */
.settings-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.settings-section {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--glass-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.settings-section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    padding: var(--space-md);
}

.settings-section-title.collapsible {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.settings-section-title.collapsible:active {
    opacity: 0.7;
}

.section-toggle {
    font-size: var(--font-size-xs);
    transition: transform 0.2s ease;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid var(--glass-border);
}

.setting-row:last-child {
    border-bottom: none;
}

.setting-label {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
}

.setting-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-xs);
}

.settings-footer {
    text-align: center;
    padding: var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-display);
}

/* ----------------------------------------
   Block Complete Modal
   ---------------------------------------- */
.block-complete {
    text-align: center;
    padding: var(--space-md);
}

.block-complete-icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
}

.block-complete-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-sm);
}

.block-complete-subtitle {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

.block-complete-stats {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    text-align: left;
}

.block-complete-stat {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    font-size: var(--font-size-sm);
}

.block-complete-stat span:first-child {
    color: var(--color-text-secondary);
}

.block-complete-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* ----------------------------------------
   Block/Week Picker
   ---------------------------------------- */
.week-picker-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: var(--space-xs);
}

.week-picker-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface, var(--color-bg-secondary));
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.week-picker-btn:hover {
    border-color: var(--color-primary);
}

.week-picker-btn.active {
    border-color: var(--color-primary);
    background: rgba(255, 107, 44, 0.10);
    color: var(--color-primary);
}

.week-picker-btn.deload {
    font-size: var(--font-size-xs);
    line-height: 1.2;
    white-space: pre-line;
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.week-picker-btn.deload.active {
    background: rgba(251, 191, 36, 0.15);
    color: var(--color-warning);
}

/* Deload Badge */
.deload-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background: var(--color-warning);
    color: #000;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    margin-left: var(--space-xs);
    vertical-align: middle;
}

/* ----------------------------------------
   Workout Complete Modal
   ---------------------------------------- */
.workout-complete {
    text-align: center;
    padding: var(--space-md);
}

.workout-complete-icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
}

.workout-complete-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-md);
}

.workout-complete-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.workout-complete-stat {
    padding: var(--space-sm);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
}

.workout-complete-stat-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.workout-complete-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.workout-complete-next {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

/* ----------------------------------------
   Workout Summary Modal
   ---------------------------------------- */
.workout-summary {
    text-align: center;
}

.workout-summary-top {
    margin-bottom: var(--space-md);
}

.workout-summary-top h2 {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-2xl);
    animation: fadeInPage 0.5s ease-out 0.2s both;
}

.summary-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-stat-icon .blob-icon {
    width: 2.5rem;
    height: 2.5rem;
    animation: celebration-pop 0.6s ease-out;
}

.workout-summary-icon {
    font-size: 4rem;
    margin-bottom: var(--space-sm);
    animation: celebration-pop 0.6s ease-out;
}

@keyframes celebration-pop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
}

.workout-summary-day {
    color: var(--color-text-secondary);
    margin: 0;
}

.workout-summary-subtitle {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: var(--space-xs) 0 0;
}

.summary-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.summary-stat {
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    min-width: 70px;
    animation: fadeInPage 0.4s ease-out both;
}

.summary-stat:nth-child(1) { animation-delay: 0.3s; }
.summary-stat:nth-child(2) { animation-delay: 0.4s; }
.summary-stat:nth-child(3) { animation-delay: 0.5s; }
.summary-stat:nth-child(4) { animation-delay: 0.6s; }

.summary-stat-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.summary-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.summary-stat-pr {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 193, 7, 0.1));
    border: 1px solid var(--color-warning);
}

.summary-time {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.summary-preworkout {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.summary-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-sm);
    text-align: left;
}

.summary-exercises {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    text-align: left;
}

.summary-exercise {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
}

.summary-exercise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-exercise-name {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.summary-exercise-sets {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

.summary-exercise-skipped {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-style: italic;
}

.summary-change {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.summary-change.positive {
    background: rgba(76, 175, 80, 0.2);
    color: var(--color-success);
}

.summary-change.negative {
    background: rgba(244, 67, 54, 0.2);
    color: var(--color-danger);
}

.summary-change.neutral {
    background: var(--color-bg-input);
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   Editor Page (Split-Pane)
   ---------------------------------------- */
.editor-page {
    display: flex;
    gap: var(--space-md);
    height: calc(100vh - var(--header-height) - var(--nav-height) - var(--space-md) * 2);
    overflow: hidden;
}

/* Left sidebar - Tree navigation */
.editor-sidebar {
    width: 280px;
    min-width: 200px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.editor-sidebar-header {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.editor-sidebar-header .btn-icon {
    padding: var(--space-xs);
    font-size: var(--font-size-lg);
}

/* Tree container */
.editor-tree {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
}

/* Tree item styles */
.tree-item {
    user-select: none;
}

.tree-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.tree-item-row:hover {
    background: var(--color-bg-tertiary);
}

.tree-item-row.selected {
    background: rgba(255, 107, 44, 0.10);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tree-item-row.selected .tree-toggle,
.tree-item-row.selected .tree-meta {
    color: var(--color-primary);
    opacity: 0.8;
}

.tree-toggle {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}

.tree-toggle.expanded {
    transform: rotate(90deg);
}

.tree-toggle.hidden {
    visibility: hidden;
}

.tree-icon {
    font-size: var(--font-size-base);
}

.tree-label {
    flex: 1;
    font-size: var(--font-size-sm);
}

.tree-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.tree-empty {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    padding: var(--space-sm);
    font-style: italic;
}

.tree-add {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    margin: var(--space-xs) 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    transition: background var(--transition-fast);
}

.tree-add:hover {
    background: var(--color-bg-tertiary);
}

.tree-program > .tree-item-row {
    font-weight: var(--font-weight-semibold);
}

/* Program cards in editor tree — override tree-item-row defaults */
.tree-program > .program-card.tree-item-row {
    display: block;
    padding: var(--space-md);
    margin-bottom: var(--space-xs);
}

.tree-program > .program-card.tree-item-row:hover {
    background: var(--glass-bg);
    border-color: var(--color-border-light);
}

.tree-program > .program-card.tree-item-row.selected {
    background: var(--glass-bg);
    border-color: var(--color-primary);
    color: inherit;
}

.tree-day.rest-day .tree-item-row {
    opacity: 0.6;
}

.editor-tree-empty {
    padding: var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* Nested tree items */
.tree-children {
    padding-left: var(--space-md);
}

.tree-children.collapsed {
    display: none;
}

/* Level indentation for nested items */
.tree-item[data-level="1"] .tree-item-header {
    padding-left: calc(var(--space-sm) + 8px);
}

.tree-item[data-level="2"] .tree-item-header {
    padding-left: calc(var(--space-sm) + 16px);
}

/* Add buttons in tree */
.tree-add-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    margin: var(--space-xs) 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    background: transparent;
    border: 1px dashed var(--color-border);
    width: 100%;
    transition: all var(--transition-fast);
}

.tree-add-btn:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-primary);
}

/* Right panel - Edit forms */
.editor-panel {
    flex: 1;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.editor-panel-header {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.editor-panel-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.editor-panel-actions {
    display: flex;
    gap: var(--space-sm);
}

.editor-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}

/* Empty state */
.editor-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-xl);
}

.editor-empty-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
    opacity: 0.5;
}

.editor-empty-text {
    font-size: var(--font-size-sm);
}

/* Edit form styles */
.editor-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.editor-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.editor-form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.editor-form-row {
    display: flex;
    gap: var(--space-md);
}

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

/* Exercise list in day editor */
.editor-exercise-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.editor-exercise-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.editor-exercise-item .drag-handle {
    color: var(--color-text-muted);
    cursor: grab;
}

.editor-exercise-item .exercise-name {
    flex: 1;
    font-size: var(--font-size-sm);
}

.editor-exercise-item .sets-reps {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.editor-exercise-item .remove-btn {
    padding: var(--space-xs);
    background: transparent;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.editor-exercise-item .remove-btn:hover {
    opacity: 1;
}

/* Editor form styles */
.editor-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
}

.editor-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.editor-form-header h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.editor-form-breadcrumb {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.editor-form-stats {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
}

.editor-form-stats .stat {
    text-align: center;
}

.editor-form-stats .stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    display: block;
}

.editor-form-stats .stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.editor-form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.editor-no-exercises {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-style: italic;
    padding: var(--space-md);
    text-align: center;
}

.editor-exercise-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.editor-exercise-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.editor-exercise-actions {
    display: flex;
    gap: 2px;
}

.editor-exercise-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.editor-exercise-detail {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Chip/pill selectors for AI form */
.chip-group {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    align-items: stretch;
}

.chip {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full, 999px);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex: 1;
    text-align: center;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-height: 36px;
}

.chip:active {
    transform: scale(0.95);
}

.chip.active {
    background: rgba(255, 107, 44, 0.10);
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(255, 107, 44, 0.12);
}

/* AI Session Slider — styled like pill-slider */
.ai-session-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
}

.ai-session-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.ai-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 36px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, rgba(255, 107, 44, 0.3) 0%, rgba(255, 107, 44, 0.1) 50%, rgba(255, 107, 44, 0.25) 100%);
    border: 1px solid rgba(255, 107, 44, 0.3);
    outline: none;
    cursor: pointer;
    padding: 0 2px;
}

.ai-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 72px;
    height: 30px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ai-slider::-moz-range-thumb {
    width: 72px;
    height: 30px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ai-slider::-moz-range-track {
    height: 36px;
    border-radius: var(--radius-full);
    background: transparent;
}

.ai-session-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* AI Wizard (step-by-step generator) */
.ai-wizard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-lg);
    min-height: calc(100vh - var(--header-height) - var(--nav-height) - var(--space-xl));
    text-align: center;
}

.ai-wizard-dots {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-xl);
}

.ai-wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    transition: all var(--transition-fast);
}

.ai-wizard-dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--color-primary);
}

.ai-wizard-dot.done {
    background: var(--color-primary);
    opacity: 0.5;
}

.ai-wizard-question {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-sm);
}

.ai-wizard-subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    max-width: 340px;
    margin-bottom: var(--space-xl);
}

.ai-wizard-content {
    width: 100%;
    max-width: 340px;
    position: relative;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.ai-wizard-content::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--ai-snake-angle, 0deg),
        transparent 0deg,
        transparent 270deg,
        var(--color-primary) 310deg,
        #a78bfa 340deg,
        var(--color-primary) 355deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: ai-snake-rotate 2.5s linear infinite;
}

.ai-wizard-chips {
    justify-content: center;
    gap: var(--space-sm);
}

.ai-wizard-chips .chip {
    flex: 1 1 0;
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-sm);
    min-height: 48px;
}

.ai-wizard-chips .chip.chip-wide {
    flex: none;
    width: 100%;
}

/* Stacked layout: full-width vertical list for text options */
.ai-wizard-chips-stack {
    flex-direction: column;
}

.ai-wizard-chips-stack .chip {
    flex: none;
    width: 100%;
}

.editor-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-xl);
}

.editor-panel-empty .empty-state-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
    opacity: 0.5;
}

.editor-panel-empty h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-text-secondary);
}

.editor-panel-empty p {
    font-size: var(--font-size-sm);
}

/* Badge */
.badge {
    padding: 2px var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.badge-success {
    background: var(--color-success);
    color: white;
}

/* Toggle group */
.toggle-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

.toggle-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Stacked editor layout */
.editor-page-stacked {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-height: calc(100vh - var(--header-height) - var(--nav-height) - var(--space-md) * 2);
}

.editor-sidebar-stacked {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 35vh;
}

.editor-sidebar-stacked .editor-tree {
    overflow-y: auto;
}

.editor-panel-stacked {
    flex: 1;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 300px;
}

.editor-panel-stacked .editor-form {
    overflow-y: auto;
}

/* Mobile responsive - keep old side-by-side layout classes for backward compat */
@media (max-width: 600px) {
    .editor-page {
        flex-direction: column;
        height: auto;
    }

    .editor-sidebar {
        width: 100%;
        min-width: auto;
        max-height: 40vh;
    }

    .editor-panel {
        min-height: 50vh;
    }
}

/* ----------------------------------------
   Calendar View (Progress Page)
   ---------------------------------------- */

/* View Toggle */
.progress-view-toggle {
    display: flex;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 4px;
    gap: 4px;
    margin-bottom: var(--space-md);
}

.view-toggle-btn {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-family: var(--font-family-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.view-toggle-btn:hover {
    color: var(--color-text-primary);
}

.view-toggle-btn.active {
    background: rgba(255, 107, 44, 0.10);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Calendar Container */
.calendar-container {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

/* Calendar Navigation */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.calendar-nav-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.calendar-nav-btn:hover {
    background: var(--color-bg-input);
    border-color: var(--color-primary);
}

.calendar-month-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

/* Calendar Stats */
.calendar-stats {
    text-align: center;
    margin-bottom: var(--space-md);
}

.calendar-stat {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Calendar Grid */
.calendar-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: var(--space-xs);
}

.calendar-weekdays span {
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    padding: var(--space-xs) 0;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/* Calendar Day */
.calendar-day {
    position: relative;
    aspect-ratio: 1;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    cursor: default;
    transition: all var(--transition-fast);
}

.calendar-day.empty {
    background: transparent;
}

.calendar-day-number {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

/* Day with workout */
.calendar-day.has-workout {
    background: rgba(255, 107, 44, 0.15);
    cursor: pointer;
}

.calendar-day.has-workout:hover {
    background: rgba(255, 107, 44, 0.25);
}

.calendar-day.has-workout .calendar-day-number {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* Workout dot indicators */
.calendar-workout-dots {
    position: absolute;
    bottom: 4px;
    display: flex;
    gap: 2px;
    justify-content: center;
}

.calendar-workout-dot {
    width: 5px;
    height: 5px;
    background: var(--color-primary);
    border-radius: 50%;
}

.calendar-workout-dot.activity-dot {
    background: #44d4b0;
}

.calendar-workout-dot.bonus-dot {
    background: var(--color-text-muted);
}

/* Today highlight */
.calendar-day.today {
    border: 2px solid var(--color-primary);
}

.calendar-day.today .calendar-day-number {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.calendar-day.today.has-workout {
    background: rgba(255, 107, 44, 0.25);
}

/* Day Detail Modal */
.day-detail {
    text-align: left;
    max-height: 60vh;
    overflow-y: auto;
}

.day-detail-header {
    margin-bottom: var(--space-md);
}

.day-detail-header h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-xs) 0;
}

.day-detail-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.day-detail-workout {
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.day-detail-workout:last-child {
    margin-bottom: 0;
}

.day-detail-workout.multiple h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-sm) 0;
    color: var(--color-primary);
}

.day-detail-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.day-detail-stat {
    text-align: center;
}

.day-detail-stat-value {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.day-detail-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.day-detail-exercises {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.day-detail-exercise {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
}

.day-detail-exercise-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.day-detail-exercise-info {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.day-detail-workout-header {
    text-align: center;
    margin-bottom: var(--space-md);
}

.day-detail-workout-header h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin: 0;
}

.day-detail-time {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.day-detail-preworkout {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.btn-icon-inline {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 var(--space-xs);
    font-size: var(--font-size-sm);
    opacity: 0.6;
}
.btn-icon-inline:hover { opacity: 1; }

.day-detail-section-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-sm);
}

.day-detail-workout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

.day-detail-workout-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* Expandable exercise editing */
.day-detail-exercise-expandable {
    border-bottom: 1px solid var(--color-border);
}
.day-detail-exercise-expandable:last-child {
    border-bottom: none;
}
.day-detail-exercise-toggle {
    cursor: pointer;
}
.expand-arrow {
    display: inline-block;
    width: 1em;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}
.exercise-edit-panel {
    padding: var(--space-sm) 0;
}
.exercise-edit-panel .set-row {
    padding: var(--space-xs) var(--space-sm);
    margin-bottom: var(--space-xs);
}

/* ----------------------------------------
   Auth Pages
   ---------------------------------------- */
.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height) - var(--nav-height) - var(--space-xl));
    padding: var(--space-lg);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.auth-logo {
    font-size: 4rem;
    margin-bottom: var(--space-md);
}

.auth-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-xs);
}

.auth-subtitle {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
}

.auth-form {
    text-align: left;
}

.auth-form .form-group {
    margin-bottom: var(--space-md);
}

.auth-form label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-xs);
    color: var(--color-text-secondary);
}

.auth-form input {
    width: 100%;
    padding: var(--space-md);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text);
    transition: border-color var(--transition-fast);
}

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

/* ----------------------------------------
   Light Theme Glass Overrides
   ---------------------------------------- */
[data-theme="light"] .pill-slider-track {
    background: linear-gradient(135deg, rgba(229, 90, 27, 0.2) 0%, rgba(229, 90, 27, 0.08) 50%, rgba(229, 90, 27, 0.18) 100%);
    border-color: rgba(229, 90, 27, 0.2);
}

[data-theme="light"] .pill-slider-thumb {
    background: white;
    color: #1a1f36;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .preworkout-option {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .overview-exercise {
    background: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .overview-stats {
    background: rgba(255, 255, 255, 0.4);
}

.auth-form input::placeholder {
    color: var(--color-text-muted);
}

.auth-form button[type="submit"] {
    margin-top: var(--space-md);
}

.auth-links {
    margin-top: var(--space-lg);
    text-align: center;
}

.auth-links a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.auth-links a:hover {
    text-decoration: underline;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: var(--space-xl) 0 var(--space-md);
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-divider span {
    padding: 0 var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ----------------------------------------
   Settings - Sync Status
   ---------------------------------------- */
.sync-status {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-success);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(34, 197, 94, 0.1);
    border-radius: var(--radius-sm);
}

.sync-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: var(--space-xs);
}

.sync-dot.synced {
    background: var(--color-success);
}

.sync-dot.syncing {
    background: var(--color-warning);
    animation: pulse 1s infinite;
}

.sync-dot.error {
    background: var(--color-danger);
}

.sync-dot.offline {
    background: var(--color-text-muted);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ----------------------------------------
   Admin Panel
   ---------------------------------------- */
.admin-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.admin-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-tab {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.admin-tab:hover {
    color: var(--color-text-primary);
}

.admin-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.admin-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.admin-search {
    flex: 1;
    min-width: 0;
}

.admin-filter {
    width: auto;
    min-width: 120px;
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.admin-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.admin-item-clickable {
    cursor: pointer;
}

.admin-item-clickable:hover {
    border-color: var(--color-border-light);
}

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

.admin-item-title {
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-xs);
    word-break: break-word;
}

.admin-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
    font-size: var(--font-size-xs);
}

.admin-item-actions {
    display: flex;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.admin-empty {
    text-align: center;
    padding: var(--space-xl);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding: var(--space-sm) 0;
}

.admin-page-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    min-width: 60px;
    text-align: center;
}

/* Admin badges */
.badge-category {
    padding: 2px var(--space-sm);
    background: rgba(255, 107, 44, 0.15);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.badge-tier {
    padding: 2px var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.badge-free {
    background: rgba(76, 175, 80, 0.15);
    color: var(--color-success);
}

.badge-paid {
    background: rgba(255, 193, 7, 0.15);
    color: var(--color-warning);
}

.badge-active {
    background: rgba(76, 175, 80, 0.15);
    color: var(--color-success);
}

.badge-inactive {
    background: rgba(244, 67, 54, 0.15);
    color: var(--color-danger);
}

.badge-default {
    background: rgba(255, 107, 44, 0.15);
    color: var(--color-primary);
}

.badge-expert {
    background: rgba(255, 193, 7, 0.15);
    color: var(--color-warning);
}

.badge-custom {
    background: rgba(255, 107, 44, 0.15);
    color: var(--color-primary);
}

/* Admin form inside modal */
.admin-form .form-group {
    margin-bottom: var(--space-md);
}

.admin-form .form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}

.admin-json-textarea {
    font-family: monospace;
    font-size: var(--font-size-xs);
    line-height: 1.4;
    white-space: pre;
    tab-size: 2;
}

/* Admin user stats */
.admin-user-stats {
    display: flex;
    gap: var(--space-md);
}

.admin-user-stat {
    flex: 1;
    text-align: center;
    padding: var(--space-sm);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
}

.admin-user-stat-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.admin-user-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Admin Evals */
.eval-controls {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-md);
}

.eval-controls select {
    flex: 1;
    min-width: 0;
}

.eval-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.eval-result-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.eval-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
    font-weight: var(--font-weight-semibold);
}

.eval-result-meta {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.eval-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.eval-check {
    padding: 2px var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.eval-check-pass {
    background: rgba(76, 175, 80, 0.15);
    color: var(--color-success);
}

.eval-check-fail {
    background: rgba(244, 67, 54, 0.15);
    color: var(--color-danger);
}

.eval-output {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}

.eval-output-summary {
    white-space: pre-wrap;
    word-break: break-word;
}

.eval-actions {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}

.eval-raw-json {
    max-height: 200px;
    overflow-y: auto;
    background: var(--color-bg-tertiary);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    font-family: monospace;
    font-size: var(--font-size-xs);
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: var(--space-sm);
}

.eval-golden {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    border: 1px dashed var(--color-warning);
    border-radius: var(--radius-md);
}

.eval-golden-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--color-warning);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-xs);
}

.eval-golden-body {
    max-height: 150px;
    overflow-y: auto;
    background: var(--color-bg-tertiary);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    font-family: monospace;
    font-size: var(--font-size-xs);
    white-space: pre-wrap;
    word-break: break-all;
}

.eval-running {
    text-align: center;
    padding: var(--space-md);
    color: var(--color-text-muted);
}

.eval-input-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

.eval-input-row:last-child {
    border-bottom: none;
}

.eval-input-label {
    flex-shrink: 0;
    width: 80px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.eval-input-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.eval-input-chip {
    padding: 2px var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
}

.eval-input-selected {
    background: rgba(255, 107, 44, 0.2);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.eval-input-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
    line-height: 1.5;
}

.eval-video-link {
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
}

/* ----------------------------------------
   Program Library
   ---------------------------------------- */
.program-library {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.program-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.program-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    cursor: pointer;
    transition: border-color var(--transition-fast);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.program-card:hover {
    border-color: var(--color-border-light);
}

.program-card-locked {
    opacity: 0.7;
}

.program-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.program-card-name {
    font-weight: var(--font-weight-semibold);
    flex: 1;
    min-width: 0;
}

.program-card-badges {
    display: flex;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.program-card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.program-card-lock-msg {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

/* Program Detail Modal */
.program-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.program-detail-desc {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: var(--space-sm) 0 0;
}

.program-detail-stats {
    display: flex;
    justify-content: space-around;
    padding: var(--space-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
}

.program-detail-stat {
    text-align: center;
}

.program-detail-stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    display: block;
}

.program-detail-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.program-detail-structure {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-height: 40vh;
    overflow-y: auto;
}

.program-block-preview {
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.program-block-name {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
}

.program-block-days {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.program-day-preview {
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-bg-input);
    border-radius: var(--radius-sm);
}

.program-day-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.program-day-exercises {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* ----------------------------------------
   Admin Program Builder
   ---------------------------------------- */
body[data-page="admin-program-builder"] #headerRight {
    width: auto;
    padding: 0 var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.program-builder {
    padding: var(--space-md);
    padding-bottom: calc(var(--nav-height) + var(--space-xl));
}

/* Metadata section */
.pb-metadata {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    overflow: hidden;
}

.pb-metadata-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.pb-metadata-arrow {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.pb-metadata-body {
    padding: 0 var(--space-md) var(--space-md);
}

.pb-metadata-row {
    display: flex;
    gap: var(--space-sm);
}

/* Mode toggle */
.pb-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

.pb-mode-btn {
    flex: 1;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-bg-secondary);
    border: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s;
}

.pb-mode-btn.active {
    background: rgba(255, 107, 44, 0.10);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Tree */
.pb-tree {
    margin-bottom: var(--space-md);
}

.pb-tree-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-lg);
    font-size: var(--font-size-sm);
}

.pb-tree-block {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    overflow: hidden;
}

.pb-tree-block.selected > .pb-tree-item-row {
    background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.15);
}

.pb-tree-item-row {
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    gap: var(--space-xs);
    min-height: 40px;
}

.pb-tree-item-row:hover {
    background: var(--color-bg-hover);
}

.pb-tree-toggle {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-xs);
    user-select: none;
    flex-shrink: 0;
}

.pb-tree-label {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-tree-label-day {
    font-weight: var(--font-weight-medium);
    padding-left: var(--space-xs);
}

.pb-tree-label-ex {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    padding-left: var(--space-xs);
}

.pb-tree-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
}

.pb-tree-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.pb-action-btn {
    background: none;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 2px 6px;
    font-size: var(--font-size-xs);
    line-height: 1;
    transition: all 0.15s;
}

.pb-action-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.pb-action-delete:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.pb-tree-children {
    padding-left: var(--space-md);
    padding-bottom: var(--space-xs);
}

.pb-tree-day {
    border-left: 2px solid var(--glass-border);
    margin-left: var(--space-xs);
    margin-bottom: 2px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.pb-tree-day.selected > .pb-tree-item-row {
    background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.15);
}

.pb-tree-day.rest-day {
    opacity: 0.6;
}

.pb-tree-exercises {
    padding-left: var(--space-md);
}

.pb-tree-exercise {
    padding: var(--space-xs) var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.pb-tree-exercise:hover {
    background: var(--color-bg-hover);
}

.pb-tree-exercise.selected {
    background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.15);
}

/* Add buttons */
.pb-add-btn {
    background: none;
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
    width: 100%;
    text-align: center;
    margin-top: var(--space-xs);
    transition: all 0.15s;
}

.pb-add-btn:hover {
    background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.1);
    border-color: var(--color-primary);
}

.pb-add-block-btn {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Edit panel */
.pb-edit-panel {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.pb-edit-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-lg);
    font-size: var(--font-size-sm);
}

.pb-edit-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

/* Deload week grid */
.pb-deload-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.pb-deload-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all 0.15s;
}

.pb-deload-btn.active {
    background: var(--color-warning, #f59e0b);
    color: white;
    border-color: var(--color-warning, #f59e0b);
}

/* Exercise fields grid */
.pb-exercise-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

/* Exercise picker */
.pb-exercise-picker-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-input);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.pb-exercise-picker {
    margin-top: var(--space-xs);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.pb-exercise-picker .form-input {
    border: none;
    border-bottom: 1px solid var(--glass-border);
    border-radius: 0;
}

.pb-exercise-list {
    max-height: 200px;
    overflow-y: auto;
}

.pb-exercise-list-empty {
    padding: var(--space-md);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.pb-exercise-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--glass-border);
}

.pb-exercise-option:last-child {
    border-bottom: none;
}

.pb-exercise-option:hover {
    background: var(--color-bg-hover);
}

.pb-exercise-option-name {
    flex: 1;
}

.pb-exercise-option-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* JSON editor */
.pb-json-editor {
    margin-bottom: var(--space-md);
}

.pb-json-textarea {
    font-family: monospace;
    font-size: var(--font-size-xs);
    min-height: 300px;
    resize: vertical;
    line-height: 1.5;
}

.pb-json-error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    padding: var(--space-sm);
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius-sm);
    margin-top: var(--space-xs);
}

/* ----------------------------------------
   Workout Share Card
   ---------------------------------------- */
.btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

/* AI Feedback snake border */
.ai-feedback-snake {
    position: relative;
    border-radius: var(--radius-md);
    overflow: visible;
}

.ai-feedback-snake::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--radius-md);
    padding: 2px;
    background: conic-gradient(
        from var(--ai-snake-angle, 0deg),
        transparent 0deg,
        transparent 270deg,
        var(--color-primary) 310deg,
        #a78bfa 340deg,
        var(--color-primary) 355deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: ai-snake-rotate 7.5s linear infinite;
}

.btn-share svg {
    flex-shrink: 0;
}

/* ----------------------------------------
   Pro Upgrade Banner
   ---------------------------------------- */
.pro-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-sm);
}

.pro-banner-text {
    color: var(--color-text-secondary);
    flex: 1;
}

.pro-banner .btn {
    flex-shrink: 0;
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-xs);
}

/* ----------------------------------------
   Settings Subscription Section
   ---------------------------------------- */
.subscription-status {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.subscription-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.subscription-badge-pro {
    background: var(--color-primary);
    color: white;
}

.subscription-badge-trial {
    background: rgba(255, 107, 44, 0.15);
    color: var(--color-primary);
}

.subscription-badge-free {
    background: var(--glass-bg);
    color: var(--color-text-secondary);
}

/* ----------------------------------------
   Legal Pages (Terms / Privacy)
   ---------------------------------------- */
.legal-page {
    padding: var(--space-md) var(--space-lg) var(--space-2xl);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}

.legal-updated {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-xl);
}

.legal-page section {
    margin-bottom: var(--space-xl);
}

.legal-page h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-sm);
    color: var(--color-text-primary);
}

.legal-page h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
    color: var(--color-text-secondary);
}

.legal-page p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.legal-page ul {
    color: var(--color-text-secondary);
    padding-left: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.legal-page li {
    margin-bottom: var(--space-xs);
}

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

.legal-page a:hover {
    text-decoration: underline;
}