/* =============================================
   FREELETICS-STYLE DESIGN SYSTEM
   Pure black, teal accent, clean & minimal
   ============================================= */

/* Loading Screen */
.app-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}
.app-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}
.app-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.app-loader-icon {
    animation: loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

:root {
    --black: #000000;
    --bg-primary: #000000;
    --bg-card: #111111;
    --bg-card-hover: #1a1a1a;
    --bg-elevated: #222222;
    --bg-input: #1a1a1a;

    --text-primary: #ffffff;
    --text-secondary: #AAAAAA;  /* WCAG AA compliant: 4.5:1 contrast */
    --text-muted: #7A7A7A;      /* WCAG AA compliant: 4.5:1 contrast */
    --text-dim: #767676;        /* WCAG AA compliant: 4.5:1 contrast */

    --accent: #00E6B0;
    --accent-dark: #00CC9C;
    --accent-glow: rgba(0, 230, 176, 0.2);
    --accent-surface: rgba(0, 230, 176, 0.08);

    --success: #00E6B0;
    --warning: #FFB800;
    --danger: #FF4444;
    --danger-surface: rgba(255, 68, 68, 0.08);

    --protein-color: #FF6B6B;
    --carbs-color: #FFB800;
    --fat-color: #00E6B0;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =============================================
   Keyframes
   ============================================= */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUpSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes confetti-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }

/* Reduced motion support - respect user preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

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

/* Fonts (Anton / Archivo / IBM Plex Mono) are loaded via <link> tags in each page head. */

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

/* Focus indicators for keyboard navigation (accessibility) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

body {
    font-family: var(--font-sans);
    background: var(--black);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 15px;
    line-height: 1.5;
    overflow-x: hidden;
}

/* =============================================
   Skeleton Loaders
   ============================================= */

.skeleton {
    background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-lg);
}

.skeleton-card-hero { height: 200px; margin-bottom: 12px; border-radius: var(--radius-lg); }

/* =============================================
   Header
   ============================================= */

.header {
    background: var(--black);
    padding: 16px 20px 12px;
    padding-top: max(16px, env(safe-area-inset-top));
    position: sticky;
    top: 0;
    z-index: 100;
}

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

.header-greeting h1 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}

.header-date {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
    font-weight: 500;
}

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

.header-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-card);
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms;
}

.header-btn:active { transform: scale(0.92); }
.header-btn svg { width: 20px; height: 20px; }
.header-btn img { width: 36px; height: 36px; border-radius: 50%; display: block; object-fit: cover; }
.lang-picker {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-card);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    z-index: 300;
    min-width: 160px;
    border: 1px solid var(--border);
}
.lang-picker.active { display: block; }
.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    color: var(--text-primary);
    border-radius: 9px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-sans);
    text-align: left;
}
.lang-option:active { background: var(--bg-elevated); }
.lang-option img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.lang-option--active { color: var(--accent); }

.avatar-btn {
    background: var(--accent);
    color: #000;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* =============================================
   Calendar Strip - Week Day Selector
   ============================================= */

.tabs-scroll {
    display: flex;
    justify-content: space-between;
    padding: 4px 0 8px;
}

.cal-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    min-width: 44px;
    transition: all 150ms;
    font-family: var(--font-sans);
}

.cal-day.rest {
    cursor: default;
    opacity: 0.3;
}

.cal-day-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cal-day-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    background: transparent;
    border: 2px solid transparent;
    transition: all 150ms;
}

.cal-day.has-workout .cal-day-circle {
    border-color: #333;
    color: #fff;
}

.cal-day.today .cal-day-label {
    color: var(--accent);
}

.cal-day.today .cal-day-circle {
    border-color: var(--accent);
}

.cal-day.active .cal-day-circle {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    font-weight: 800;
}

.cal-day:active:not(.rest) { transform: scale(0.92); }

.cal-day-workout {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    min-height: 12px;
}

.cal-day.active .cal-day-workout {
    color: var(--accent);
    font-weight: 700;
}

/* =============================================
   Main Content
   ============================================= */

.main {
    padding: 20px;
    padding-bottom: 120px;
}

/* =============================================
   Session Hero Card
   ============================================= */

.session-hero {
    position: relative;
    background: linear-gradient(135deg, #111 0%, #0a0a0a 100%);
    border: 1px solid #1a1a1a;
    border-radius: 16px;
    padding: 28px 24px;
    margin-bottom: 24px;
    text-align: center;
}

.session-hero-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.session-hero-title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}

.session-hero-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.session-hero-meta {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-bottom: 20px;
}

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

.session-hero-meta-item svg { width: 16px; height: 16px; }

.session-progress-bar {
    height: 6px;
    background: #222;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.session-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 400ms ease;
    width: 0%;
}

.session-progress-text {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* =============================================
   Exercise List Header
   ============================================= */

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

.exercise-list-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.exercise-list-settings {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms;
}

.exercise-list-settings:active { background: var(--bg-elevated); }
.exercise-list-settings svg { width: 18px; height: 18px; }

/* =============================================
   Exercise Rows - With GIF Thumbnails
   ============================================= */

#exercises-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.exercise-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    cursor: pointer;
    transition: all 150ms;
    animation: slideUp 200ms ease both;
    border-bottom: 1px solid #1a1a1a;
}

.exercise-row:first-child { border-radius: 16px 16px 0 0; }
.exercise-row:last-child { border-radius: 0 0 16px 16px; border-bottom: none; }
.exercise-row:only-child { border-radius: 16px; border-bottom: none; }

.exercise-row:nth-child(1) { animation-delay: 0ms; }
.exercise-row:nth-child(2) { animation-delay: 30ms; }
.exercise-row:nth-child(3) { animation-delay: 60ms; }
.exercise-row:nth-child(4) { animation-delay: 90ms; }
.exercise-row:nth-child(5) { animation-delay: 120ms; }
.exercise-row:nth-child(6) { animation-delay: 150ms; }
.exercise-row:nth-child(7) { animation-delay: 180ms; }
.exercise-row:nth-child(8) { animation-delay: 210ms; }

.exercise-row:active { background: var(--bg-card-hover); }

.exercise-row.done { opacity: 0.5; }

/* Thumbnail with number badge */
.exercise-thumb-wrap {
    position: relative;
    flex-shrink: 0;
}

.exercise-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #1a1a1a;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exercise-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.exercise-thumb-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #333;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
}

.exercise-thumb-badge.done {
    background: var(--accent);
    color: #000;
}

.exercise-row.done .exercise-thumb {
    border: 2px solid var(--accent);
}

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

.exercise-row-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exercise-row-detail {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    margin-top: 3px;
}

.exercise-row-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #333;
    transition: color 150ms;
}

.exercise-row:active .exercise-row-chevron { color: #555; }

/* =============================================
   Start Training Button
   ============================================= */

.start-training-container {
    position: sticky;
    bottom: 70px;
    padding: 16px 0;
    background: linear-gradient(transparent, var(--black) 30%);
    z-index: 50;
    text-align: center;
}

.start-training-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 28px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 150ms;
    font-family: var(--font-sans);
    box-shadow: 0 4px 24px rgba(0, 230, 176, 0.3);
}

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

.start-training-btn.completed {
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
    box-shadow: none;
}

.edit-today-log-btn {
    margin-top: 10px;
    padding: 10px 24px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
}

.edit-today-log-btn:active { opacity: 0.7; }

/* =============================================
   Training Mode - Full Screen
   ============================================= */

