*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0A0A0F; --surface: #13131A; --surface-2: #1A1A24; --surface-3: #242430; --text: #EEEEF2; --text-secondary: #8E8EA0; --text-muted: #4A4A5A; --accent: #5B8DEF; --accent-dim: rgba(91, 141, 239, 0.1); --accent-glow: rgba(91, 141, 239, 0.25); --success: #34D399; --success-dim: rgba(52, 211, 153, 0.1); --warm: #FB923C; --warm-dim: rgba(251, 146, 60, 0.1); --danger: #F87171; --pr-gold: #FFD700; --cat-six: #5B8DEF; --cat-abs: #E879A8; --cat-golf: #5BD4A4; --cat-strength: #FB923C; /* Border / divider tokens — defined as rgba so light theme can flip them to dark borders by overriding --border-rgb. */ --border-rgb: 255, 255, 255; --border-soft: rgba(var(--border-rgb), 0.04); --border-medium: rgba(var(--border-rgb), 0.06); --border-strong: rgba(var(--border-rgb), 0.1); --shadow-card: rgba(0, 0, 0, 0.6); --radius: 14px; --radius-sm: 10px; --radius-xs: 8px; --nav-height: 56px; --safe-bottom: env(safe-area-inset-bottom, 0px); } /* Light theme — opt-in via [data-theme="light"] on or . */ [data-theme="light"] { --bg: #F5F6FA; --surface: #FFFFFF; --surface-2: #F1F2F6; --surface-3: #E2E5EE; --text: #14141B; --text-secondary: #5A5A6A; --text-muted: #9095A4; --accent: #3B6FE5; --accent-dim: rgba(59, 111, 229, 0.10); --accent-glow: rgba(59, 111, 229, 0.18); --success: #16A36F; --success-dim: rgba(22, 163, 111, 0.10); --warm: #E07016; --warm-dim: rgba(224, 112, 22, 0.10); --danger: #DC2626; --cat-six: #3B6FE5; --cat-abs: #C75494; --cat-golf: #18A37C; --cat-strength: #E07016; --border-rgb: 20, 20, 27; --border-soft: rgba(var(--border-rgb), 0.06); --border-medium: rgba(var(--border-rgb), 0.08); --border-strong: rgba(var(--border-rgb), 0.12); --shadow-card: rgba(20, 20, 27, 0.10); color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } html { font-size: 15px; } html, body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "SF Pro Display", "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); min-height: 100dvh; -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.5; } body { padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 20px); } /* ===== LAUNCH PAD (replaces hero) ===== */ .launch-card { background: linear-gradient(135deg, rgba(91,141,239,0.12) 0%, var(--surface) 100%); border-radius: var(--radius); padding: 24px 20px; margin-bottom: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.1s; } .launch-card:active { transform: scale(0.98); } .launch-goal-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .launch-goal-name { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; } .launch-goal-change { font-size: 11px; color: var(--text-muted); font-weight: 600; cursor: pointer; } .launch-emoji { font-size: 40px; margin-bottom: 10px; } .launch-icon-row { display: flex; gap: 2px; margin-bottom: 14px; color: var(--accent); opacity: 0.7; } .launch-icon-row .ex-icon { width: 36px; height: 36px; } .launch-name { font-size: 22px; font-weight: 800; line-height: 1.2; } .launch-desc { font-size: 13px; color: var(--text-secondary); margin-top: 4px; } .launch-btn { display: block; width: 100%; margin-top: 18px; padding: 14px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s; } .launch-btn:active { opacity: 0.85; } .launch-rest { background: var(--surface); text-align: center; border-radius: var(--radius); padding: 32px 20px; margin-bottom: 16px; } .launch-rest-emoji { font-size: 36px; margin-bottom: 8px; } .launch-rest-title { font-size: 18px; font-weight: 700; } .launch-rest-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; } /* ===== WEEK PLAN (inline schedule) ===== */ .week-plan { display: flex; gap: 4px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .week-plan::-webkit-scrollbar { display: none; } .week-day { flex: 1; min-width: 46px; text-align: center; padding: 10px 4px; background: var(--surface); border-radius: var(--radius-xs); font-size: 11px; transition: all 0.15s; cursor: pointer; -webkit-tap-highlight-color: transparent; } .week-day.today { background: var(--accent-dim); border: 1.5px solid var(--accent); } .week-day.done { background: var(--success-dim); } .week-day-check { font-size: 16px; color: var(--success); font-weight: 700; margin-bottom: 2px; } .week-day.rest { opacity: 0.35; } .week-day-label { font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; } .week-day-name { font-weight: 600; font-size: 10px; color: var(--text); line-height: 1.2; } .week-day-emoji { font-size: 16px; margin-bottom: 2px; } /* ===== STREAK BAR (compact) ===== */ .streak-bar { display: flex; justify-content: center; gap: 20px; padding: 10px 0; margin-bottom: 12px; font-size: 13px; color: var(--text-secondary); } .streak-bar strong { color: var(--text); font-weight: 700; } /* ===== QUICK START CARDS ===== */ .quick-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-bottom: 16px; padding-bottom: 2px; } .quick-row::-webkit-scrollbar { display: none; } .quick-card { flex: 0 0 auto; width: 120px; padding: 14px 12px; background: var(--surface); border-radius: var(--radius-sm); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.1s; } .quick-card:active { transform: scale(0.96); } .quick-icon { color: var(--accent); margin-bottom: 8px; } .quick-icon .ex-icon { width: 32px; height: 32px; } .quick-label { font-size: 13px; font-weight: 700; line-height: 1.2; } .quick-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; } /* ===== STRETCHING SECTION (always-on dashboard entry) ===== */ .stretch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .stretch-card { position: relative; padding: 16px 14px; background: linear-gradient(135deg, rgba(91,212,164,0.14) 0%, var(--surface) 100%); border-radius: var(--radius); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.1s; display: flex; flex-direction: column; gap: 6px; } .stretch-card:active { transform: scale(0.98); } .stretch-card:nth-child(2) { background: linear-gradient(135deg, rgba(251,146,60,0.12) 0%, var(--surface) 100%); } .stretch-badge { position: absolute; top: 10px; right: 10px; font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 3px 8px; border-radius: 10px; background: var(--cat-golf); color: #fff; text-transform: uppercase; } .stretch-card:nth-child(2) .stretch-badge { background: var(--warm); } .stretch-icons { display: flex; gap: 2px; color: var(--cat-golf); margin-bottom: 4px; } .stretch-card:nth-child(2) .stretch-icons { color: var(--warm); } .stretch-icons .ex-icon { width: 26px; height: 26px; } .stretch-name { font-size: 15px; font-weight: 800; line-height: 1.2; color: var(--text); } .stretch-sub { font-size: 11px; color: var(--text-secondary); } .stretch-cta { font-size: 11px; font-weight: 700; color: var(--cat-golf); margin-top: 2px; } .stretch-card:nth-child(2) .stretch-cta { color: var(--warm); } /* ===== STATS DRAWER ===== */ .stats-drawer { margin-bottom: 16px; } .stats-drawer-toggle { display: block; width: 100%; padding: 12px 16px; background: var(--surface); border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .stats-drawer-toggle::-webkit-details-marker { display: none; } /* CSS unicode escapes are \HHHH (no leading "u"). Was rendering literal "u25BC" in the Activity drawer label. */ .stats-drawer-toggle::after { content: ' \25BC'; font-size: 9px; } .stats-drawer[open] .stats-drawer-toggle::after { content: ' \25B2'; } .stats-drawer-body { padding-top: 12px; } /* ===== VIEWS ===== */ .view { display: none; padding: 0 20px 24px; } .view.active { display: block; } /* ===== CARDS ===== */ .card { background: var(--surface); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; } .stat-card { text-align: center; padding: 24px 16px; } .card-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px; } .card-value { font-size: 42px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .card-label { font-size: 12px; color: var(--text-secondary); margin-top: 8px; font-weight: 500; } .stat-row { display: flex; gap: 12px; margin-bottom: 16px; } .stat-row .card { flex: 1; } /* ===== TODAY CARD ===== */ .today-card { background: linear-gradient(135deg, rgba(91,141,239,0.08) 0%, var(--surface) 100%); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; display: flex; align-items: center; gap: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.1s; } .today-card:active { transform: scale(0.98); } .today-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--accent-dim); color: var(--accent); padding: 8px; } .today-icon .ex-icon { width: 100%; height: 100%; } .today-info { flex: 1; } .today-label { font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; } .today-name { font-size: 17px; font-weight: 700; margin-top: 2px; } .today-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .today-arrow { color: var(--text-muted); font-size: 20px; } /* ===== POSTER / EXERCISE GRID ===== */ .poster-section { margin-bottom: 16px; border-radius: var(--radius); overflow: hidden; background: var(--surface); } .poster-header { padding: 10px 16px; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-align: center; text-transform: uppercase; } .poster-header.cat-simple-six { background: var(--cat-six); color: #fff; } .poster-header.cat-abs { background: var(--cat-abs); color: #fff; } .poster-header.cat-golf { background: var(--cat-golf); color: #000; } .poster-header:not([class*="cat-"]) { background: var(--accent); color: #fff; } .exercise-poster-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .poster-tile { display: flex; flex-direction: column; align-items: center; padding: 18px 6px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.12s; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .poster-tile:nth-child(3n) { border-right: none; } .poster-tile:active { background: var(--surface-2); } .poster-tile-icon { width: 44px; height: 44px; margin-bottom: 8px; color: var(--accent); } .poster-tile-icon .ex-icon { width: 100%; height: 100%; } .poster-tile-name { font-size: 10px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); } /* ===== BOTTOM NAV ===== */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-height) + var(--safe-bottom)); background: var(--surface); display: flex; padding-bottom: var(--safe-bottom); z-index: 100; border-top: 1px solid var(--border-medium); } .nav-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-muted); font-size: 10px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 44px; transition: color 0.15s; position: relative; } .nav-tab.active { color: var(--accent); } .nav-tab.active::after { content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .nav-tab svg { width: 22px; height: 22px; } .nav-tab.active svg { stroke-width: 2.5; } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; border: none; cursor: pointer; transition: transform 0.08s, opacity 0.1s; min-height: 50px; -webkit-tap-highlight-color: transparent; } .btn:active { transform: scale(0.97); opacity: 0.9; } .btn-primary { background: linear-gradient(135deg, var(--accent) 0%, #4F6FEF 100%); color: #fff; width: 100%; box-shadow: 0 4px 16px rgba(91,141,239,0.3); } .btn-danger { background: var(--danger); color: #fff; } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-sm { padding: 10px 16px; font-size: 13px; min-height: 40px; } /* ===== WORKOUT PICKER ===== */ .workout-option { background: var(--surface); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; display: flex; align-items: center; gap: 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.1s; } .workout-option:active { transform: scale(0.98); } .workout-option.recommended { box-shadow: inset 0 0 0 1.5px var(--accent); } .workout-option-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 6px; color: var(--accent); background: var(--accent-dim); } .workout-option-icon .ex-icon { width: 100%; height: 100%; } .workout-option-icon.wo-simple-six { background: var(--accent-dim); } .workout-option-icon.wo-abs { background: rgba(232,121,168,0.1); } .workout-option-icon.wo-golf { background: rgba(91,212,164,0.1); } .workout-option-icon.wo-emom { background: var(--warm-dim); } .workout-option-info { flex: 1; min-width: 0; } .workout-option-name { font-size: 15px; font-weight: 700; } .workout-option-desc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; } .workout-option-duration { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 600; } .workout-option-arrow { color: var(--text-muted); font-size: 18px; } /* Schedule */ .schedule-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; } .schedule-row + .schedule-row { border-top: 1px solid var(--border-soft); } .schedule-day { font-weight: 700; width: 36px; } .schedule-name { color: var(--text-secondary); } .schedule-row.today { color: var(--accent); } .schedule-row.today .schedule-name { color: var(--accent); font-weight: 600; } .schedule-row.rest .schedule-name { color: var(--text-muted); } /* ===== ELAPSED BAR ===== */ .elapsed-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; margin-bottom: 12px; font-size: 15px; color: var(--text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; } .elapsed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: pulse 2s infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } /* ===== FOCUS BANNER ===== */ .focus-banner { background: var(--surface); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; } .focus-banner-icon { width: 40px; height: 40px; flex-shrink: 0; color: var(--accent); } .focus-banner-icon .ex-icon { width: 100%; height: 100%; } .focus-banner-text { flex: 1; } .focus-label { font-size: 10px; color: var(--warm); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; } .focus-name { font-size: 18px; font-weight: 800; margin-top: 2px; } .focus-scheme { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } /* ===== EXERCISE GROUP ===== */ .exercise-group { margin-bottom: 14px; background: var(--surface); border-radius: var(--radius); overflow: hidden; } .exercise-group-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--surface-2); } .exercise-group-icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--accent); } .exercise-group-icon .ex-icon { width: 100%; height: 100%; } .exercise-group-name { font-size: 15px; font-weight: 700; flex: 1; } .exercise-group-badge { font-size: 10px; padding: 4px 10px; border-radius: 20px; font-weight: 700; } .badge-focus { background: var(--warm-dim); color: var(--warm); } .badge-standard { background: var(--surface-3); color: var(--text-muted); } /* ===== SET TABLE (Strong/Hevy style) ===== */ .set-table-header { display: grid; grid-template-columns: 32px 1fr 64px 64px 44px; padding: 8px 16px; gap: 4px; align-items: center; } .set-table-header span { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; text-align: center; } .set-table-header span:nth-child(2) { text-align: left; } .set-row { display: grid; grid-template-columns: 32px 1fr 64px 64px 44px; padding: 6px 16px; gap: 4px; align-items: center; transition: background 0.15s; border-top: 1px solid var(--border-soft); } .set-row.completed { background: var(--success-dim); } .set-num { font-size: 14px; font-weight: 700; color: var(--text-muted); text-align: center; } .set-row.completed .set-num { color: var(--success); } .set-prev { font-size: 12px; color: var(--text-muted); font-weight: 500; } .set-input { width: 100%; background: var(--surface-3); border: none; border-radius: var(--radius-xs); padding: 10px 4px; color: var(--text); font-size: 16px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; -moz-appearance: textfield; } .set-input:focus { outline: none; background: var(--accent-dim); box-shadow: inset 0 0 0 1.5px var(--accent); } .set-input::-webkit-inner-spin-button, .set-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .set-check { width: 44px; height: 44px; border-radius: 50%; background: transparent; border: 2px solid var(--surface-3); color: transparent; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; -webkit-tap-highlight-color: transparent; justify-self: center; } .set-check.checked { background: var(--success); border-color: var(--success); color: #fff; transform: scale(1); animation: checkPop 0.3s ease; } @keyframes checkPop { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 100% { transform: scale(1); } } .add-set-btn { padding: 12px; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; } /* ===== GUIDED MODE ===== */ .guided-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; } .guided-card-header { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--surface-2); } .guided-card-icon { width: 36px; height: 36px; flex-shrink: 0; color: var(--accent); } .guided-card-icon .ex-icon { width: 100%; height: 100%; } .guided-card-info { flex: 1; } .guided-card-name { font-size: 18px; font-weight: 800; } .guided-card-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .guided-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; padding: 0 20px 8px; border-top: 1px solid var(--border-soft); padding-top: 12px; } .guided-card-cues { padding: 12px 20px; } .guided-cue-toggle { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: space-between; padding: 2px 0; } .guided-cue-list { display: none; padding-top: 10px; } .guided-card-cues.open .guided-cue-list { display: block; } .guided-cue-toggle .arrow { transition: transform 0.2s; font-size: 10px; } .guided-card-cues.open .guided-cue-toggle .arrow { transform: rotate(180deg); } .guided-cue { font-size: 13px; color: var(--text-secondary); padding: 5px 0 5px 16px; position: relative; line-height: 1.5; } .guided-cue::before { content: ''; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .guided-card-sets { padding: 0; } .guided-nav { display: flex; gap: 8px; padding: 12px 16px; } .guided-nav .btn { flex: 1; } .guided-progress { display: flex; gap: 4px; margin-bottom: 14px; } .guided-dot { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); transition: background 0.2s; } .guided-dot.done { background: var(--success); } .guided-dot.current { background: var(--accent); } .workout-mode-toggle { text-align: center; margin: 8px 0; } .workout-actions { display: flex; gap: 10px; margin-top: 16px; } .workout-actions .btn { flex: 1; } /* ===== REST TIMER (bottom sheet) ===== */ .timer-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface-2); border-radius: 20px 20px 0 0; padding: 24px 20px calc(24px + var(--safe-bottom)); z-index: 150; display: none; flex-direction: column; align-items: center; box-shadow: 0 -8px 40px var(--shadow-card); } .timer-sheet.active { display: flex; } .timer-sheet-handle { width: 36px; height: 4px; background: var(--surface-3); border-radius: 2px; margin-bottom: 16px; } .timer-ring-wrap { position: relative; width: 120px; height: 120px; margin-bottom: 16px; } .timer-ring { width: 120px; height: 120px; transform: rotate(-90deg); } .timer-ring-bg { fill: none; stroke: var(--surface-3); stroke-width: 6; } .timer-ring-fg { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.5s linear; } .timer-ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; } .timer-sheet-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; margin-bottom: 4px; } .timer-controls { display: flex; gap: 10px; } .timer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 149; display: none; } .timer-backdrop.active { display: block; } /* ===== CALENDAR ===== */ .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .calendar-day { aspect-ratio: 1; border-radius: 3px; background: var(--surface-2); } .calendar-day.level-1 { background: rgba(91,141,239,0.15); } .calendar-day.level-2 { background: rgba(91,141,239,0.3); } .calendar-day.level-3 { background: rgba(91,141,239,0.5); } .calendar-day.level-4 { background: var(--accent); } .calendar-day.future { background: transparent; } .calendar-day.today-cell { outline: 2px solid var(--accent); outline-offset: -1px; } .calendar-labels { display: flex; justify-content: space-between; margin-bottom: 6px; } .calendar-labels span { font-size: 10px; color: var(--text-muted); font-weight: 600; } /* ===== LIBRARY ===== */ .category-tabs { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .category-tabs::-webkit-scrollbar { display: none; } .category-tab { padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 600; background: var(--surface); color: var(--text-secondary); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: all 0.15s; border: none; } .category-tab.active { background: var(--accent); color: #fff; } /* ===== EXERCISE MODAL ===== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: flex-end; justify-content: center; z-index: 200; } .modal-overlay.active { display: flex; } .modal-content { background: var(--surface); border-radius: 20px 20px 0 0; width: 100%; max-width: 480px; max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-handle { width: 36px; height: 4px; background: var(--surface-3); border-radius: 2px; margin: 12px auto 0; } .modal-exercise-hero { display: flex; align-items: center; justify-content: center; padding: 28px; background: var(--surface-2); margin: 12px 20px 0; border-radius: var(--radius); color: var(--accent); } .modal-exercise-hero .ex-icon { width: 80px; height: 80px; } .modal-exercise-photo { width: 100%; height: 180px; object-fit: cover; margin: 12px 0 0; display: block; } .modal-photo-skeleton { width: 100%; height: 180px; margin: 12px 0 0; background: var(--surface-2); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 0; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .modal-exercise-diagram { display: flex; align-items: center; justify-content: center; padding: 16px; color: var(--accent); } .modal-exercise-diagram .ex-icon { width: 64px; height: 64px; } .modal-photo-attr { font-size: 10px; color: var(--text-muted); text-align: right; padding: 2px 20px 0; } .timed-badge { font-size: 10px; color: var(--warm); background: var(--warm-dim); padding: 2px 8px; border-radius: 8px; font-weight: 700; margin-left: 6px; } /* ===== GOAL BANNER ===== */ .goal-banner { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--surface); border-radius: var(--radius-sm); margin-bottom: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .goal-banner-left { display: flex; align-items: center; gap: 10px; } .goal-banner-emoji { font-size: 20px; } .goal-banner-name { font-size: 14px; font-weight: 700; } .goal-banner-change { font-size: 12px; color: var(--accent); font-weight: 600; } /* ===== GOAL PICKER ===== */ .goal-picker-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--surface-2); border-radius: var(--radius-sm); margin-bottom: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.1s; border: 2px solid transparent; } .goal-picker-card:active { transform: scale(0.98); } .goal-picker-card.active { border-color: var(--accent); background: var(--accent-dim); } .goal-picker-emoji { font-size: 28px; flex-shrink: 0; margin-top: 2px; } .goal-picker-info { flex: 1; } .goal-picker-name { font-size: 16px; font-weight: 700; } .goal-picker-tagline { font-size: 13px; color: var(--text-secondary); margin-top: 2px; } .goal-picker-days { font-size: 11px; color: var(--text-muted); margin-top: 6px; } /* ===== IN-PLAN HIGHLIGHT ===== */ .workout-option.in-plan { border-left: 3px solid var(--accent); padding-left: 17px; } /* ===== STRENGTH CATEGORY ===== */ .cat-strength { color: var(--cat-strength); } .modal-exercise-body { padding: 20px; } .modal-exercise-name { font-size: 22px; font-weight: 800; } .modal-exercise-meta { font-size: 13px; color: var(--text-secondary); margin-top: 4px; } .modal-exercise-muscles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .muscle-tag { font-size: 11px; padding: 5px 12px; border-radius: 20px; background: var(--surface-3); color: var(--text-secondary); font-weight: 600; } .modal-exercise-desc { padding: 16px 20px; font-size: 14px; line-height: 1.7; color: var(--text-secondary); border-top: 1px solid var(--border-soft); } .modal-exercise-tips { padding: 4px 20px 28px; } .modal-exercise-tips h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; } .tip-item { display: flex; gap: 12px; padding: 7px 0; font-size: 14px; line-height: 1.5; } .tip-bullet { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 8px; } /* ===== GOALS ===== */ .goal-card { position: relative; } .goal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .goal-name { font-size: 16px; font-weight: 700; } .goal-type-badge { font-size: 10px; padding: 4px 10px; border-radius: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .goal-type-abs { background: rgba(232,121,168,0.1); color: var(--cat-abs); } .goal-type-golf { background: rgba(91,212,164,0.1); color: var(--cat-golf); } .goal-type-custom { background: var(--warm-dim); color: var(--warm); } .goal-type-strength { background: var(--accent-dim); color: var(--accent); } .progress-bar { height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin-bottom: 10px; } .progress-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; } .progress-fill.pf-abs { background: var(--cat-abs); } .progress-fill.pf-golf { background: var(--cat-golf); } .progress-fill.pf-custom { background: var(--warm); } .progress-fill.pf-strength { background: var(--accent); } .goal-stats { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-secondary); } .goal-entry-form { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); } .goal-card.show-form .goal-entry-form { display: flex; gap: 8px; align-items: center; } .goal-input { background: var(--surface-2); border: none; border-radius: var(--radius-xs); padding: 12px 14px; color: var(--text); font-size: 18px; font-weight: 700; width: 90px; text-align: center; } .goal-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); } /* ===== WORKOUT COMPLETE ===== */ .workout-complete { text-align: center; padding: 48px 20px; } .workout-complete-icon { font-size: 56px; margin-bottom: 16px; } .workout-complete h2 { font-size: 28px; font-weight: 800; } .workout-complete .subtitle { font-size: 14px; color: var(--text-secondary); margin-top: 4px; } .workout-complete .summary-stats { margin: 28px 0; } .confetti { position: fixed; top: 0; left: 0; right: 0; height: 100vh; pointer-events: none; z-index: 300; overflow: hidden; } .confetti-piece { position: absolute; width: 8px; height: 8px; border-radius: 2px; animation: confettiFall 2.5s ease-in forwards; opacity: 0; } @keyframes confettiFall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } /* ===== HISTORY ===== */ .history-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--surface); border-radius: var(--radius-sm); margin-bottom: 8px; } .history-date { font-size: 14px; font-weight: 700; } .history-focus { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } .history-sets { font-size: 13px; color: var(--success); font-weight: 700; } /* ===== EMPTY STATES ===== */ .empty-state { text-align: center; padding: 36px 16px; color: var(--text-muted); } .empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; } .empty-state-text { font-size: 13px; line-height: 1.6; } /* ===== MISC ===== */ .section-title { font-size: 11px; font-weight: 700; margin: 24px 0 14px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); display: flex; align-items: center; gap: 10px; } .section-title::after { content: ''; flex: 1; height: 1px; background: var(--border-medium); } .loading { text-align: center; padding: 40px; color: var(--text-muted); } @media (prefers-reduced-motion: reduce) { .modal-photo-skeleton { animation: none; background: var(--surface-2); } } @media (min-width: 480px) { body { max-width: 480px; margin: 0 auto; } } /* ===== HEADER (theme toggle + future actions) ===== */ .app-header { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background: var(--bg); /* No border on top — the bg blends. Add a subtle one only on scroll if needed. */ } .app-header .brand { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: var(--text); text-transform: uppercase; } .theme-toggle { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: transform 0.15s, color 0.15s; } .theme-toggle:active { transform: scale(0.92); } .theme-toggle svg { width: 18px; height: 18px; } [data-theme="light"] .theme-toggle .icon-moon, [data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; } /* ===== TOAST ===== */ .toast { position: fixed; left: 50%; bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px); transform: translateX(-50%) translateY(20px); background: var(--surface-2); color: var(--text); padding: 12px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; box-shadow: 0 8px 32px var(--shadow-card); z-index: 400; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; max-width: 90vw; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.toast-error { background: var(--danger); color: #fff; } .toast.toast-success { background: var(--success); color: #fff; } /* ===== SKELETONS (dashboard initial render) ===== */ .skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius); } .skeleton-launch { height: 220px; margin-bottom: 16px; } .skeleton-week { height: 84px; margin-bottom: 16px; } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }