/* ============================================================ IRON LOG — Unified Design System v4 Light, clean. DM Sans + DM Mono. Single file — styles-v2.css is now empty. ============================================================ */ :root { --bg: #f5f6f8; --bg-2: #ffffff; --bg-3: #f0f1f4; --bg-4: #e8eaee; --card: #ffffff; --border: #e4e6eb; --border-2: #d1d5de; --text: #0f1117; --text-dim: #5c6070; --text-faint:#9399a8; --accent: #14213D; --accent-light: #eef0f5; --accent-mid: #c3c9d6; --accent-dark: #0B1426; --green: #16a34a; --green-bg: #f0fdf4; --amber: #d97706; --amber-bg: #fffbeb; --red: #dc2626; --red-bg: #fef2f2; --blue: #2563eb; --shadow-xs: 0 1px 2px rgba(15,17,23,0.05); --shadow-sm: 0 1px 4px rgba(15,17,23,0.07); --shadow: 0 4px 16px rgba(15,17,23,0.08); --shadow-lg: 0 12px 40px rgba(15,17,23,0.10); --display: 'DM Sans', system-ui, sans-serif; --body: 'DM Sans', system-ui, sans-serif; --mono: 'DM Mono', 'Fira Mono', monospace; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { overflow-x: hidden; } html, body { background: var(--bg); color: var(--text); font-family: var(--body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Let the document scroll naturally. Do NOT pin html/body height or set overflow-y on body — that traps content below the fold in PWA mode. We only suppress the horizontal rubber-band, never vertical. */ body { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; overscroll-behavior-x: none; -webkit-overflow-scrolling: touch; } main { width: 100%; overflow-x: hidden; } /* ============ AUTH GATE ============ The app shell stays hidden until boot confirms authentication and adds `app-ready` to . This makes it impossible to see the app while logged out, regardless of stale caches or render timing. */ body:not(.app-ready) > .topbar, body:not(.app-ready) > .tabs, body:not(.app-ready) > main, body:not(.app-ready) > .toast, body:not(.app-ready) > #pwaInstallBanner { display: none !important; } /* ============ TOP BAR ============ */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: rgba(255,255,255,0.92); backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-xs); min-height: 54px; width: 100%; overflow: hidden; } .brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; } .brand-mark { color: var(--accent); font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: -1px; flex-shrink: 0; } .brand-text { min-width: 0; overflow: hidden; } .brand-text h1 { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: 0.5px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-sub { font-family: var(--mono); font-size: 8.5px; color: var(--accent); letter-spacing: 1.2px; font-weight: 500; display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 5px 5px; background: var(--accent-light); border: 1.5px solid var(--accent-mid); border-radius: 999px; color: var(--accent-dark); font-family: var(--body); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; flex-shrink: 0; max-width: 118px; min-width: 0; overflow: hidden; white-space: nowrap; } .profile-chip:hover, .profile-chip:active { background: var(--accent); color: #fff; border-color: var(--accent); } .profile-chip:hover .prof-caret, .profile-chip:active .prof-caret { color: white; } .prof-avatar { font-size: 13px; line-height: 1; background: white; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .prof-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 58px; } .prof-caret { font-size: 9px; color: var(--accent); transition: color 0.15s; flex-shrink: 0; } .topbar-actions { display: flex; gap: 5px; flex-shrink: 0; } .icon-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); width: 34px; height: 34px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; flex-shrink: 0; } .icon-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .icon-btn:active { transform: scale(0.94); } /* ============ TABS ============ */ .tabs { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--bg-2); border-bottom: 1px solid var(--border); position: sticky; top: 54px; z-index: 49; width: 100%; } .tab { background: transparent; border: none; color: var(--text-faint); font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.8px; padding: 12px 2px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-light); } .tab:hover:not(.active) { color: var(--text-dim); background: var(--bg-3); } /* ============ VIEWS ============ */ .view { display: none; padding: 14px; max-width: 720px; margin: 0 auto; width: 100%; box-sizing: border-box; overflow-x: hidden; } .view.active { display: block; } /* ============ TODAY ============ */ .day-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; padding: 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); position: relative; overflow: hidden; box-shadow: var(--shadow-sm); min-width: 0; } .day-header::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--accent); border-radius: 3px 0 0 3px; } .day-tag { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: 1.2px; color: var(--accent); background: var(--accent-light); padding: 3px 7px; border-radius: 6px; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .day-header h2 { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2; word-break: break-word; } .day-meta { display: flex; gap: 12px; align-items: flex-start; flex-shrink: 0; margin-left: 8px; } .meta-item { text-align: right; } .meta-label { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: 1.2px; color: var(--text-faint); margin-bottom: 1px; } .meta-val { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; } .day-picker { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; width: 100%; min-width: 0; } .day-picker label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.8px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; } .day-picker select { flex: 1; min-width: 0; width: 0; /* forces flex to actually shrink the select */ background: var(--bg-2); border: 1px solid var(--border); color: var(--text); padding: 9px 10px; border-radius: var(--r-sm); font-family: var(--body); font-size: 13px; } /* ============ BLOCKS ============ */ .block { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 12px; overflow: hidden; width: 100%; min-width: 0; } .block.warm { border-left: 3px solid var(--amber); } .block.main { border-left: 3px solid var(--accent); } .block.cool { border-left: 3px solid #60a5fa; } .block summary, .block-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; user-select: none; list-style: none; min-width: 0; } .block summary::-webkit-details-marker { display: none; } .block-icon { font-size: 15px; flex-shrink: 0; } .block-title { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; font-weight: 500; flex: 1; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .block-meta { font-family: var(--mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.5px; flex-shrink: 0; white-space: nowrap; } .block-body { padding: 0 14px 14px; } .mobility-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; gap: 12px; min-width: 0; } .mobility-row:last-child { border-bottom: none; } .mobility-name { color: var(--text); flex: 1; min-width: 0; } .mobility-dose { font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; } /* ============ EXERCISE CARDS ============ */ .ex-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); margin: 10px 12px; padding: 13px; min-width: 0; overflow: hidden; } /* Superset: a left accent rail visually groups paired exercises, plus a badge. */ .ex-card.in-superset { border-left: 3px solid var(--accent); } .superset-badge { display: inline-block; font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); background: var(--accent-light, rgba(230,57,70,0.1)); border: 1px solid var(--accent-mid, rgba(230,57,70,0.25)); padding: 2px 6px; border-radius: 999px; vertical-align: middle; margin-left: 6px; white-space: nowrap; } .ex-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; gap: 8px; min-width: 0; } .ex-name { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.2; min-width: 0; word-break: break-word; } .ex-target { font-family: var(--mono); font-size: 9.5px; color: var(--accent); letter-spacing: 0.8px; margin-top: 3px; } .ex-actions { display: flex; gap: 4px; flex-shrink: 0; } .ex-actions button { background: var(--bg-3); border: 1px solid var(--border); color: var(--text-dim); font-size: 11px; padding: 5px 8px; border-radius: var(--r-sm); cursor: pointer; transition: all 0.12s; font-family: var(--body); white-space: nowrap; } .ex-actions button:hover { color: var(--accent); border-color: var(--accent-mid); background: var(--accent-light); } /* ============ SET TABLE ============ */ .set-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; table-layout: fixed; } .set-table th { text-align: left; color: var(--text-faint); font-weight: 500; font-size: 9.5px; letter-spacing: 0.8px; padding: 5px 4px; border-bottom: 1px solid var(--border); } .set-table td { padding: 7px 4px; } .set-table input { width: 100%; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); padding: 7px 4px; border-radius: var(--r-sm); font-family: var(--mono); font-size: 13px; text-align: center; transition: border-color 0.15s, background 0.15s; } .set-table input:focus { outline: none; border-color: var(--accent); background: var(--bg-2); box-shadow: 0 0 0 3px var(--accent-light); } .set-table input.done { background: var(--green-bg); border-color: rgba(22, 163, 74, 0.25); color: var(--green); } .set-num { color: var(--text-faint); text-align: center; width: 24px; } .set-check { width: 32px; text-align: center; } .set-check button { background: transparent; border: 1px solid var(--border); color: var(--text-faint); width: 26px; height: 26px; border-radius: var(--r-sm); cursor: pointer; transition: all 0.12s; } .set-check button.done { background: var(--green); border-color: var(--green); color: #fff; } .ex-notes { margin-top: 10px; padding: 8px 10px; background: var(--accent-light); border-radius: var(--r-sm); font-size: 12px; color: var(--text-dim); border-left: 2px solid var(--accent-mid); line-height: 1.5; word-break: break-word; } .ex-notes b { color: var(--text); } .add-set { margin-top: 8px; background: transparent; border: 1.5px dashed var(--border-2); color: var(--text-faint); padding: 6px; width: 100%; border-radius: var(--r-sm); cursor: pointer; font-size: 10.5px; font-family: var(--mono); letter-spacing: 0.8px; transition: all 0.12s; } .add-set:hover { color: var(--accent); border-color: var(--accent-mid); background: var(--accent-light); } /* ============ BUTTONS ============ */ .btn { font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0.3px; padding: 12px 16px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; transition: all 0.15s; background: var(--bg-3); color: var(--text); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn.primary { background: var(--accent); color: white; border-color: var(--accent); } .btn.primary:hover { background: var(--accent-dark); } .btn.ghost { background: transparent; border-color: var(--border-2); color: var(--text-dim); } .btn.ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .btn.small { padding: 7px 12px; font-size: 11.5px; } .btn.full { width: 100%; } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.5; cursor: default; transform: none; } .ghost-btn { background: transparent; border: 1px solid var(--border-2); color: var(--text-dim); padding: 5px 10px; border-radius: var(--r-sm); cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: 0.8px; transition: all 0.12s; white-space: nowrap; } .ghost-btn:hover { color: var(--accent); border-color: var(--accent-mid); background: var(--accent-light); } .ghost-btn.small { padding: 4px 8px; font-size: 10px; } .session-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .session-actions .btn { flex: 1; min-width: 120px; } /* ============ PROGRAM VIEW ============ */ .program-overview h2 { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 4px; } .muted { color: var(--text-dim); font-size: 13px; margin-bottom: 16px; } .small { font-size: 12px; } .section-h { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .phase-cards { display: grid; gap: 10px; } .phase-card { display: grid; grid-template-columns: 52px 1fr; gap: 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; position: relative; overflow: hidden; min-width: 0; } .phase-card::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; } .phase-1::before { background: var(--amber); } .phase-2::before { background: var(--accent); } .phase-3::before { background: var(--green); } .phase-num { font-family: var(--display); font-size: 36px; font-weight: 700; color: var(--border-2); line-height: 1; } .phase-info h3 { font-family: var(--display); font-size: 16px; font-weight: 700; } .phase-weeks { font-family: var(--mono); font-size: 9.5px; color: var(--accent); letter-spacing: 0.8px; } .phase-info p { font-size: 13px; color: var(--text-dim); margin-top: 5px; } .split-table { width: 100%; border-collapse: collapse; font-size: 13px; } .split-table th, .split-table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--border); } .split-table th { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.8px; color: var(--text-faint); font-weight: 500; } .rules { padding-left: 0; list-style: none; } .rules li { padding: 9px 0 9px 22px; position: relative; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.5; } .rules li::before { content: '▸'; position: absolute; left: 0; color: var(--accent); } .week-control { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); } .week-control .btn { width: 40px; padding: 10px; } .week-display { display: flex; align-items: baseline; gap: 6px; } .week-num { font-family: var(--display); font-size: 42px; font-weight: 700; color: var(--accent); line-height: 1; } .week-label { font-family: var(--mono); font-size: 14px; color: var(--text-faint); } .export-row { display: flex; gap: 8px; flex-wrap: wrap; } .export-row .btn { flex: 1; min-width: 100px; } /* ============ HISTORY ============ */ .history-list { display: flex; flex-direction: column; gap: 8px; } .history-item { background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--accent-mid); border-radius: var(--r-sm); padding: 13px; cursor: pointer; transition: border-color 0.12s; min-width: 0; overflow: hidden; } .history-item:hover { border-left-color: var(--accent); } .history-item.has-pain { border-left-color: var(--red); } .history-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .history-day { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.8px; color: var(--accent); } .history-date { font-size: 12px; color: var(--text-faint); } .history-summary { font-family: var(--display); font-size: 16px; font-weight: 600; word-break: break-word; } .history-stats { display: flex; gap: 12px; margin-top: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--text-dim); flex-wrap: wrap; } .empty-state { text-align: center; padding: 52px 20px; color: var(--text-faint); font-size: 14px; } /* ============ STATS ============ */ .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; } .stat-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 3px; } .stat-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 1px; color: var(--text-faint); } .stat-val { font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--accent); line-height: 1; } .top-lifts { display: flex; flex-direction: column; gap: 7px; } .lift-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm); min-width: 0; overflow: hidden; } .lift-name { font-family: var(--display); font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lift-val { font-family: var(--mono); font-size: 12px; color: var(--accent); flex-shrink: 0; margin-left: 8px; } .full-select { width: 100%; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); padding: 11px 12px; border-radius: var(--r-sm); margin-bottom: 12px; font-family: var(--body); font-size: 14px; } .ex-history-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; padding: 9px 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: 6px; font-family: var(--mono); font-size: 11.5px; align-items: center; overflow: hidden; } .ex-history-row .date { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============ AI DRAWER ============ */ .drawer { position: fixed; bottom: 0; left: 0; right: 0; height: 74vh; background: var(--bg-2); border-top: 1px solid var(--border); border-radius: var(--r-xl) var(--r-xl) 0 0; z-index: 100; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; box-shadow: 0 -8px 40px rgba(15,17,23,0.12); overflow: hidden; max-width: 100%; } .drawer.open { transform: translateY(0); } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .drawer-head h3 { font-family: var(--display); font-size: 17px; font-weight: 700; } .drawer-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .chat-msg { padding: 11px 13px; border-radius: var(--r-sm); max-width: 88%; font-size: 14px; line-height: 1.55; word-break: break-word; overflow-wrap: anywhere; } .chat-msg.ai { background: var(--bg-3); border: 1px solid var(--border); align-self: flex-start; max-width: 92%; } .chat-msg.user { background: var(--accent); color: white; align-self: flex-end; max-width: 82%; } .chat-msg.thinking { background: var(--bg-3); color: var(--text-dim); font-style: italic; align-self: flex-start; } .chat-msg p { margin-bottom: 5px; } .chat-msg p:last-child { margin-bottom: 0; } .chat-msg ul, .chat-msg ol { padding-left: 18px; margin: 6px 0; } .chat-msg li { margin-bottom: 3px; } .chat-msg pre { background: var(--bg); padding: 8px; border-radius: var(--r-sm); overflow-x: auto; font-family: var(--mono); font-size: 11px; margin: 6px 0; } .chat-msg code { background: var(--bg); padding: 2px 5px; border-radius: 4px; font-family: var(--mono); font-size: 11.5px; } .suggest { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-top: 8px; } .suggest li { padding: 8px 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; font-size: 12px; color: var(--text-dim); transition: all 0.12s; } .suggest li:hover { color: var(--accent); border-color: var(--accent-mid); background: var(--accent-light); transform: translateX(2px); } .drawer-input { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--bg-2); align-items: flex-end; flex-shrink: 0; width: 100%; min-width: 0; } .drawer-input textarea { flex: 1; min-width: 0; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); padding: 9px 11px; border-radius: var(--r-sm); font-family: var(--body); font-size: 14px; resize: none; transition: border-color 0.15s; } .drawer-input textarea:focus { outline: none; border-color: var(--accent); } .drawer-input .btn { flex-shrink: 0; } /* inline clear button in drawer */ #clearChatBtn { padding: 0 10px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); border-radius: var(--r-sm); cursor: pointer; font-size: 0.75rem; flex-shrink: 0; height: 36px; white-space: nowrap; } /* ============ MODAL ============ */ .modal { position: fixed; inset: 0; background: rgba(15,17,23,0.35); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 200; padding: 16px; } .modal.open { display: flex; } .modal-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); } .modal-card.wide { max-width: 600px; } .modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); } .modal-head h3 { font-family: var(--display); font-size: 17px; font-weight: 700; } .modal-body { padding: 16px; } /* ============ SESSION RESULTS ============ */ .results-hero { text-align: center; padding: 8px 0 18px; } .results-hero .results-cycle { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--text-faint); text-transform: uppercase; } .results-hero .results-day { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: 0.5px; margin-top: 2px; } .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; } .results-stat { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 12px; text-align: center; } .results-stat.span-2 { grid-column: span 2; } .results-stat .stat-val { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1; color: var(--text); } .results-stat .stat-val small { font-size: 13px; font-weight: 600; color: var(--text-dim); } .results-stat .stat-label { font-family: var(--mono); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-faint); margin-top: 6px; } .results-stat.accent .stat-val { color: var(--accent); } .results-breakdown { margin-top: 4px; } .results-breakdown h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .results-ex-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .results-ex-row:last-child { border-bottom: none; } .results-ex-row .ex-n { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; } .results-ex-row .ex-d { color: var(--text-dim); white-space: nowrap; font-family: var(--mono); font-size: 11px; } .results-pain { background: rgba(220,80,80,0.08); border: 1px solid rgba(220,80,80,0.25); border-radius: var(--r-sm); padding: 10px 12px; margin: 12px 0 0; font-size: 12.5px; color: var(--text); } .results-prs { background: linear-gradient(135deg, rgba(245,200,66,0.12), rgba(245,200,66,0.04)); border: 1px solid rgba(212,165,40,0.35); border-radius: var(--r-md); padding: 12px 14px; margin: 14px 0 0; } .results-prs h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #b8860b; margin-bottom: 8px; } .results-pr-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; } .results-pr-row .pr-medal { flex-shrink: 0; } .results-pr-row .pr-ex { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .results-pr-row .pr-detail { margin-left: auto; color: var(--text-dim); font-family: var(--mono); font-size: 11px; white-space: nowrap; } /* ============ PROGRESSIVE OVERLOAD SUGGESTION ============ */ .ex-suggest { background: var(--accent-light, rgba(230,57,70,0.08)); border: 1px solid var(--accent-mid, rgba(230,57,70,0.2)); border-radius: var(--r-sm); padding: 8px 11px; font-size: 12.5px; color: var(--text); margin: 0 0 10px; line-height: 1.4; } /* ============ PLATE CALCULATOR ============ */ .plate-result { min-height: 60px; margin: 6px 0 12px; padding: 14px; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-md); } .plate-perside { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; } .plate-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .plate-chip { display: inline-flex; align-items: center; background: var(--accent); color: #fff; font-family: var(--display); font-weight: 700; font-size: 15px; padding: 8px 12px; border-radius: var(--r-sm); min-width: 44px; justify-content: center; } .plate-plus { color: var(--text-faint); font-weight: 700; } .plate-hint { color: var(--text-dim); font-size: 13px; } /* ============ BODY WEIGHT TRACKER ============ */ .bw-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .bw-row:last-child { border-bottom: none; } .bw-row .bw-date { color: var(--text-dim); font-family: var(--mono); font-size: 11px; } .bw-row .bw-val { font-weight: 600; margin-left: auto; } .bw-row .bw-del { background: none; border: none; color: var(--text-faint); font-size: 13px; cursor: pointer; padding: 2px 6px; border-radius: 4px; } .bw-row .bw-del:hover { color: var(--accent); background: var(--bg-3); } .results-actions { margin-top: 18px; } .results-calorie-note { font-family: var(--mono); font-size: 9px; color: var(--text-faint); text-align: center; margin-top: 10px; letter-spacing: 0.3px; } .field { display: block; margin-bottom: 14px; } .field > span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; color: var(--text-faint); margin-bottom: 5px; } .field input, .field select, .field textarea { width: 100%; background: var(--bg-3); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: var(--r-sm); font-family: var(--body); font-size: 14px; transition: border-color 0.15s, box-shadow 0.15s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } .field small { display: block; margin-top: 4px; color: var(--text-faint); font-size: 11px; line-height: 1.4; } .field-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; } .field-row .field { margin-bottom: 0; } .settings-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .settings-actions .btn { flex: 1; min-width: 100px; } .settings-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } /* ============ TOAST ============ */ .toast { position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--text); color: #fff; padding: 10px 18px; border-radius: var(--r-sm); font-size: 13px; font-family: var(--body); font-weight: 500; z-index: 300; transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.28s; opacity: 0; pointer-events: none; max-width: 88%; text-align: center; box-shadow: var(--shadow); white-space: nowrap; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* ============ BANNERS ============ */ .banner { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: var(--r-sm); margin-bottom: 11px; font-size: 13px; line-height: 1.5; min-width: 0; overflow: hidden; } .banner-warn { background: var(--amber-bg); border: 1px solid rgba(217,119,6,0.2); } .banner-success{ background: var(--green-bg); border: 1px solid rgba(22,163,74,0.2); } .banner-info { background: var(--accent-light); border: 1px solid var(--accent-mid); } .banner-icon { font-size: 16px; flex-shrink: 0; line-height: 1.4; } .banner-body { flex: 1; min-width: 0; } .banner-body b { display: block; margin-bottom: 2px; color: var(--text); font-weight: 600; } .banner-btn { margin-left: 6px; margin-top: 4px; background: transparent; border: 1px solid var(--border-2); color: var(--text-dim); font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 6px; cursor: pointer; transition: all 0.12s; white-space: nowrap; } .banner-btn:hover { border-color: var(--accent); color: var(--accent); } .banner-btn.primary { background: var(--accent); border-color: var(--accent); color: white; } /* ============ CYCLES VIEW ============ */ .cycle-card { background: var(--bg-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r); padding: 14px; margin-bottom: 14px; min-width: 0; overflow: hidden; } .cycle-card h3 { font-family: var(--display); font-size: 18px; font-weight: 700; margin: 5px 0 4px; } .cycle-badge { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; color: var(--accent); background: var(--accent-light); padding: 2px 7px; border-radius: 5px; } .cycle-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 10px; } .cycle-stats > div { background: var(--bg-3); padding: 8px; border-radius: var(--r-sm); text-align: center; } .cs-label { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: 0.8px; color: var(--text-faint); } .cs-val { display: block; font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--text); margin-top: 2px; } .ai-gen-card { background: var(--accent-light); border: 1px solid var(--accent-mid); border-radius: var(--r); padding: 16px; } .ai-gen-card p { font-size: 13px; line-height: 1.55; margin-bottom: 12px; } .goal-picker { margin-bottom: 12px; } .goal-picker label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; color: var(--text-faint); margin-bottom: 4px; } .goal-picker select, .goal-picker textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: var(--r-sm); font-family: var(--body); font-size: 13px; resize: vertical; } .ai-gen-card .btn.primary { width: 100%; margin-top: 4px; } .cycle-library { display: flex; flex-direction: column; gap: 8px; } .cycle-lib-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 13px; min-width: 0; overflow: hidden; } .cycle-lib-card.active { border-left: 3px solid var(--accent); } .clc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .cycle-lib-card h4 { font-family: var(--display); font-size: 16px; font-weight: 600; margin: 3px 0; } .clc-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; font-family: var(--mono); font-size: 10px; color: var(--text-dim); } /* ============ CYCLE PREVIEW MODAL ============ */ .prev-rationale { margin: 10px 0; padding: 10px 12px; background: var(--accent-light); border-left: 2px solid var(--accent-mid); border-radius: var(--r-sm); font-size: 13px; line-height: 1.55; color: var(--text-dim); font-style: italic; } .prev-phase { padding: 8px 10px; background: var(--bg-3); border-radius: var(--r-sm); margin-bottom: 6px; font-size: 12px; } .prev-day { background: var(--bg-3); border-radius: var(--r-sm); margin-bottom: 6px; overflow: hidden; } .prev-day summary { padding: 9px 12px; cursor: pointer; font-size: 13px; list-style: none; } .prev-day summary::-webkit-details-marker { display: none; } .prev-day summary::before { content: '▸ '; color: var(--accent); margin-right: 4px; } .prev-day[open] summary::before { content: '▾ '; } .prev-day ul { list-style: none; padding: 0 12px 12px 24px; } .prev-day li { padding: 4px 0; font-size: 12px; font-family: var(--mono); } .preview-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; } .preview-actions .btn { flex: 1; min-width: 100px; } /* ============ SESSION TIMER ============ */ #sessionTimerDisplay { font-family: var(--mono); font-size: 12px; color: var(--text-dim); padding: 6px 14px; letter-spacing: 0.5px; } /* ============ AI USAGE BAR ============ */ .ai-usage-bar { margin-top: 8px; font-size: 12px; color: var(--text-dim); font-family: var(--mono); } /* ============ PROFILE MENU ============ */ .profile-backdrop { position: fixed; inset: 0; background: rgba(15,17,23,0.2); backdrop-filter: blur(4px); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .profile-backdrop.open { opacity: 1; pointer-events: auto; } .profile-menu { position: fixed; top: 62px; right: 12px; left: 12px; max-width: 360px; margin-left: auto; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); z-index: 91; padding: 6px; transform: translateY(-10px) scale(0.96); opacity: 0; pointer-events: none; transition: all 0.18s cubic-bezier(0.4,0,0.2,1); box-shadow: var(--shadow-lg); } .profile-menu.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; } .prof-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-sm); cursor: pointer; transition: background 0.1s; position: relative; min-width: 0; overflow: hidden; } .prof-item:hover, .prof-item:active { background: var(--bg-3); } .prof-item.active { background: var(--accent-light); } .prof-avatar-lg { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-3); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .prof-info { flex: 1; min-width: 0; overflow: hidden; } .prof-name-lg { font-size: 15px; font-weight: 700; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prof-bio { font-size: 12px; color: var(--text-dim); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prof-stats { font-size: 10.5px; color: var(--text-faint); font-family: var(--mono); margin-top: 3px; } .prof-active-dot { color: var(--accent); font-size: 12px; position: absolute; top: 12px; right: 12px; } /* ============ VOICE OVERLAY ============ */ .voice-overlay { position: fixed; inset: 0; background: rgba(15,17,23,0.5); backdrop-filter: blur(10px); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .voice-overlay.open { opacity: 1; pointer-events: auto; } .voice-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 30px 22px; width: 88%; max-width: 320px; text-align: center; box-shadow: var(--shadow-lg); } .voice-mic-wrap { position: relative; width: 76px; height: 76px; margin: 0 auto 18px; } .voice-mic { width: 76px; height: 76px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 32px; position: relative; z-index: 2; } .voice-pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: 0.3; animation: pulse 1.5s ease-out infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(1.85); opacity: 0; } } .voice-context { font-size: 15px; font-weight: 600; margin-bottom: 5px; } .voice-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; font-style: italic; } .voice-status { font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 9px; } .voice-transcript { font-size: 13px; color: var(--text); min-height: 22px; padding: 9px 11px; background: var(--bg-3); border-radius: var(--r-sm); margin-bottom: 14px; font-family: var(--mono); } .voice-transcript:empty { display: none; } /* ============ REHAB DIFFICULTY ============ */ .diff-select { width: 100%; padding: 6px 4px; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; } .diff-select.diff-easy { color: var(--green); border-color: rgba(22,163,74,0.3); background: var(--green-bg); } .diff-select.diff-moderate { color: var(--amber); border-color: rgba(217,119,6,0.3); background: var(--amber-bg); } .diff-select.diff-hard { color: #f97316; border-color: rgba(249,115,22,0.3); background: rgba(249,115,22,0.06); } .diff-select.diff-pain { color: var(--red); border-color: rgba(220,38,38,0.3); background: var(--red-bg); } .diff-select.done { opacity: 0.65; } body.mode-srd .meta-item:has(#todayRpe) { display: none; } /* ============ ADMIN PANEL ============ */ #adminPanel { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } .admin-loading { color: var(--text-dim); font-size: 14px; } .admin-add { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .admin-add input { flex: 1; min-width: 110px; background: var(--bg-3); border: 1px solid var(--border-2); color: var(--text); padding: 9px 12px; border-radius: var(--r-sm); font-family: var(--body); font-size: 14px; outline: none; } .admin-add input:focus { border-color: var(--accent); } .admin-users { display: flex; flex-direction: column; gap: 7px; } .admin-user { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; overflow: hidden; } .admin-user-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .admin-user-email { font-size: 14px; font-weight: 600; word-break: break-all; } .admin-user-meta { font-size: 11px; color: var(--text-faint); } .admin-badge { font-family: var(--mono); font-size: 8.5px; background: var(--accent); color: white; padding: 1px 5px; border-radius: 4px; letter-spacing: 0.5px; vertical-align: middle; } .admin-toggle { flex-shrink: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.5px; padding: 5px 11px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; transition: all 0.12s; } .admin-toggle.on { background: var(--green-bg); color: var(--green); border-color: rgba(22,163,74,0.25); } .admin-toggle.off { background: var(--bg-2); color: var(--text-faint); border-color: var(--border-2); } .admin-user-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .admin-del { flex-shrink: 0; background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text-faint); font-size: 13px; line-height: 1; padding: 5px 8px; border-radius: 999px; cursor: pointer; transition: all 0.12s; } .admin-del:hover { background: rgba(220,80,80,0.12); border-color: rgba(220,80,80,0.4); color: #d65a5a; } .admin-send-link { flex-shrink: 0; background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text-dim); font-size: 13px; line-height: 1; padding: 5px 8px; border-radius: 999px; cursor: pointer; transition: all 0.12s; } .admin-send-link:hover { background: var(--green-bg,#f0fdf4); border-color: rgba(22,163,74,0.35); color: var(--green,#16a34a); } /* ============ CHART ============ */ .chart-container { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; margin-bottom: 8px; } /* ============ LOGIN SCREEN ============ */ .login-screen { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; background: var(--bg); } .login-bg { display: none; } .login-card { position: relative; width: 100%; max-width: 400px; animation: riseIn 0.5s cubic-bezier(0.16,1,0.3,1); } @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .login-mark { font-family: var(--mono); font-weight: 500; letter-spacing: 3px; color: var(--accent); font-size: 11px; margin-bottom: 20px; opacity: 0.8; } .login-h1 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 8vw, 38px); line-height: 1.1; letter-spacing: -0.8px; margin-bottom: 14px; color: var(--text); } .login-h1 em { color: var(--accent); font-style: normal; } .login-sub { color: var(--text-dim); font-size: 15px; line-height: 1.55; max-width: 320px; margin: 0 auto 26px; } .login-input { width: 100%; padding: 14px 16px; background: var(--bg-2); border: 1.5px solid var(--border); border-radius: var(--r-sm); font-family: var(--body); font-size: 16px; color: var(--text); outline: none; margin-bottom: 10px; box-shadow: var(--shadow-xs); transition: border-color 0.15s, box-shadow 0.15s; } .login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } .login-btn { width: 100%; padding: 14px; background: var(--accent); color: white; border: none; border-radius: var(--r-sm); font-family: var(--body); font-size: 14px; font-weight: 700; letter-spacing: 0.5px; cursor: pointer; transition: background 0.15s; } .login-btn:hover { background: var(--accent-dark); } .login-btn:active { transform: scale(0.98); } .login-btn:disabled { opacity: 0.55; cursor: default; } .login-note { color: var(--accent); font-size: 13px; margin-top: 10px; min-height: 16px; } .login-link { background: none; border: none; color: var(--text-dim); text-decoration: underline; cursor: pointer; font-size: 13px; font-family: var(--body); margin-top: 14px; transition: color 0.12s; } .login-link:hover { color: var(--accent); } .login-sent { animation: riseIn 0.4s; } .login-check { width: 58px; height: 58px; border-radius: 50%; background: var(--accent-light); color: var(--accent); border: 2px solid var(--accent-mid); font-size: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .login-sent h2 { font-family: var(--display); font-weight: 700; font-size: 22px; margin-bottom: 8px; } .login-foot { color: var(--text-faint); font-size: 11px; letter-spacing: 1px; position: absolute; bottom: -40px; left: 0; right: 0; text-align: center; } /* ============ INTAKE WIZARD ============ */ .intake-screen { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg); } .intake-card { width: 100%; max-width: 440px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 24px 20px 20px; box-shadow: var(--shadow-lg); animation: riseIn 0.45s cubic-bezier(0.16,1,0.3,1); } .intake-progress { height: 3px; background: var(--bg-3); border-radius: 99px; overflow: hidden; margin-bottom: 20px; } .intake-progress-bar { height: 100%; background: var(--accent); border-radius: 99px; transition: width 0.4s cubic-bezier(0.16,1,0.3,1); } .intake-step-num { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; color: var(--accent); margin-bottom: 6px; } .intake-title { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 18px; } .intake-input { width: 100%; background: var(--bg-3); border: 1px solid var(--border-2); color: var(--text); font-size: 16px; font-family: var(--body); padding: 13px 15px; border-radius: var(--r-sm); outline: none; resize: none; transition: border-color 0.2s, box-shadow 0.2s; } .intake-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } .intake-input.shake { animation: shake 0.35s; border-color: var(--red); } @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} } .intake-options { display: flex; flex-direction: column; gap: 9px; } .intake-opt { text-align: left; background: var(--bg-3); border: 1px solid var(--border-2); color: var(--text); font-size: 14px; font-family: var(--body); font-weight: 500; padding: 13px 16px; border-radius: var(--r-sm); cursor: pointer; transition: all 0.15s; } .intake-opt:hover { border-color: var(--accent-mid); transform: translateX(2px); } .intake-opt.sel { background: var(--accent-light); border-color: var(--accent-mid); } .intake-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; } .intake-back { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; font-family: var(--body); } .intake-back:hover { color: var(--text); } .intake-next { background: var(--accent); color: white; border: none; font-family: var(--body); font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: var(--r-sm); cursor: pointer; transition: background 0.15s; } .intake-next:hover { background: var(--accent-dark); } .intake-next:active { transform: scale(0.97); } .intake-skip { display: block; margin: 14px auto 0; background: none; border: none; color: var(--text-faint); text-decoration: underline; cursor: pointer; font-size: 12px; } .intake-building, .intake-done { text-align: center; } .intake-build-note { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin-top: 10px; } .intake-spinner { width: 44px; height: 44px; margin: 8px auto 16px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .intake-check { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 14px; background: var(--accent-light); color: var(--accent); border: 2px solid var(--accent-mid); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; animation: popIn 0.4s cubic-bezier(0.16,1,0.3,1); } @keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .intake-done .intake-next { margin-top: 20px; width: 100%; } /* ============ PRINT ============ */ @media print { body { background: white; color: black; padding: 0; font-size: 13px; overflow-x: visible; } .topbar, .tabs, .drawer, .modal, .toast, .session-actions, .day-picker, .export-row, .week-control, .ex-actions, .add-set, .icon-btn, .profile-chip, .profile-menu, .profile-backdrop { display: none !important; } .view { display: block !important; padding: 12px; } .view#view-today, .view#view-program { page-break-after: always; } .block, .ex-card, .phase-card, .stat-card, .day-header { background: white !important; border: 1px solid #ccc !important; color: black !important; break-inside: avoid; } .day-tag, .ex-target, .phase-weeks, .meta-label, .stat-label, .section-h, .block-title { color: #1d4ed8 !important; } .set-table input { background: white !important; border: 1px solid #ccc !important; } } /* ============ DESKTOP ============ */ @media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } .cycle-stats { grid-template-columns: repeat(4, 1fr); } .drawer { max-width: 480px; right: 16px; left: auto; bottom: 16px; border-radius: var(--r-lg); height: 70vh; } } /* ============ SMALL SCREENS ============ */ @media (max-width: 380px) { .tab { font-size: 8px; letter-spacing: 0.3px; padding: 11px 1px; } .cycle-stats { grid-template-columns: repeat(2, 1fr); } .day-header h2 { font-size: 17px; } .profile-chip { max-width: 90px; } .prof-name { max-width: 42px; } .view { padding: 10px; } .ex-card { margin: 8px 8px; padding: 11px; } } @media (max-width: 480px) { .topbar { gap: 4px; padding: 9px 10px; } .topbar-actions { gap: 4px; } .icon-btn { width: 32px; height: 32px; } .session-actions .btn { font-size: 12px; padding: 10px 10px; } }