.training-mode {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 400;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.training-mode.active {
    display: flex;
    animation: fadeIn 200ms;
}

.training-header {
    padding: 16px 20px 12px;
    padding-top: max(16px, env(safe-area-inset-top));
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.training-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1a1a1a;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.training-close:active { background: #333; }

.training-step {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex: 1;
    text-align: center;
}

.training-progress-track {
    width: 100%;
    height: 3px;
    background: #1a1a1a;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.training-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 300ms ease;
}

.training-body {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.training-gif-container {
    width: 100%;
    max-width: 400px;
    background: #0a0a0a;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    min-height: 250px;
}

.training-gif-container img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 20px;
}

.training-gif-container .gif-loading,
.training-gif-container .gif-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

.training-exercise-name {
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.training-exercise-muscles {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.training-stats-row {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
}

.training-stat {
    flex: 1;
    min-width: 0;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 14px 6px;
    text-align: center;
}

.training-stat-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 4px;
}

.training-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--accent);
}

.training-stat-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.stat-adj-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.training-tips {
    width: 100%;
    max-width: 400px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.training-tips-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.training-footer {
    padding: 16px 20px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    display: flex;
    gap: 10px;
    align-items: center;
    background: #000;
    border-top: 1px solid #1a1a1a;
}

.training-btn-prev {
    flex: 1;
    padding: 14px;
    background: #1a1a1a;
    color: #999;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    min-height: 48px;
    font-family: var(--font-sans);
    transition: all 150ms;
}

.training-btn-prev:active { background: #222; }
.training-btn-prev:disabled { opacity: 0.3; }

.training-btn-timer {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1a1a1a;
    border: none;
    color: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 150ms;
}

.training-btn-timer:active { background: #222; }
.training-btn-timer svg { width: 22px; height: 22px; }

.training-btn-next {
    flex: 1;
    padding: 14px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    min-height: 48px;
    font-family: var(--font-sans);
    transition: all 150ms;
}

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

/* Training Complete Screen */
.training-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    gap: 16px;
    padding: 40px 20px;
}

.training-complete-icon {
    font-size: 64px;
    margin-bottom: 8px;
}

.training-complete-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.training-complete-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 280px;
}

.training-complete-btn {
    margin-top: 16px;
    padding: 16px 48px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    min-height: 52px;
    letter-spacing: 1px;
    font-family: var(--font-sans);
    transition: all 150ms;
}

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

/* =============================================
   Workout Settings Bottom Sheet
   ============================================= */

.settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.settings-overlay.active {
    display: flex;
    animation: fadeIn 150ms;
}

.settings-sheet {
    background: var(--bg-card);
    border-radius: 20px 20px 0 0;
    padding: 0 20px 40px;
    max-width: 500px;
    width: 100%;
    animation: slideUpSheet 300ms ease;
}

.settings-title {
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    padding: 16px 0 20px;
    letter-spacing: -0.02em;
}

.settings-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    transition: background 150ms;
    font-family: var(--font-sans);
}

.settings-option:active { background: var(--bg-elevated); }

.settings-option-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-option-icon svg { width: 20px; height: 20px; stroke: var(--accent); }

.settings-option-text { flex: 1; }

.settings-option-label {
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.settings-option-desc {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Switch Plans list */
.switch-plan-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}
.switch-plan-item:last-child { border-bottom: none; }
.switch-plan-item--active { opacity: .85; }
.switch-plan-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.switch-plan-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switch-plan-date { font-size: 12px; color: var(--text-secondary); }
.switch-plan-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0;
}
.switch-plan-btn {
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.switch-plan-btn:active { opacity: .8; }

/* Skeleton for exercise rows */
.skeleton-row {
    height: 60px;
    margin-bottom: 2px;
    border-radius: 0;
}

.skeleton-row:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.skeleton-row:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Keep muscle-tag for training mode and modal */
.muscle-tag {
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* =============================================
   Exercise Modal - Bottom Sheet
   ============================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
    animation: fadeIn 150ms;
}

.modal {
    background: var(--bg-card);
    border-radius: 20px 20px 0 0;
    padding: 0 20px 40px;
    max-width: 500px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: slideUpSheet 300ms ease;
}

.drag-handle {
    width: 36px;
    height: 4px;
    background: #333;
    border-radius: 2px;
    margin: 12px auto 8px;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #222;
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms;
}

.modal-close:active { background: #333; }

.modal-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 16px;
    margin-bottom: 12px;
    padding-right: 40px;
}

.modal-muscles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.modal-muscles .muscle-tag {
    padding: 6px 14px;
    font-size: 12px;
}

/* GIF Container */
.gif-container {
    background: #0a0a0a;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
    min-height: 200px;
}

.gif-container img {
    width: 100%;
    max-width: 400px;
    max-height: 350px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.gif-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #222;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.gif-error {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

.gif-error svg { width: 48px; height: 48px; stroke: #333; margin-bottom: 12px; }

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.stat-card {
    background: #0a0a0a;
    padding: 14px 10px;
    border-radius: var(--radius-md);
    text-align: center;
}

.stat-label {
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

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

.stat-value.blue { color: var(--accent); }
.stat-value.green { color: var(--accent); }
.stat-value.orange { color: var(--warning); }

/* Tips */
.tips-card {
    background: #0a0a0a;
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
}

.tips-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--accent);
}

.tip-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: flex-start;
}

.tip-item:last-child { margin-bottom: 0; }

.tip-icon {
    color: var(--accent);
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
    font-weight: 700;
}

.tip-text {
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 13px;
}

/* Action Buttons */
.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.action-buttons.action-buttons-3col {
    grid-template-columns: 1fr 1fr 1fr;
}

.action-btn {
    padding: 14px;
    border-radius: var(--radius-md);
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 150ms;
    min-height: 48px;
    font-family: var(--font-sans);
}

.action-btn.primary {
    background: var(--accent);
    color: #000;
}

.action-btn.secondary {
    background: #222;
    color: #fff;
}

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

.action-btn.done {
    background: #222;
    color: var(--accent);
    border: 1.5px solid var(--accent);
}

.action-btn.swap {
    background: #1a1a1a;
    color: var(--warning);
    border: 1.5px solid #333;
}

/* =============================================
   Swap Panel
   ============================================= */

.swap-panel {
    margin-top: 16px;
    background: #0a0a0a;
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: slideUp 200ms ease;
}

.swap-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #1a1a1a;
}

.swap-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--warning);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.swap-panel-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #222;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swap-panel-close:active { background: #333; }

.swap-panel-list {
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.swap-panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 13px;
}

.swap-panel-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 13px;
}

.swap-alt-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #1a1a1a;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    transition: background 150ms;
    font-family: var(--font-sans);
}

