*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Never let the page pan sideways on a phone — content stays within the screen */ html, body { overflow-x: hidden; max-width: 100%; } /* Themed base behind everything (the 3D scene / transparent surfaces sit on top) */ html { background: var(--bg); } :root { /* ── Core Light Theme ── */ --bg: #F4F6FB; --bg-2: #FFFFFF; --sidebar-bg: #FFFFFF; --card: #FFFFFF; --card-2: #F1F5F9; --text: #1E293B; --text-muted: #64748B; --border: #E4E9F0; --border-bright: #CBD5E1; /* Surface fills + form fields (light) and neutral tints, used everywhere via vars */ --surface: #F1F5F9; --field-bg: #F8FAFC; --overlay: rgba(15,23,42,0.45); --tint-1: rgba(15,23,42,0.02); --tint-2: rgba(15,23,42,0.04); --tint-3: rgba(15,23,42,0.06); --tint-4: rgba(15,23,42,0.09); /* ── Brand Colors ── */ --primary: #3B82F6; --primary-hover: #2563EB; --primary-glow: rgba(59,130,246,0.25); --accent: #F59E0B; --accent-light: rgba(245,158,11,0.08); --accent-glow: rgba(245,158,11,0.2); /* ── Status Colors ── */ --success: #10B981; --success-bg: rgba(16,185,129,0.1); --warning: #F59E0B; --warning-bg: rgba(245,158,11,0.1); --danger: #EF4444; --danger-bg: rgba(239,68,68,0.1); /* ── 4-Pillar Colors ── */ --gym-color: #10B981; --gym-bg: rgba(16,185,129,0.08); --gym-border: rgba(16,185,129,0.35); --gym-glow: rgba(16,185,129,0.18); --food-color: #F59E0B; --food-bg: rgba(245,158,11,0.08); --food-border: rgba(245,158,11,0.35); --food-glow: rgba(245,158,11,0.18); --network-color: #3B82F6; --network-bg: rgba(59,130,246,0.08); --network-border: rgba(59,130,246,0.35); --network-glow: rgba(59,130,246,0.18); --money-color: #A78BFA; --money-bg: rgba(167,139,250,0.08); --money-border: rgba(167,139,250,0.35); --money-glow: rgba(167,139,250,0.18); --read-color: #06B6D4; --read-bg: rgba(6,182,212,0.08); --read-border: rgba(6,182,212,0.35); --read-glow: rgba(6,182,212,0.18); --water-color: #38BDF8; --water-bg: rgba(56,189,248,0.08); --water-border: rgba(56,189,248,0.35); --water-glow: rgba(56,189,248,0.18); /* Frosted app chrome (header / tab bar) — flips in dark mode */ --chrome-bg: rgba(255,255,255,0.80); --chrome-border: rgba(228,233,240,0.9); /* Soft, layered elevation (Untitled-UI / Linear style) — grounded, never neon */ --shadow: 0 1px 2px rgba(16,24,40,0.04), 0 4px 10px -2px rgba(16,24,40,0.06); --shadow-md: 0 4px 8px -2px rgba(16,24,40,0.06), 0 12px 22px -6px rgba(16,24,40,0.08); --shadow-lg: 0 12px 28px -6px rgba(16,24,40,0.12), 0 22px 44px -12px rgba(16,24,40,0.12); --radius: 16px; --radius-sm: 10px; --sidebar-width: 240px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; } /* ─── Dark theme ─────────────────────────────────── JS resolves the effective theme (Auto → the OS setting) and sets data-theme="dark|light" on , so only this one block is needed. */ :root[data-theme="dark"] { --bg: #0B1120; --bg-2: #131B2E; --sidebar-bg: #0F1728; --card: #161F33; --card-2: #1E293B; --text: #E6EDF7; --text-muted: #93A2BC; --border: #26324A; --border-bright: #3A4966; --surface: #1B2438; --field-bg: #131B2E; --overlay: rgba(2,6,23,0.66); --tint-1: rgba(255,255,255,0.03); --tint-2: rgba(255,255,255,0.05); --tint-3: rgba(255,255,255,0.07); --tint-4: rgba(255,255,255,0.10); --chrome-bg: rgba(15,23,42,0.72); --chrome-border: rgba(255,255,255,0.08); --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); --shadow-lg: 0 16px 44px rgba(0,0,0,0.62); --accent-light: rgba(245,158,11,0.12); } /* A few spots reference light-only literals — brighten them for dark */ :root[data-theme="dark"] .nav-item.active { color: #A9C4FF; background: rgba(59,130,246,0.18); } :root[data-theme="dark"] .btn-primary { box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 20px -6px rgba(37,99,235,0.5); } :root[data-theme="dark"] .loading-screen p { color: var(--text-muted); } /* Theme picker (Settings › Appearance) */ .theme-seg { display: inline-flex; gap: 3px; background: var(--surface); border-radius: 10px; padding: 3px; } .theme-seg-btn { border: none; background: transparent; color: var(--text-muted); font-family: inherit; font-weight: 700; font-size: 12px; padding: 6px 13px; border-radius: 7px; cursor: pointer; transition: all .15s; } .theme-seg-btn.on { background: var(--card); color: var(--text); box-shadow: var(--shadow); } .theme-seg-btn:active { transform: scale(0.95); } body { font-family: var(--font); background: var(--bg); color: var(--text); display: flex; min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; } /* Tabular figures so all stats/tables align like a real dashboard */ .page-title, .card-title, table td, table th, [class*="-big"], [class*="-value"], [class*="-num"], [class*="-total"], [class*="-count"], [class*="-stat"], [class*="-amount"], [class*="-pct"] { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum', 'cv11'; } /* Craft details: text selection, focus ring, thin scrollbars */ ::selection { background: rgba(59,130,246,0.22); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } * { scrollbar-width: thin; scrollbar-color: var(--border-bright) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } /* ─── Sidebar ─────────────────────────────────── */ .sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; border-right: 1px solid var(--border); } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 24px 20px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgba(59,130,246,0.06), transparent); } .brand-icon { font-size: 28px; line-height: 1; } /* Emoji icons were removed — collapse any now-empty icon holders so they leave no gap */ .brand-icon:empty, .nav-icon:empty, .pillar-icon:empty, .di-icon:empty, .ach-icon:empty, .empty-icon:empty, .insight-icon:empty, .api-key-icon:empty, .rbc-icon:empty, .rsc-icon:empty, .fb-icon:empty, .dd-icon:empty, .hyd-icon:empty, .ob-area-icon:empty, .auth-brand .brand-icon:empty { display: none; } .brand-title { font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.2; letter-spacing: -0.3px; } .brand-sub { font-size: 10px; color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 1.5px; } .sidebar-nav { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; } /* Line icons (currentColor → theme + active state aware) */ .nav-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; } .nav-icon svg { width: 18px; height: 18px; display: block; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.15s; cursor: pointer; border-left: 3px solid transparent; } .nav-item:hover { background: var(--tint-2); color: var(--text); } .nav-item.active { background: rgba(59,130,246,0.12); color: #2563EB; font-weight: 700; border-left-color: var(--primary); box-shadow: 0 0 20px rgba(59,130,246,0.08); } .nav-icon { font-size: 17px; flex-shrink: 0; } .sidebar-footer { padding: 16px; border-top: 1px solid var(--border); } .btn-demo { width: 100%; background: var(--tint-2); border: 1px solid var(--border); color: var(--text-muted); padding: 9px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; transition: all 0.15s; } .btn-demo:hover { background: var(--tint-3); color: var(--text); border-color: var(--border-bright); } /* ─── Main ────────────────────────────────────── */ .main { margin-left: var(--sidebar-width); flex: 1; padding: 32px; min-height: 100vh; min-height: 100dvh; background: var(--bg); position: relative; isolation: isolate; } /* Living gradient — warm "fire" glows. FIXED to the viewport (not the full page height) with a translate-only animation, so it never repaints during scroll. */ .main::before { content: ''; position: fixed; inset: -12%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 55% at 92% 0%, rgba(249,115,22,0.10) 0%, transparent 60%), /* orange — energy */ radial-gradient(ellipse 60% 50% at 108% 35%, rgba(236,72,153,0.07) 0%, transparent 55%), /* pink — drive */ radial-gradient(ellipse 85% 60% at 0% 100%, rgba(239,68,68,0.07) 0%, transparent 55%), /* red — fire */ radial-gradient(ellipse 55% 45% at 12% 4%, rgba(245,158,11,0.06) 0%, transparent 50%); /* amber — warmth */ animation: bgDrift 32s ease-in-out infinite alternate; will-change: transform; } @keyframes bgDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-4%, 3%, 0); } } @media (prefers-reduced-motion: reduce) { .main::before, #auth-screen::before { animation: none !important; } } .page-header { margin-bottom: 28px; } .page-title { font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -0.03em; line-height: 1.15; } .page-sub { color: var(--text-muted); margin-top: 4px; font-size: 14px; } /* ─── Cards ───────────────────────────────────── */ .card { background: var(--card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); border: 1px solid var(--border); margin-bottom: 20px; transition: border-color 0.2s; } .card:hover { border-color: var(--border-bright); } .card-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--text); } .card-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; } /* ─── 4-Pillar Grid ───────────────────────────── */ .pillar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; } .pillar-card { --rx: 0deg; --ry: 0deg; --lift: 0px; --sheen: 0; --gx: 50%; --gy: 0%; --pc: var(--accent); --pc-bg: var(--card); --pc-glow: rgba(15,23,42,.10); --pc-border: var(--border); border-radius: var(--radius); padding: 20px; display: flex; align-items: flex-start; gap: 14px; border: 1px solid var(--pc-border); border-left-width: 4px; border-left-color: var(--pc); background: radial-gradient(140% 90% at var(--gx) var(--gy), rgba(255,255,255,calc(.55 * var(--sheen))), transparent 46%), linear-gradient(155deg, var(--pc-bg), var(--card) 62%); position: relative; overflow: hidden; transform-style: preserve-3d; transform: perspective(720px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)); box-shadow: -4px 0 24px var(--pc-glow), var(--shadow); transition: transform .18s ease-out, box-shadow .25s ease; animation: statRise .55s cubic-bezier(.2,.7,.2,1) backwards; } .pillar-card:hover { box-shadow: -6px 14px 36px var(--pc-glow), var(--shadow-lg); } .pillar-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--pc), transparent); opacity: .55; } .pillar-card.gym { --pc: var(--gym-color); --pc-bg: var(--gym-bg); --pc-glow: var(--gym-glow); --pc-border: var(--gym-border); } .pillar-card.food { --pc: var(--food-color); --pc-bg: var(--food-bg); --pc-glow: var(--food-glow); --pc-border: var(--food-border); } .pillar-card.network { --pc: var(--network-color); --pc-bg: var(--network-bg); --pc-glow: var(--network-glow); --pc-border: var(--network-border); } .pillar-card.money { --pc: var(--money-color); --pc-bg: var(--money-bg); --pc-glow: var(--money-glow); --pc-border: var(--money-border); } .pillar-card.read { --pc: var(--read-color); --pc-bg: var(--read-bg); --pc-glow: var(--read-glow); --pc-border: var(--read-border); } .pillar-card:nth-child(1) { animation-delay: .03s; } .pillar-card:nth-child(2) { animation-delay: .10s; } .pillar-card:nth-child(3) { animation-delay: .17s; } .pillar-card:nth-child(4) { animation-delay: .24s; } .pillar-card:nth-child(5) { animation-delay: .31s; } @keyframes statRise { from { opacity: 0; transform: perspective(720px) translateY(22px) rotateX(9deg); } } .pillar-icon { font-size: 22px; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--pc-bg); box-shadow: inset 0 0 0 1px var(--pc-border); } .pillar-body { flex: 1; min-width: 0; } .pillar-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 5px; } .pillar-value { font-size: 27px; font-weight: 900; line-height: 1; color: var(--pc); letter-spacing: -.5px; } .pillar-value .anim-count { color: var(--pc); } /* the number: big + pillar colour */ .pillar-value span:not(.anim-count) { font-size: 14px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; } .pillar-sub { font-size: 12px; color: var(--text-muted); margin-top: 6px; } .pillar-badge { position: absolute; top: 14px; right: 14px; font-size: 13px; font-weight: 800; color: var(--pc); } .gym-badge { color: var(--gym-color); } .food-badge { color: var(--food-color); } .network-badge { color: var(--network-color); } .money-badge { color: var(--money-color); } .read-badge { color: var(--read-color); } @media (prefers-reduced-motion: reduce) { .pillar-card { animation: none; transform: none; transition: box-shadow .25s ease; } } /* ─── Weekly Score Card ───────────────────────── */ .score-card { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 20px 24px; background: linear-gradient(135deg, var(--card), var(--card-2)); } .score-circle { width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--score-color, var(--accent)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: transparent; box-shadow: 0 0 30px var(--score-color, var(--accent-glow)), inset 0 0 20px var(--tint-1); flex-direction: row; } .score-num { font-size: 26px; font-weight: 900; color: var(--text); } .score-pct { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-top: 4px; } .score-label { font-size: 20px; font-weight: 800; color: var(--text); } .score-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; } .score-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; background: var(--field-bg); border-radius: var(--radius-sm); border: 1px solid var(--border); min-width: 240px; } .sg-item { font-size: 12px; display: flex; flex-direction: column; gap: 4px; } .sg-item span { color: var(--text-muted); } .sg-item strong { font-size: 14px; color: var(--text); } .sg-item-top { display: flex; justify-content: space-between; align-items: center; } .goal-bar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 2px; } .goal-bar-fill { height: 100%; border-radius: 3px; transition: width 0.9s cubic-bezier(0.4,0,0.2,1); min-width: 2px; } /* ─── Charts ──────────────────────────────────── */ .charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .chart-wrap { position: relative; height: 220px; } .charts-row.single { grid-template-columns: 1fr; } /* ─── Tables ──────────────────────────────────── */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 1px solid var(--border); background: var(--surface); } .table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); } .table tr:last-child td { border-bottom: none; } .table tr:hover td { background: var(--tint-1); } .table tfoot td { padding: 12px; border-top: 1px solid var(--border); border-bottom: none; background: var(--surface); } .action-cell { white-space: nowrap; text-align: right; } /* ─── Badges & Pills ──────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; } .badge-success { background: var(--success-bg); color: var(--success); } .badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .badge-neutral { background: var(--tint-2); color: var(--text-muted); border: 1px solid var(--border); } .pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; } .pill-gym { background: var(--gym-bg); color: var(--gym-color); } .pill-food { background: var(--food-bg); color: var(--food-color); } .pill-network { background: var(--network-bg); color: var(--network-color); } .pill-money { background: var(--money-bg); color: var(--money-color); } /* ─── Buttons ─────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn:active:not(:disabled) { transform: scale(0.97); } /* Tactile press feedback across tappable elements */ .meal-chip:active, .recent-chip:active, .more-item:active, .gym-btn:active, .bnav-item:active, .ql-gym-btn:active, .rating-btn:active { transform: scale(0.97); } .btn-primary { background: linear-gradient(180deg, #3B82F6, #2563EB); color: #fff; box-shadow: 0 1px 2px rgba(37,99,235,0.24), 0 6px 16px -4px rgba(37,99,235,0.36); } .btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #4F90F7, #2E6BE6); box-shadow: 0 2px 4px rgba(37,99,235,0.28), 0 12px 26px -6px rgba(37,99,235,0.46); transform: translateY(-1px); } .btn-outline { background: transparent; border: 1.5px solid var(--border-bright); color: var(--text); } .btn-outline:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: rgba(59,130,246,0.06); } .btn-lg { padding: 13px 28px; font-size: 15px; } .btn-icon { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; font-size: 14px; transition: all 0.15s; } .btn-icon:hover { background: var(--danger-bg); color: var(--danger); } .btn-sm { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--card-2); color: var(--text-muted); cursor: pointer; transition: all 0.15s; margin-right: 4px; white-space: nowrap; } .btn-sm:hover { border-color: var(--primary); color: var(--primary); background: rgba(59,130,246,0.06); } .btn-sm-danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); } .btn-link { background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; padding: 2px 6px; border-radius: 4px; text-decoration: underline; transition: color 0.15s; } .btn-link:hover { color: var(--primary); } .btn-link-inline { background: none; border: none; color: var(--primary); font-size: inherit; cursor: pointer; padding: 0; text-decoration: underline; } /* ─── Forms ───────────────────────────────────── */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: var(--font); background: var(--field-bg); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; outline: none; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); } .form-group select option { background: var(--card-2); color: var(--text); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(59,130,246,0.14); } /* Bring-your-own AI key form (provider + key + optional base/model) */ .ak-form { display: flex; flex-direction: column; margin-top: 6px; } .ak-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin: 10px 0 5px; } .ak-input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); font-size: 14px; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; } .ak-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(59,130,246,0.14); } .ak-key { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .ak-row { display: flex; gap: 8px; align-items: stretch; } .ak-row .btn { flex: none; } .ak-advanced { display: flex; flex-direction: column; } .ak-hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 8px; } .form-group textarea { resize: vertical; min-height: 72px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-actions { margin-top: 24px; display: flex; justify-content: flex-end; } /* ─── Log Today Sections ──────────────────────── */ .today-section { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; background: var(--surface); transition: border-color 0.2s; } .today-section-header { font-size: 15px; font-weight: 700; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .gym-section { border-color: var(--gym-border); } .gym-section:hover { box-shadow: 0 0 20px var(--gym-glow); } .gym-header { color: var(--gym-color); border-bottom-color: var(--gym-border); } .food-section { border-color: var(--food-border); } .food-section:hover { box-shadow: 0 0 20px var(--food-glow); } .food-header { color: var(--food-color); border-bottom-color: var(--food-border); } .network-section { border-color: var(--network-border); } .network-section:hover { box-shadow: 0 0 20px var(--network-glow); } .network-header { color: var(--network-color); border-bottom-color: var(--network-border); } .money-section { border-color: var(--money-border); } .money-section:hover { box-shadow: 0 0 20px var(--money-glow); } .money-header { color: var(--money-color); border-bottom-color: var(--money-border); } /* ─── Gym Toggle ──────────────────────────────── */ .gym-toggle { display: flex; gap: 10px; margin-bottom: 16px; } .gym-btn { flex: 1; padding: 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--field-bg); color: var(--text-muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .gym-btn:hover { border-color: var(--gym-color); color: var(--gym-color); } .gym-btn.gym-yes { background: var(--gym-bg); border-color: var(--gym-color); color: var(--gym-color); box-shadow: 0 0 16px var(--gym-glow); } .gym-btn.gym-no { background: var(--surface); border-color: var(--border-bright); color: var(--text-muted); } /* ─── Food Rating ─────────────────────────────── */ .rating-row { display: flex; gap: 10px; margin-bottom: 12px; } .rating-btn { width: 52px; height: 52px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--field-bg); font-size: 18px; font-weight: 800; cursor: pointer; transition: all 0.15s; color: var(--text-muted); } .rating-btn:hover { transform: scale(1.1); border-color: var(--border-bright); } .rating-btn.r1.sel { background: rgba(239,68,68,0.12); border-color: #EF4444; color: #EF4444; box-shadow: 0 0 12px rgba(239,68,68,0.2); } .rating-btn.r2.sel { background: rgba(245,158,11,0.12); border-color: #F59E0B; color: #F59E0B; } .rating-btn.r3.sel { background: rgba(245,158,11,0.12); border-color: #F59E0B; color: #F59E0B; } .rating-btn.r4.sel { background: var(--success-bg); border-color: var(--success); color: var(--success); box-shadow: 0 0 12px rgba(16,185,129,0.2); } .rating-btn.r5.sel { background: rgba(16,185,129,0.15); border-color: var(--success); color: var(--success); transform: scale(1.12); box-shadow: 0 0 18px rgba(16,185,129,0.3); } /* ─── Business Ideas ──────────────────────────── */ .ideas-section-title { font-size: 15px; font-weight: 700; margin: 20px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--text); } .ideas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 8px; } .idea-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); transition: border-color 0.2s, box-shadow 0.2s; } .idea-card:hover { border-color: var(--border-bright); } .idea-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .idea-title { font-size: 15px; font-weight: 700; flex: 1; color: var(--text); } .idea-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 10px; } .idea-notes { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; background: var(--surface); padding: 6px 10px; border-radius: 6px; } .idea-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .idea-status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; flex-shrink: 0; } .idea-status-badge.active { background: var(--gym-bg); color: var(--gym-color); border: 1px solid var(--gym-border); } .idea-status-badge.exploring { background: var(--network-bg); color: var(--network-color); border: 1px solid var(--network-border); } .idea-status-badge.dropped { background: var(--tint-2); color: var(--text-muted); border: 1px solid var(--border); } /* ─── Idea scoring ─── */ .idea-top { border-color: var(--success); box-shadow: 0 0 0 1px var(--success), var(--shadow); } .idea-score { flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 5px; font-size: 20px; font-weight: 800; color: var(--text); line-height: 1; } .idea-score em { font-size: 10px; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: .4px; padding: 2px 7px; border-radius: 999px; } .idea-score.s-strong { color: #0E9F6E; } .idea-score.s-strong em { background: rgba(16,185,129,.14); color: #0E9F6E; } .idea-score.s-good { color: var(--accent); } .idea-score.s-good em { background: var(--tint-1); color: var(--accent); } .idea-score.s-ok { color: var(--warning); } .idea-score.s-ok em { background: rgba(245,158,11,.14); color: var(--warning); } .idea-score.s-low { color: var(--text-muted); } .idea-score.s-low em { background: var(--surface); color: var(--text-muted); } .idea-score.idea-unrated { font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border-bright); border-radius: 999px; padding: 4px 10px; } .idea-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; margin: 10px 0; } .idim { display: flex; align-items: center; gap: 7px; } .idim-l { font-size: 11px; color: var(--text-muted); width: 40px; flex: none; } .idim-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--surface); overflow: hidden; } .idim-bar i { display: block; height: 100%; background: var(--gym-color); border-radius: 3px; } .idea-next { font-size: 13px; color: var(--text); background: var(--surface); border-radius: 8px; padding: 7px 10px; margin-bottom: 4px; } .idea-next b { color: var(--success); } .btn-eval { border-color: var(--success) !important; color: var(--success) !important; font-weight: 700; } /* Strongest-bet banner */ .idea-focus { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.28); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px; } .if-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--success); } .if-title { font-size: 18px; font-weight: 800; color: var(--text); margin-top: 3px; display: flex; align-items: center; gap: 10px; } .if-score { font-size: 14px; font-weight: 800; color: #fff; background: var(--success); border-radius: 999px; padding: 2px 10px; } .if-next { font-size: 13px; color: var(--text-muted); margin-top: 4px; } .if-muted { font-style: italic; } /* Evaluate modal */ .idea-eval-box { max-width: 460px; width: 100%; } .ie-score-big { text-align: center; font-size: 34px; font-weight: 800; margin: 6px 0 14px; display: flex; align-items: baseline; justify-content: center; gap: 8px; } .ie-score-big em { font-size: 12px; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: .5px; padding: 3px 9px; border-radius: 999px; } .ie-score-big.s-strong { color: #0E9F6E; } .ie-score-big.s-good { color: var(--accent); } .ie-score-big.s-ok { color: var(--warning); } .ie-score-big.s-low { color: var(--text-muted); } .ie-score-big.s-strong em { background: rgba(16,185,129,.14); } .ie-score-big.s-good em { background: var(--tint-1); } .ie-score-big.s-ok em { background: rgba(245,158,11,.14); } .ie-score-big.s-low em { background: var(--surface); } .ie-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); } .ie-dim b { display: block; font-size: 14px; color: var(--text); } .ie-dim span { font-size: 11px; color: var(--text-muted); } .ie-dots { display: flex; gap: 5px; flex: none; } .ie-dot { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .ie-dot.on { background: var(--gym-color); border-color: var(--gym-color); color: #fff; } /* ─── Lean Startup validation ─── */ .btn-validate { border-color: var(--accent) !important; color: var(--accent) !important; font-weight: 700; } .idea-val { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; } .iv-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--surface); overflow: hidden; } .iv-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .iv-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); } .iv-badge.iv-hypothesis, .iv-badge.iv-started { background: var(--network-bg); color: var(--network-color); border-color: var(--network-border); } .iv-badge.iv-experiment, .iv-badge.iv-measuring { background: rgba(245,158,11,.14); color: var(--warning); border-color: rgba(245,158,11,.3); } .iv-badge.iv-validated { background: var(--gym-bg); color: var(--gym-color); border-color: var(--gym-border); } .iv-badge.iv-pivot { background: rgba(239,68,68,.12); color: var(--danger); border-color: rgba(239,68,68,.3); } /* Validate modal */ .iv-box { max-width: 500px; width: 100%; max-height: 88vh; overflow-y: auto; } .iv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .iv-stage { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; } .iv-sec { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); margin: 16px 0 6px; } .iv-field { margin-bottom: 10px; } .iv-field label { display: block; font-size: 14px; font-weight: 700; color: var(--text); } .iv-hint { font-size: 12px; color: var(--text-muted); margin: 2px 0 6px; line-height: 1.4; } .iv-field textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--field-bg, var(--bg-2)); color: var(--text); font-family: inherit; font-size: 14px; resize: vertical; } .iv-field textarea:focus { outline: none; border-color: var(--accent); } .iv-decide { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .iv-decide > span { font-size: 13px; font-weight: 700; color: var(--text-muted); } .iv-dec { padding: 8px 16px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .iv-dec[data-dec="persevere"].on { background: var(--gym-color); border-color: var(--gym-color); color: #fff; } .iv-dec[data-dec="pivot"].on { background: var(--danger); border-color: var(--danger); color: #fff; } .iv-ai-hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; font-style: italic; } /* Validation-coach chat modal */ .ic-box { max-width: 540px; width: 100%; display: flex; flex-direction: column; max-height: 90vh; } .ic-thread { flex: 1; min-height: 300px; max-height: 62vh; overflow-y: auto; margin: 10px 0; padding-right: 4px; } /* ─── Idea workspace ─── */ .btn-open { border-color: var(--accent) !important; color: var(--accent) !important; font-weight: 700; } .pc-mini { font-size: 12px; color: var(--text-muted); margin: 2px 0 6px; } .idw-wrap { max-width: 640px; margin: 0 auto; padding: 4px 2px 60px; } .idw-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .idw-title { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.4px; margin: 2px 0 8px; } .idw-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .idw-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .idw-sec-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin: 18px 0 6px; } .idw-ta { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--field-bg, var(--bg-2)); color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.5; resize: vertical; min-height: 60px; } .idw-ta:focus { outline: none; border-color: var(--accent); } .idw-notes { min-height: 120px; } .idw-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 560px) { .idw-pc { grid-template-columns: 1fr; } } .pc-col { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; } .pc-h { font-size: 13px; font-weight: 800; margin-bottom: 8px; } .pc-pros-h { color: #0E9F6E; } .pc-cons-h { color: var(--danger); } .pc-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 5px; } .pc-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; background: var(--surface); border-radius: 8px; padding: 7px 10px; font-size: 14px; color: var(--text); line-height: 1.4; } .pc-list li button { background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; flex: none; padding: 0 2px; } .pc-list li button:hover { color: var(--danger); } .pc-empty { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } .pc-add { display: flex; gap: 6px; } .pc-add input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--field-bg, var(--bg-2)); color: var(--text); font-family: inherit; font-size: 14px; } .pc-add input:focus { outline: none; border-color: var(--accent); } .pc-add button { flex: none; width: 38px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 18px; font-weight: 700; cursor: pointer; } .pc-add button:hover { border-color: var(--accent); color: var(--accent); } .idw-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); } /* Idea checklist */ .idw-cl-bar { height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; margin: 0 0 8px; } .idw-cl-bar i { display: block; height: 100%; background: var(--gym-color); border-radius: 3px; transition: width .2s; } .idw-cl { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; } .clx-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; } .clx-box { width: 22px; height: 22px; flex: none; border: 1.5px solid var(--border-bright); border-radius: 6px; background: var(--card); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; display: grid; place-items: center; } .clx-row.clx-done .clx-box { background: var(--gym-color); border-color: var(--gym-color); } .clx-text { flex: 1; font-size: 14px; color: var(--text); line-height: 1.4; } .clx-row.clx-done .clx-text { text-decoration: line-through; color: var(--text-muted); } .clx-del { background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; flex: none; padding: 0 2px; } .clx-del:hover { color: var(--danger); } .insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .insight-card { display: flex; flex-direction: column; gap: 12px; } .insight-card-header { display: flex; align-items: flex-start; gap: 12px; } .insight-icon { font-size: 28px; flex-shrink: 0; } .insight-card-header h3 { font-size: 15px; font-weight: 700; color: var(--text); } .insight-card-header p { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .insight-result { margin-top: 8px; padding: 16px; border-radius: var(--radius-sm); background: var(--field-bg); border: 1px solid var(--border); font-size: 14px; line-height: 1.7; color: var(--text); } .insight-result.hidden { display: none; } .insight-result.loading { display: flex; align-items: center; gap: 12px; color: var(--text-muted); } .insight-result.error { background: var(--danger-bg); border-color: rgba(239,68,68,0.3); } .insight-result.visible { display: block; } .insight-result h2 { font-size: 15px; font-weight: 700; margin: 16px 0 8px; color: #2563EB; } .insight-result h3 { font-size: 14px; font-weight: 700; margin: 12px 0 6px; color: var(--text); } .insight-result ul, .insight-result ol { padding-left: 20px; margin: 8px 0; } .insight-result li { margin: 5px 0; } .insight-result table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; } .insight-result th { background: rgba(59,130,246,0.1); padding: 8px 10px; text-align: left; font-weight: 700; border: 1px solid var(--border); color: var(--text); } .insight-result td { padding: 7px 10px; border: 1px solid var(--border); color: var(--text); } .insight-result tr:nth-child(even) td { background: var(--tint-1); } .insight-result strong { color: #2563EB; } .insight-result code { background: var(--field-bg); color: #0E7490; padding: 2px 6px; border-radius: 4px; font-size: 12px; } .insight-result p { margin: 6px 0; } .custom-question-card { border: 1px dashed var(--border-bright); background: var(--surface); } .error-msg { color: var(--danger); font-weight: 600; } /* ─── API Key Banner ──────────────────────────── */ .api-key-banner { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.25); border-radius: var(--radius); padding: 20px 24px; display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; } .api-key-icon { font-size: 32px; flex-shrink: 0; } .api-key-banner h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--text); } .api-key-banner p { font-size: 13px; line-height: 1.7; margin-bottom: 6px; color: var(--text-muted); } .api-key-banner input { background: var(--field-bg) !important; color: #0E7490 !important; border-color: rgba(245,158,11,0.3) !important; } /* ─── History ─────────────────────────────────── */ .history-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .hs-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); } .hs-item span { font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; } .hs-item strong { font-size: 20px; font-weight: 800; color: var(--text); } .history-filters { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .history-filters select { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--field-bg); color: var(--text); cursor: pointer; outline: none; min-width: 160px; } .history-filters select:focus { border-color: var(--primary); } .history-filters select option { background: var(--card-2); } .history-count { margin-left: auto; font-size: 13px; color: var(--text-muted); font-weight: 600; } /* ─── Edit Banner ─────────────────────────────── */ .edit-banner { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.25); border-radius: var(--radius-sm); padding: 10px 16px; margin-bottom: 16px; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; color: var(--accent); } /* ─── Empty States ────────────────────────────── */ .empty-state { text-align: center; padding: 52px 24px; background: var(--card); border-radius: var(--radius); border: 1px dashed var(--border); margin-bottom: 20px; } .empty-state.small { padding: 28px; } .empty-icon { font-size: 48px; margin-bottom: 12px; } .empty-state h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--text); } .empty-state p { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; line-height: 1.6; } .empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ─── Loading ─────────────────────────────────── */ .loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80vh; gap: 16px; color: var(--text-muted); } .spinner, .loading-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── Toast ───────────────────────────────────── */ .toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; background: var(--card-2); color: var(--text); border: 1px solid var(--border-bright); box-shadow: var(--shadow-lg); transform: translateY(12px); opacity: 0; transition: all 0.25s; z-index: 9999; max-width: 340px; } .toast.visible { transform: translateY(0); opacity: 1; } .toast.toast-success { background: rgba(16,185,129,0.15); border-color: var(--success); color: var(--success); } .toast.toast-error { background: rgba(239,68,68,0.15); border-color: var(--danger); color: var(--danger); } /* ─── Goal Progress ───────────────────────────── */ .goal-card { padding: 18px 24px; } .goal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--text); } .goal-status { font-weight: 800; margin-right: 4px; } .goal-set-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--text-muted); } .goal-input-row { display: flex; align-items: center; gap: 8px; } .goal-input { width: 130px; padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; outline: none; background: var(--field-bg); color: var(--text); } .goal-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); } .goal-bar-track { height: 8px; background: var(--tint-3); border-radius: 4px; overflow: hidden; margin-bottom: 8px; } .goal-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; box-shadow: 0 0 8px currentColor; } .goal-bar-labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); } /* ─── Daily Quote Card ────────────────────────── */ .quote-card { background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(245,158,11,0.04)); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 16px 22px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 12px; position: relative; overflow: hidden; } .quote-card::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, transparent, rgba(245,158,11,0.03), transparent); pointer-events: none; } .quote-mark { font-size: 40px; color: var(--accent); line-height: 1; flex-shrink: 0; margin-top: -4px; opacity: 0.6; font-family: Georgia, serif; } .quote-text { font-size: 15px; font-weight: 500; color: var(--text); line-height: 1.6; font-style: italic; margin-bottom: 6px; } .quote-author { font-size: 12px; color: var(--text-muted); font-weight: 600; } /* ─── Achievements ────────────────────────────── */ .ach-progress-bar { height: 6px; background: var(--tint-3); border-radius: 3px; margin-bottom: 18px; overflow: hidden; } .ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .ach-badge { border-radius: var(--radius-sm); padding: 12px 10px; text-align: center; border: 1px solid var(--border); transition: all 0.2s; cursor: default; } .ach-earned { background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(245,158,11,0.06)); border-color: rgba(245,158,11,0.3); } .ach-earned:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(245,158,11,0.15); } .ach-locked { background: var(--tint-1); opacity: 0.45; } .ach-icon { font-size: 26px; margin-bottom: 6px; } .ach-name { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 3px; } .ach-desc { font-size: 10px; color: var(--text-muted); line-height: 1.4; } /* ─── Weekly Review Modal ─────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(2,6,23,0.58); display: block; /* block + overflow scroll = reliable (box is centered via margin:auto) */ overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 20px 48px; z-index: 10000; -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; width: 400px; max-width: 90vw; margin: auto; /* centers when it fits; scrolls (no clipping) when tall */ text-align: center; box-shadow: var(--shadow-lg); animation: slideUp 0.3s cubic-bezier(0.34,1.4,0.64,1); } @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-badge { display: inline-block; background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.25); color: #2563EB; font-size: 13px; font-weight: 700; padding: 4px 14px; border-radius: 20px; margin-bottom: 16px; } .modal-score { font-size: 72px; font-weight: 900; line-height: 1; margin: 8px 0 4px; } .modal-score span { font-size: 28px; } .modal-score-label { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 20px; } .review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; } .rv-item { background: var(--field-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; text-align: left; } .rv-item span { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 3px; } .rv-item strong { font-size: 16px; color: var(--text); } .review-tip { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.2); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; color: var(--text-muted); line-height: 1.6; text-align: left; } /* ─── Streak Celebration ──────────────────────── */ .celebration-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 10001; cursor: pointer; backdrop-filter: blur(4px); animation: fadeIn 0.2s ease; } .celeb-box { text-align: center; animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1); } @keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .celeb-title { font-size: 52px; font-weight: 900; color: #fff; text-shadow: 0 0 40px rgba(245,158,11,0.8); margin-bottom: 12px; } .celeb-sub { font-size: 20px; color: rgba(255,255,255,0.8); margin-bottom: 24px; } .celeb-tap { font-size: 13px; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 1.5px; } .conf-p { position: absolute; top: -30px; pointer-events: none; animation: confettiFall linear infinite; } @keyframes confettiFall { 0% { transform: translateY(-30px) rotate(0deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } } /* ─── Nav Badge ──────────────────────────────── */ .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; margin-left: auto; padding: 0 5px; } /* ─── Reminder Banner ─────────────────────────── */ .reminder-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.25); border-radius: var(--radius); padding: 14px 20px; margin-bottom: 16px; font-size: 14px; color: var(--text); } .reminder-urgent { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: var(--text); } /* ─── Focus Card ──────────────────────────────── */ .focus-card { padding: 18px 22px; margin-bottom: 20px; } .focus-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; flex-wrap: wrap; } .focus-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 3px; } .focus-area { font-size: 18px; font-weight: 800; color: var(--text); } .focus-bar-wrap { flex: 1; min-width: 120px; height: 6px; background: var(--tint-3); border-radius: 3px; overflow: hidden; } .focus-bar { height: 100%; border-radius: 3px; transition: width 0.8s ease; box-shadow: 0 0 8px currentColor; } .focus-tip { font-size: 14px; color: var(--text-muted); line-height: 1.6; border-left: 3px solid var(--primary); padding-left: 14px; } /* ─── WoW Arrows ──────────────────────────────── */ .wow-up { color: var(--success); font-size: 11px; font-weight: 700; } .wow-down { color: var(--danger); font-size: 11px; font-weight: 700; } /* ─── Contacts Page ───────────────────────────── */ .contacts-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px; } .cs-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow); } .cs-item span { display: block; font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; } .cs-item strong { font-size: 22px; font-weight: 900; } .contacts-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin: 22px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .contacts-section-title span { font-size: 12px; opacity: 0.7; } .cst-danger { color: var(--danger); } .cst-today { color: var(--warning); } .cst-muted { opacity: 0.5; } .contacts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 14px; margin-bottom: 8px; } .contact-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); transition: border-color 0.2s, box-shadow 0.2s; } .contact-card:hover { border-color: var(--border-bright); } .contact-overdue { border-left: 4px solid var(--danger) !important; } .contact-today { border-left: 4px solid var(--warning) !important; } .contact-starred { border-left: 4px solid var(--gold, #f59e0b) !important; } .star-btn { background: none; border: none; cursor: pointer; font-size: 16px; padding: 0 6px 0 0; color: var(--text-muted); line-height: 1; transition: transform 0.15s; } .star-btn:hover { transform: scale(1.25); } .star-btn.starred { color: #f59e0b; } .contact-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .contact-name { font-size: 16px; font-weight: 800; color: var(--text); } .contact-badges{ display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; } .contact-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 12px; text-transform: capitalize; } .contact-role { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; } .contact-met { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; } .contact-info { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; letter-spacing: 0.2px; } .contact-notes { font-size: 13px; color: var(--text-muted); background: var(--surface); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; line-height: 1.5; } .contact-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .contact-status-select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; background: var(--field-bg); color: var(--text); cursor: pointer; outline: none; } .fu-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; margin: 6px 0; } .fu-overdue { background: rgba(239,68,68,0.12); color: var(--danger); border: 1px solid rgba(239,68,68,0.3); } .fu-today { background: rgba(245,158,11,0.12); color: var(--warning); border: 1px solid rgba(245,158,11,0.3); } .fu-upcoming { background: rgba(59,130,246,0.08); color: var(--network-color); border: 1px solid rgba(59,130,246,0.25); } .fu-cold { background: rgba(56,189,248,0.12); color: #0284C7; border: 1px solid rgba(56,189,248,0.35); } /* Smarter contacts: search, deal value, last-touch, quick actions */ .contact-search { width: 100%; box-sizing: border-box; margin-bottom: 16px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); color: var(--text); font-family: inherit; font-size: 15px; } .contact-search:focus { outline: none; border-color: var(--accent); } .contact-deal { font-size: 13px; font-weight: 700; color: var(--money-color); margin-bottom: 4px; } .contact-deal span { font-weight: 600; color: var(--text-muted); } .contact-last { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; } .contact-last.is-cold { color: #0284C7; font-weight: 600; } .contact-link { color: var(--network-color); text-decoration: none; } .contact-link:hover { text-decoration: underline; } .contact-card.contact-cold { border-left: 3px solid #38BDF8; } .btn-touch { border-color: var(--gym-color) !important; color: var(--gym-color) !important; font-weight: 700; } /* ─── Business hub ─── */ .biz-tabs { display: flex; gap: 6px; margin-bottom: 18px; background: var(--surface); padding: 4px; border-radius: 12px; } .biz-tab { flex: 1; padding: 9px 6px; border: none; border-radius: 9px; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; } .biz-tab.on { background: var(--card); color: var(--text); box-shadow: var(--shadow); } .biz-insight { background: var(--tint-1); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 16px; line-height: 1.5; } .biz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .biz-card { text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; font-family: inherit; } .biz-card:hover { border-color: var(--border-bright); transform: translateY(-2px); box-shadow: var(--shadow-md); } .biz-card.biz-alert { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.04); } .biz-k { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } .biz-big { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -.5px; margin: 3px 0 2px; } .biz-sub { font-size: 12px; color: var(--text-muted); } .biz-top { display: block; width: 100%; text-align: left; background: rgba(16,185,129,.07); border: 1px solid rgba(16,185,129,.28); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; font-family: inherit; } .biz-top:hover { border-color: var(--gym-color); } .biz-top-title { font-size: 17px; font-weight: 800; color: var(--text); margin-top: 3px; display: flex; align-items: center; gap: 10px; } .biz-top-title span { font-size: 13px; font-weight: 800; color: #fff; background: var(--gym-color); border-radius: 999px; padding: 2px 9px; } .biz-muted { font-style: italic; } .biz-reach { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .biz-reach-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-family: inherit; text-align: left; } .biz-reach-row:hover { border-color: var(--accent); } .brr-name { font-size: 14px; font-weight: 700; color: var(--text); } .brr-meta { font-size: 12px; color: var(--text-muted); flex: none; } /* ─── Finances (personal-CFO dashboard) ─────────── */ .fin-intro { text-align: center; } .fin-intro-icon { font-size: 34px; margin-bottom: 6px; } .fin-sec-h { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 12px; } .fin-k { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } .fin-hero { text-align: center; } .fin-nw { font-size: 40px; font-weight: 800; letter-spacing: -1px; color: var(--text); line-height: 1.05; margin: 4px 0; font-variant-numeric: tabular-nums; } .fin-nw.neg { color: var(--danger); } .fin-nw-sub { font-size: 13px; color: var(--text-muted); } .fin-up { color: var(--success); font-weight: 700; } .fin-down { color: var(--danger); font-weight: 700; } .fin-chart-wrap { height: 150px; margin-top: 14px; position: relative; } .fin-chart-wrap.fin-donut { height: 190px; } .fin-ratios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .fin-ratio { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--border-bright); border-radius: var(--radius); padding: 14px 14px; box-shadow: var(--shadow); } .fin-ratio.fin-good { border-left-color: var(--success); } .fin-ratio.fin-ok { border-left-color: var(--accent); } .fin-ratio.fin-low { border-left-color: var(--danger); } .fin-ratio-n { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .fin-ratio-l { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-top: 2px; } .fin-ratio-h { font-size: 11px; color: var(--text-muted); margin-top: 3px; } .fin-fi-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--text-muted); margin-bottom: 8px; } .fin-fi-row strong { font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; } .fin-bar { height: 12px; border-radius: 6px; background: var(--surface); overflow: hidden; } .fin-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #60A5FA, var(--primary)); transition: width .4s; } .fin-fi-sub { font-size: 13px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; } .fin-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 12px; } .fin-leg { font-size: 12px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; } .fin-leg i { width: 10px; height: 10px; border-radius: 3px; } .fin-split-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface); } .fin-split-bar .fin-active { background: var(--primary); } .fin-split-bar .fin-passive { background: var(--success); } .fin-split-legend { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); margin-top: 6px; } .fin-pl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fin-pl > div { background: var(--surface); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; } .fin-pl span { font-size: 12px; color: var(--text-muted); } .fin-pl strong { font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; } .fin-debt { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .fin-debt-top { display: flex; justify-content: space-between; align-items: center; } .fin-debt-name { font-weight: 700; color: var(--text); font-size: 14px; } .fin-debt-apr { font-size: 11px; font-weight: 800; color: var(--danger); background: var(--danger-bg); border-radius: 999px; padding: 2px 8px; } .fin-debt-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; } /* Finance editor modal */ .fin-editor { text-align: left; width: 480px; max-width: 94vw; } .fin-group-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin: 16px 0 8px; } .fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fin-f { display: flex; flex-direction: column; } .fin-f label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; } .fin-f input { width: 100%; padding: 9px 11px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); font-size: 14px; outline: none; } .fin-f input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(59,130,246,0.14); } .fin-debt-row { display: grid; grid-template-columns: 1fr 84px 66px 66px 28px; gap: 6px; margin-bottom: 6px; } .fin-debt-row input { padding: 8px 8px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--field-bg); color: var(--text); font-size: 13px; outline: none; min-width: 0; } .fin-debt-x { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 13px; } .fin-debt-x:hover { color: var(--danger); } .fin-editor-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } @media (max-width: 640px) { .fin-ratios { grid-template-columns: 1fr; } } /* ─── Animated stat rings — hub overview numbers that motivate ─── */ .sr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; } .sr-card { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; box-shadow: var(--shadow); font-family: inherit; transition: border-color .15s, transform .15s, box-shadow .2s; animation: srIn .5s cubic-bezier(.2,.7,.2,1) backwards; } .sr-card:hover { border-color: var(--sr); transform: translateY(-2px); box-shadow: var(--shadow-md); } .sr-card:active { transform: scale(0.97); } .sr-grid .sr-card:nth-child(1) { animation-delay: .04s; } .sr-grid .sr-card:nth-child(2) { animation-delay: .12s; } .sr-grid .sr-card:nth-child(3) { animation-delay: .20s; } .sr-grid .sr-card:nth-child(4) { animation-delay: .28s; } @keyframes srIn { from { opacity: 0; transform: translateY(14px); } } .sr-viz { position: relative; width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; } .sr-ring { width: 56px; height: 56px; transform: rotate(-90deg); } .sr-track { fill: none; stroke: var(--surface); stroke-width: 7; } .sr-fill { fill: none; stroke: var(--sr); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.25,.8,.3,1); } .sr-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--sr); font-variant-numeric: tabular-nums; } .sr-icon { font-size: 26px; line-height: 1; filter: saturate(1.1); } .sr-body { min-width: 0; flex: 1; } .sr-value { display: block; font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .sr-value i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-left: 2px; } .sr-label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-top: 3px; } .sr-sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Goal hit — a warm celebratory pulse that makes 100% feel earned */ .sr-card.sr-hit { border-color: var(--sr); background: color-mix(in srgb, var(--sr) 6%, var(--card)); } .sr-card.sr-hit .sr-viz { animation: srPulse 2.2s ease-in-out infinite; } @keyframes srPulse { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 8px var(--sr)); } } @media (prefers-reduced-motion: reduce) { .sr-card, .sr-fill { animation: none !important; transition: none !important; } .sr-card.sr-hit .sr-viz { animation: none; } } @media (max-width: 380px) { .sr-grid { grid-template-columns: 1fr; } } /* Health hub — today's macros + recent workouts */ .hl-today { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .hl-macro-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--text); margin-bottom: 4px; } .hl-macro-top span:last-child { color: var(--text-muted); font-weight: 600; } .hl-macro-bar { height: 8px; border-radius: 4px; background: var(--surface); overflow: hidden; } .hl-macro-bar i { display: block; height: 100%; border-radius: 4px; transition: width .3s; } .hl-workout { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; } .hl-w-date { font-size: 12px; color: var(--text-muted); width: 64px; flex: none; } .hl-w-label { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); } .hl-w-meta { font-size: 12px; color: var(--text-muted); flex: none; } /* Gym × Nutrition "fuel" connector card */ .fuel-card { border-left: 4px solid var(--gym-color); margin-top: 4px; } .fuel-card.fuel-warn { border-left-color: var(--warning); background: rgba(245,158,11,0.05); } .fuel-card.fuel-good { border-left-color: var(--success); background: rgba(16,185,129,0.05); } .fuel-card.fuel-today { border-left-color: var(--primary); background: rgba(59,130,246,0.04); } .fuel-badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .fuel-title { font-size: 17px; font-weight: 800; color: var(--text); margin: 6px 0 4px; letter-spacing: -0.2px; line-height: 1.25; } .fuel-detail { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; } .fuel-bar-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin: 14px 0 5px; font-variant-numeric: tabular-nums; } .fuel-bar { height: 8px; border-radius: 4px; background: var(--surface); overflow: hidden; } .fuel-bar i { display: block; height: 100%; border-radius: 4px; background: var(--success); transition: width .3s; } .fuel-food { font-size: 13px; color: var(--text); margin-top: 10px; padding: 8px 12px; background: var(--surface); border-radius: 8px; } /* Knowledge hub — key takeaways + the resurfacing "review" card */ .km-review { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.30); border-left: 4px solid var(--accent); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; } .km-review-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); margin-bottom: 6px; } .km-quote { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.5; } .km-book { font-size: 13px; color: var(--text-muted); margin-top: 5px; font-style: italic; } .km-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .km-another { border: none; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 4px; } .km-another:hover { color: var(--text); } .tk-card .card-sub { margin-bottom: 12px; } .tk-form { display: flex; gap: 8px; margin-bottom: 8px; } .tk-form .vocab-input { flex: 1; } .tk-attach { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; } .tk-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .tk-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .tk-text { font-size: 14px; color: var(--text); line-height: 1.45; } .tk-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; } .tk-book { font-size: 11px; font-weight: 700; color: var(--read-color); background: rgba(6,182,212,.10); border-radius: 999px; padding: 2px 9px; } .tk-book-none { color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); } .tk-seen { font-size: 11px; color: var(--text-muted); } .tk-x { margin-left: auto; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px 4px; } .tk-x:hover { color: #EF4444; } /* ─── Floating Action Button ──────────────────── */ .fab-btn { position: fixed; bottom: 28px; right: 28px; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #1D4ED8); color: #fff; font-size: 24px; border: none; cursor: pointer; box-shadow: 0 0 24px rgba(59,130,246,0.45), 0 4px 16px rgba(15,23,42,0.18); z-index: 999; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .fab-btn:hover { transform: scale(1.12); box-shadow: 0 0 32px rgba(59,130,246,0.55), 0 6px 20px rgba(15,23,42,0.22); } /* ─── Quick Log Modal ─────────────────────────── */ .quick-log-box { max-width: 480px; text-align: left; } .ql-streak { text-align: center; font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 16px; } .ql-smart { font-size: 12.5px; color: var(--money-color); background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.25); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 14px; line-height: 1.45; } .ql-section { margin-bottom: 16px; } .ql-label { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; } .ql-gym-row { display: flex; gap: 10px; } .ql-gym-btn { flex: 1; padding: 11px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--field-bg); color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .ql-active-yes { background: var(--gym-bg) !important; border-color: var(--gym-color) !important; color: var(--gym-color) !important; box-shadow: 0 0 12px var(--gym-glow); } .ql-active-no { background: var(--tint-2) !important; border-color: var(--border-bright) !important; color: var(--text-muted) !important; } .ql-rating-row { display: flex; gap: 8px; } .ql-r-btn { width: 46px; height: 46px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--field-bg); font-size: 16px; font-weight: 800; cursor: pointer; transition: all 0.15s; color: var(--text-muted); } .ql-r-sel { background: var(--success-bg) !important; border-color: var(--success) !important; color: var(--success) !important; transform: scale(1.1); } .ql-input { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; background: var(--field-bg); color: var(--text); outline: none; } .ql-input:focus { border-color: var(--primary); } .ql-input::placeholder { color: var(--text-muted); } .ql-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } /* ─── Calendar View ───────────────────────────── */ .view-toggle-row { display: flex; gap: 8px; margin-bottom: 20px; } .view-btn { padding: 8px 20px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; } .view-btn:hover { border-color: var(--primary); color: var(--primary); } .view-active { background: rgba(59,130,246,0.1) !important; border-color: var(--primary) !important; color: var(--primary) !important; } .cal-wrap { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); padding: 24px; } .cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .cal-month { font-size: 18px; font-weight: 800; color: var(--text); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 16px; } .cal-dh { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; padding: 6px 0; } .cal-cell { aspect-ratio: 1; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid var(--border); background: var(--tint-1); cursor: pointer; transition: all 0.15s; min-height: 52px; } .cal-cell:hover { border-color: var(--primary); background: rgba(59,130,246,0.06); } .cal-cell.cal-empty { border: none; background: transparent; cursor: default; } .cal-cell.cal-today { border-color: var(--primary) !important; background: rgba(59,130,246,0.1) !important; box-shadow: 0 0 12px rgba(59,130,246,0.2); } .cal-cell.cal-has-data { background: var(--tint-2); border-color: var(--border-bright); } .cal-cell.cal-future { opacity: 0.3; cursor: default; } .cal-num { font-size: 13px; font-weight: 600; color: var(--text-muted); } .cal-today .cal-num { color: var(--primary); font-weight: 900; } .cal-has-data .cal-num { color: var(--text); } .cal-dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; max-width: 36px; } .cdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .cdot-gym { background: var(--gym-color); } .cdot-food-hi { background: var(--food-color); } .cdot-food-lo { background: rgba(245,158,11,0.4); } .cdot-net { background: var(--network-color); } .cdot-money { background: var(--money-color); } .cal-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); padding-top: 12px; border-top: 1px solid var(--border); } /* ─── Misc ────────────────────────────────────── */ .muted { color: var(--text-muted); font-size: 14px; } .text-center { text-align: center; } .stat-trend { font-size: 11px; font-weight: 700; margin-top: 4px; } .trend-up { color: var(--success); } .trend-down { color: var(--danger); } /* ─── XP / Level Bar (sidebar) ───────────────── */ .xp-bar-wrap { padding: 10px 16px 12px; border-bottom: 1px solid var(--border); background: var(--field-bg); } .xp-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .xp-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.9px; } .xp-pts { font-size: 10px; color: var(--text-muted); font-weight: 600; } .xp-track { height: 5px; background: var(--tint-3); border-radius: 3px; overflow: hidden; margin-bottom: 4px; } .xp-fill { height: 100%; border-radius: 3px; transition: width 1.2s cubic-bezier(0.22,1,0.36,1); } .xp-next { font-size: 10px; color: var(--text-muted); text-align: right; letter-spacing: 0.2px; } /* ─── Streaming AI Output ─────────────────────── */ .insight-result.stream-active { display: block; min-height: 60px; } .stream-output { white-space: pre-wrap; font-size: 13px; line-height: 1.75; color: var(--text-muted); word-break: break-word; } .stream-cursor { display: inline-block; width: 2px; height: 14px; background: var(--primary); margin-left: 3px; vertical-align: text-bottom; border-radius: 1px; animation: cur-blink 0.75s step-end infinite; } @keyframes cur-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ─── Day Detail Modal ────────────────────────── */ .day-detail-box { text-align: left; max-width: 460px; width: 92vw; } .dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; } .dd-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); transition: background 0.2s; } .dd-item.gym { border-color: var(--gym-border); } .dd-item.food { border-color: var(--food-border); } .dd-item.network { border-color: var(--network-border); } .dd-item.money { border-color: var(--money-border); } .dd-item.dd-done { background: rgba(16,185,129,0.07); } .dd-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; } .dd-label { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; } .dd-notes { font-size: 12px; color: var(--text-muted); line-height: 1.45; } .dd-global-notes { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 4px; } /* ─── Follow-up Date Modal ────────────────────── */ #fup-modal .modal-box input[type="date"] { background: var(--field-bg); color: var(--text); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); } /* ─── Pillar Customizer ───────────────────────── */ .preset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px; } .preset-btn { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; transition: all 0.15s; } .preset-btn:hover { border-color: var(--primary); background: rgba(59,130,246,0.06); transform: translateY(-2px); } .preset-name { font-size: 14px; font-weight: 700; } .preset-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; } .pc-list-head { display: grid; grid-template-columns: 52px 56px 1.2fr 1.6fr; gap: 12px; align-items: center; padding: 0 4px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); border-bottom: 1px solid var(--border); } .pc-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 18px; } .pc-row { display: grid; grid-template-columns: 52px 56px 1.2fr 1.6fr; gap: 12px; align-items: center; padding: 8px 4px; border-radius: var(--radius-sm); transition: opacity 0.2s; } .pc-row.pc-off { opacity: 0.4; } .pc-row.pc-off .pc-label-input, .pc-row.pc-off .pc-icon-input { text-decoration: line-through; } /* toggle switch */ .pc-toggle { position: relative; display: inline-block; width: 42px; height: 24px; cursor: pointer; } .pc-toggle input { opacity: 0; width: 0; height: 0; } .pc-slider { position: absolute; inset: 0; background: var(--border-bright); border-radius: 24px; transition: 0.2s; } .pc-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.2s; } .pc-toggle input:checked + .pc-slider { background: var(--success); } .pc-toggle input:checked + .pc-slider::before { transform: translateX(18px); } .pc-icon-input { width: 100%; text-align: center; font-size: 18px; padding: 6px 0; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); outline: none; } .pc-label-input { width: 100%; padding: 8px 10px; font-size: 14px; font-weight: 600; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); outline: none; } .pc-icon-input:focus, .pc-label-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); } .pc-type { font-size: 12px; color: var(--text-muted); line-height: 1.4; } /* ─── Onboarding Modal ────────────────────────── */ .ob-preset-grid { display: flex; flex-direction: column; gap: 10px; } .ob-preset { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; transition: all 0.15s; } .ob-preset:hover { border-color: var(--primary); background: rgba(59,130,246,0.08); transform: translateX(3px); } .ob-preset-name { font-size: 16px; font-weight: 700; } .ob-preset-desc { font-size: 12px; color: var(--text-muted); } /* ─── Onboarding Wizard ───────────────────────── */ .onboard-wizard { max-width: 560px; width: 94vw; text-align: left; max-height: 90vh; max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .onboard-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; } .ob-dot { width: 28px; height: 5px; border-radius: 3px; background: var(--tint-4); transition: background 0.3s; } .ob-dot-on { background: var(--primary); } .ob-step-label { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; } .onboard-title { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; margin-bottom: 6px; } .onboard-sub { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; } .onboard-body { margin-bottom: 8px; } .onboard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); } .onboard-actions .btn { min-width: 120px; } .ob-area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ob-area { position: relative; text-align: left; padding: 16px; cursor: pointer; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); transition: all 0.15s; display: flex; flex-direction: column; gap: 3px; } .ob-area:hover { border-color: var(--border-bright); transform: translateY(-2px); } .ob-area-on { border-color: var(--primary); background: rgba(59,130,246,0.1); box-shadow: 0 0 18px rgba(59,130,246,0.12); } .ob-area-check { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-bright); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; } .ob-area-on .ob-area-check { background: var(--primary); border-color: var(--primary); } .ob-area-icon { font-size: 26px; } .ob-area-label { font-size: 15px; font-weight: 700; } .ob-area-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; } .onboard-nut { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; margin-top: 6px; background: rgba(16,185,129,0.04); } .onboard-section-label { font-size: 13px; font-weight: 700; color: var(--success); margin-bottom: 14px; } @media (max-width: 560px) { .ob-area-grid { grid-template-columns: 1fr; } } /* ─── Backup & Data ───────────────────────────── */ .backup-btns { display: flex; flex-wrap: wrap; gap: 10px; } .backup-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; line-height: 1.5; } /* ─── Daily Coach Insight ─────────────────────── */ .insight-daily { background: linear-gradient(135deg, rgba(167,139,250,0.1), rgba(59,130,246,0.06)); border: 1px solid rgba(167,139,250,0.3); } .di-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .di-icon { font-size: 20px; } .di-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--money-color); } .di-refresh { margin-left: auto; background: none; border: 1px solid var(--border); color: var(--text-muted); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; transition: all 0.15s; } .di-refresh:hover { border-color: var(--money-color); color: var(--money-color); transform: rotate(90deg); } .di-text { font-size: 15px; line-height: 1.65; color: var(--text); font-weight: 500; } .di-loading { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 14px; } .di-empty { font-size: 14px; color: var(--text-muted); line-height: 1.5; } /* ─── Today's Game Plan (action card) ─────────────────── */ .plan-card { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(59,130,246,0.05)); border: 1px solid rgba(16,185,129,0.32); } .plan-card .di-title { color: #10b981; } .plan-card .di-refresh:hover { border-color: #10b981; color: #10b981; } .plan-text { font-size: 14.5px; line-height: 1.6; } .plan-text strong { color: var(--text); font-weight: 800; } .plan-text ul { margin: 8px 0 2px; padding-left: 20px; } .plan-text li { margin: 6px 0; } .plan-text p { margin: 4px 0 8px; } /* ─── Patterns (signature cross-pillar card) ─────────────────── */ .patterns-card { background: linear-gradient(135deg, rgba(45,212,191,0.12), rgba(59,130,246,0.05)); border: 1px solid rgba(45,212,191,0.35); } .patterns-card .di-title { color: #0d9488; } .patterns-card .di-refresh:hover { border-color: #0d9488; color: #0d9488; } /* ─── Weekly Life Review ─────────────────── */ .review-card { background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(167,139,250,0.05)); border: 1px solid rgba(251,191,36,0.30); } .review-card .di-title { color: #fbbf24; } .review-due { box-shadow: 0 0 22px rgba(251,191,36,0.22); } .review-sub { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0 0 14px; } .review-cta { padding: 4px 0; } .review-text { font-size: 14.5px; line-height: 1.7; color: var(--text); } .review-text strong { color: var(--text); font-weight: 800; } .review-text ul { margin: 6px 0 14px; padding-left: 20px; } .review-text li { margin: 4px 0; } .review-text p { margin: 6px 0 12px; } .review-text + .btn { margin-top: 6px; } /* ─── Owner analytics ─────────────────── */ .admin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:8px 0 4px; } .admin-tile { background:var(--tint-2); border:1px solid var(--border); border-radius:12px; padding:14px 12px; text-align:center; } .admin-n { font-size:30px; font-weight:900; color:var(--text); line-height:1.1; } .admin-l { font-size:11.5px; color:var(--text-muted); margin-top:5px; text-transform:uppercase; letter-spacing:0.5px; } .admin-h { font-size:11px; color:#0d9488; margin-top:4px; font-weight:700; } .admin-table { width:100%; border-collapse:collapse; margin-top:16px; font-size:13.5px; } .admin-table th { text-align:left; color:var(--text-muted); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; padding:6px 8px; border-bottom:1px solid var(--border); } .admin-table td { padding:8px; border-bottom:1px solid var(--tint-2); } @media(max-width:600px){ .admin-grid { grid-template-columns:repeat(2,1fr); } } /* ─── Admin console ─────────────────────────────── */ .adm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; } .adm-owner-badge { font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; } .adm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .adm-kpi { border-radius: var(--radius); padding: 16px 18px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow); border-left: 4px solid var(--border-bright); } .adm-kpi.blue { border-left-color: var(--primary); } .adm-kpi.green { border-left-color: var(--success); } .adm-kpi.amber { border-left-color: var(--accent); } .adm-kpi.violet { border-left-color: var(--money-color); } .adm-kpi-n { font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; } .adm-kpi-l { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 6px; } .adm-kpi-h { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .adm-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .adm-card-sub { font-size: 12.5px; color: var(--text-muted); } .adm-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .adm-mini-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .adm-mini-n { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .adm-mini-l { font-size: 12px; color: var(--text-muted); margin-top: 3px; font-weight: 600; } .adm-mini-h { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .adm-sub-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 10px; } .adm-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .adm-bar-label { width: 110px; flex: none; font-size: 13px; font-weight: 600; color: var(--text); } .adm-bar-track { flex: 1; height: 8px; border-radius: 5px; background: var(--surface); overflow: hidden; } .adm-bar-fill { display: block; height: 100%; border-radius: 5px; transition: width .4s ease; } .adm-bar-val { width: 84px; flex: none; text-align: right; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .adm-spark { display: flex; align-items: flex-end; gap: 4px; height: 90px; padding: 8px 0 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } .adm-spark-col { flex: 1; height: 100%; display: flex; align-items: flex-end; } .adm-spark-bar { width: 100%; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #60A5FA, var(--primary)); min-height: 3px; } .adm-spark-bar.empty { background: var(--border); } .adm-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; } .adm-pro { font-size: 10px; font-weight: 800; color: var(--money-color); background: var(--money-bg); border: 1px solid var(--money-border); border-radius: 999px; padding: 1px 7px; letter-spacing: 0.5px; vertical-align: middle; } @media (max-width: 640px) { .adm-kpis { grid-template-columns: repeat(2, 1fr); } .adm-mini { grid-template-columns: repeat(2, 1fr); } .adm-bar-label { width: 90px; } .adm-bar-val { width: 66px; } } .net-hint { margin-top:10px; font-size:15px; font-weight:600; text-align:center; padding:8px; background:var(--tint-1); border-radius:10px; } .net-hint:empty { display:none; } .period-set { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--tint-2); border:1px solid var(--border); border-radius:10px; padding:11px 14px; font-size:15px; margin-bottom:6px; } /* ─── Free-trial banner ─────────────────── */ .trial-banner { background: linear-gradient(135deg, rgba(124,92,255,0.16), rgba(59,130,246,0.08)); border: 1px solid rgba(124,92,255,0.35); border-radius: var(--radius-sm); padding: 11px 16px; margin-bottom: 16px; font-size: 14px; color: var(--text); text-align: center; } .trial-banner .btn-link { font-size: 14px; font-weight: 700; } /* ─── Demo preview banner ─────────────────── */ #preview-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000; background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; text-align: center; padding: 10px 14px; font-size: 13.5px; box-shadow: 0 -2px 14px rgba(15,23,42,0.12); } #preview-banner button { margin-left: 8px; background: rgba(255,255,255,0.22); color: #fff; border: 1px solid rgba(255,255,255,0.5); border-radius: 8px; padding: 5px 12px; font-weight: 700; font-size: 13px; cursor: pointer; } /* ─── Streak (don't break the chain) ─────────────────── */ .streak-card { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(239,68,68,0.05)); border: 1px solid rgba(249,115,22,0.38); } .streak-card.streak-urgent { border-color: rgba(239,68,68,0.55); box-shadow: 0 0 22px rgba(239,68,68,0.12); } .streak-flame { font-size: 40px; line-height: 1; } .streak-main { text-align: center; min-width: 72px; } .streak-num { font-size: 44px; font-weight: 900; color: #f97316; line-height: 1; } .streak-unit { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-top: 3px; } .streak-msg { flex: 1; font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; } .streak-best { font-size: 12.5px; color: var(--text-muted); font-weight: 500; margin-top: 5px; } @media (max-width: 520px) { .streak-flame { font-size: 32px; } .streak-num { font-size: 38px; } .streak-msg { font-size: 14px; } } /* ─── Money flow donut ─────────────────── */ .money-circle-card { text-align: center; } .mc-ring { width: 180px; height: 180px; border-radius: 50%; margin: 10px auto 16px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--tint-3); } .mc-hole { width: 132px; height: 132px; border-radius: 50%; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; } .mc-saved { font-size: 27px; font-weight: 900; color: var(--success); line-height: 1.1; } .mc-saved.mc-neg { color: var(--danger); } .mc-saved-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-top: 3px; } .mc-legend { display: flex; gap: 20px; justify-content: center; font-size: 13.5px; color: var(--text-muted); flex-wrap: wrap; } .mc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .mc-dot.mc-red { background: var(--danger); } .mc-dot.mc-green { background: var(--success); } .mc-caption { font-size: 12px; color: var(--text-muted); margin-top: 12px; line-height: 1.5; } /* ─── Weigh-in + Weight Trend ─────────────────── */ .weigh-section { border-color: var(--money-border); } .weigh-section:hover { box-shadow: 0 0 20px var(--money-glow); } .weigh-header { color: var(--money-color); border-bottom-color: var(--money-border); } .weigh-row { display: flex; align-items: center; gap: 10px; } .weigh-row input { border-color: var(--money-border); } .weigh-row input:focus { border-color: var(--money-color); box-shadow: 0 0 0 3px rgba(167,139,250,0.15); } .weigh-unit { font-size: 15px; font-weight: 700; color: var(--money-color); } .weight-now { font-size: 30px; font-weight: 900; color: var(--text); } .weight-now-inline { font-size: 18px; font-weight: 800; color: var(--text); } .weight-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; } .weight-down { font-size: 13px; font-weight: 700; color: var(--success); } .weight-up { font-size: 13px; font-weight: 700; color: var(--warning); } /* ─── Checklist & Reminders ───────────────────── */ .chk-progress { height: 6px; background: var(--tint-3); border-radius: 3px; overflow: hidden; margin-bottom: 14px; } .chk-progress > div { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--success), #34D399); transition: width 0.5s ease; } .chk-list { display: flex; flex-direction: column; gap: 6px; } .chk-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); transition: all 0.15s; } .chk-row-sm { padding: 8px 12px; } .chk-box { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; cursor: pointer; border: 1.5px solid var(--border-bright); background: var(--field-bg); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .chk-box:hover { border-color: var(--success); } .chk-row.chk-done .chk-box { background: var(--success); border-color: var(--success); } .chk-text { flex: 1; font-size: 14px; color: var(--text); } .chk-row.chk-done .chk-text { text-decoration: line-through; color: var(--text-muted); } .chk-del { flex-shrink: 0; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 4px; opacity: 0.6; transition: all 0.15s; } .chk-del:hover { opacity: 1; background: var(--danger-bg); } .chk-empty { font-size: 13px; color: var(--text-muted); padding: 16px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-sm); } .chk-add { display: flex; gap: 10px; margin-top: 14px; } .chk-add input { flex: 1; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); font-size: 14px; outline: none; } .chk-add input:focus { border-color: var(--success); box-shadow: 0 0 0 3px rgba(16,185,129,0.12); } .rem-list { display: flex; flex-direction: column; gap: 8px; } .rem-row { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); } .rem-row.rem-off { opacity: 0.5; } .rem-time { font-size: 15px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; } .rem-label { font-size: 14px; color: var(--text); } .rem-add { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .rem-add input[type="text"] { flex: 1; min-width: 160px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); font-size: 14px; outline: none; } .rem-add input[type="time"], .rem-add input[type="date"] { padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); font-size: 14px; outline: none; } .rem-add input:focus { border-color: var(--accent); } .rem-when { font-size: 11px; color: #0d9488; font-weight: 700; white-space: nowrap; } .rem-repeat-row { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-muted); margin: 10px 0 2px; cursor: pointer; user-select: none; } .rem-repeat-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .rem-add input:disabled { opacity: 0.4; } .rem-note { font-size: 12px; color: var(--text-muted); margin-top: 14px; line-height: 1.5; } .rem-notif-on { font-size: 12px; font-weight: 700; color: var(--success); } @media (max-width: 520px) { .rem-row { grid-template-columns: 60px 1fr auto auto; gap: 8px; } } /* ════════════════════════════════════════════════ RESPONSIVE / MOBILE ════════════════════════════════════════════════ */ @media (max-width: 900px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } .charts-row { grid-template-columns: 1fr; } .insights-grid { grid-template-columns: 1fr; } .ideas-grid { grid-template-columns: 1fr; } .contacts-grid { grid-template-columns: 1fr; } .score-card { grid-template-columns: 1fr; text-align: center; gap: 16px; } .score-circle { margin: 0 auto; } .score-goals { min-width: 0; } } @media (max-width: 820px) { /* Sidebar becomes a horizontal top bar */ body { flex-direction: column; } .sidebar { position: static; width: 100%; height: auto; flex-direction: column; border-right: none; border-bottom: 1px solid var(--border); } .sidebar-brand { padding: 14px 16px; border-bottom: 1px solid var(--border); } /* Top scrolling nav + footer are replaced by the bottom tab bar on phones */ .sidebar-nav, .sidebar-footer { display: none; } .main { margin-left: 0; padding: 18px 14px 96px; max-width: 100%; min-width: 0; overflow-x: hidden; } .page-title { font-size: 25px; } /* Anything that could be wider than the phone scrolls inside its own card */ .card { max-width: 100%; } /* Reading stat cards: 4-across is too tight on a phone, so values like "22 pages" wrap vertically. Drop to a 2x2 grid (matches the Contacts/History stat bars). Uses .main to outrank the base .reading-stats rule defined later in this file. */ .main .reading-stats { grid-template-columns: repeat(2, 1fr); } /* Book card: keep the action buttons on their own row so the title/label always get the full width beside the cover and can never be squeezed to vertical text. */ .rbc-actions { flex-basis: 100%; } .rbc-info { min-width: 0; } .rbc-title, .rbc-label, .rbc-author { overflow-wrap: break-word; word-break: normal; } /* Owner analytics table can scroll sideways; the main data tables restyle into cards below */ .main .admin-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .chart-wrap { max-width: 100%; } img, canvas, pre, textarea { max-width: 100%; } input, select, textarea, button { font-size: 16px; } .page-header { margin-bottom: 16px; } .card { padding: 18px; margin-bottom: 14px; border-radius: 12px; } .mtn-hero { height: 118px; margin-bottom: 14px; } .climb-head, .quest-top, .wk-head { gap: 10px; } .community-box, .modal-box { max-height: calc(100dvh - 34px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .cf-row, .food-add-row, .rem-add, .chk-add, .backup-btns { flex-direction: column; } .cf-row .cf-input, .food-add-row input, .food-add-row select, .food-add-row button, .rem-add input, .rem-add button, .chk-add input, .chk-add button { width: 100%; min-width: 0; } .feed-post, .comm-item { overflow-wrap: break-word; } /* Use overflow-wrap:break-word (NOT anywhere) + leave word-break normal: long words still wrap to avoid overflow, but a cell/flex item's min-content stays at the longest word — so squeezed flex children (e.g. the book title) never collapse to one-character-per-line vertical text. */ .di-text, .review-text, .card { overflow-wrap: break-word; word-break: normal; } /* Data tables (History, Reading Log) collapse from columns into readable stacked rows so text is never crushed into vertical single letters on a narrow phone. */ .table, .table tbody { display: block; width: 100%; } .table thead { display: none; } .table tr { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px 14px; margin-bottom: 10px; } .table tr:hover td { background: transparent; } .table td { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--tint-2); max-width: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: normal; overflow-wrap: anywhere; text-align: right; } .table td:last-child { border-bottom: none; } .table td::before { content: attr(data-label); flex: 0 0 auto; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); } .table td.action-cell { justify-content: flex-end; gap: 8px; } .table td.action-cell::before { content: none; } } /* ─── Mobile bottom tab bar ──────────────────────── */ .bottom-nav { display: none; } body.auth-active .bottom-nav { display: none !important; } body.wo-fullscreen .bottom-nav { display: none !important; } /* workout is an immersive sub-page */ @media (max-width: 820px) { .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--bg-2); border-top: 1px solid var(--border); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 14px rgba(15,23,42,0.07); } .bnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: none; cursor: pointer; padding: 7px 4px; border-radius: 12px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-decoration: none; transition: background .15s, color .15s; } .bnav-item.active { color: var(--primary); background: rgba(59,130,246,0.10); } .bnav-ico { display: flex; } .bnav-ico svg { width: 23px; height: 23px; display: block; } .fab-btn { bottom: calc(82px + env(safe-area-inset-bottom)) !important; } } .more-sheet-overlay { position: fixed; inset: 0; z-index: 300; background: var(--overlay); display: flex; align-items: flex-end; opacity: 0; transition: opacity .2s; } .more-sheet-overlay.open { opacity: 1; } .more-sheet { width: 100%; background: var(--bg-2); border-radius: 18px 18px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg); transform: translateY(14px); transition: transform .2s; } .more-sheet-overlay.open .more-sheet { transform: translateY(0); } .more-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border-bright); margin: 4px auto 12px; } .more-sheet-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin-bottom: 10px; } .more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .more-item { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; } .more-ico { display: inline-flex; flex: none; } .more-ico svg { width: 18px; height: 18px; display: block; } .more-item.active { border-color: var(--primary); color: var(--primary); background: rgba(59,130,246,0.08); } .more-logout { width: 100%; margin-top: 12px; padding: 13px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: none; color: var(--danger); font-size: 14px; font-weight: 700; cursor: pointer; } @media (max-width: 520px) { .pillar-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .history-summary, .contacts-stats { grid-template-columns: repeat(2, 1fr); } .macro-grid { grid-template-columns: 1fr; } .dd-grid { grid-template-columns: 1fr; } .hydration-strip { flex-wrap: wrap; } .hyd-bar-wrap { order: 3; flex-basis: 100%; } .modal-box { padding: 22px 18px; } .onboard-actions { flex-direction: column-reverse; } .onboard-actions .btn { width: 100%; } .cal-grid { gap: 2px; } .cal-cell { min-height: 42px; } .food-add-row #food-pick { flex-basis: 100%; } .toast { left: 16px; right: 16px; max-width: none; text-align: center; } } @media (max-width: 640px) { .pc-list-head, .pc-row { grid-template-columns: 42px 48px 1fr; } .pc-list-head span:last-child, .pc-row .pc-type { display: none; } } /* ══════════════════════════════════════════════════ MOBILE NATIVE-FEEL POLISH (phones ≤ 820px) Instant taps, frosted sticky chrome, smooth page-ins. ════════════════════════════════════════════════ */ @media (max-width: 820px) { /* Kill the grey tap-flash + 300ms delay so touches register instantly */ a, button, [onclick], [role="button"], .card, .nav-item, .bnav-item, .pnav-pill, .biz-card, .biz-tab, .more-item, .gym-btn, .meal-chip, .recent-chip, .rating-btn, .tk-item { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* Stop the scroll from chaining/bouncing past the app — feels contained, native */ html, body { overscroll-behavior-y: contain; } /* Frosted, fixed top bar: stays put and blurs the content sliding beneath it. (Fixed — not sticky — because body's overflow-x:hidden makes it a scroll container while the real scroll is on , which breaks position:sticky.) */ .sidebar { position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 150; background: var(--chrome-bg); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--chrome-border); } .sidebar-brand { height: 54px; padding: 0 16px; border-bottom: none; background: none; } .main { padding-top: 66px; } /* clear the fixed 54px header */ /* Matching frosted bottom tab bar */ .bottom-nav { background: var(--chrome-bg); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); } .bnav-item.active .bnav-ico svg { transform: translateY(-1px); } /* Dashboard quick-jump: a tidy 3-col grid, not an awkward wrapping/stretching row. (.main outranks the base .pnav rule that is defined later in this file.) */ .main .pnav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .main .pnav-pill { min-width: 0; flex: none; } } /* Tactile press feedback on the remaining genuinely-tappable surfaces (all sizes) */ .biz-card:active, .pnav-pill:active, .nav-item:active, .btn-sm:active, .km-another:active, .more-logout:active, .contact-card:active, .biz-tab:active { transform: scale(0.97); } .fab-btn:active { transform: scale(0.93); } /* Smooth page-in when navigating between sections (honours reduced-motion) */ @media (prefers-reduced-motion: no-preference) { #main.page-anim > * { animation: pageIn 0.26s cubic-bezier(.22,.61,.36,1) both; } @keyframes pageIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } } /* ─── Water / Hydration ───────────────────────── */ .water-section { border-color: var(--water-border); } .water-section:hover { box-shadow: 0 0 20px var(--water-glow); } .water-header { color: var(--water-color); border-bottom-color: var(--water-border); } .water-input-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .water-input-row input { border-color: var(--water-border); } .water-input-row input:focus { border-color: var(--water-color); box-shadow: 0 0 0 3px rgba(56,189,248,0.15); } .water-unit { font-size: 15px; font-weight: 700; color: var(--water-color); } .water-quick { display: flex; gap: 6px; margin-left: auto; } .water-chip { padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--water-border); background: var(--water-bg); color: var(--water-color); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s; } .water-chip:hover { background: rgba(56,189,248,0.18); transform: translateY(-1px); } .water-chip::before { content: '+'; opacity: 0.7; margin-right: 1px; } .water-hint { font-size: 12px; color: var(--text-muted); margin-top: 10px; } .hydration-strip { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--water-bg), transparent); border: 1px solid var(--water-border); border-radius: var(--radius); padding: 12px 18px; margin-bottom: 20px; } .hyd-icon { font-size: 24px; flex-shrink: 0; } .hyd-info { min-width: 150px; } .hyd-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--water-color); } .hyd-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .hyd-sub strong { color: var(--text); } .hyd-bar-wrap { flex: 1; min-width: 80px; height: 8px; background: var(--tint-3); border-radius: 4px; overflow: hidden; } .hyd-bar { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--water-color), #7DD3FC); box-shadow: 0 0 8px var(--water-glow); transition: width 0.8s ease; } .hyd-btn { padding: 7px 14px; font-size: 13px; flex-shrink: 0; } .dd-item.water { border-color: var(--water-border); } /* ─── Looking Back / Recent Notes ─────────────── */ .recent-notes-card { border-left: 4px solid var(--accent); } .rn-list { display: flex; flex-direction: column; gap: 12px; } .rn-item { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); } .rn-date { font-size: 13px; font-weight: 700; color: var(--text); display: flex; flex-direction: column; gap: 4px; } .rn-water { font-size: 11px; font-weight: 600; color: var(--water-color); } .rn-text { font-size: 13px; color: var(--text-muted); line-height: 1.6; } .rn-tag { opacity: 0.9; } /* ─── Previous Note Banner (Log page) ─────────── */ .prev-note-banner { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.22); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 11px 16px; margin-bottom: 16px; font-size: 13px; color: var(--text-muted); line-height: 1.6; } .prev-note-banner strong { color: var(--accent); } @media (max-width: 640px) { .rn-item { grid-template-columns: 1fr; gap: 4px; } .water-quick { margin-left: 0; width: 100%; } } /* ─── Nutrition / Calorie Targets ─────────────── */ .nut-unit-row { display: flex; align-items: center; gap: 8px; } .nut-unit-row input, .nut-unit-row select { margin: 0; } .nutrition-results { margin-top: 20px; padding: 20px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(16,185,129,0.07), rgba(245,158,11,0.05)); border: 1px solid var(--border-bright); } .nut-cal-big { display: flex; align-items: baseline; gap: 8px; } .nut-cal-num { font-size: 44px; font-weight: 900; color: var(--text); line-height: 1; letter-spacing: -1px; } .nut-cal-unit { font-size: 15px; font-weight: 700; color: var(--text-muted); } .nut-cal-sub { font-size: 12px; color: var(--text-muted); margin: 6px 0 16px; } .macro-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-bottom: 16px; background: var(--field-bg); } .macro-seg { height: 100%; transition: width 0.6s ease; } .macro-seg.mp { background: var(--success); } .macro-seg.mc { background: var(--accent); } .macro-seg.mf { background: #A78BFA; } .macro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .macro-item { text-align: center; padding: 14px 10px; border-radius: var(--radius-sm); background: var(--field-bg); border: 1px solid var(--border); border-top: 3px solid var(--border-bright); } .macro-item.mp { border-top-color: var(--success); } .macro-item.mc { border-top-color: var(--accent); } .macro-item.mf { border-top-color: #A78BFA; } .macro-g { font-size: 26px; font-weight: 900; color: var(--text); line-height: 1; } .macro-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin: 5px 0 3px; } .macro-meta { font-size: 11px; color: var(--text-muted); } .macro-item.mp .macro-name { color: var(--success); } .macro-item.mc .macro-name { color: var(--accent); } .macro-item.mf .macro-name { color: #A78BFA; } .nut-disclaimer { font-size: 11px; color: var(--text-muted); margin-top: 14px; line-height: 1.5; } .nut-empty { font-size: 13px; color: var(--text-muted); margin-top: 16px; padding: 16px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-sm); } /* Compact target banner on the Log page */ .nut-target-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.25); border-left: 3px solid var(--success); border-radius: var(--radius-sm); padding: 11px 16px; margin-bottom: 16px; font-size: 13px; } .nut-target-banner.nut-target-empty { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.25); border-left-color: var(--accent); color: var(--text-muted); } .ntb-cal { font-size: 15px; font-weight: 800; color: var(--success); } .ntb-macros { color: var(--text-muted); } .ntb-macros b { font-weight: 800; } .ntb-macros b.mp { color: var(--success); } .ntb-macros b.mc { color: var(--accent); } .ntb-macros b.mf { color: #A78BFA; } .nut-target-banner .btn-link { margin-left: auto; } /* ─── Meal Plan (split across N meals) ────────── */ .meal-plan { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .meal-plan-head { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 12px; } .meal-plan-head strong { color: var(--success); } .meal-list { display: flex; flex-direction: column; gap: 8px; } .meal-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); } .meal-name { font-size: 13px; font-weight: 700; color: var(--text); } .meal-cal { font-size: 14px; font-weight: 800; color: var(--success); white-space: nowrap; } .meal-macros { font-size: 12px; color: var(--text-muted); white-space: nowrap; } .meal-macros b.mp, .meal-legend b.mp { color: var(--success); } .meal-macros b.mc, .meal-legend b.mc { color: var(--accent); } .meal-macros b.mf, .meal-legend b.mf { color: #A78BFA; } .meal-legend { font-size: 11px; color: var(--text-muted); margin-top: 10px; } /* ─── Log: Nutrition section + calories eaten ─── */ .nut-section { border-color: rgba(16,185,129,0.35); } .nut-section:hover { box-shadow: 0 0 20px rgba(16,185,129,0.15); } .nut-header { color: var(--success); border-bottom-color: rgba(16,185,129,0.35); } .nut-target-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; } .nut-target-line b { color: var(--text); font-weight: 800; } .nut-target-line b.mp { color: var(--success); } .nut-target-line b.mc { color: var(--accent); } .nut-target-line b.mf { color: #A78BFA; } .nut-target-line .btn-link { margin-left: auto; } .cal-bar-wrap { height: 10px; background: var(--tint-3); border-radius: 5px; overflow: hidden; margin: 4px 0 8px; } .cal-bar { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--success), #34D399); transition: width 0.3s ease; } .cal-bar.cal-over { background: linear-gradient(90deg, var(--danger), #F87171); } .cal-rem-text { font-size: 13px; color: var(--text-muted); } .cal-rem-text strong { color: var(--text); font-weight: 800; } .cal-over-text { color: var(--danger); font-weight: 700; } /* ─── Food Logger ─────────────────────────────── */ .food-logger { margin-top: 16px; } .food-logger-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text); } .food-add-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; } .food-add-row #food-pick { flex: 1 1 220px; min-width: 160px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); font-size: 14px; outline: none; } .food-add-row #food-qty { width: 100px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); font-size: 14px; outline: none; } .food-add-row #food-unit { width: 110px; padding: 10px 8px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); font-size: 13px; outline: none; cursor: pointer; } .food-add-row #food-pick:focus, .food-add-row #food-qty:focus, .food-add-row #food-unit:focus { border-color: var(--success); box-shadow: 0 0 0 3px rgba(16,185,129,0.12); } .food-add-btn { flex-shrink: 0; border-color: var(--success); color: var(--success); } .food-add-btn:hover:not(:disabled) { background: rgba(16,185,129,0.08); border-color: var(--success); color: var(--success); } .food-ai-btn { flex-shrink: 0; border-color: var(--money-color); color: var(--money-color); } .food-ai-btn:hover:not(:disabled) { background: rgba(167,139,250,0.1); border-color: var(--money-color); color: var(--money-color); } .food-ai-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.4; } .fi-ai { font-size: 11px; opacity: 0.9; } .recent-foods { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; } .recent-foods-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--accent); } .recent-chip { padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: all 0.15s; border: 1px solid var(--border-bright); background: var(--tint-2); color: var(--text); font-size: 12px; font-weight: 600; } .recent-chip:hover { border-color: var(--success); background: rgba(16,185,129,0.08); color: var(--success); transform: translateY(-1px); } .recent-chip b { font-weight: 800; opacity: 0.7; margin-left: 2px; } .recent-chip::before { content: '+ '; color: var(--success); font-weight: 800; } .food-log-empty { font-size: 12px; color: var(--text-muted); padding: 12px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-sm); margin-top: 10px; } .food-log-items { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .food-item { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); } .fi-name { font-size: 13px; font-weight: 700; color: var(--text); } .fi-amt { font-size: 12px; color: var(--text-muted); white-space: nowrap; } .fi-macros { font-size: 12px; color: var(--text-muted); white-space: nowrap; } .fi-macros b { font-weight: 800; color: var(--text); } .fi-macros b.mp { color: var(--success); } .fi-macros b.mc { color: var(--accent); } .fi-macros b.mf { color: #A78BFA; } .fi-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; transition: all 0.15s; } .fi-remove:hover { background: var(--danger-bg); color: var(--danger); } .food-log-total { margin-top: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(16,185,129,0.07); border: 1px solid rgba(16,185,129,0.25); font-size: 13px; color: var(--text-muted); } .food-log-total b { color: var(--text); font-weight: 800; } .food-log-total b.mp { color: var(--success); } .food-log-total b.mc { color: var(--accent); } .food-log-total b.mf { color: #A78BFA; } .food-advice { margin-top: 8px; padding: 10px 14px; border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(251,146,60,0.10), rgba(168,85,247,0.10)); border: 1px solid rgba(251,146,60,0.30); font-size: 13px; line-height: 1.45; color: var(--text); font-weight: 600; } /* My Meals + Community meals */ .my-meals { margin-top: 14px; } .my-meals-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .my-meals-actions { display: flex; gap: 14px; flex-wrap: wrap; } .my-meals-actions .btn-link { font-size: 13px; font-weight: 700; } .my-meals-empty { font-size: 13px; color: var(--text-muted); line-height: 1.5; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); } .meal-chips { display: flex; flex-wrap: wrap; gap: 8px; } .meal-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 13px; border-radius: 12px; cursor: pointer; transition: all 0.15s; border: 1px solid var(--border-bright); background: linear-gradient(135deg, rgba(251,146,60,0.08), rgba(168,85,247,0.08)); text-align: left; } .meal-chip:hover { border-color: var(--primary); transform: translateY(-1px); } .meal-chip-name { font-size: 13px; font-weight: 800; color: var(--text); } .meal-chip-macros { font-size: 11px; color: var(--text-muted); } .mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .mm-share { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-top: 4px; cursor: pointer; } .mm-share input { width: 16px; height: 16px; } .community-box #comm-list, .manage-list { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .comm-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--tint-1); } .comm-main { flex: 1; min-width: 0; } .comm-name { font-size: 14px; font-weight: 700; color: var(--text); } .comm-macros { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .comm-macros b { color: var(--text); font-weight: 800; } .comm-macros b.mp { color: var(--success); } .comm-macros b.mc { color: var(--accent); } .comm-macros b.mf { color: #A78BFA; } .comm-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; } .comm-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .comm-x { background: none; border: none; cursor: pointer; font-size: 15px; opacity: 0.6; padding: 4px 6px; border-radius: 6px; } .comm-x:hover { opacity: 1; background: var(--tint-3); } .comm-report { font-size: 12px; font-weight: 600; width: auto; } /* Per-meal target breakdown */ .meal-plan { margin: 2px 0 14px; } .meal-plan-head { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; } .meal-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; } .meal-plan-card { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 10px 12px; } .mpc-name { font-size: 11px; font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 0.4px; } .mpc-cal { font-size: 18px; font-weight: 800; color: var(--text); margin: 2px 0; } .mpc-cal span { font-size: 12px; font-weight: 600; color: var(--text-muted); } .mpc-macros { font-size: 11px; color: var(--text-muted); } .mpc-macros b { font-weight: 800; } .mpc-macros b.mp { color: var(--success); } .mpc-macros b.mc { color: var(--accent); } .mpc-macros b.mf { color: #A78BFA; } .mpc-plate { font-size: 11px; color: var(--text-muted); margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--border); line-height: 1.4; } .meal-plan-note { margin-top: 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; } .meal-plan-note b { color: var(--text); font-weight: 700; } /* Time-aware meal focus */ .meal-focus { margin: 12px 0 6px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(59,130,246,0.30); background: linear-gradient(135deg, rgba(59,130,246,0.08), transparent); } .mf-now { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--primary); margin-bottom: 4px; } .mf-line { font-size: 14px; color: var(--text); line-height: 1.5; } .mf-line b { font-weight: 800; } .mf-btn { margin-top: 10px; } /* This week in nutrition */ .nutweek-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 10px; } .nw-stat { text-align: center; padding: 12px 6px; border-radius: var(--radius-sm); background: var(--surface); } .nw-num { font-size: 24px; font-weight: 900; color: var(--text); line-height: 1.1; } .nw-num.mp { color: var(--success); } .nw-of { font-size: 15px; font-weight: 700; color: var(--text-muted); } .nw-lbl { font-size: 11px; color: var(--text-muted); margin-top: 5px; line-height: 1.4; } .nw-lbl span { display: block; opacity: 0.85; } .nutweek-verdict { font-size: 13px; color: var(--text); font-weight: 600; } /* Gym training plan */ .gp-grid { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; } .gp-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline; font-size: 13px; } .gp-k { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gym-color, var(--success)); } .gp-v { color: var(--text); line-height: 1.45; } .gp-tip { font-size: 13px; color: var(--text-muted); line-height: 1.5; padding-top: 10px; border-top: 1px solid var(--border); } .gp-diet { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .gp-diet-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--food-color, var(--accent)); } .gp-diet .gp-grid { margin: 8px 0; } .gp-diet .gp-k { color: var(--food-color, var(--accent)); } .gp-diet-rules { margin: 4px 0 0; padding-left: 18px; } .gp-diet-rules li { font-size: 13px; color: var(--text-muted); line-height: 1.6; } .gp-diet-link { margin-top: 8px; display: inline-block; } .gym-plan-hint { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--gym-bg, var(--surface)); border: 1px solid var(--gym-border, var(--border)); } .gym-plan-hint b { color: var(--text); } /* Your Climb — signature ascent visual */ .climb-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .climb-title { font-size: 16px; font-weight: 800; color: var(--text); } .climb-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .climb-pct { font-size: 28px; font-weight: 900; line-height: 1; background: linear-gradient(135deg, #fb923c, #ef4444, #a855f7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .climb-svg { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(15,23,42,0.05); } .climb-caption { font-size: 13px; color: var(--text); font-weight: 600; margin-top: 12px; text-align: center; } .climb-trail-done { stroke-dashoffset: var(--len); animation: climbDraw 1.5s cubic-bezier(.4,0,.2,1) forwards; } @keyframes climbDraw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } } .climber, .climber-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: climberPop .5s cubic-bezier(.34,1.56,.64,1) 1.25s forwards; } @keyframes climberPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } } .climb-ms.pending { opacity: 0.5; } .climb-ms.reached { transform-box: fill-box; transform-origin: bottom center; opacity: 0; animation: msPlant .5s cubic-bezier(.34,1.56,.64,1) 1.5s forwards; } @keyframes msPlant { from { opacity: 0; transform: translateY(3px) scale(.5); } to { opacity: 1; transform: none; } } .climb-peak-back { transform-box: fill-box; animation: peakDrift 22s ease-in-out infinite alternate; } @keyframes peakDrift { from { transform: translateX(0); } to { transform: translateX(-5px); } } .climb-share-btn { display: block; margin: 12px auto 0; } /* Book covers (resolved image, or a lettered placeholder) */ .book-cover { position: relative; flex-shrink: 0; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--read-color, #06b6d4), var(--primary)); box-shadow: 0 2px 8px rgba(15,23,42,0.18); } .book-cover::after { content: attr(data-letter); font-size: 22px; font-weight: 900; color: rgba(255,255,255,0.92); } .book-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .book-cover.bc-lg { width: 62px; height: 90px; } .book-cover.bc-sm { width: 42px; height: 60px; } .book-cover.bc-sm::after { font-size: 16px; } .book-pick-cover { display: none; } .book-pick-cover.book-cover { display: flex; margin: 0 auto 16px; } /* Book picker — Search / Browse-by-author tabs + author list */ .book-tabs { display: flex; gap: 8px; margin-bottom: 16px; } .book-tab { flex: 1; padding: 9px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--field-bg); color: var(--text-muted); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: all 0.15s; } .book-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); } .author-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 0 -2px; padding: 2px; } .author-row, .abook-row, .author-back { display: flex; align-items: center; width: 100%; text-align: left; gap: 12px; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 11px 13px; cursor: pointer; font-family: inherit; color: var(--text); } .author-row:hover, .abook-row:hover { border-color: var(--primary); background: var(--tint-1); } .author-name { font-weight: 700; font-size: 14px; flex: 1; min-width: 0; } .author-count { font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; } .author-back { gap: 6px; font-weight: 700; color: var(--primary); border-style: dashed; } .author-head { font-size: 15px; font-weight: 800; margin: 10px 2px 8px; } .abook-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .abook-title { font-weight: 700; font-size: 13.5px; line-height: 1.25; } .abook-pages { font-size: 12px; color: var(--text-muted); } .abook-go { font-size: 18px; color: var(--text-muted); font-weight: 700; flex-shrink: 0; } /* Reading notes grouped by book (collapsible) */ .rlog-group { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--surface); } .rlog-book-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; font-family: inherit; color: var(--text); padding: 12px 14px; cursor: pointer; } .rlog-book-head:hover { background: var(--tint-1); } .rlog-book-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; } .rlog-book-name { font-weight: 800; font-size: 15px; line-height: 1.25; } .rlog-book-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .rlog-chev { font-size: 20px; color: var(--text-muted); flex-shrink: 0; transition: transform 0.2s; transform: rotate(90deg); } .rlog-group.collapsed .rlog-chev { transform: rotate(0deg); } .rlog-book-body { padding: 2px 14px 10px; border-top: 1px solid var(--tint-2); } .rlog-group.collapsed .rlog-book-body { display: none; } .rlog-entry { padding: 10px 0; border-bottom: 1px dashed var(--border); } .rlog-entry:last-child { border-bottom: none; } .rlog-entry-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .rlog-date { font-weight: 700; font-size: 13px; color: var(--text); } .rlog-note { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; } /* Location layer for reading notes: chapter sub-groups, page badge, highlighted quote */ .rlog-entry-top { justify-content: flex-start; } .rlog-entry-top .pill { margin-left: auto; } .rlog-chapter { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--read-color); margin: 14px 0 2px; } .rlog-book-body > .rlog-chapter:first-child { margin-top: 4px; } .rlog-pg { font-size: 11px; font-weight: 700; color: var(--read-color); background: rgba(6,182,212,0.10); border-radius: 999px; padding: 2px 8px; white-space: nowrap; } .rlog-quote { font-size: 13px; color: var(--text); font-style: italic; line-height: 1.5; margin: 2px 0 6px; padding: 6px 10px; border-left: 3px solid var(--read-color); background: var(--surface); border-radius: 0 6px 6px 0; } /* Per-book chapter list */ .chap-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; } .chap-item { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; } .chap-num { font-size: 12px; font-weight: 800; color: var(--read-color); background: rgba(6,182,212,0.10); border-radius: 6px; padding: 1px 8px; flex: none; } .chap-name { flex: 1; font-size: 14px; color: var(--text); min-width: 0; overflow-wrap: break-word; } .chap-x { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 13px; flex: none; padding: 2px 4px; } .chap-x:hover { color: var(--danger); } .chap-add { display: flex; gap: 8px; } .chap-add .vocab-input { flex: 1; } /* Community feed — composer + posts */ .cf-typetabs, .cf-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .cf-filters { margin: 18px 0 12px; } .cf-type, .cf-filter { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--field-bg); color: var(--text-muted); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: all 0.15s; } .cf-type.active, .cf-filter.active { background: var(--primary); color: #fff; border-color: var(--primary); } .cf-input { width: 100%; margin-bottom: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--field-bg); color: var(--text); font-family: inherit; font-size: 14px; box-sizing: border-box; } .cf-area { min-height: 92px; resize: vertical; line-height: 1.5; } .cf-row { display: flex; gap: 10px; } .cf-row .cf-input { flex: 1; min-width: 0; } .cf-macros .cf-input { padding: 11px 8px; text-align: center; } .feed-post { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 14px 16px; margin-bottom: 12px; } .fp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .fp-badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 9px; border-radius: 999px; color: #fff; } .fp-thought { background: var(--primary); } .fp-program { background: var(--gym-color, #16a34a); } .fp-meal { background: var(--food-color, #f59e0b); } .fp-author { font-size: 13px; color: var(--text-muted); font-weight: 600; } .fp-title { font-size: 16px; font-weight: 800; margin-bottom: 4px; line-height: 1.3; } .fp-meta { font-size: 12.5px; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; } .fp-body { font-size: 14px; color: var(--text); line-height: 1.55; white-space: pre-wrap; overflow-wrap: break-word; } .fp-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .fp-like { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--field-bg); color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .fp-like.liked { color: #e0245e; border-color: #e0245e; background: rgba(224,36,94,0.08); } .fp-x { margin-left: auto; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .fp-x:hover { color: var(--danger); border-color: var(--danger); } /* Connection of the Week — the cross-pillar "wow" card */ .conn-card { border: 1px solid var(--accent); background: var(--tint-1); } .conn-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--accent); margin-bottom: 8px; } .conn-headline { font-size: 18px; font-weight: 800; line-height: 1.4; color: var(--text); } .conn-pct { color: var(--success); } .conn-sub { font-size: 13px; color: var(--text-muted); margin-top: 7px; line-height: 1.5; } .conn-share { margin-top: 12px; } .conn-building { border-color: var(--border); background: var(--surface); } .conn-building .conn-tag { color: var(--text-muted); } /* The Climb Ahead — future-self forecast */ .fut-card { border: 1px solid var(--read-color, var(--accent)); background: var(--tint-1); } .fut-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--read-color, var(--accent)); margin-bottom: 8px; } .fut-headline { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.4; } .fut-snapshot { margin-top: 8px; padding: 12px 13px; border-radius: var(--radius-sm); background: rgba(6,182,212,0.08); border: 1px solid rgba(6,182,212,0.18); font-size: 14px; line-height: 1.55; color: var(--text); font-weight: 650; } .fut-list { margin: 10px 0 0; padding-left: 20px; } .fut-list li { font-size: 14px; color: var(--text); line-height: 1.7; } .fut-level { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text); } .fut-foot { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; } /* The Life Web — pillar constellation */ .lw-svg { display: block; margin: 10px auto 4px; max-width: 360px; } .lw-strong { font-size: 13.5px; color: var(--text); margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); line-height: 1.5; } .lw-legend { display: flex; gap: 18px; margin-top: 10px; font-size: 12px; color: var(--text-muted); } .lw-key { display: inline-flex; align-items: center; gap: 6px; } .lw-dot { width: 18px; height: 3px; border-radius: 2px; display: inline-block; } .lw-dot.lw-pos { background: #16a34a; } .lw-dot.lw-neg { background: #ef4444; } /* Living mountain sky — animated dashboard hero */ .mtn-hero { position: relative; height: 152px; border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; box-shadow: var(--shadow-md); } .mtn-hero-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .mtn-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(8,20,42,0.55), transparent 48%); } .mtn-hero-text { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 2; } .mtn-greet { font-size: 24px; font-weight: 800; color: #fff; text-shadow: 0 1px 8px rgba(8,20,42,0.5); line-height: 1.15; letter-spacing: -0.3px; } .mtn-sub { font-size: 13.5px; color: rgba(255,255,255,0.96); text-shadow: 0 1px 6px rgba(8,20,42,0.5); margin-top: 4px; } .mtn-stars circle { animation: mtn-twinkle 3s ease-in-out infinite; } @keyframes mtn-twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } .mtn-celestial { animation: mtn-glow 4.5s ease-in-out infinite; } @keyframes mtn-glow { 0%, 100% { opacity: 0.88; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mtn-stars circle, .mtn-celestial { animation: none; } } /* Your Year as a Range — every week a peak */ .yr-svg { display: block; width: 100%; height: auto; aspect-ratio: 400 / 150; margin: 10px 0 8px; border-radius: var(--radius-sm); overflow: hidden; } .yr-stats { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--text-muted); padding-top: 8px; border-top: 1px solid var(--border); } .yr-share { margin-top: 10px; display: inline-block; } /* Vocabulary — words from books + use-it-in-a-sentence */ .vocab-form { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; } .vocab-input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--field-bg); color: var(--text); font-family: inherit; font-size: 14px; box-sizing: border-box; } .vocab-list { display: flex; flex-direction: column; gap: 10px; } .vocab-item { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface); } .vocab-top { display: flex; align-items: center; gap: 8px; } .vocab-word { font-weight: 800; font-size: 16px; color: var(--text); } .vocab-bk { font-size: 11px; color: var(--read-color, var(--text-muted)); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; } .vocab-x { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; } .vocab-x:hover { color: var(--danger); } .vocab-mean { font-size: 13.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; } .vocab-sentence { margin-top: 8px; font-size: 13.5px; color: var(--text); font-style: italic; line-height: 1.5; } /* Location layer — page badge + the source sentence the word was found in */ .vocab-form-row { display: flex; gap: 8px; } .vocab-form-row .vocab-input:first-child { flex: 1; min-width: 0; } .vocab-page { flex: none; width: 84px; text-align: center; } .vocab-pg { font-size: 11px; font-weight: 700; color: var(--read-color); background: rgba(6,182,212,0.10); border-radius: 999px; padding: 2px 8px; white-space: nowrap; } .vocab-context { font-size: 13.5px; color: var(--text); line-height: 1.55; margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--read-color); background: var(--surface); border-radius: 0 8px 8px 0; font-style: italic; } /* Spaced-repetition review — CTA banner + flashcard session */ .vr-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(6,182,212,0.08); border: 1px solid var(--read-border); } .vr-cta.vr-cta-done { background: var(--surface); border-color: var(--border); } .vr-cta-n { font-size: 14px; font-weight: 800; color: var(--text); } .vr-cta-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .vr-cta .btn { flex: none; } .vr-box { text-align: center; width: 420px; max-width: 92vw; position: relative; } .vr-close { position: absolute; top: 12px; right: 14px; border: none; background: none; color: var(--text-muted); font-size: 16px; cursor: pointer; } .vr-progress { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; } .vr-word { font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -.5px; } .vr-hint { font-size: 12px; color: var(--read-color); margin-top: 6px; font-weight: 700; } .vr-answer { margin: 18px 0; } .vr-mean { font-size: 16px; color: var(--text); line-height: 1.5; } .vr-mean.vr-muted { color: var(--text-muted); font-style: italic; } .vr-ctx { font-size: 13.5px; color: var(--text-muted); font-style: italic; line-height: 1.5; margin-top: 10px; padding: 8px 12px; border-left: 3px solid var(--read-color); background: var(--surface); border-radius: 0 8px 8px 0; text-align: left; } .vr-reveal { width: 100%; margin-top: 22px; } .vr-actions { display: flex; gap: 10px; margin-top: 6px; } .vr-actions .btn { flex: 1; } .vr-miss { background: var(--surface); border: 1px solid var(--border-bright); color: var(--text); } .vr-done-icon { font-size: 40px; margin-bottom: 6px; } .vr-done-sub { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 8px 0 20px; } .rbc-pace { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } /* Year in Knowledge recap */ .ky-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ky-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 8px; text-align: center; } .ky-n { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; font-variant-numeric: tabular-nums; } .ky-l { font-size: 11px; color: var(--text-muted); margin-top: 3px; } .vocab-done { font-style: normal; font-size: 12px; color: var(--success); font-weight: 700; margin-left: 4px; } .vocab-ask { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); } .vocab-ask-q { font-size: 13px; color: var(--text); margin-bottom: 7px; } .vocab-ask-row { display: flex; gap: 8px; } .vocab-ask-row .vocab-input { flex: 1; } .vocab-remind { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); line-height: 1.45; cursor: pointer; } .vocab-remind input { width: 17px; height: 17px; margin-top: 1px; flex-shrink: 0; } /* Guided log — one light question at a time */ .gl-wrap { max-width: 480px; margin: 0 auto; padding: 8px 0 24px; } .gl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .gl-step-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .gl-full { background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; } .gl-progress { display: flex; gap: 6px; margin-bottom: 28px; } .gl-dot { flex: 1; height: 4px; border-radius: 2px; background: var(--border); transition: background 0.2s; } .gl-dot.gl-dot-on { background: var(--accent); } .gl-step { min-height: 210px; text-align: center; padding: 10px 0 8px; } .gl-q { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.3; } .gl-sub { font-size: 14px; color: var(--text-muted); margin-top: 6px; } .gl-body { margin-top: 26px; } .gl-input { width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--field-bg); color: var(--text); font-family: inherit; font-size: 16px; box-sizing: border-box; } .gl-num { text-align: center; font-size: 26px; font-weight: 800; } .gl-input + .gl-input { margin-top: 10px; } .gl-area { min-height: 120px; resize: vertical; font-size: 15px; line-height: 1.5; text-align: left; } .gl-yesno { display: flex; flex-direction: column; gap: 12px; } .gl-big { padding: 18px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer; transition: all 0.15s; } .gl-big.gl-on { border-color: var(--accent); background: var(--tint-1); } .gl-extra { margin-top: 14px; } .gl-stars { display: flex; justify-content: center; gap: 8px; } .gl-star { background: none; border: none; font-size: 40px; line-height: 1; color: var(--accent); cursor: pointer; padding: 0; } .gl-chips { display: flex; gap: 8px; justify-content: center; margin-top: 12px; } .gl-chip { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--field-bg); color: var(--text); font-family: inherit; font-weight: 700; cursor: pointer; } .gl-actions { display: flex; align-items: center; gap: 10px; margin-top: 30px; } .gl-actions > :first-child { margin-right: auto; } .gl-back, .gl-skip { background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: 14px; cursor: pointer; padding: 8px; } .gl-next { min-width: 150px; padding: 13px 20px; font-size: 16px; } .gl-toguided { display: inline-block; margin-bottom: 8px; } .gl-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 12px; } .gl-link-full { display: inline-block; margin-top: 14px; background: none; border: none; color: var(--accent); font-family: inherit; font-size: 13px; cursor: pointer; } .gl-stars + .gl-input { margin-top: 18px; } .gl-sub2 { font-size: 13px; color: var(--text-muted); margin: 4px 0 8px; } .gl-muscles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 14px; } .gl-muscle { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--field-bg); color: var(--text); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; } .gl-muscle.gl-muscle-on { background: var(--gym-color, var(--accent)); color: #fff; border-color: var(--gym-color, var(--accent)); } .dash-stats-cta { display: block; width: 100%; margin-top: 6px; } /* Onboarding — emotional hero moments (welcome + "your climb begins") */ .onboard-hero { text-align: center; } .ob-hero-art { max-width: 280px; margin: 4px auto 18px; } .onboard-hero .onboard-title { font-size: 24px; } .onboard-hero .onboard-sub { max-width: 380px; margin-left: auto; margin-right: auto; } .onboard-actions-center { justify-content: center !important; } .onboard-actions-center .btn { min-width: 220px; } .ob-skip-link { display: block; margin: 14px auto 0; background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; font-family: inherit; } .ob-skip-link:hover { color: var(--text); text-decoration: underline; } /* Color pass — the mountain motif as the brand mark + loading/empty heroes */ .sidebar-brand .brand-icon, .auth-brand .brand-icon { display: inline-block !important; width: 30px; height: 30px; flex-shrink: 0; font-size: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon points='1,29 10,18 15,23 30,12 31,29' fill='%239FE1CB'/%3E%3Cpolygon points='3,29 13,8 23,29' fill='%231D9E75'/%3E%3Cpolygon points='13,8 16.5,15 14.5,14 13,16 11.5,14 9.5,15' fill='%23EAF7F1'/%3E%3Cline x1='13' y1='8' x2='13' y2='3' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpolygon points='13,3 18.5,4.6 13,6.2' fill='%23F97316'/%3E%3C/svg%3E") center/contain no-repeat; } .auth-brand .brand-icon { width: 36px; height: 36px; } .loading-mtn { line-height: 0; margin-bottom: 4px; } .empty-icon.empty-mtn { font-size: 0; max-width: 220px; width: 100%; margin: 0 auto 12px; line-height: 0; } /* Home, as in the mockup — week dots + compact pillar row */ .wk-card { padding: 14px 16px; } .wk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .wk-title { font-weight: 700; font-size: 14px; color: var(--text); } .wk-count { font-size: 12px; color: var(--text-muted); font-weight: 600; } .wk-strip { display: flex; justify-content: space-between; gap: 6px; } .wk-day { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; } .wk-dot { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border); box-sizing: border-box; } .wk-dot.wk-done { background: var(--gym-color, #16a34a); border-color: var(--gym-color, #16a34a); } .wk-dot.wk-today { border-color: var(--accent); border-width: 2px; } .wk-dot.wk-future { opacity: 0.45; } .wk-lbl { font-size: 11px; color: var(--text-muted); font-weight: 600; } .pnav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .pnav-pill { flex: 1; min-width: 70px; text-align: center; padding: 10px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: border-color 0.15s; } .pnav-pill:hover { border-color: var(--accent); } .pnav-more { flex: 0 0 auto; min-width: 54px; color: var(--text-muted); } /* Book search suggestions (mobile-friendly autocomplete) */ .book-suggest { display: none; border: 1px solid var(--border); border-radius: 10px; overflow-x: hidden; overflow-y: auto; margin: -4px 0 14px; max-height: 300px; background: var(--surface); } .bs-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); padding: 9px 12px 5px; } .bs-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; background: none; border: none; border-top: 1px solid var(--tint-2); cursor: pointer; font-family: inherit; color: var(--text); } .bs-row:first-child { border-top: none; } .bs-row:hover, .bs-row:active { background: var(--tint-1); } .bs-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .bs-title { font-weight: 700; font-size: 13.5px; line-height: 1.25; } .bs-author { font-size: 12px; color: var(--text-muted); } @media (prefers-reduced-motion: reduce) { .climb-trail-done { animation: none; stroke-dashoffset: 0; } .climber, .climber-ring, .climb-ms.reached { animation: none; opacity: 1; transform: none; } .climb-peak-back { animation: none; } } /* Dashboard section labels (scannable grouping) */ .dash-section { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin: 26px 4px 12px; display: flex; align-items: center; gap: 10px; } .dash-section::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* Autosave indicator (Log page) */ .autosave-status { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-right: auto; align-self: center; opacity: 0; transition: opacity 0.2s; } .autosave-status.is-saving, .autosave-status.is-saved { opacity: 1; } .autosave-status.is-saved { color: var(--success); } /* Per-meal food log */ .meal-slot { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .meal-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--border); } .ms-name { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text); } .ms-total { font-size: 12px; color: var(--text-muted); white-space: nowrap; } .ms-total b { color: var(--text); font-weight: 800; } .ms-total b.mp { color: var(--success); } .ms-total.is-over, .ms-total.is-over b { color: var(--danger); } .meal-slot-foods { padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; } .meal-slot-empty { padding: 10px 12px; font-size: 12px; color: var(--text-muted); } /* Per-meal separate logging */ .meal-slot-active { border-color: var(--success); box-shadow: 0 0 0 1px var(--success); } .ms-adding { font-size: 10px; font-weight: 700; color: #fff; background: var(--success); border-radius: 999px; padding: 1px 7px; letter-spacing: .3px; margin-left: 4px; text-transform: none; } .ms-add { width: calc(100% - 20px); margin: 4px 10px 10px; padding: 8px; border: 1px dashed var(--border-bright); border-radius: 8px; background: transparent; color: var(--success); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .ms-add:hover { border-color: var(--success); background: rgba(16,185,129,0.06); } .food-active-line { font-size: 12px; color: var(--text-muted); margin: 4px 0 8px; } .food-active-line b { color: var(--success); } /* Day total — the sum shown after all meals are logged */ .food-day-total { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(16,185,129,0.10); border: 1.5px solid rgba(16,185,129,0.35); } .fdt-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--success); margin-bottom: 3px; } .fdt-nums { font-size: 15px; color: var(--text-muted); } .fdt-nums b { color: var(--text); font-weight: 800; } .fdt-nums b.mp { color: var(--success); } .fdt-nums b.mc { color: var(--accent); } .fdt-nums b.mf { color: #A78BFA; } /* Per-meal breakdown in the saved day detail */ .dd-meals { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; } .dd-meal { background: var(--surface); border-radius: 8px; padding: 7px 10px; } .dd-meal-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .dd-meal-name { font-size: 11px; font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: 0.4px; } .dd-meal-cal { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; } .dd-meal-foods { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; } .dd-meal-foods span { color: var(--text); font-weight: 700; } /* Goal card */ .goal-card { background: linear-gradient(135deg, var(--card), var(--card-2)); } .goal-empty { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .goal-empty-title { font-size: 15px; font-weight: 800; color: var(--text); } .goal-empty-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; max-width: 440px; line-height: 1.5; } .goal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .goal-title { font-size: 16px; font-weight: 800; color: var(--text); } .goal-chip { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .goal-chip.ok { color: var(--primary); background: rgba(59,130,246,0.12); } .goal-chip.behind { color: var(--warning); background: rgba(245,158,11,0.14); } .goal-chip.done { color: var(--success); background: rgba(16,185,129,0.14); } .goal-bar-lg { height: 12px; border-radius: 999px; background: var(--surface); overflow: hidden; } .goal-bar-lg-fill { height: 100%; border-radius: 999px; transition: width 0.5s; } .goal-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-muted); margin-top: 8px; } .goal-meta b { color: var(--text); font-weight: 800; font-size: 15px; } .goal-pace { font-size: 13px; color: var(--text); margin-top: 6px; font-weight: 600; } .goal-actions { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; } /* Next-step card — the guiding action */ .nextstep { border-left: 4px solid var(--primary); background: linear-gradient(135deg, rgba(59,130,246,0.06), transparent); } .nextstep.good { border-left-color: var(--success); background: linear-gradient(135deg, rgba(16,185,129,0.06), transparent); } .nextstep.warn { border-left-color: var(--warning); background: linear-gradient(135deg, rgba(245,158,11,0.08), transparent); } .ns-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 4px; } .ns-title { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; } .ns-sub { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; } .ns-cta { margin-top: 12px; } /* Quest Mode - a compact daily mission board */ .quest-card { background: linear-gradient(135deg, rgba(15,23,42,0.03), rgba(59,130,246,0.06)); border: 1px solid rgba(59,130,246,0.22); } .quest-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .quest-label { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.7px; color: var(--primary); margin-bottom: 3px; } .quest-title { font-size: 18px; font-weight: 850; color: var(--text); letter-spacing: -0.2px; } .quest-score { min-width: 48px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--field-bg); border: 1px solid var(--border); font-size: 15px; font-weight: 900; color: var(--text); } .quest-list { display: flex; flex-direction: column; gap: 8px; } .quest-row { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; padding: 10px 11px; font-family: inherit; text-align: left; cursor: pointer; transition: transform 0.15s, border-color 0.15s, background 0.15s; } .quest-row:hover { transform: translateY(-1px); border-color: var(--primary); background: var(--tint-1); } .quest-row.done { background: rgba(16,185,129,0.07); border-color: rgba(16,185,129,0.24); } .quest-check { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-bright); color: var(--success); font-size: 9px; font-weight: 900; } .quest-row.done .quest-check { background: var(--success); border-color: var(--success); color: #fff; } .quest-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .quest-copy b { font-size: 14px; line-height: 1.25; } .quest-copy small { font-size: 12.5px; color: var(--text-muted); line-height: 1.35; } .quest-cta { font-size: 12px; font-weight: 800; color: var(--primary); white-space: nowrap; } /* Coach chat */ .coach-thread { display: flex; flex-direction: column; gap: 10px; max-height: 440px; overflow-y: auto; padding: 4px 2px 8px; margin-bottom: 12px; } .coach-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 24px 12px; } .chat-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; } .chat-user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; } .chat-bot { align-self: flex-start; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .chat-bot p { margin: 0 0 8px; } .chat-bot p:last-child { margin-bottom: 0; } .chat-bot ul, .chat-bot ol { margin: 6px 0; padding-left: 18px; } .chat-bot h2, .chat-bot h3 { font-size: 14px; margin: 8px 0 4px; } .chat-bot strong { color: var(--text); } .coach-input-row { display: flex; gap: 8px; align-items: flex-end; } .coach-input-row textarea { flex: 1; resize: none; max-height: 120px; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); font-size: 14px; font-family: var(--font); outline: none; } .coach-input-row textarea:focus { border-color: var(--primary); } .chat-typing { display: inline-flex; gap: 4px; align-items: center; } .chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: chatDot 1s infinite; } .chat-typing span:nth-child(2) { animation-delay: 0.2s; } .chat-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes chatDot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } } /* Meal builder (ingredient rows) */ .ing-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; } .ing-row input { padding: 8px; font-size: 13px; } .ing-name { flex: 3 1 150px; } .ing-amt { flex: 2 1 90px; } .ing-row .ing-m { flex: 1 1 52px; min-width: 46px; text-align: center; } .ing-x { flex: 0 0 auto; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 4px 6px; } .ing-x:hover { color: var(--danger); } .mm-total { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.25); font-size: 14px; color: var(--text-muted); } .mm-total b { color: var(--text); font-weight: 800; } .mm-total b.mp { color: var(--success); } .mm-total b.mc { color: var(--accent); } .mm-total b.mf { color: #A78BFA; } /* Recipe breakdown (community + manage) */ .comm-recipe { margin-top: 6px; } .comm-recipe summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--accent); list-style: none; } .comm-recipe summary::-webkit-details-marker { display: none; } .comm-recipe ul { margin: 6px 0 2px; padding-left: 18px; } .comm-recipe li { font-size: 12px; color: var(--text-muted); line-height: 1.6; } .comm-recipe li b { color: var(--text); } .ing-amt-tag { font-size: 11px; color: var(--text-muted); background: var(--tint-3); padding: 1px 6px; border-radius: 6px; } /* Meal photos */ .mm-photo { margin-top: 12px; } .mm-photo-btn { display: inline-flex; align-items: center; cursor: pointer; } .mm-photo-preview { display: flex; align-items: center; gap: 12px; } .mm-photo-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); } .comm-photo { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; align-self: flex-start; } .meal-chip-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .meal-chip.has-photo { flex-direction: row; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; } .meal-chip-img { width: 34px; height: 34px; object-fit: cover; border-radius: 9px; flex-shrink: 0; } @media (max-width: 640px) { .food-item { grid-template-columns: 1fr auto; row-gap: 4px; } .fi-macros { grid-column: 1 / -1; } } /* ─── Auth Screen (login / sign-up) ───────────── */ body.auth-active .sidebar, body.auth-active .main, body.auth-active .fab-btn { display: none !important; } #auth-screen { position: fixed; inset: 0; z-index: 20000; display: block; /* block + overflow scroll = reliable everywhere (no flex clipping) */ overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 24px 48px; background: var(--bg); isolation: isolate; animation: fadeIn 0.3s ease; } #auth-screen::before { content: ''; position: fixed; inset: -10%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 82% 8%, rgba(249,115,22,0.13) 0%, transparent 55%), radial-gradient(ellipse at 12% 88%, rgba(236,72,153,0.10) 0%, transparent 55%), radial-gradient(ellipse at 50% 120%, rgba(239,68,68,0.07) 0%, transparent 55%); animation: bgDrift 22s ease-in-out infinite alternate; will-change: transform; } .auth-card { width: 100%; max-width: 400px; margin: 0 auto; /* horizontal center; flows top-down so it always scrolls */ background: var(--card); border: 1px solid var(--border-bright); border-radius: var(--radius); padding: 32px; box-shadow: 0 0 80px rgba(59,130,246,0.12), var(--shadow-lg); animation: slideUp 0.4s cubic-bezier(0.34,1.56,0.64,1); } .auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; justify-content: center; } .auth-brand .brand-icon { font-size: 32px; } .auth-title { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; } .auth-sub { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 2px; } .auth-hook { background: linear-gradient(135deg, rgba(45,212,191,0.12), rgba(167,139,250,0.08)); border: 1px solid rgba(45,212,191,0.28); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 22px; text-align: center; } .auth-hook-title { font-size: 15px; font-weight: 800; color: #0d9488; margin-bottom: 6px; letter-spacing: -0.2px; } .auth-hook-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; } .auth-warn { font-size: 12px; color: var(--warning); background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25); border-radius: 8px; padding: 8px 11px; margin-bottom: 12px; line-height: 1.45; } .auth-status { font-size: 13px; color: #0d9488; background: rgba(45,212,191,0.08); border: 1px solid rgba(45,212,191,0.22); border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; line-height: 1.45; } .auth-tabs { display: flex; gap: 6px; background: var(--field-bg); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 22px; } .auth-tab { flex: 1; padding: 9px; border: none; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 700; cursor: pointer; border-radius: 6px; transition: all 0.15s; } .auth-tab.active { background: var(--primary); color: #fff; box-shadow: 0 0 16px rgba(59,130,246,0.4); } .auth-field { margin-bottom: 16px; } .auth-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .auth-field input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); font-size: 15px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .auth-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); } .auth-error { font-size: 13px; color: var(--danger); min-height: 18px; margin-bottom: 8px; font-weight: 600; opacity: 0; transition: opacity 0.15s; } .auth-error.visible { opacity: 1; } .auth-submit { width: 100%; padding: 12px; font-size: 15px; margin-top: 4px; } .auth-foot { text-align: center; margin-top: 20px; font-size: 13px; color: var(--text-muted); } .auth-note { font-size: 11px; color: var(--text-muted); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); line-height: 1.5; } /* ─── Redesigned first screen: a branded summit hero above the form ─── */ .auth-card--hero { padding: 0; overflow: hidden; } .auth-hero { position: relative; overflow: hidden; color: #fff; padding: 20px 26px 72px; background: linear-gradient(157deg, #38BDF8 0%, #3B82F6 52%, #1E40AF 100%); } .auth-hero-sun { position: absolute; top: -24px; right: -14px; width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle, rgba(255,227,142,0.95) 0%, rgba(255,205,80,0.45) 40%, transparent 68%); pointer-events: none; } .auth-hero-mtn { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 66px; display: block; } .auth-hero-top { position: relative; display: flex; align-items: center; gap: 7px; } .auth-logo-mark { font-size: 17px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); } .auth-logo-word { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; } .auth-hero-copy { position: relative; margin-top: 30px; } .auth-headline { font-size: 27px; font-weight: 800; line-height: 1.1; letter-spacing: -0.6px; text-shadow: 0 2px 14px rgba(2,18,55,0.35); } .auth-tagline { font-size: 13px; margin-top: 9px; line-height: 1.5; max-width: 290px; color: rgba(255,255,255,0.92); text-shadow: 0 1px 8px rgba(2,18,55,0.3); } .auth-body { padding: 22px 26px 26px; } /* ─── User chip (sidebar footer) ──────────────── */ .user-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; margin-bottom: 12px; background: var(--tint-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .user-chip-info { display: flex; align-items: center; gap: 9px; min-width: 0; } .user-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--primary), #1D4ED8); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; } .user-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-logout { flex-shrink: 0; background: none; border: 1px solid var(--border); color: var(--text-muted); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.15s; } .user-logout:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); } /* ─── Forgot-password ─────────────────────────── */ .auth-forgot { text-align: center; margin-top: 14px; } .auth-field select { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); font-size: 14px; outline: none; cursor: pointer; } .auth-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); } .forgot-q { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.22); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.5; } /* ─── Today-section: Reading ──────────────────── */ .read-section { border-color: var(--read-border); } .read-section:hover { box-shadow: 0 0 20px var(--read-glow); } .read-header { color: var(--read-color); border-bottom-color: var(--read-border); } .pill-read { background: var(--read-bg); color: var(--read-color); } .no-book-prompt { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-muted); padding: 12px 0; } .current-book-label { font-size: 13px; font-weight: 700; color: var(--read-color); margin-bottom: 14px; padding: 8px 12px; background: var(--read-bg); border: 1px solid var(--read-border); border-radius: var(--radius-sm); display: inline-block; } /* ─── Reading Stats Bar ───────────────────────── */ .reading-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .rs-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); } .rs-item span { font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; } .rs-item strong { font-size: 20px; font-weight: 800; color: var(--text); } /* ─── Current Book Card ───────────────────────── */ .reading-book-card { border-left: 4px solid var(--read-color); box-shadow: -4px 0 24px var(--read-glow), var(--shadow); } .rbc-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .rbc-icon { font-size: 36px; flex-shrink: 0; } .rbc-info { flex: 1; min-width: 0; } .rbc-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--read-color); margin-bottom: 4px; } .rbc-title { font-size: 20px; font-weight: 900; color: var(--text); line-height: 1.2; margin-bottom: 3px; } .rbc-author { font-size: 13px; color: var(--text-muted); } .rbc-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; } .rbc-progress { margin-top: 4px; } .rbc-progress-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; } .rbc-bar-track { height: 10px; background: var(--tint-3); border-radius: 5px; overflow: hidden; } .rbc-bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--read-color), #0EA5E9); box-shadow: 0 0 10px var(--read-glow); transition: width 1s cubic-bezier(0.22,1,0.36,1); } /* ─── Reading Start Card (no book) ───────────────── */ .reading-start-card { text-align: center; padding: 48px 32px; border: 2px dashed var(--read-border); background: var(--read-bg); } .rsc-icon { font-size: 56px; margin-bottom: 14px; } .reading-start-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; color: var(--text); } .reading-start-card p { font-size: 14px; color: var(--text-muted); margin-bottom: 22px; line-height: 1.6; } /* ─── Finished Books ──────────────────────────── */ .finished-books-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .finished-book { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; } .fb-icon { font-size: 26px; flex-shrink: 0; } .fb-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; } .fb-date { font-size: 12px; color: var(--text-muted); } /* ─── Reading Log in History Table ───────────────── */ .pill-read { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; } /* ─── 3D parallax background ──────────────────────── */ /* Let the fixed scene show through. html keeps the solid colour as a fallback if the scene ever fails to build, so text is always readable. */ html { background: var(--bg); } body { background: transparent; } .main { background: transparent; } #scene3d { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; perspective: 900px; perspective-origin: 50% 35%; --mx: 0; --my: 0; --sc: 0; /* set by JS: pointer/tilt (-1..1) + scroll (0..1) */ } .s3-sky { position: absolute; inset: 0; background: radial-gradient(130% 90% at 50% -5%, #e3f0ff 0%, #ecf3fc 42%, var(--bg) 100%); } .s3-stage { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; transform: rotateX(calc(var(--my) * -1.6deg)) rotateY(calc(var(--mx) * 2.1deg)); transition: transform .35s ease-out; } .s3-mtn { position: absolute; left: -2%; width: 104%; bottom: 0; display: block; transition: transform .35s ease-out; will-change: transform; } .s3-mtn polygon { fill: inherit; } /* Light enough that dark text stays readable where they pass behind it, but with real colour + differential parallax so the depth reads clearly. */ .s3-far { height: 52vh; fill: #cfe6f5; opacity: .6; transform: translate3d(calc(var(--mx) * 8px), calc(var(--my) * 6px - var(--sc) * 9px), 0); } .s3-mid { height: 44vh; fill: #aedccd; opacity: .66; transform: translate3d(calc(var(--mx) * 14px), calc(var(--my) * 9px - var(--sc) * 16px), 0); } .s3-near { height: 34vh; fill: #84ccaf; opacity: .74; transform: translate3d(calc(var(--mx) * 22px), calc(var(--my) * 13px - var(--sc) * 26px), 0); } /* Night palette for the backdrop so it reads as dusk mountains, not a bright day scene */ :root[data-theme="dark"] .s3-sky { background: radial-gradient(130% 90% at 50% -5%, #17273f 0%, #0f1a2e 45%, var(--bg) 100%); } :root[data-theme="dark"] .s3-far { fill: #1b3150; opacity: .5; } :root[data-theme="dark"] .s3-mid { fill: #1a3a48; opacity: .55; } :root[data-theme="dark"] .s3-near { fill: #1d4a44; opacity: .62; } .s3-particles { position: absolute; inset: 0; will-change: transform; transform: translate3d(calc(var(--mx) * 18px), calc(var(--my) * 13px), 0); transition: transform .35s ease-out; } .p3 { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9fe6cd, #41b794); box-shadow: 0 0 9px 1px rgba(110, 210, 180, .35); animation-name: p3float; animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: transform, opacity; } /* Drift up while gently twinkling around the particle's own brightness (--o) */ @keyframes p3float { 0% { transform: translateY(7px); opacity: calc(var(--o, .4) * .55); } 50% { transform: translateY(-24px); opacity: var(--o, .4); } 100% { transform: translateY(7px); opacity: calc(var(--o, .4) * .55); } } /* Reduced motion: keep the depth, drop all movement */ .s3-still .s3-stage, .s3-still .s3-mtn, .s3-still .s3-particles { transform: none !important; } @media (prefers-reduced-motion: reduce) { .p3 { animation: none !important; } .s3-stage, .s3-mtn, .s3-particles { transition: none !important; } } /* ─── "Eat now" meal hint (guided log + quick log) ─── */ .meal-now { margin: 0 0 12px; padding: 11px 14px; border-radius: 12px; text-align: left; background: linear-gradient(135deg, rgba(29,158,117,.10), rgba(125,216,189,.16)); border: 1px solid rgba(29,158,117,.24); } .mn-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1D9E75; } .mn-meal { font-size: 18px; font-weight: 800; color: var(--text); margin-top: 2px; line-height: 1.2; } .mn-time { font-size: 12px; font-weight: 600; color: var(--text-muted); } .mn-macros { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 4px; } .mn-eg { margin-top: 8px; border-top: 1px dashed rgba(29,158,117,.25); padding-top: 7px; } .mn-eg-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text); padding: 2px 0; } .mn-eg-row span:last-child { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .mn-eg-row em { font-style: normal; font-weight: 700; color: #1D9E75; } .mn-eg-total { margin-top: 3px; padding-top: 5px; border-top: 1px solid rgba(29,158,117,.18); font-weight: 700; } .mn-eg-total span:last-child { color: #1D9E75; } .mn-plate { font-size: 12.5px; color: var(--text-muted); margin-top: 8px; } /* ─── Body-shape card (weight as a silhouette) ─────── */ .body-shape-card { text-align: left; } .bsc-head { margin-bottom: 4px; } .bsc-sub { font-size: 13px; color: var(--text-muted); } .bsc-stage { display: flex; justify-content: center; padding: 8px 0 4px; background: radial-gradient(70% 60% at 50% 38%, rgba(99,102,241,.08), transparent 70%); } .bsc-svg { width: 165px; height: auto; max-height: 290px; filter: drop-shadow(0 10px 20px rgba(99,102,241,.22)); } .bsc-ghost { opacity: .22; } .bsc-ghost path, .bsc-ghost ellipse, .bsc-ghost rect, .bsc-ghost circle { fill: var(--text-muted); } .bsc-stats { display: flex; justify-content: space-around; gap: 10px; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 12px; } .bsc-stat { text-align: center; flex: 1; } .bsc-v { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1; } .bsc-v span { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-left: 2px; } .bsc-l { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; } .bsc-legend { font-size: 11.5px; color: var(--text-muted); text-align: center; margin-top: 9px; } /* ─── Milestone share-prompt modal ─────────────────── */ .milestone-box { max-width: 360px; text-align: center; padding: 30px 26px 24px; } .ms-emoji { font-size: 64px; line-height: 1; margin-bottom: 8px; animation: msPop .5s cubic-bezier(.2,1.3,.5,1) both; } @keyframes msPop { from { transform: scale(0); } } .ms-title { font-size: 26px; font-weight: 900; color: var(--text); letter-spacing: -.5px; } .ms-sub { font-size: 14.5px; color: var(--text-muted); line-height: 1.55; margin-top: 8px; } .ms-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; } .ms-actions .btn-primary { width: 100%; } @media (prefers-reduced-motion: reduce) { .ms-emoji { animation: none; } } /* ─── Your Why (mission) + Stay Sharp (four dimensions) ─── */ .why-card { background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(167,139,250,.10)); border: 1px solid rgba(124,58,237,.18); } .why-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: #7C3AED; } .why-prompt { font-size: 14.5px; color: var(--text-muted); line-height: 1.55; margin: 8px 0 14px; } .why-text { font-size: 18px; font-weight: 600; font-style: italic; color: var(--text); line-height: 1.5; margin: 8px 0 6px; } .why-card .btn-link { padding: 0; } /* Compact dashboard anchor */ .why-mini { display: flex; flex-direction: column; gap: 3px; cursor: pointer; background: linear-gradient(135deg, rgba(124,58,237,.05), rgba(167,139,250,.09)); border: 1px solid rgba(124,58,237,.16); } .why-mini-label { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: #7C3AED; } .why-mini-text { font-size: 15px; font-weight: 600; font-style: italic; color: var(--text); line-height: 1.45; } .ss-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .ss-sub { font-size: 13px; color: var(--text-muted); } .ss-balance { text-align: center; flex-shrink: 0; } .ss-bal-n { font-size: 30px; font-weight: 900; line-height: 1; color: var(--accent, #7C3AED); letter-spacing: -1px; } .ss-bal-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-top: 2px; } .ss-rows { display: flex; flex-direction: column; gap: 12px; } .ss-row { display: flex; align-items: center; gap: 12px; } .ss-name { display: flex; align-items: center; gap: 9px; width: 132px; flex-shrink: 0; } .ss-ic { font-size: 20px; } .ss-lbl { display: flex; flex-direction: column; line-height: 1.15; } .ss-lbl b { font-size: 14px; color: var(--text); } .ss-lbl em { font-size: 11px; font-style: normal; color: var(--text-muted); } .ss-bar { flex: 1; height: 12px; border-radius: 6px; background: rgba(120,130,150,.14); overflow: hidden; } .ss-fill { height: 100%; border-radius: 6px; transition: width .6s cubic-bezier(.2,.7,.2,1); } .ss-pct { width: 44px; text-align: right; font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .ss-insight { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-muted); line-height: 1.5; } .ss-insight b { color: var(--text); } .mission-box { max-width: 440px; } .mission-ta { width: 100%; min-height: 120px; margin-top: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); resize: vertical; outline: none; box-sizing: border-box; } .mission-ta:focus { border-color: var(--accent, #7C3AED); } .mission-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 16px; } @media (max-width: 560px) { .ss-name { width: 110px; } .ss-lbl em { display: none; } } /* ─── Identity & votes + Never miss twice (small-habits ideas) ─── */ .identity-card { background: linear-gradient(135deg, rgba(16,185,129,.05), rgba(34,211,238,.07)); border: 1px solid rgba(16,185,129,.16); } .iv-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; color: #0E9F6E; } .iv-hero { font-size: 16px; font-weight: 600; font-style: italic; color: var(--text); line-height: 1.45; margin: 8px 0 14px; } .iv-rows { display: flex; flex-direction: column; gap: 11px; } .iv-row { display: flex; align-items: center; gap: 10px; } .iv-ic { font-size: 20px; width: 26px; text-align: center; } .iv-lbl { flex: 1; font-size: 15px; font-weight: 600; color: var(--text); } .iv-votes { font-size: 18px; font-weight: 900; white-space: nowrap; } .iv-votes em { font-size: 12px; font-weight: 600; font-style: normal; color: var(--text-muted); } .iv-foot { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); } .nmt-banner { display: flex; align-items: center; gap: 14px; cursor: pointer; background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(239,68,68,.10)); border: 1px solid rgba(245,158,11,.30); } .nmt-ic { font-size: 30px; flex-shrink: 0; } .nmt-body { flex: 1; min-width: 0; } .nmt-body b { font-size: 15.5px; color: var(--text); } .nmt-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; } .nmt-go { flex-shrink: 0; font-weight: 800; color: #D97706; font-size: 14px; } /* ─── End-of-log "day complete" moment ─── */ .dc-check { width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 50%; background: linear-gradient(135deg, #10B981, #22D3EE); color: #fff; font-size: 34px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(16,185,129,.4); animation: msPop .5s cubic-bezier(.2,1.3,.5,1) both; } .dc-votes { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 4px; } .dc-vote { font-size: 15px; color: #cbd5e1; } .dc-vote b { color: #fff; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .dc-check { animation: none; } } /* ─── "All logged for today" (the log empties + resets daily) ─── */ .gl-alldone { text-align: center; max-width: 440px; margin: 0 auto; padding: 52px 20px; } .gld-check { width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%; background: linear-gradient(135deg, #10B981, #22D3EE); color: #fff; font-size: 42px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 32px rgba(16,185,129,.35); animation: msPop .5s cubic-bezier(.2,1.3,.5,1) both; } .gld-title { font-size: 27px; font-weight: 900; color: var(--text); letter-spacing: -.5px; } .gld-sub { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin-top: 10px; } .gld-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; } .gld-actions .btn-primary { min-width: 220px; } @media (prefers-reduced-motion: reduce) { .gld-check { animation: none; } } /* ─── Per-meal log choices (each meal logs itself) ─── */ .gl-meal-opts { display: flex; gap: 8px; margin-bottom: 12px; } .gl-meal-opt { flex: 1; padding: 15px 6px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--card); font-weight: 700; font-size: 15px; color: var(--text); cursor: pointer; transition: all .15s; } .gl-meal-opt:hover { border-color: var(--food-color, #F59E0B); } .gl-meal-opt.gl-on { border-color: var(--food-color, #F59E0B); background: var(--food-bg, rgba(245,158,11,.10)); color: #B45309; box-shadow: 0 0 0 3px rgba(245,158,11,.12); } /* ─── Week recap modal (works any day, no AI key) ─── */ .wr-box { max-width: 420px; } .wr-votes { font-size: 13.5px; color: var(--text-muted); text-align: center; line-height: 1.6; margin: 14px 0 2px; } .wr-votes b { color: var(--text); font-weight: 700; } .wr-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; } .wr-actions .btn-primary { width: 100%; } /* ─── Signup: optional password-recovery expander (keeps the form short) ─── */ .auth-recovery { margin: 2px 0 14px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; } .auth-recovery summary { cursor: pointer; padding: 12px 2px; font-size: 13.5px; font-weight: 700; color: var(--accent, #7C3AED); list-style: none; } .auth-recovery summary::-webkit-details-marker { display: none; } .auth-recovery summary span { color: var(--text-muted); font-weight: 400; } .auth-recovery[open] { padding-bottom: 10px; } .auth-recovery .auth-field { margin-top: 10px; } .auth-recovery-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 8px; } /* ─── First-log welcome banner ─── */ .gl-welcome { background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(34,211,238,.12)); border: 1px solid rgba(16,185,129,.22); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; color: var(--text); line-height: 1.5; text-align: center; } .gl-welcome b { color: #0E9F6E; } /* ───────────────────────────────────────────────────────────── WORKOUT TRACKER — library, sets/reps, rest timer ───────────────────────────────────────────────────────────── */ /* Entry button inside the gym log section */ .wo-entry { margin-top: 14px; } .wo-entry-sum { font-size: 13px; font-weight: 600; color: var(--gym-color); margin-bottom: 8px; } .btn-workout { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1.5px solid rgba(16,185,129,.35); background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(16,185,129,.04)); color: #0E9F6E; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: all .15s; } .btn-workout:hover { border-color: var(--gym-color); background: rgba(16,185,129,.14); transform: translateY(-1px); } .gl-workout { margin-top: 12px; } /* Session screen */ .wo-wrap { max-width: 620px; margin: 0 auto; padding: 8px 4px 120px; } .wo-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; background: var(--bg); padding: 10px 2px; margin-bottom: 8px; } .wo-back { background: none; border: none; color: var(--gym-color); font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; padding: 6px 4px; } .wo-title { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.3px; } .wo-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; } .wo-tot { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 6px; text-align: center; box-shadow: var(--shadow); } .wo-tot-n { display: block; font-size: 22px; font-weight: 800; color: var(--gym-color); line-height: 1.1; letter-spacing: -.5px; } .wo-tot-l { display: block; font-size: 10px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; } .wo-ex-list { display: flex; flex-direction: column; gap: 12px; } .wo-ex { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); } .wo-ex-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; } .wo-ex-name { font-size: 16px; font-weight: 700; color: var(--text); } .wo-ex-muscle { font-size: 12px; color: var(--gym-color); font-weight: 600; margin-top: 2px; } .wo-ex-del { background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 6px; line-height: 1; } .wo-ex-del:hover { background: var(--surface); color: var(--danger, #EF4444); } .wo-sets { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .wo-set { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 9px; padding: 9px 12px; } .wo-set-n { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--gym-color); color: #fff; font-size: 12px; font-weight: 700; } .wo-set-v { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); } .wo-set-del { background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; padding: 2px 6px; } .wo-set-del:hover { color: var(--danger, #EF4444); } .wo-sets-empty { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; } .wo-set-add { display: flex; align-items: center; gap: 8px; } .wo-set-in { width: 100%; flex: 1; min-width: 0; padding: 11px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--field-bg, var(--bg-2)); color: var(--text); font-family: inherit; font-size: 16px; text-align: center; box-sizing: border-box; } .wo-set-in:focus { outline: none; border-color: var(--gym-color); } .wo-x { color: var(--text-muted); font-weight: 700; flex: none; } .wo-set-btn { flex: none; padding: 11px 16px; border: none; border-radius: 10px; background: var(--gym-color); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: filter .15s; } .wo-set-btn:hover { filter: brightness(1.06); } .wo-empty { text-align: center; padding: 40px 20px; font-size: 40px; } .wo-empty-t { font-size: 16px; font-weight: 700; color: var(--text); margin-top: 8px; } .wo-empty-s { font-size: 13px; color: var(--text-muted); margin-top: 4px; } .wo-add { width: 100%; margin-top: 14px; padding: 14px; border: 1.5px dashed var(--border-bright); border-radius: 12px; background: var(--card); color: var(--text); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: all .15s; } .wo-add:hover { border-color: var(--gym-color); color: var(--gym-color); } /* Rest timer — fixed at the bottom so it's always visible */ .wo-rest { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(600px, calc(100% - 24px)); background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow-lg); z-index: 20; } .wo-rest-live { border-color: var(--gym-color); background: linear-gradient(135deg, rgba(16,185,129,.08), var(--card)); } .wo-rest-top { display: flex; align-items: center; justify-content: space-between; } .wo-rest-label { font-size: 13px; font-weight: 700; color: var(--text); } .wo-rest-hint { font-size: 11px; color: var(--text-muted); } .wo-rest-clock { font-size: 26px; font-weight: 800; color: var(--gym-color); font-variant-numeric: tabular-nums; letter-spacing: -.5px; } .wo-rest-track { height: 6px; border-radius: 4px; background: var(--surface); overflow: hidden; margin: 9px 0; } .wo-rest-fill { height: 100%; background: var(--gym-color); border-radius: 4px; transition: width 1s linear; } .wo-rest-presets { display: flex; gap: 8px; margin-top: 8px; } .wo-rest-presets button { flex: 1; padding: 9px 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; } .wo-rest-presets button.on { border-color: var(--gym-color); color: var(--gym-color); } .wo-rest-presets button:hover { border-color: var(--gym-color); } .wo-rest-btns { display: flex; gap: 8px; } .wo-rest-btns button { flex: 1; padding: 9px 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .wo-rest-btns .wo-rest-stop { background: var(--gym-color); color: #fff; border-color: var(--gym-color); } /* Exercise library overlay */ .wo-lib-overlay { position: fixed; inset: 0; background: rgba(2,6,23,.45); z-index: 60; display: flex; align-items: flex-end; justify-content: center; } .wo-lib { width: min(620px, 100%); max-height: 86vh; background: var(--bg); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); } .wo-lib-head { display: flex; gap: 10px; padding: 16px 16px 10px; } .wo-lib-search { flex: 1; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-2); color: var(--text); font-family: inherit; font-size: 16px; box-sizing: border-box; } .wo-lib-search:focus { outline: none; border-color: var(--gym-color); } .wo-lib-close { flex: none; width: 44px; border: 1px solid var(--border); border-radius: 11px; background: var(--card); color: var(--text-muted); font-size: 16px; cursor: pointer; } .wo-lib-filters { display: flex; gap: 7px; overflow-x: auto; padding: 4px 16px 10px; -webkit-overflow-scrolling: touch; } .wo-lib-chip { flex: none; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .wo-lib-chip.on { border-color: var(--gym-color); color: var(--gym-color); background: rgba(16,185,129,.08); } .wo-lib-list { overflow-y: auto; padding: 4px 16px 24px; display: flex; flex-direction: column; gap: 6px; } .wo-lib-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--card); color: var(--text); font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; transition: all .12s; } .wo-lib-item:hover { border-color: var(--gym-color); background: rgba(16,185,129,.05); } .wo-lib-name { flex: 1; } .wo-lib-tag { flex: none; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; } .wo-lib-custom { color: var(--gym-color); border-style: dashed; justify-content: center; font-weight: 700; } .wo-lib-empty { text-align: center; color: var(--text-muted); font-size: 14px; padding: 20px; } /* Body-part-first picker */ .wo-lib-sec { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; margin: 4px 2px 4px; } .wo-bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .wo-bp { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 16px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer; text-align: left; transition: all .12s; } .wo-bp:hover { border-color: var(--gym-color); background: rgba(16,185,129,.05); transform: translateY(-1px); } .wo-bp-name { font-size: 16px; font-weight: 700; color: var(--text); } .wo-bp-count { font-size: 12px; color: var(--text-muted); font-weight: 600; } .wo-lib-back { background: none; border: none; color: var(--gym-color); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 4px 2px; margin-bottom: 2px; align-self: flex-start; } .wo-lib-part-title { font-size: 15px; font-weight: 800; color: var(--text); margin: 2px 2px 8px; } /* Library row = pick button + a "muscles worked" button */ .wo-lib-row { display: flex; gap: 8px; align-items: stretch; } .wo-lib-pick { flex: 1; min-width: 0; } .wo-lib-info { flex: none; width: 46px; border: 1px solid var(--border); border-radius: 11px; background: var(--card); color: var(--text-muted); cursor: pointer; display: grid; place-items: center; transition: all .12s; } .wo-lib-info:hover { border-color: var(--gym-color); color: var(--gym-color); background: rgba(16,185,129,.06); } /* Muscle-map modal */ .mm-overlay { position: fixed; inset: 0; background: rgba(2,6,23,.5); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; } .mm-card { width: min(420px, 100%); max-height: 90vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 16px; } .mm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .mm-title { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.3px; } .mm-close { flex: none; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-muted); font-size: 15px; cursor: pointer; } .mm-svg { display: block; width: 100%; max-width: 320px; height: auto; margin: 4px auto 8px; } .mm-svg .mm-cap { fill: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; } .mm-legend { display: flex; flex-direction: column; gap: 8px; margin: 6px 2px 14px; } .mm-leg-row { display: flex; align-items: baseline; gap: 10px; } .mm-leg-label { flex: none; width: 78px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); } .mm-prim-label { color: var(--gym-color); } .mm-chips { display: flex; flex-wrap: wrap; gap: 6px; } .mm-chip { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; } .mm-chip.mm-prim { background: rgba(16,185,129,.16); color: #0E9F6E; border: 1px solid rgba(16,185,129,.4); } .mm-chip.mm-sec { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); } .mm-add { margin-top: 2px; } /* Muscles button on a logged exercise card */ .wo-ex-acts { display: flex; align-items: center; gap: 4px; } .wo-ex-info { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 5px; border-radius: 6px; display: grid; place-items: center; } .wo-ex-info:hover { color: var(--gym-color); background: var(--surface); } /* Workout start: program vs. your own, and the program picker */ .wo-choose-h { font-size: 18px; font-weight: 800; color: var(--text); text-align: center; margin: 22px 4px 4px; letter-spacing: -.3px; } .wo-choose-sub { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 8px; } .wo-choose-opts { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .wo-opt { display: block; width: 100%; text-align: left; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: all .15s; box-shadow: var(--shadow); } .wo-opt:hover { border-color: var(--gym-color); background: rgba(16,185,129,.05); transform: translateY(-1px); } .wo-opt-ic { font-size: 26px; margin-bottom: 6px; } .wo-opt-t { font-size: 17px; font-weight: 800; color: var(--text); } .wo-opt-s { font-size: 13px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; } .wo-prog-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .wo-prog { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: all .15s; box-shadow: var(--shadow); } .wo-prog:hover { border-color: var(--gym-color); background: rgba(16,185,129,.05); transform: translateY(-1px); } .wo-prog-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .wo-prog-name { font-size: 16px; font-weight: 800; color: var(--text); } .wo-prog-count { font-size: 12px; color: var(--text-muted); font-weight: 600; flex: none; } .wo-prog-list { font-size: 13px; color: var(--text-muted); margin: 5px 0 8px; line-height: 1.45; } .wo-prog-go { font-size: 13px; font-weight: 700; color: var(--gym-color); } /* Goal-tailored banner on the program picker */ .wo-goal-banner { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); border-radius: 12px; padding: 12px 14px; margin: 4px 0 12px; } .wo-goal-top { font-size: 13px; color: var(--text); } .wo-goal-top b { color: var(--gym-color); } .wo-goal-rx { font-size: 16px; font-weight: 800; color: var(--text); margin-top: 2px; } .wo-goal-tip { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; } .wo-goal-generic { background: var(--surface); border-color: var(--border); } /* Compact rep-scheme hint inside the workout view */ .wo-scheme { display: flex; align-items: center; gap: 8px; justify-content: center; margin: -6px 0 14px; font-size: 13px; } .wo-scheme-tag { font-weight: 700; color: var(--gym-color); background: rgba(16,185,129,.12); padding: 2px 9px; border-radius: 999px; } .wo-scheme-rx { color: var(--text-muted); font-weight: 600; } .wo-planned { text-align: center; font-size: 13px; font-weight: 700; color: var(--gym-color); background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.22); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; } /* Dashboard "plan your next workout" card */ .nextwo-card { display: block; width: 100%; text-align: left; cursor: default; } .nextwo-empty { cursor: pointer; transition: border-color .15s; } .nextwo-empty:hover { border-color: var(--gym-color); } .nextwo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .nextwo-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; } .nextwo-prog { font-size: 16px; font-weight: 800; color: var(--text); margin-top: 2px; } .nextwo-hint { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .nextwo-go { font-size: 14px; font-weight: 700; color: var(--gym-color); flex: none; } .nextwo-acts { display: flex; gap: 6px; flex: none; } /* Plan-ahead picker sheet */ .wplan-overlay { position: fixed; inset: 0; background: rgba(2,6,23,.45); z-index: 80; display: flex; align-items: flex-end; justify-content: center; } .wplan-card { width: min(560px, 100%); max-height: 88vh; overflow-y: auto; background: var(--bg); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-lg); padding: 18px 16px 24px; } .wplan-head { display: flex; align-items: center; justify-content: space-between; } .wplan-title { font-size: 18px; font-weight: 800; color: var(--text); } .wplan-close { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text-muted); font-size: 15px; cursor: pointer; } .wplan-sub { font-size: 13px; color: var(--text-muted); margin: 4px 0 10px; line-height: 1.4; } .wplan-goal { font-size: 13px; font-weight: 700; color: var(--gym-color); background: rgba(16,185,129,.10); border-radius: 9px; padding: 8px 10px; margin-bottom: 10px; } .wplan-list { display: flex; flex-direction: column; gap: 8px; } .wplan-prog { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); font-family: inherit; cursor: pointer; transition: all .12s; } .wplan-prog:hover { border-color: var(--gym-color); background: rgba(16,185,129,.05); } .wplan-prog-name { font-size: 16px; font-weight: 700; } .wplan-prog-ex { font-size: 12px; color: var(--text-muted); font-weight: 600; flex: none; } .wplan-own { width: 100%; margin-top: 10px; padding: 13px; border: 1.5px dashed var(--border-bright); border-radius: 12px; background: var(--card); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .wplan-own:hover { border-color: var(--gym-color); color: var(--gym-color); }