:root { --md-sys-color-surface: #141218; --md-sys-color-surface-container-low: #1D1B20; --md-sys-color-surface-container: #211F26; --md-sys-color-surface-container-high: #2B2930; --md-sys-color-surface-variant: #44474F; --md-sys-color-on-surface: #E6E1E5; --md-sys-color-on-surface-variant: #CAC4D0; --md-sys-color-outline: #938F99; --md-sys-color-outline-variant: #49454F; --md-card-bg: var(--md-sys-color-surface-container); --md-sys-color-error: #F2B8B5; }
body.light-mode { --md-sys-color-surface: #F9F9FF; --md-sys-color-surface-container-low: #F7F2FA; --md-sys-color-surface-container: #F3F3FA; --md-sys-color-surface-container-high: #ECEEF6; --md-sys-color-surface-variant: #E7E0EC; --md-sys-color-on-surface: #1D1B20; --md-sys-color-on-surface-variant: #49454F; --md-sys-color-outline: #79747E; --md-sys-color-outline-variant: #CAC4D0; --md-card-bg: var(--md-sys-color-surface-container); --md-sys-color-error: #B3261E; }
body { --md-sys-color-primary: #ACC7FF; --md-sys-color-on-primary: #002F67; --md-sys-color-primary-container: #08458E; --md-sys-color-on-primary-container: #D7E3FF; --md-sys-color-secondary: #BEC6DC; --md-sys-color-secondary-container: #3E4759; --md-sys-color-on-secondary-container: #DAE2F9; --md-sys-color-tertiary: #DEBCDF; --md-sys-color-tertiary-container: #583E5B; --md-sys-color-on-tertiary-container: #FBD7FC; --md-tick-color: #002F67; font-family: 'Roboto', sans-serif; background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); transition: background-color 0.3s, color 0.3s; -webkit-tap-highlight-color: transparent; }
body.light-mode { --md-sys-color-primary: #285EA7; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #D7E3FF; --md-sys-color-on-primary-container: #001B3F; --md-sys-color-secondary: #565F71; --md-sys-color-secondary-container: #DAE2F9; --md-sys-color-on-secondary-container: #131C2B; --md-sys-color-tertiary: #705575; --md-sys-color-tertiary-container: #FBD7FC; --md-sys-color-on-tertiary-container: #29132F; --md-tick-color: #FFFFFF; }

/* Theme Overrides */
body.theme-purple { --md-sys-color-primary: #D0BCFF; --md-sys-color-on-primary: #381E72; --md-sys-color-primary-container: #4F378B; --md-sys-color-on-primary-container: #EADDFF; --md-sys-color-secondary: #CCC2DC; --md-sys-color-secondary-container: #4A4458; --md-sys-color-on-secondary-container: #E8DEF8; }
body.light-mode.theme-purple { --md-sys-color-primary: #6750A4; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #EADDFF; --md-sys-color-on-primary-container: #21005D; --md-sys-color-secondary: #625B71; --md-sys-color-secondary-container: #E8DEF8; --md-sys-color-on-secondary-container: #1D192B; }
body.theme-green { --md-sys-color-primary: #8CD6B5; --md-sys-color-on-primary: #003826; --md-sys-color-primary-container: #005138; --md-sys-color-on-primary-container: #A7F2D1; --md-sys-color-secondary: #BCCBBF; --md-sys-color-secondary-container: #3D4B42; --md-sys-color-on-secondary-container: #D8E7DB; }
body.light-mode.theme-green { --md-sys-color-primary: #006C4C; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #A7F2D1; --md-sys-color-on-primary-container: #002115; --md-sys-color-secondary: #536359; --md-sys-color-secondary-container: #D8E7DB; --md-sys-color-on-secondary-container: #111F17; }
body.theme-orange { --md-sys-color-primary: #FFB59B; --md-sys-color-on-primary: #5D1900; --md-sys-color-primary-container: #832600; --md-sys-color-on-primary-container: #FFDBCF; --md-sys-color-secondary: #E7BDB1; --md-sys-color-secondary-container: #5D4037; --md-sys-color-on-secondary-container: #FFDBCF; }
body.light-mode.theme-orange { --md-sys-color-primary: #A63A0F; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #FFDBCF; --md-sys-color-on-primary-container: #390B00; --md-sys-color-secondary: #77564D; --md-sys-color-secondary-container: #FFDBCF; --md-sys-color-on-secondary-container: #2C150E; }

.md-input-group { position: relative; margin-bottom: 0; }
.md-input { width: 100%; height: 56px; border-bottom: 1px solid var(--md-sys-color-outline); border-top: none; border-left: none; border-right: none; border-radius: 16px 16px 0 0; padding: 24px 16px 8px; font-size: 16px; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); transition: all 0.2s; outline: none; }
.md-input:focus { border-bottom-color: var(--md-sys-color-primary); border-bottom-width: 2px; background: var(--md-sys-color-surface-variant); }
.md-input.rounded-input-field:focus {
    border-bottom-color: transparent !important;
    border-bottom-width: 0 !important;
    box-shadow: inset 0 -2px 0 0 var(--md-sys-color-primary);
}
.md-input:read-only { background-color: rgba(0,0,0,0.05); color: var(--md-sys-color-on-surface-variant); }
.md-label { position: absolute; left: 16px; top: 18px; font-size: 16px; color: var(--md-sys-color-on-surface-variant); transition: all 0.2s; pointer-events: none; }
.md-input:focus ~ .md-label, .md-input:not(:placeholder-shown) ~ .md-label { top: 8px; font-size: 12px; color: var(--md-sys-color-primary); }
.rounded-input-field { border-radius: 16px !important; }
.md-input.rounded-input-field {
    border-bottom: none !important;
    text-align: center !important;
    padding-bottom: 0 !important;
}
.md-input.rounded-input-field ~ .md-label {
    left: 0;
    right: 0;
    text-align: center;
}
select.md-input { padding-right: 32px; }

.week-nav-container { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; gap: 12px; margin-bottom: 8px; }
.nav-arrow-btn { width: 56px; height: 56px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border: none; transition: all 0.2s; cursor: pointer; }
.nav-arrow-btn:disabled { opacity: 0.3; pointer-events: none; }
.nav-arrow-btn:active { transform: scale(0.96); }
.week-select { flex: 1; height: 56px; border-radius: 20px; padding: 0 24px; -webkit-appearance: none; appearance: none; background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border: none; font-weight: 500; font-size: 18px; text-align: center; text-align-last: center; cursor: pointer; outline: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 20px center; background-size: 20px; transition: transform 0.2s; }
.week-select:active { transform: scale(0.98); }

.run-card, .meal-card, .overview-card { background: var(--md-sys-color-surface-container-low); border-radius: 24px; padding: 24px; margin-bottom: 12px; border: none; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px rgba(0, 0, 0, 0.15); transition: all 0.3s cubic-bezier(0.2, 0.0, 0, 1.0); }


.overview-card.completed { background-color: var(--md-sys-color-surface-variant); opacity: 0.6; filter: grayscale(0.2); }
.run-card.completed .card-content-wrapper,
.run-card.completed .card-header > *:not(.card-menu-wrapper) { opacity: 0.6; filter: grayscale(0.2); }
.run-card.completed .card-menu-wrapper > button { opacity: 0.6; }
.run-card.completed .card-header, .overview-card.completed h3 { color: var(--md-sys-color-outline) !important; }

.checkbox-wrapper { width: 24px; height: 24px; border: 2px solid var(--md-sys-color-on-surface-variant); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.checkbox-wrapper.checked { background-color: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.checkbox-wrapper span { color: var(--md-tick-color); font-size: 18px; opacity: 0; transform: scale(0.5); transition: all 0.2s; }
.checkbox-wrapper.checked span { opacity: 1; transform: scale(1); }

.set-checkbox { width: 18px; height: 18px; border: 2px solid var(--md-sys-color-outline); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; }
.set-checkbox.checked { background-color: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.set-checkbox span { font-size: 14px; color: var(--md-tick-color); opacity: 0; transform: scale(0.5); transition: all 0.2s; }
.set-checkbox.checked span { opacity: 1; transform: scale(1); }

.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 80px; background-color: var(--md-sys-color-surface); border-top: 1px solid var(--md-sys-color-outline-variant); display: flex; justify-content: space-around; align-items: center; z-index: 50; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; cursor: pointer; color: var(--md-sys-color-on-surface-variant); }
.nav-item.active { color: var(--md-sys-color-on-surface); font-weight: 500; }
.nav-item.active .nav-icon-container { background-color: var(--md-sys-color-secondary-container); }
.nav-item.active .material-icons-round { color: var(--md-sys-color-on-secondary-container); }
.nav-icon-container { width: 64px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.nav-label { font-size: 12px; }



.modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal-card { background: var(--md-card-bg); width: 90%; max-width: 320px; border-radius: 28px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); transform: scale(0.9); transition: transform 0.2s; color: var(--md-sys-color-on-surface); }
.modal-backdrop.open .modal-card { transform: scale(1); }
.modal-handle { width: 32px; height: 4px; background-color: var(--md-sys-color-outline-variant); border-radius: 2px; margin: 0 auto 16px auto; opacity: 0.4; }

.menu-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 8px; text-align: left; color: var(--md-sys-color-on-surface); font-weight: 500; transition: background 0.2s; }
.menu-btn:hover { background: var(--md-sys-color-surface-variant); }
.menu-btn.destructive { color: var(--md-sys-color-error); }

.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; padding: 0 8px; }
.theme-circle { width: 48px; height: 48px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.theme-circle:active { transform: scale(0.9); }
.theme-circle.active { border-color: var(--md-sys-color-on-surface); }
.bg-blue { background: #ACC7FF; } .bg-purple { background: #D0BCFF; } .bg-green { background: #8CD6B5; } .bg-orange { background: #FFB59B; }

.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hidden-view { display: none !important; }
#install-banner { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); bottom: 6rem; }
#install-banner.hidden { transform: translateY(200%); opacity: 0; pointer-events: none; display: flex; }
.grab-handle { cursor: grab; touch-action: none; }
.sortable-ghost { opacity: 0.4; }

/* MD3 Switch */
.md-switch-label { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; cursor: pointer; width: 100%; border-radius: 8px; transition: background 0.2s; }
.md-switch-label:hover { background: var(--md-sys-color-surface-variant); }
.md-switch { position: relative; width: 52px; height: 32px; background: var(--md-sys-color-surface-variant); border-radius: 100px; border: 2px solid var(--md-sys-color-outline); transition: all 0.2s; }
.md-switch::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 6px; width: 16px; height: 16px; background: var(--md-sys-color-outline); border-radius: 50%; transition: all 0.2s cubic-bezier(0.2, 0.0, 0, 1.0); }
.md-switch.checked { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.md-switch.checked::after { background: var(--md-sys-color-on-primary); left: 26px; width: 24px; height: 24px; }
.md-switch-icon { margin-right: 12px; color: var(--md-sys-color-on-surface-variant); }

#snackbar { visibility: hidden; min-width: 300px; background-color: var(--md-sys-color-on-surface); color: var(--md-sys-color-surface); text-align: left; border-radius: 8px; padding: 14px 16px; position: fixed; z-index: 200; left: 50%; transform: translateX(-50%); bottom: 30px; font-size: 14px; font-weight: 400; box-shadow: 0 2px 8px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.3s, bottom 0.3s; display: flex; align-items: center; justify-content: space-between; }
#snackbar.show { visibility: visible; opacity: 1; bottom: 100px; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.strength-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.strength-table th { text-align: center; font-size: 10px; color: var(--md-sys-color-on-surface-variant); padding: 8px 4px; font-weight: 500; }
.strength-table tbody tr td input {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 8px 0; /* Vertical padding */
    text-align: center;
    outline: none;
    height: 40px; /* Increased height */
    color: var(--md-sys-color-on-surface);
    font-size: 14px; /* text-sm */
}
.strength-table tbody tr td input:focus {
    background-color: var(--md-sys-color-surface-container-high); /* Subtle highlight on focus */
    border-bottom: 1px solid var(--md-sys-color-primary);
}
.strength-table tbody tr:nth-child(odd) { background-color: var(--md-sys-color-surface-container); border-radius: 8px; }
/* Fix rounded corners on table rows */
.strength-table tbody tr td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.strength-table tbody tr td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

.activity-option-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; border-radius: 24px; background-color: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); transition: background 0.2s; border: 2px solid transparent; }
.activity-option-btn:active { background-color: var(--md-sys-color-secondary-container); border-color: var(--md-sys-color-primary); }
.activity-option-btn .material-icons-round { font-size: 32px; color: var(--md-sys-color-primary); }
.activity-option-label { font-weight: 500; font-size: 14px; text-align: center; }

.exercise-item { padding: 12px 16px; margin-bottom: 4px; border-radius: 12px; cursor: pointer; transition: background 0.2s; color: var(--md-sys-color-on-surface); }
.exercise-item:hover { background: var(--md-sys-color-surface-container-high); }
.exercise-item:last-child { margin-bottom: 0; }

.day-header { cursor: pointer; user-select: none; }
.meal-badge { font-size: 10px; font-weight: bold; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); margin-right: 8px; }

.segment-container { display: flex; flex-direction: column; justify-content: flex-end; }
.segment-label { font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin-bottom: 4px; margin-left: 4px; }
.segment-group { display: flex; border: 1px solid var(--md-sys-color-outline); border-radius: 100px; overflow: hidden; height: 40px; width: 100%; }
.segment-group.scrollable { overflow-x: auto; scrollbar-width: none; }
.segment-group.scrollable::-webkit-scrollbar { display: none; }
.segment-btn { flex: 1; background: transparent; color: var(--md-sys-color-on-surface-variant); font-weight: 500; font-size: 13px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--md-sys-color-outline); transition: background 0.2s; white-space: nowrap; padding: 0 12px; min-width: fit-content; }
.segment-btn:last-child { border-right: none; }
.segment-btn.active { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

.card-content-wrapper { transition: all 0.3s ease-in-out; overflow: hidden; }
.card-header { cursor: pointer; user-select: none; }
.chevron-icon { transition: transform 0.3s; }
.collapsed .chevron-icon { transform: rotate(-90deg); }

#floating-toolbar button.active { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }

/* IMPORTANT: Use dynamic viewport height for mobile */
body { height: 100dvh; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.3s cubic-bezier(0.2, 0.0, 0, 1.0) forwards; }

#setup-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--md-sys-color-surface); z-index: 100; display: flex; flex-direction: column; justify-content: center; padding: 24px; }