.swap-alt-row:last-child { border-bottom: none; }
.swap-alt-row:active { background: #1a1a1a; }

.swap-alt-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1a1a1a;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swap-alt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.swap-alt-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swap-alt-muscles {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* =============================================
   Timer Modal
   ============================================= */

.timer-modal {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 32px;
}

.timer-modal.active {
    display: flex;
    animation: fadeIn 150ms;
}

.timer-ring-container {
    position: relative;
    width: 240px;
    height: 240px;
}

.timer-ring-container svg {
    transform: rotate(-90deg);
    width: 240px;
    height: 240px;
}

.timer-ring-bg { fill: none; stroke: #1a1a1a; stroke-width: 6; }

.timer-ring-fill {
    fill: none;
    stroke: var(--accent);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

.timer-display {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #fff;
}

.timer-label {
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 500;
}

.timer-buttons {
    display: flex;
    gap: 16px;
}

.timer-btn {
    padding: 14px 32px;
    border-radius: var(--radius-full);
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    min-height: 48px;
    transition: all 150ms;
    font-family: var(--font-sans);
}

.timer-btn:active { transform: scale(0.95); }
.timer-btn.stop { background: var(--danger); color: #fff; }
.timer-btn.add { background: #1a1a1a; color: #fff; }

/* =============================================
   Nutrition Section
   ============================================= */

.workout-section { display: none; }
.workout-section.active { display: block; }

.nutrition-section { display: none; }
.nutrition-section.active { display: block; animation: fadeIn 250ms; }

.nutrition-header {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px 20px;
    margin-bottom: 20px;
}

.nutrition-type {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 20px;
    background: #0a0a0a;
    border-radius: var(--radius-full);
    padding: 3px;
}

.nutrition-type-btn {
    padding: 10px 20px;
    border-radius: var(--radius-full);
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: all 150ms;
    min-height: 40px;
    flex: 1;
    font-family: var(--font-sans);
}

.nutrition-type-btn:active { transform: scale(0.95); }

.nutrition-type-btn.active {
    background: transparent;
    color: var(--accent);
    font-weight: 700;
}

.nutrition-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow: visible;
    margin-bottom: 20px;
}

.calorie-ring {
    position: relative;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.donut-svg { width: 100%; height: 100%; }

.calorie-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.calorie-ring-value {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.calorie-ring-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    font-weight: 500;
}

/* Hide donut (kept in HTML for easy revert) */
.donut-chart-hidden { display: none; }

/* SVG macro donut chart */
.radial-chart-wrap {
    width: 100%;
    padding: 8px 0 4px;
}

.macro-legend {
    width: 100%;
    max-width: 260px;
    margin: 16px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.macro-legend-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.macro-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.macro-legend-name {
    flex: 1;
    font-size: 14px;
    color: #bbb;
}

.macro-legend-grams {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    min-width: 48px;
    text-align: right;
}

.macro-legend-pct {
    font-size: 14px;
    font-weight: 600;
    color: #888;
    min-width: 38px;
    text-align: right;
}


.macro-bars { width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 0 4px; }

.macro-bar-row { display: flex; align-items: center; gap: 8px; }

.macro-bar-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.macro-bar-label {
    font-size: 11px;
    color: var(--text-secondary);
    width: 82px;
    flex-shrink: 0;
    font-weight: 500;
}

.macro-bar-track {
    flex: 1;
    height: 4px;
    background: #222;
    border-radius: 2px;
    overflow: hidden;
}

.macro-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 300ms ease;
}

.macro-bar-value {
    font-size: 13px;
    font-weight: 700;
    width: 40px;
    text-align: right;
    flex-shrink: 0;
}

.meal-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 10px;
}

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

.meal-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.meal-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #222;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.meal-time { font-weight: 700; font-size: 14px; }

.meal-calories {
    color: var(--accent);
    font-weight: 700;
    font-size: 13px;
}

.meal-items {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.7;
    padding-left: 36px;
}

/* =============================================
   Food Log
   ============================================= */

/* Main nutrition tabs (Plan / Log) */
.nutrition-main-tabs {
    display: flex;
    gap: 0;
    margin: 0 0 16px 0;
    background: #111;
    border-radius: 10px;
    padding: 3px;
}

.nutrition-main-tab {
    flex: 1;
    padding: 8px 0;
    background: none;
    border: none;
    border-radius: 8px;
    color: #666;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.nutrition-main-tab.active {
    background: var(--accent);
    color: #000;
}

/* Wider value column for "actual/target" display in log tab */
.macro-bar-value--log {
    width: auto;
    min-width: 80px;
    font-size: 11px;
    font-weight: 600;
    color: #888;
}

/* Training / Rest day toggle inside log summary */
.food-log-type-toggle {
    display: flex;
    background: #1a1a1a;
    border-radius: 8px;
    padding: 2px;
    margin-bottom: 12px;
}

.food-log-type-btn {
    flex: 1;
    padding: 6px 4px;
    background: none;
    border: none;
    border-radius: 6px;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: center;
}

.food-log-type-btn.active {
    background: transparent;
    color: var(--accent);
    font-weight: 700;
}

/* Date navigation */
.food-log-date-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 16px;
    gap: 12px;
}

.food-log-nav-btn {
    background: #1a1a1a;
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.food-log-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.food-log-date-label {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    flex: 1;
}

.food-log-date-label-btn {
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    flex: 1;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    font-family: var(--font-sans);
    transition: background 0.15s;
}

.food-log-date-label-btn:active { background: #1a1a1a; }

/* Food log calendar dropdown */
.fcal-dropdown {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 12px 12px 8px;
    margin-bottom: 12px;
    animation: fadeIn 180ms ease;
}

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

.fcal-month {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
}

.fcal-nav {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 22px;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: var(--font-sans);
    line-height: 1;
    transition: color 0.15s;
}

.fcal-nav:hover { color: #fff; }
.fcal-nav:disabled { opacity: 0.25; cursor: default; }

.fcal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.fcal-grid--hdr { margin-bottom: 4px; }

.fcal-day-hdr {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 2px 0;
}

.fcal-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.12s;
}

.fcal-cell:not(.fcal-future):not(.fcal-empty):hover { background: #2a2a2a; }

.fcal-empty { pointer-events: none; }

.fcal-future { opacity: 0.25; cursor: default; }

.fcal-today { color: #fff; font-weight: 600; }

.fcal-selected {
    background: var(--accent) !important;
    color: #000;
    font-weight: 700;
}

/* Progress summary */
.food-log-summary {
    background: #111;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

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

.food-log-targets-label {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    display: flex;
    align-items: center;
    gap: 8px;
}

.food-log-mode-badge {
    font-size: 11px;
    font-weight: 500;
    color: #555;
    background: #1a1a1a;
    border-radius: 6px;
    padding: 2px 6px;
}

.food-log-targets-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.food-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.food-progress-row:last-child { margin-bottom: 0; }

.food-progress-label {
    font-size: 12px;
    color: #888;
    width: 52px;
    flex-shrink: 0;
}

.food-progress-track {
    flex: 1;
    height: 6px;
    background: #222;
    border-radius: 3px;
    overflow: hidden;
}

.food-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.food-progress-values {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
}

.food-progress-sep {
    color: #444;
    margin: 0 1px;
}

/* Entries list */
.food-log-entries {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 80px;
}

.food-log-empty {
    text-align: center;
    color: #555;
    font-size: 14px;
    padding: 32px 0;
}

.food-log-entry {
    background: #111;
    border-radius: 12px;
    padding: 12px 14px;
}

.food-entry-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.food-entry-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.food-entry-type {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.food-entry-time {
    font-size: 12px;
    color: #555;
}

.food-entry-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.food-entry-kcal {
    font-size: 14px;
    font-weight: 700;
    color: #E2E8F0;
}

.food-entry-edit {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.food-entry-edit:active { color: var(--accent); }

.food-entry-delete {
    background: none;
    border: none;
    color: #444;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
}

.food-entry-delete:active { color: var(--danger); }

.food-entry-macros {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.food-macro-chip {
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    padding: 3px 8px;
    background: #1a1a1a;
}

.food-macro-chip.prot { color: #FF6B6B; }
.food-macro-chip.carb { color: #FFB800; }
.food-macro-chip.fat  { color: #00E6B0; }

.food-entry-comment {
    font-size: 12px;
    color: #555;
    margin-top: 6px;
    font-style: italic;
}

/* Add button */
.food-log-add-wrap {
    position: fixed;
    bottom: 72px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 50;
}

.food-log-add-btn {
    pointer-events: all;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 24px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.food-log-loading {
    display: flex;
    justify-content: center;
    padding: 40px;
}

/* Bottom sheet overlay */
.food-log-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 500;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}

.food-log-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.food-log-sheet {
    background: #111;
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 12px 20px 32px;
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
}

.food-log-overlay.active .food-log-sheet {
    transform: translateY(0);
}

.food-log-sheet-handle {
    width: 40px;
    height: 4px;
    background: #333;
    border-radius: 2px;
    margin: 0 auto 16px;
}

.food-log-sheet-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

/* Form inside sheet */
.food-log-form { display: flex; flex-direction: column; gap: 14px; }

.food-form-group { display: flex; flex-direction: column; gap: 6px; }

.food-form-group--half { flex: 1; }

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

.food-form-label {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.food-form-input, .food-form-select {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.food-form-input:focus, .food-form-select:focus {
    outline: none;
    border-color: var(--accent);
}

.food-form-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.6;
    cursor: pointer;
}

.food-form-error {
    color: var(--danger);
    font-size: 13px;
    text-align: center;
}

.food-form-save-btn {
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    margin-top: 4px;
}

.food-form-save-btn:disabled { opacity: 0.5; }

/* Targets mode toggle */
.food-targets-toggle {
    display: flex;
    background: #1a1a1a;
    border-radius: 10px;
    padding: 3px;
    gap: 0;
}

.food-targets-mode-btn {
    flex: 1;
    padding: 8px 6px;
    background: none;
    border: none;
    border-radius: 8px;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    text-align: center;
}

.food-targets-mode-btn.active {
    background: var(--accent);
    color: #000;
}

/* =============================================
   Bottom Navigation
   ============================================= */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    border-top: 1px solid #1a1a1a;
    padding: 6px 20px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
}

.nav-item {
    background: none;
    border: none;
    color: #555;
    padding: 6px 0;
    cursor: pointer;
    transition: all 200ms;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 0;
    flex: 1;
    position: relative;
    border-radius: 12px;
}

.nav-item:active { transform: scale(0.92); }

.nav-item.active {
    color: var(--accent);
    background: rgba(0, 230, 176, 0.08);
}

.nav-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.nav-label {
    display: none;
}

.nav-item-center {
    margin-top: -22px;
}

.nav-item-center.active {
    background: none;
}

.nav-item-center .nav-icon-center {
    width: 56px;
    height: 56px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================
   Home Section
   ============================================= */

.home-section { display: none; }
.home-section.active { display: block; animation: fadeIn 250ms; }

.home-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 500px;
    margin: 0 auto;
}

.home-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.home-card-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.home-workout-card {
    background: linear-gradient(135deg, rgba(0,230,176,0.12) 0%, rgba(0,230,176,0.04) 100%);
    border: 1px solid rgba(0,230,176,0.15);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
}

.home-workout-name {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 4px;
}

.home-workout-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.home-workout-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.home-workout-btn {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.home-workout-btn:active {
    transform: scale(0.98);
}

.home-workout-btn.completed {
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
    cursor: default;
}

.home-rest-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 32px 20px;
    text-align: center;
}

.home-rest-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--accent);
}

.home-rest-icon svg {
    width: 48px;
    height: 48px;
}

.home-rest-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.home-rest-msg {
    font-size: 14px;
    color: var(--text-muted);
}

.home-streak-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.home-streak-icon {
    font-size: 32px;
}

.home-streak-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.home-streak-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.home-stats-row {
    margin-left: auto;
    display: flex;
    gap: 16px;
}

.home-stat-mini {
    text-align: center;
}

.home-stat-mini-value {
    font-size: 18px;
    font-weight: 700;
}

.home-stat-mini-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.home-nutrition-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    padding: 0;
}

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

.home-action-btn {
    flex: 1;
    padding: 12px;
    background: var(--bg-input);
    border: 1px solid #333;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

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

/* =============================================
   Explore Section
   ============================================= */

.explore-section { display: none; }
.explore-section.active { display: block; animation: fadeIn 250ms; }

.explore-search-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid #333;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 15px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.explore-search-input::placeholder {
    color: #666;
}

.explore-muscle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
}

.explore-muscle-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1.5px solid #2a2a2a;
    cursor: pointer;
    transition: all 200ms;
    font-size: 14px;
    font-weight: 600;
    color: #aaa;
}

.explore-muscle-card.active {
    border-color: var(--accent);
    background: rgba(0,230,176,0.07);
    color: var(--accent);
}

.explore-muscle-card:active {
    transform: scale(0.97);
}


.explore-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.explore-filter-pill {
    padding: 9px 18px;
    background: var(--card-bg);
    border: 1px solid #333;
    border-radius: var(--radius-full);
    color: #aaa;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms;
    white-space: nowrap;
}

.explore-filter-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
}

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

.explore-exercise-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: var(--card-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 200ms;
}

.explore-exercise-card:active {
    background: rgba(255,255,255,0.06);
}

.explore-card-gif {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    background: #1a1a1a;
    flex-shrink: 0;
}

.explore-card-gif-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.explore-card-gif-placeholder svg {
    width: 28px;
    height: 28px;
    stroke: #444;
    fill: none;
    stroke-width: 1.5;
}

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

.explore-card-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.explore-card-muscles {
    font-size: 12px;
    color: var(--text-muted);
}

.explore-load-more-btn {
    display: block;
    width: 100%;
    padding: 14px;
    margin-top: 12px;
    background: var(--bg-input);
    border: 1px solid #333;
    border-radius: var(--radius-md);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.explore-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.explore-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.explore-result-count {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Explore Detail Overlay */
.explore-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms;
}

.explore-detail-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.explore-detail-card {
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--card-bg);
    border-radius: 20px 20px 0 0;
    padding: 16px 20px 32px;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.explore-detail-overlay.active .explore-detail-card {
    transform: translateY(0);
}

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

.explore-detail-name {
    font-size: 18px;
    font-weight: 700;
    flex: 1;
}

.explore-detail-close {
    background: none;
    border: none;
    color: #888;
    font-size: 28px;
    cursor: pointer;
    padding: 0 4px;
}

.explore-detail-gif {
    width: 100%;
    max-height: 250px;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: #111;
    margin-bottom: 16px;
}

.explore-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.explore-detail-tag {
    padding: 4px 12px;
    background: rgba(0,230,176,0.1);
    color: var(--accent);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}

.explore-detail-tag.secondary {
    background: rgba(255,255,255,0.06);
    color: #aaa;
}

.explore-detail-tag.equipment {
    background: rgba(255,184,0,0.1);
    color: #FFB800;
}

.explore-detail-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: 16px 0 10px;
}

.explore-detail-instructions {
    list-style: none;
    padding: 0;
    margin: 0;
}

.explore-detail-instructions li {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 14px;
    line-height: 1.5;
}

.explore-detail-step-num {
    color: var(--accent);
    font-weight: 700;
    flex-shrink: 0;
}

/* =============================================
   Profile Section
   ============================================= */

.profile-section { display: none; }
.profile-section.active { display: block; animation: fadeIn 250ms; }

.profile-header-card {
    text-align: center;
    margin-bottom: 24px;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: #000;
    margin: 0 auto 12px;
}

.profile-avatar--photo {
    object-fit: cover;
    background: transparent;
}

.profile-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.profile-badge {
    display: inline-block;
    padding: 4px 14px;
    background: var(--accent-surface);
    color: var(--accent);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-stats-row {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}

.stat-card-rect {
    flex: 1;
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
}

.stat-card-value {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-card-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.profile-info-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 4px 16px;
    margin-bottom: 24px;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #1a1a1a;
}

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

.info-row-icon {
    width: 28px;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-row-icon svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.info-row-label {
    font-size: 14px;
    color: var(--text-secondary);
    flex: 1;
}

.info-row-value {
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

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

.profile-edit-btn {
    width: 100%;
    padding: 16px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    min-height: 52px;
    transition: all 150ms;
    font-family: var(--font-sans);
    box-shadow: 0 4px 20px rgba(0, 230, 176, 0.25);
}

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

.profile-reset-btn {
    width: 100%;
    padding: 14px;
    background: var(--bg-card);
    border: none;
    color: var(--text-secondary);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
    transition: all 150ms;
    font-family: var(--font-sans);
}

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

.profile-logout-btn {
    width: 100%;
    padding: 14px;
    background: transparent;
    border: 1.5px solid #222;
    color: var(--danger);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
    transition: all 150ms;
    font-family: var(--font-sans);
    margin-top: 8px;
}

.profile-logout-btn:active { background: var(--danger-surface); }

/* =============================================
   Profile Edit - Tappable field affordance
   ============================================= */

/* Stat cards (weight/height/days) get an edit affordance */
.stat-card-rect.editable {
    cursor: pointer;
    position: relative;
    transition: background 150ms, transform 150ms;
}

.stat-card-rect.editable:active {
    background: var(--bg-card-hover);
    transform: scale(0.97);
}

.stat-card-rect.editable::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    border-radius: 1px;
    opacity: 0.6;
}

/* Info rows (goal/session/equipment/conditions) get edit affordance */
.info-row.editable {
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 150ms;
    margin: 0 -8px;
    padding: 14px 8px;
}

.info-row.editable:active {
    background: var(--bg-elevated);
}

.info-row-chevron {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 4px;
}

.info-row-chevron svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =============================================
   Profile Edit Bottom Sheet
   ============================================= */

.profile-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 300;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.profile-edit-overlay.active {
    display: flex;
    animation: fadeIn 150ms;
}

.profile-edit-sheet {
    background: var(--bg-card);
    border-radius: 20px 20px 0 0;
    padding: 0 20px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
    max-width: 500px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: slideUpSheet 300ms ease;
}

.profile-edit-sheet-handle {
    width: 36px;
    height: 4px;
    background: #333;
    border-radius: 2px;
    margin: 12px auto 20px;
}

.profile-edit-sheet-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-primary);
}

/* Number input */
.profile-edit-field {
    margin-bottom: 20px;
}

.profile-edit-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-edit-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1.5px solid #333;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-sans);
    min-height: 56px;
    transition: border-color 150ms;
    -moz-appearance: textfield;
}

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

.profile-edit-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Days stepper */
.profile-edit-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-input);
    border: 1.5px solid #333;
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 56px;
}

.nav-icon-center svg {
    width: 24px;
    height: 24px;
    stroke: #000;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stepper-btn {
    width: 56px;
    height: 56px;
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms;
    flex-shrink: 0;
    font-family: var(--font-sans);
}

.stepper-btn:active { background: var(--bg-elevated); }
.stepper-btn:disabled { color: #444; cursor: not-allowed; }

.stepper-value {
    flex: 1;
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.stepper-suffix {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    padding-right: 16px;
}

/* Radio-style selector (goal / session) */
.profile-edit-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-edit-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 150ms, background 150ms;
    min-height: 52px;
    width: 100%;
    text-align: left;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
}

.profile-edit-option.selected {
    border-color: var(--accent);
    background: var(--accent-surface);
}

.profile-edit-option:active {
    background: var(--bg-elevated);
}

.option-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #444;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 150ms;
}

.profile-edit-option.selected .option-radio {
    border-color: var(--accent);
}

.option-radio-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    display: none;
}

.profile-edit-option.selected .option-radio-dot {
    display: block;
}

.option-label { flex: 1; }

/* Select all button */
.profile-select-all-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: transparent;
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-md);
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}

.profile-select-all-btn:active {
    background: var(--accent-surface);
}

.profile-select-all-btn.all-selected {
    background: var(--accent-surface);
}

/* Checkbox multi-select (equipment / conditions) */
.profile-edit-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-edit-custom-text {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #333;
}

.profile-edit-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 150ms, background 150ms;
    min-height: 52px;
    width: 100%;
    text-align: left;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
}

.profile-edit-checkbox.selected {
    border-color: var(--accent);
    background: var(--accent-surface);
}

.profile-edit-checkbox:active {
    background: var(--bg-elevated);
}

.option-check {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid #444;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 150ms, background 150ms;
}

.profile-edit-checkbox.selected .option-check {
    border-color: var(--accent);
    background: var(--accent);
}

.option-check svg {
    width: 12px;
    height: 12px;
    stroke: #000;
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: none;
}

.profile-edit-checkbox.selected .option-check svg {
    display: block;
}

/* Save/Cancel footer */
.profile-edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    padding-bottom: 4px;
}

.profile-edit-save-btn {
    flex: 1;
    padding: 16px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    min-height: 52px;
    transition: all 150ms;
    font-family: var(--font-sans);
}

.profile-edit-save-btn:active { transform: scale(0.97); }
.profile-edit-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.profile-edit-cancel-btn {
    padding: 16px 20px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: none;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    min-height: 52px;
    transition: all 150ms;
    font-family: var(--font-sans);
}

.profile-edit-cancel-btn:active { transform: scale(0.97); }

/* Inline toast feedback */
.profile-edit-toast {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 10px;
    border-radius: var(--radius-md);
    margin-top: 10px;
    display: none;
}

.profile-edit-toast.success {
    display: block;
    background: var(--accent-surface);
    color: var(--accent);
}

.profile-edit-toast.error {
    display: block;
    background: var(--danger-surface);
    color: var(--danger);
}

/* =============================================
   Generate Plan Button
   ============================================= */

.generate-plan-container { text-align: center; padding: 32px 20px; }

.generate-plan-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 28px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 150ms;
    min-height: 0;
    font-family: var(--font-sans);
    box-shadow: 0 4px 20px rgba(0, 230, 176, 0.25);
}

.generate-plan-btn:active { transform: scale(0.97); }
.generate-plan-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.generate-plan-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.generate-plan-btn .spinner { width: 20px; height: 20px; border-width: 2px; border-top-color: #000; border-color: rgba(0,0,0,0.2); }

/* =============================================
   Phase Indicator
   ============================================= */

.phase-indicator {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 12px;
}

.phase-name { font-weight: 700; font-size: 15px; color: var(--accent); margin-bottom: 2px; }
.phase-week { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }

.phase-bar {
    height: 4px;
    background: #222;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

.phase-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 300ms;
}

.phase-desc { font-size: 12px; color: var(--text-secondary); font-style: italic; }

/* =============================================
   Adaptation Banner
   ============================================= */

.adaptation-banner {
    background: var(--accent-surface);
    border: 1px solid rgba(0, 230, 176, 0.15);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--accent);
}

.adapt-restore-btn {
    background: none;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 150ms;
    min-height: 36px;
    font-family: var(--font-sans);
}

.adapt-restore-btn:active { background: var(--accent); color: #000; }

/* (workout actions removed - now in settings bottom sheet) */

/* =============================================
   Wizard Modal
   ============================================= */

.wizard-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 500;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: fadeIn 150ms;
}

.wizard-container {
    max-width: 500px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.wizard-header {
    padding: 20px;
    padding-top: max(20px, env(safe-area-inset-top));
    position: relative;
}

.wizard-close {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    right: 16px;
    background: #1a1a1a;
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-close:active { background: #333; }

.wizard-step-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.wizard-progress-track {
    height: 3px;
    background: #1a1a1a;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 12px;
}

.wizard-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 300ms ease;
}

.wizard-body {
    flex: 1;
    padding: 0 20px;
    padding-bottom: 120px;
    animation: fadeIn 250ms;
}

.wizard-body .step-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.wizard-body .step-subtitle {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 24px;
}

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

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

.wizard-body .form-group input,
.wizard-body .form-group textarea {
    width: 100%;
    padding: 14px;
    background: var(--bg-input);
    border: 1.5px solid #333;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 15px;
    font-family: var(--font-sans);
    transition: border-color 150ms;
    min-height: 48px;
}

.wizard-body .form-group input:focus,
.wizard-body .form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.wizard-body .form-group input::placeholder,
.wizard-body .form-group textarea::placeholder { color: #555; }

.wizard-body .checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; }

.wizard-body .checkbox-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1.5px solid #333;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 150ms;
    font-size: 14px;
    color: #fff;
    min-height: 44px;
}

.wizard-body .checkbox-option:active { transform: scale(0.97); }
.wizard-body .checkbox-option input[type="checkbox"] { display: none; }

.wizard-body .checkbox-option.selected {
    border-color: var(--accent);
    background: var(--accent-surface);
    color: var(--accent);
}

.wizard-body .radio-group { display: flex; flex-direction: column; gap: 10px; }

.wizard-body .radio-option {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1.5px solid #333;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 150ms;
    color: #fff;
    min-height: 48px;
}

.wizard-body .radio-option:active { transform: scale(0.98); }

.wizard-body .radio-option.selected {
    border-color: var(--accent);
    background: var(--accent-surface);
}

.wizard-body .radio-option .radio-label { font-size: 15px; }
.wizard-body .radio-option.selected .radio-label { color: var(--accent); font-weight: 600; }

.wizard-body .profile-summary-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
}

.wizard-body .profile-summary-card h3 {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wizard-body .summary-field {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #1a1a1a;
    font-size: 14px;
}

.wizard-body .summary-field:last-child { border-bottom: none; }
.wizard-body .summary-label { color: var(--text-secondary); }
.wizard-body .summary-value { font-weight: 600; }

.wizard-body .edit-profile-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.wizard-body .edit-profile-link:hover { text-decoration: underline; }

.wizard-body .range-container { text-align: center; }

.wizard-body .range-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 12px;
}

.wizard-body input[type="range"] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    background: #222;
    border-radius: 2px;
    outline: none;
    border: none;
}

.wizard-body input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
}

.wizard-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    background: #000;
    border-top: 1px solid #1a1a1a;
    display: flex;
    gap: 10px;
    z-index: 510;
}

.wizard-footer .btn-back,
.wizard-footer .btn-next {
    flex: 1;
    padding: 14px;
    border-radius: var(--radius-md);
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 150ms;
    min-height: 48px;
    font-family: var(--font-sans);
}

.wizard-footer .btn-back { background: #1a1a1a; color: #999; }
.wizard-footer .btn-next { background: var(--accent); color: #000; }
.wizard-footer .btn-next:active { transform: scale(0.97); }
.wizard-footer .btn-next:disabled { opacity: 0.4; cursor: not-allowed; }

/* Wizard Loading */
.wizard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    gap: 20px;
}

.wizard-loading .spinner-large {
    width: 48px;
    height: 48px;
    border: 3px solid #1a1a1a;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.wizard-loading .loading-message {
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 500;
}

.wizard-loading .loading-submessage {
    font-size: 13px;
    color: var(--text-muted);
}

/* =============================================
   Section transitions
   ============================================= */

.workout-section.active,
.nutrition-section.active,
.profile-section.active,
.home-section.active,
.explore-section.active,
.progress-section.active {
    animation: fadeIn 250ms;
}

/* =============================================
   Confetti
   ============================================= */

.confetti-particle {
    position: fixed;
    top: -10px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    animation: confetti-fall 3s ease-out forwards;
    z-index: 1000;
    pointer-events: none;
}

/* =============================================
   Progress Section
   ============================================= */

.progress-section { display: none; }
.progress-section.active { display: block; animation: fadeIn 250ms; }

#progress-content {
    max-width: 500px;
    margin: 0 auto;
}

.history-loading {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
}

/* =============================================
   Month Calendar (Hevy-style)
   ============================================= */

.progress-calendar {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px 16px;
    margin-bottom: 16px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.calendar-month-year {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.calendar-nav {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1a1a1a;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms;
}

.calendar-nav:active { background: #333; }
.calendar-nav svg { width: 18px; height: 18px; }

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    max-width: 400px;
    margin: 0 auto;
    touch-action: none;
    user-select: none;
}

.calendar-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    padding: 4px 0 8px;
}

.calendar-day {
    width: 100%;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 150ms;
    position: relative;
    font-family: var(--font-sans);
    padding: 2px 0;
}

.calendar-day.has-label {
    min-height: 52px;
    justify-content: flex-start;
    padding: 4px 2px;
}

.calendar-day.empty {
    cursor: default;
}

.calendar-day-num {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid transparent;
    flex-shrink: 0;
}

.calendar-day-label {
    font-size: 8px;
    line-height: 1.1;
    color: var(--text-secondary);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40px;
    display: block;
    margin-top: 1px;
}

.calendar-day.has-workout .calendar-day-label {
    color: var(--accent);
}

.calendar-day.has-scheduled .calendar-day-label {
    color: var(--text-secondary);
    opacity: 0.7;
}

.calendar-day.selected .calendar-day-label {
    color: var(--accent);
    opacity: 1;
}

.calendar-day-label.rest {
    opacity: 0.45;
}

.calendar-day:not(.empty):hover {
    background: #1a1a1a;
}

.calendar-day:not(.empty):active {
    transform: scale(0.9);
}

.calendar-day.today {
    border: 1.5px solid var(--accent);
}

.calendar-day.today .calendar-day-num {
    color: var(--accent);
    font-weight: 700;
}

.calendar-day.has-workout .calendar-day-num {
    color: #fff;
}

.calendar-day.has-scheduled .calendar-day-num {
    color: var(--text-secondary);
}

.calendar-day.selected {
    background: #1a1a1a;
}

.calendar-day.selected .calendar-day-num {
    color: var(--accent);
    font-weight: 700;
}

.calendar-day.future {
    opacity: 0.5;
    cursor: pointer;
}

.calendar-day.dragging {
    opacity: 0.4;
    transform: scale(0.95);
    border: 1px dashed var(--accent);
}

.calendar-day.drop-target {
    border: 1px dashed var(--accent);
    opacity: 0.8;
}

.calendar-day.drop-hover {
    background: var(--accent);
    opacity: 1;
}

.calendar-day.drop-hover .calendar-day-num,
.calendar-day.drop-hover .calendar-day-label {
    color: #000;
}

.calendar-day-check {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-day-check svg {
    width: 8px;
    height: 8px;
    stroke: #000;
    stroke-width: 3;
    fill: none;
}

/* =============================================
   Progress Stats Row
   ============================================= */

.progress-stats-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.progress-stat-card {
    flex: 1;
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
}

.progress-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 4px;
}

.progress-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* =============================================
   Day Detail Panel
   ============================================= */

/* Day Detail Bottom Sheet Modal */
.day-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.day-detail-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.day-detail-sheet {
    background: var(--bg-card);
    border-radius: 20px 20px 0 0;
    padding: 12px 20px 28px;
    width: 100%;
    max-width: 500px;
    max-height: 70vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

.day-detail-overlay.active .day-detail-sheet {
    transform: translateY(0);
}

.day-detail-sheet .drag-handle {
    width: 36px;
    height: 4px;
    background: #444;
    border-radius: 2px;
    margin: 0 auto 12px;
}

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

.day-detail-date {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-transform: capitalize;
}

.day-detail-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #222;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.day-detail-close:active { background: #333; }

.day-detail-picker-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.day-detail-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

.day-detail-workout {
    background: #0a0a0a;
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 10px;
}

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

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

.day-detail-workout-name {
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

.day-detail-workout-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.day-detail-rating {
    margin-bottom: 10px;
}

.day-detail-exercises {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.day-detail-exercise {
    font-size: 13px;
    color: var(--text-secondary);
    padding-left: 12px;
    position: relative;
}

.day-detail-exercise::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
}

.day-detail-workout-meta-text {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.day-detail-swap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1a1a1a;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 150ms;
}

.day-detail-swap:active {
    background: #333;
}

.day-detail-go-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 150ms;
    font-family: var(--font-sans);
}

.day-detail-go-btn:active {
    opacity: 0.8;
}

.day-detail-go-btn svg {
    width: 16px;
    height: 16px;
    stroke: #000;
}

.day-detail-missed {
    display: block;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
    text-decoration: line-through;
}

.day-detail-missed-badge {
    font-size: 11px;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.day-detail-edit-btn,
.history-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background: #1a1a1a;
    color: var(--text-secondary);
    border: 1px solid #333;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms;
    font-family: var(--font-sans);
}

.day-detail-edit-btn:active,
.history-edit-btn:active {
    background: #333;
}

/* =============================================
   History Tabs & Cards
   ============================================= */

.history-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: #0a0a0a;
    border-radius: var(--radius-full);
    padding: 3px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.history-tab {
    flex: 1;
    padding: 10px 16px;
    border-radius: var(--radius-full);
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: all 150ms;
    min-height: 40px;
    font-family: var(--font-sans);
}

.history-tab:active { transform: scale(0.95); }

.history-tab.active {
    background: #222;
    color: #fff;
}

.history-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

.history-card {
    background: var(--bg-card);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
}

.history-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    cursor: pointer;
    transition: background 150ms;
}

.history-card-header:active { background: var(--bg-card-hover); }

.history-card-left { flex: 1; min-width: 0; }

.history-card-date {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.history-card-day {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.history-card-right {
    text-align: right;
}

.history-card-meta {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.history-card-stars { font-size: 12px; }
.history-card-stars .star { color: #333; }
.history-card-stars .star.filled { color: var(--warning); }

.history-card-chevron {
    width: 18px;
    height: 18px;
    color: #333;
    flex-shrink: 0;
    transition: transform 200ms;
}

.history-card.expanded .history-card-chevron {
    transform: rotate(180deg);
}

.history-card-detail {
    padding: 0 16px 16px;
    border-top: 1px solid #1a1a1a;
}

.history-detail-empty {
    padding: 16px 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.history-exercise-row {
    padding: 10px 0;
    border-bottom: 1px solid #1a1a1a;
}

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

.history-exercise-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.history-exercise-sets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.detail-set {
    font-size: 12px;
    color: var(--text-secondary);
    background: #1a1a1a;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.detail-set-effort {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: #FF6B2B;
    line-height: 0;
}

/* =============================================
   Metrics Summary
   ============================================= */

.metrics-summary-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.metric-summary-card {
    flex: 1;
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px 10px;
    text-align: center;
    position: relative;
}

.metric-summary-value {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.metric-summary-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.metric-change {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.metric-change.up { background: rgba(0, 230, 176, 0.15); color: var(--accent); }
.metric-change.down { background: rgba(255, 68, 68, 0.15); color: var(--danger); }

.metrics-timeline {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 4px 16px;
}

.metric-entry {
    padding: 14px 0;
    border-bottom: 1px solid #1a1a1a;
}

.metric-entry:last-child { border-bottom: none; }

.metric-entry-date {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.metric-entry-values {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.metric-entry-notes {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-style: italic;
}

/* Body Log Button */
.body-log-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1.5px solid #333;
    border-radius: var(--radius-full);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms;
    font-family: var(--font-sans);
    margin-bottom: 16px;
    box-sizing: border-box;
}

.body-log-btn:active { transform: scale(0.97); }
.body-log-btn svg { width: 18px; height: 18px; }

/* Body Log Modal Form */
.body-log-field {
    margin-bottom: 16px;
}

.body-log-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.body-log-field input,
.body-log-field textarea {
    width: 100%;
    padding: 14px;
    background: var(--bg-input);
    border: 1.5px solid #333;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: 15px;
    font-family: var(--font-sans);
    transition: border-color 150ms;
}

.body-log-field input:focus,
.body-log-field textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.body-log-field input::placeholder,
.body-log-field textarea::placeholder {
    color: #555;
}

.body-log-bp-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.body-log-bp-row input { flex: 1; }

.body-log-bp-sep {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-secondary);
}

.body-log-save-btn {
    width: 100%;
    padding: 16px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 150ms;
    font-family: var(--font-sans);
    margin-top: 8px;
}

.body-log-save-btn:active { transform: scale(0.97); }
.body-log-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Difficulty Rating Buttons */
.difficulty-rating {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 16px 0;
}

.diff-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1a1a1a;
    border: 2px solid #333;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 150ms;
    font-family: var(--font-sans);
}

.diff-btn:active { transform: scale(0.9); }

.diff-btn.selected {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
}

.difficulty-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Training Sets Log */
.training-sets-log {
    width: 100%;
    max-width: 400px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
}

.training-sets-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}

.training-sets-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.training-sets-effort-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.set-log-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.set-log-row:last-child { margin-bottom: 0; }

.set-log-number {
    width: 48px;
    min-width: 42px;
    flex-shrink: 1;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.set-log-input {
    width: 70px;
    min-width: 0;
    flex-shrink: 1;
    padding: 10px 8px;
    background: #0a0a0a;
    border: 1.5px solid #333;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 15px;
    text-align: center;
    font-family: var(--font-sans);
}

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

.set-log-input.from-prev {
    color: var(--text-secondary);
    border-color: #2a2a2a;
    font-style: italic;
}

.set-input-wrap {
    position: relative;
    display: inline-flex;
    width: 70px;
    flex-shrink: 1;
    min-width: 0;
}

.set-input-wrap .set-log-input {
    width: 100%;
}

.set-delta-badge {
    position: absolute;
    top: -6px;
    right: -4px;
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

.set-delta-badge.positive {
    color: var(--accent);
}

.set-delta-badge.negative {
    color: #e74c3c;
}

.set-delta-badge.neutral {
    color: #555;
}

.training-sets-prev-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.set-log-x {
    color: var(--text-secondary);
    font-size: 14px;
}

.set-effort {
    display: flex;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
    align-items: center;
}

.effort-flame {
    background: transparent;
    border: none;
    padding: 1px;
    cursor: pointer;
    color: #333;
    line-height: 0;
    transition: color 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.effort-flame:active { transform: scale(0.82); }

.effort-hint .effort-flame.lit svg circle { fill: transparent; stroke: currentColor; stroke-width: 1.5; }
.effort-hint.set-log-row[data-effort="1"] .effort-flame.lit { color: #22C55E; }
.effort-hint.set-log-row[data-effort="2"] .effort-flame.lit { color: #86EFAC; }
.effort-hint.set-log-row[data-effort="3"] .effort-flame.lit { color: #EAB308; }
.effort-hint.set-log-row[data-effort="4"] .effort-flame.lit { color: #F97316; }
.effort-hint.set-log-row[data-effort="5"] .effort-flame.lit { color: #EF4444; }

.set-log-row[data-effort="1"] .effort-flame.lit { color: #22C55E; }
.set-log-row[data-effort="2"] .effort-flame.lit { color: #86EFAC; }
.set-log-row[data-effort="3"] .effort-flame.lit { color: #EAB308; }
.set-log-row[data-effort="4"] .effort-flame.lit { color: #F97316; }
.set-log-row[data-effort="5"] .effort-flame.lit { color: #EF4444; }

/* GIF Placeholder */
.gif-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    color: #333;
}

.explore-exercise-card .gif-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    flex-shrink: 0;
}

.gif-placeholder svg {
    width: 24px;
    height: 24px;
}

/* =============================================
   Planner Section
   ============================================= */
.planner-section {
    padding: 20px 16px 100px;
    max-width: 500px;
    margin: 0 auto;
}

.planner-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

/* Monthly Calendar */
.pcal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0 4px;
}

.pcal-month-year {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-transform: capitalize;
}

.pcal-nav {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms;
}

.pcal-nav:active { background: #333; }
.pcal-nav svg { width: 18px; height: 18px; }

.pcal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.pcal-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    padding: 4px 0;
}

.pcal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.pcal-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 2px 4px;
    min-height: 52px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 150ms;
    font-family: var(--font-sans);
    position: relative;
}

.pcal-day.empty { cursor: default; min-height: 0; }

.pcal-day-num {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1;
}

.pcal-day.today { background: rgba(0, 230, 176, 0.08); }
.pcal-day.today .pcal-day-num { color: var(--accent); font-weight: 700; }
.pcal-day.has-completed .pcal-day-num { color: #fff; font-weight: 600; }
.pcal-day.selected { background: var(--accent); }
.pcal-day.selected .pcal-day-num { color: #000; font-weight: 700; }
.pcal-day.future { opacity: 0.4; }
.pcal-day:not(.empty):not(.future):active { transform: scale(0.92); }

.pcal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 2px;
}

.pcal-day.selected .pcal-dot { background: #000; }

.pcal-workout-label {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}

.pcal-day.has-completed .pcal-workout-label { color: var(--accent); }
.pcal-day.selected .pcal-workout-label { color: #000; }

/* Plan Timeline */
.planner-section > div {
    margin-bottom: 20px;
}

.planner-timeline-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 20px;
}

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

.planner-timeline-phase {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.planner-timeline-week {
    font-size: 13px;
    color: var(--accent);
    font-weight: 600;
}

.planner-timeline-bar {
    height: 8px;
    background: #222;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.planner-timeline-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #00b894);
    border-radius: 4px;
    transition: width 300ms ease;
}

.planner-timeline-dates {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
}

.planner-timeline-alert,
.planner-timeline-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
}

.planner-timeline-alert {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.planner-timeline-warning {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.planner-timeline-alert svg,
.planner-timeline-warning svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* No Plan State */
.planner-no-plan {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.planner-no-plan svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.planner-no-plan p {
    font-size: 14px;
    line-height: 1.5;
}

/* Day Detail Panel */
.pcal-detail {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-top: 12px;
    animation: slideUp 200ms ease;
}

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

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

.pcal-detail-date {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: capitalize;
}

.pcal-detail-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.pcal-detail-workout {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 8px;
}

.pcal-detail-workout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pcal-detail-workout-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.pcal-detail-swap {
    background: none;
    border: 1.5px solid #333;
    border-radius: 8px;
    color: var(--text-secondary);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.pcal-detail-swap:active {
    background: rgba(255,255,255,0.05);
}

.pcal-detail-workout-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.pcal-detail-exercises {
    margin-top: 8px;
}

.pcal-detail-exercise {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 0;
    border-bottom: 1px solid #222;
}

.pcal-detail-exercise:last-child { border-bottom: none; }

.pcal-detail-go-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: #000;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-sans);
    cursor: pointer;
    margin-top: 12px;
}

.pcal-detail-go-btn:active { opacity: 0.8; }

.pcal-detail-rest {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 14px;
    font-style: italic;
}

.pcal-detail-rating {
    display: flex;
    gap: 2px;
    margin-top: 4px;
}

/* Light mode planner overrides */
.light-mode .pcal-nav { background: #f5f5f5; color: #333; }
.light-mode .pcal-month-year { color: #333; }
.light-mode .pcal-day.today { background: rgba(0, 200, 150, 0.1); }
.light-mode .pcal-day.selected { background: var(--accent); }
.light-mode .pcal-detail { background: #f5f5f5; }
.light-mode .pcal-detail-workout { background: #fff; }
.light-mode .planner-timeline-card { background: #f5f5f5; }
.light-mode .planner-timeline-bar { background: #ddd; }

/* =============================================
   Plan Builder
   ============================================= */
.builder-template-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.builder-template-card.full-width {
    grid-column: 1 / -1;
}

.builder-template-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 200ms ease;
    font-family: var(--font-sans);
    position: relative;
    overflow: hidden;
}

.builder-template-card:hover {
    background: #222;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 255, 200, 0.15);
}

.builder-template-card:active {
    transform: translateY(0) scale(0.98);
}

.builder-template-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.builder-template-desc {
    font-size: 13px;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 8px;
}

.builder-template-days {
    font-size: 11px;
    color: #888;
    line-height: 1.4;
    padding-top: 8px;
    border-top: 1px solid #333;
}

/* Custom day picker */
.builder-custom-count {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
}

.builder-count-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid #333;
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    transition: all 150ms;
    font-family: var(--font-sans);
}

.builder-count-btn:active {
    transform: scale(0.9);
}

.builder-count-btn:hover {
    border-color: var(--accent);
}

.builder-count-value {
    font-size: 48px;
    font-weight: 700;
    color: var(--accent);
    min-width: 60px;
    text-align: center;
}

.builder-custom-names {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    margin: 0 auto;
}

.builder-custom-day-row {
    display: flex;
    gap: 10px;
}

.builder-custom-day-input {
    flex: 1;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1.5px solid #333;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-sans);
}

.builder-custom-day-input:focus {
    outline: none;
    border-color: var(--accent);
}

.builder-custom-day-select {
    width: 120px;
    padding: 12px 10px;
    background: var(--bg-card);
    border: 1.5px solid #333;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-sans);
}

.builder-custom-day-select:focus {
    outline: none;
    border-color: var(--accent);
}

/* Build step */
.builder-day-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
}

.builder-day-tab {
    padding: 10px 16px;
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 150ms;
    font-family: var(--font-sans);
}

.builder-day-tab.active {
    background: rgba(0, 255, 200, 0.1);
    border-color: var(--accent);
    color: var(--accent);
}

.builder-search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.builder-search-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1.5px solid #333;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font-sans);
    margin-bottom: 12px;
    box-sizing: border-box;
}

.builder-search-input:focus {
    outline: none;
    border-color: var(--accent);
}

.builder-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.builder-filter-btn {
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1.5px solid transparent;
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 150ms;
    font-family: var(--font-sans);
}

.builder-filter-btn.active {
    background: var(--accent);
    color: #000;
    font-weight: 600;
}

.builder-exercise-results {
    max-height: 40vh;
    min-height: 200px;
    overflow-y: auto;
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.builder-exercise-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #222;
    cursor: pointer;
    transition: background 150ms;
}

.builder-exercise-item:last-child {
    border-bottom: none;
}

.builder-exercise-item:active {
    background: rgba(0, 255, 200, 0.1);
}

.builder-exercise-gif {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #1a1a1a;
    flex-shrink: 0;
}

.builder-exercise-gif img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.builder-exercise-info {
    flex: 1;
}

.builder-exercise-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.builder-exercise-muscle {
    font-size: 11px;
    color: var(--text-secondary);
}

.builder-day-exercises {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 12px;
    min-height: 100px;
    margin-bottom: 20px;
}

.builder-day-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.builder-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.builder-section-divider::before,
.builder-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #2a2a2a;
}

.builder-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.builder-empty-day {
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 20px;
}

.builder-added-exercise {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #0a0a0a;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.builder-added-exercise:last-child {
    margin-bottom: 0;
}

.builder-added-gif {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: #1a1a1a;
}

.builder-added-info {
    flex: 1;
}

.builder-added-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.builder-added-volume {
    font-size: 11px;
    color: var(--accent);
}

.builder-remove-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.2);
    border: none;
    color: #ef4444;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.builder-drag-handle {
    color: #555;
    cursor: grab;
    padding: 4px;
    font-size: 14px;
}

.builder-day-tab-count {
    opacity: 0.7;
    margin-left: 4px;
}

.builder-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 13px;
}

.builder-empty-results {
    text-align: center;
    color: var(--text-secondary);
    padding: 20px;
    font-size: 13px;
}

.builder-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 255, 200, 0.15);
    border: none;
    color: var(--accent);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.builder-add-btn.added {
    background: #333;
    color: #666;
    cursor: default;
}

.builder-exercise-item.added {
    opacity: 0.5;
}

.builder-exercise-item:hover {
    background: rgba(0, 230, 176, 0.08);
}

/* Builder Exercise Preview Modal */
.builder-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 200ms ease;
}

.builder-preview-card {
    background: var(--bg-card);
    border-radius: 16px;
    max-width: 400px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideUp 250ms ease;
}

.builder-preview-gif {
    width: 100%;
    aspect-ratio: 16/10;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.builder-preview-gif img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.builder-preview-body {
    padding: 20px;
}

.builder-preview-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.builder-preview-muscles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.builder-preview-muscles .muscle-tag {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.builder-preview-instructions {
    margin-bottom: 20px;
}

.builder-preview-instructions-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 10px;
}

.builder-preview-instructions ol {
    padding-left: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.builder-preview-instructions li {
    margin-bottom: 6px;
}

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

.builder-preview-close {
    flex: 1;
    padding: 14px;
    background: #222;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.builder-preview-close:active {
    background: #333;
}

.builder-preview-add {
    flex: 1;
    padding: 14px;
    background: var(--accent);
    border: none;
    border-radius: 10px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.builder-preview-add:active {
    opacity: 0.9;
}

/* Light mode */
.light-mode .builder-template-card {
    background: #f5f5f5;
    border-color: #ddd;
}

.light-mode .builder-template-card:hover {
    background: #eee;
    box-shadow: 0 8px 24px rgba(0, 180, 140, 0.12);
}

.light-mode .builder-template-name {
    color: #1a1a1a;
}

.light-mode .builder-template-days {
    color: #777;
    border-top-color: #e0e0e0;
}

.light-mode .builder-count-btn {
    background: #f5f5f5;
    border-color: #ddd;
}

.light-mode .builder-custom-day-input,
.light-mode .builder-custom-day-select,
.light-mode .builder-search-input {
    background: #f5f5f5;
    border-color: #ddd;
}

.light-mode .builder-day-tab {
    background: #f5f5f5;
}

.light-mode .builder-filter-btn {
    background: #f5f5f5;
}

.light-mode .builder-exercise-results,
.light-mode .builder-day-exercises {
    background: #f5f5f5;
}

.light-mode .builder-exercise-item {
    border-bottom-color: #e0e0e0;
}

.light-mode .builder-added-exercise {
    background: #e8e8e8;
}

/* =============================================
   Day Switcher Pills
   ============================================= */

.day-switcher {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    overflow-x: auto;
    margin-bottom: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.day-pill {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1.5px solid #333;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-family: var(--font-sans);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.day-pill:active {
    transform: scale(0.95);
}

/* =============================================
   PWA INSTALL BANNER
   ============================================= */
.pwa-install-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card, #111);
    border: 1px solid #222;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    max-width: 420px;
    margin: 0 auto;
    animation: pwaSlideUp 220ms ease-out;
}
@media (min-width: 768px) {
    .pwa-install-banner {
        left: auto;
        right: 16px;
        bottom: 16px;
        margin: 0;
    }
}
.pwa-install-banner--with-nav {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
}
@keyframes pwaSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.pwa-install-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}
.pwa-install-text {
    flex: 1;
    min-width: 0;
}
.pwa-install-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #fff);
}
.pwa-install-host {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-secondary, #aaa);
}
.pwa-install-btn {
    flex-shrink: 0;
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background: var(--accent, #00E6B0);
    color: #000;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.pwa-install-btn:active {
    transform: scale(0.97);
}
.pwa-install-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary, #aaa);
    cursor: pointer;
    padding: 0;
}
.pwa-install-close:hover {
    background: var(--bg-elevated, #222);
}

.pwa-install-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
}
@media (min-width: 768px) {
    .pwa-install-modal-overlay { align-items: center; }
}
.pwa-install-modal {
    width: 100%;
    max-width: 380px;
    background: var(--bg-card, #111);
    border: 1px solid #222;
    border-radius: 18px;
    padding: 22px;
    color: var(--text-primary, #fff);
}
.pwa-install-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.pwa-install-modal-head img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}
.pwa-install-modal-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.pwa-install-modal-head p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-secondary, #aaa);
}
.pwa-install-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pwa-install-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
}
.pwa-step-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--bg-elevated, #222);
    color: var(--text-primary, #fff);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pwa-install-done {
    margin-top: 20px;
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 10px;
    background: var(--accent, #00E6B0);
    color: #000;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.day-pill.active {
    border-color: var(--accent);
    background: var(--accent-surface);
    color: var(--accent);
    font-weight: 600;
}

/* Workout Picker Dropdown */
.hero-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 8px;
    padding: 8px 16px;
    border: 1.5px solid #333;
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 150ms;
}

.hero-switch-btn:active {
    background: rgba(255,255,255,0.05);
    transform: scale(0.96);
}

.hero-switch-btn svg {
    width: 14px;
    height: 14px;
}

/* Workout Picker Overlay */
.workout-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 150ms ease;
}

.workout-picker-sheet {
    width: 100%;
    max-width: 500px;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 8px 8px max(24px, env(safe-area-inset-bottom));
    animation: sheetSlideUp 200ms ease;
}

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

.workout-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px 8px;
}

.workout-picker-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.workout-picker-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workout-picker-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 12px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    gap: 8px;
    font-family: var(--font-sans);
    transition: background 150ms;
    min-height: 52px;
}

.workout-picker-option:active {
    background: rgba(255,255,255,0.05);
}

.workout-picker-option.active {
    background: var(--accent-surface);
}

.workout-picker-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.workout-picker-option.active .workout-picker-name {
    color: var(--accent);
}

.workout-picker-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    flex: 1;
}

.workout-picker-check {
    color: var(--accent);
    font-size: 18px;
    font-weight: 700;
}

.exercise-list-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* =============================================
   Dexcom G7 / Glucose Integration
   ============================================= */

/* Dexcom Card (Profile/You tab) */
.dexcom-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 16px;
    margin: 12px 0;
    border: 1px solid var(--border);
}

.dexcom-card--connected {
    border-color: rgba(16, 185, 129, 0.3);
}

.dexcom-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.dexcom-icon {
    width: 24px;
    height: 24px;
    color: var(--accent);
    flex-shrink: 0;
}

.dexcom-icon svg {
    width: 100%;
    height: 100%;
}

.dexcom-title {
    font-weight: 600;
    font-size: 15px;
    flex: 1;
}

.dexcom-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dexcom-badge--on {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.dexcom-badge--off {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.dexcom-connect-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.dexcom-connect-btn:active {
    opacity: 0.8;
}

.dexcom-connect-btn svg {
    width: 18px;
    height: 18px;
}

/* Current glucose value */
.dexcom-current {
    text-align: center;
    padding: 8px 0 12px;
}

.dexcom-value {
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    color: #10b981;
}

.dexcom-value.glucose-very-low { color: #ef4444; }
.dexcom-value.glucose-low { color: #f59e0b; }
.dexcom-value.glucose-normal { color: #10b981; }
.dexcom-value.glucose-high { color: #f59e0b; }
.dexcom-value.glucose-very-high { color: #ef4444; }

.dexcom-unit {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 4px;
}

.dexcom-trend {
    font-size: 24px;
    margin-left: 4px;
}

.dexcom-trend-text {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Stats row (24h mini stats) */
.dexcom-stats-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0 4px;
    text-align: center;
}

.dexcom-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

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

.dexcom-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.dexcom-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.dexcom-sync-info {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 8px 0;
    text-align: center;
}

.dexcom-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.dexcom-sync-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.dexcom-sync-btn:active {
    opacity: 0.7;
}

.dexcom-sync-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dexcom-sync-btn svg {
    width: 16px;
    height: 16px;
}

.dexcom-disconnect-btn {
    padding: 10px 16px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.dexcom-disconnect-btn:active {
    opacity: 0.7;
}

/* Glucose Tab (Progress section) */
.glucose-range-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.glucose-range-btn {
    flex: 1;
    padding: 8px 4px;
    background: var(--card-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.glucose-range-btn.active {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
}

.glucose-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.glucose-stat-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    border: 1px solid var(--border);
}

.glucose-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.glucose-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.glucose-low-text { color: #f59e0b; }
.glucose-high-text { color: #f59e0b; }
.glucose-tir-text { color: #10b981; }

.glucose-chart-container {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    margin-bottom: 12px;
}

.glucose-chart-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

#glucose-canvas {
    width: 100%;
    display: block;
}

.glucose-chart-legend {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.glucose-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
}

.glucose-legend-line {
    width: 16px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
}

.glucose-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.glucose-legend-bar {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
}

.chart-tooltip {
    position: absolute;
    top: 30px;
    background: #1e1e2e;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    z-index: 10;
    min-width: 120px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    animation: tooltipFadeIn 0.15s ease;
}

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

.chart-tooltip-header {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
}

.chart-tooltip-header.meal {
    color: #f59e0b;
}

.chart-tooltip-header.workout {
    color: #8b5cf6;
}

.chart-tooltip-time {
    font-size: 11px;
    color: var(--text-secondary);
}

.chart-tooltip-detail {
    font-size: 12px;
    color: var(--text-primary);
    margin-top: 2px;
}

.chart-tooltip-macros {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.chart-tooltip-comment {
    font-size: 10px;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
}

/* Insight: Meal spike gauge */
.insight-empty {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    padding: 12px 0;
    opacity: 0.7;
}

.insight-period-badge {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 4px;
}

.glucose-chart-subtitle {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.meal-spike-item {
    margin-bottom: 12px;
}

.meal-spike-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.meal-spike-label {
    font-size: 13px;
    color: var(--text-primary);
}

.meal-spike-value {
    font-size: 14px;
    font-weight: 700;
}

.spike-gauge {
    position: relative;
    height: 14px;
}

.spike-gauge-zones {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    gap: 2px;
}

.spike-zone {
    opacity: 0.3;
}

.spike-gauge-marker {
    position: absolute;
    top: -1px;
    width: 4px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 2px;
    background: var(--bg);
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.spike-gauge-labels {
    display: flex;
    font-size: 9px;
    color: var(--text-secondary);
    opacity: 0.5;
    margin-top: 2px;
    margin-bottom: 4px;
}

.spike-gauge-labels span {
    text-align: center;
}

.spike-gauge-labels span:nth-child(1) { flex: 30; }
.spike-gauge-labels span:nth-child(2) { flex: 20; }
.spike-gauge-labels span:nth-child(3) { flex: 30; }
.spike-gauge-labels span:nth-child(4) { flex: 40; }

/* Insight: References link */
.insight-references {
    text-align: right;
    margin-top: 6px;
}

.insight-references a {
    font-size: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    opacity: 0.6;
}

.insight-references a:hover {
    opacity: 1;
    text-decoration: underline;
}

.insight-ref-intro {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.5;
}

.insight-ref-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insight-ref-list li {
    font-size: 12px;
    padding-left: 12px;
    position: relative;
}

.insight-ref-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-secondary);
}

.insight-ref-list a {
    color: #3b82f6;
    text-decoration: none;
    line-height: 1.5;
}

.insight-ref-list a:hover {
    text-decoration: underline;
}

.insight-ref-thresholds {
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 8px 10px;
    line-height: 1.5;
    margin-top: 8px;
}

/* Insight: Training vs Rest comparison cards */
.insight-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.insight-compare-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 10px;
}

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

.insight-compare-icon {
    font-size: 14px;
}

.insight-compare-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.insight-compare-metrics {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.insight-metric {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.insight-metric-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.insight-metric-label {
    font-size: 10px;
    color: var(--text-secondary);
}

.insight-compare-diff {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    line-height: 1.6;
    color: var(--text-secondary);
}

.glucose-readings-count {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.glucose-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary);
}

.glucose-empty p {
    margin-bottom: 16px;
}

.glucose-sync-inline {
    margin: 0 auto;
}

/* AI Analysis */
.glucose-ai-section {
    text-align: center;
}

.glucose-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 150ms;
    font-family: var(--font-sans);
    box-shadow: 0 4px 24px rgba(0, 230, 176, 0.3);
}

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

.glucose-ai-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.glucose-ai-btn svg {
    width: 16px;
    height: 16px;
}

.glucose-sync-inline.dexcom-sync-btn {
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 0;
    gap: 5px;
}

.glucose-sync-inline.dexcom-sync-btn:active {
    color: var(--text-primary);
}

.ai-analysis-card {
    margin-top: 16px;
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    text-align: left;
}

.ai-analysis-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-analysis-badge {
    background: var(--accent-surface);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-analysis-period {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.ai-analysis-content {
    padding: 16px;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.ai-analysis-content h3.ai-md-h2 {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin: 16px 0 8px;
}

.ai-analysis-content h3.ai-md-h2:first-child {
    margin-top: 0;
}

.ai-analysis-content ul {
    padding-left: 18px;
    margin: 8px 0;
}

.ai-analysis-content li {
    margin-bottom: 4px;
}

.ai-analysis-content strong {
    color: #fff;
}

.ai-analysis-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

.ai-analysis-disclaimer {
    flex: 1;
    line-height: 1.4;
}

.spinner-small {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Global toast notification */
.app-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1e1e2e;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    max-width: calc(100vw - 32px);
    text-align: center;
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-toast.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.app-toast.success {
    border-color: rgba(16, 185, 129, 0.4);
}

.app-toast.error {
    border-color: rgba(239, 68, 68, 0.4);
}

.app-toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.app-toast.success .app-toast-icon { color: #10b981; }
.app-toast.error .app-toast-icon { color: #ef4444; }