:root{ --bg:#0A0A0F; --panel:#12131A; --panel2:#171922; --text:#F6F3EF; --muted:#8D93A6; --line:rgba(255,255,255,.09); --green:#1CCFA9; --cyan:#FF6452; --violet:#6C5FFF; --amber:#FFB454; --danger:#ff6b7a; --radius:24px; --font-display:'Space Grotesk',ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-body:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-mono:'JetBrains Mono',ui-monospace,"SF Mono",Menlo,monospace; --glow-green:rgba(28,207,169,.3); --glow-cyan:rgba(255,100,82,.35); --glow-violet:rgba(108,95,255,.28); } *{box-sizing:border-box} /* Native elements can receive the browser's own default focus outline when opened via showModal() (per spec, focus moves to the dialog itself or its first focusable descendant) — nothing in this app's design ever accounted for that, since every dialog defines its own border and glow intentionally. Left unset, on a dialog that's nearly full-screen (most of these are position:fixed;inset:0) that default outline traces the whole screen edge, which is what this fixes. */ dialog{outline:none} html{background:var(--bg)} body{ margin:0; font-family:var(--font-body); color:var(--text); background: radial-gradient(circle at 10% -10%,rgba(255,100,82,.14),transparent 30%), radial-gradient(circle at 95% 15%,rgba(108,95,255,.11),transparent 28%), var(--bg); background-attachment:fixed; min-height:100vh; } h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em} .eyebrow{font-family:var(--font-body);font-weight:800} /* v1.7.2 — applied to while any dialog is open, see the lockBodyScrollForDialogs() patch in app.js. position:fixed (rather than just overflow:hidden) is what's actually needed here — plain overflow:hidden on body is well known not to reliably stop touch-scroll from reaching the page underneath on iOS Safari. `top` is set inline by the JS to the negative of the scroll position being locked at, so the page doesn't visually jump before the dialog opens. */ body.dialog-scroll-lock{position:fixed;left:0;right:0;width:100%} button,input,select{font:inherit} button{cursor:pointer} .hidden{display:none!important} #app{max-width:880px;margin:0 auto;min-height:100vh;padding-bottom:110px} .onboarding{padding:calc(70px + env(safe-area-inset-top)) 22px 30px;text-align:center} .brand-orb{ width:86px;height:86px;border-radius:28px;margin:0 auto 22px; display:grid;place-items:center;font-size:42px;font-weight:900; background:conic-gradient(from 210deg,var(--green),var(--cyan),var(--violet),var(--green)); color:#08110d;box-shadow:0 0 60px rgba(85,240,167,.2); } .eyebrow{font-size:12px;letter-spacing:.18em;font-weight:800;color:#7c8496;margin:0 0 6px} .onboarding h1{font-size:44px;margin:0;letter-spacing:-.04em} .lead{color:#aeb5c4;font-size:18px;margin:8px 0 28px} .glass-card,.hero-card,.metric-card,.scan-card,.calendar-card,.history-detail,.rewards-hero{ background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); border:1px solid var(--line);box-shadow:0 20px 80px rgba(0,0,0,.35); border-radius:var(--radius);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px) } .setup-card{max-width:560px;margin:0 auto;padding:22px;text-align:left} label{display:block;color:#cbd0db;font-size:14px;font-weight:700;margin:10px 0} input,select{ width:100%;margin-top:8px;background:#0d1119;color:var(--text);border:1px solid rgba(255,255,255,.1); border-radius:14px;padding:14px 14px;outline:none; font-size:16px; /* iOS Safari zooms the page on focus if a field's font is under 16px — this keeps every field at exactly the no-zoom threshold regardless of what size its parent label happens to be */ } input:focus,select:focus{border-color:rgba(84,217,255,.6);box-shadow:0 0 0 3px rgba(84,217,255,.08)} .top-gap{margin-top:20px} .target-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .target-option{ border:1px solid var(--line);background:#0e121b;color:var(--text); padding:16px 10px;border-radius:16px;text-align:left } .target-option strong{font-size:22px;display:block} .target-option span{font-size:11px;color:var(--muted);display:block;margin-top:4px;line-height:1.25} .target-option.selected{border-color:var(--green);box-shadow:0 0 0 2px rgba(85,240,167,.12)} .primary-btn,.secondary-btn,.checkout-btn,.mini-btn,.danger-btn{ border:0;border-radius:16px;font-weight:850 } .primary-btn{width:100%;padding:15px 18px;background:linear-gradient(135deg,var(--green),var(--cyan));color:#07130e;margin-top:18px;font-family:var(--font-display);font-weight:700;box-shadow:0 10px 30px -8px var(--glow-cyan)} .secondary-btn{padding:12px 16px;background:#242b3a;color:var(--text)} .danger-btn{width:100%;padding:13px;background:rgba(255,107,122,.1);color:#ff9aa5;margin-top:10px} .backup-btn{width:100%;margin-top:8px} .app-header{padding:calc(34px + env(safe-area-inset-top)) 20px 12px;display:flex;align-items:center;justify-content:space-between} .app-header h2,.section-title h2{margin:0;font-size:26px;letter-spacing:-.03em} .profile-pill{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#151a24;color:#dce0e7} .view{display:none;padding:8px 20px 24px} .view.active{display:block} .hero-card{padding:20px;overflow:hidden;position:relative} .hero-card:after{ content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-120px;top:-120px; background:radial-gradient(circle,var(--glow-cyan),transparent 65%) } .hero-info-btn{ position:absolute;top:16px;right:16px;z-index:2;width:30px;height:30px;border-radius:50%; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#aeb5c4;font-size:15px; display:grid;place-items:center } .score-band-list{display:flex;flex-direction:column;gap:8px;margin-top:14px} .score-band-row{ display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:13px; background:#111620;border:1px solid var(--line) } .score-band-range{font-size:13px;font-weight:800;color:var(--violet);font-variant-numeric:tabular-nums} .score-band-label{font-size:13px;color:#dce5ef} .hero-card h3{font-size:25px;margin:3px 0 18px} .hero-message{color:#aeb5c4;margin:0;font-size:14px} .rings-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .ring-card{text-align:center;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);border-radius:20px;padding:14px 8px} .progress-ring{ --pct:0; width:118px;height:118px;border-radius:50%;margin:0 auto 8px; display:grid;place-items:center; background:conic-gradient(var(--green) calc(var(--pct)*1%),rgba(255,255,255,.08) 0); position:relative; } .progress-ring.move{background:conic-gradient(var(--cyan) calc(var(--pct)*1%),rgba(255,255,255,.08) 0)} .progress-ring.score{background:conic-gradient(var(--violet) calc(var(--pct)*1%),rgba(255,255,255,.08) 0)} /* The pulse deliberately avoids animating `filter` — Safari has a long history of unreliably animating multi-function filter chains (especially ones referencing currentColor via a CSS custom property), which is exactly what broke here: it worked correctly on Android/Chrome but never animated at all on iPhone. opacity and transform are the two properties every browser, including Safari, animates consistently, so the whole effect now lives on a separate blurred glow layer behind the ring instead of on the ring's own filter. */ .progress-ring:before{ content:"";position:absolute;inset:-10px;border-radius:50%;z-index:-1; background:radial-gradient(circle,var(--green) 0%,transparent 68%); filter:blur(9px);opacity:.3; animation:ringGlowPulse 5.4s ease-in-out infinite; } .progress-ring.move:before{background:radial-gradient(circle,var(--cyan) 0%,transparent 68%)} .progress-ring.score:before{background:radial-gradient(circle,var(--violet) 0%,transparent 68%)} @keyframes ringGlowPulse{ 0%,100%{opacity:.22;transform:scale(1)} 50%{opacity:.62;transform:scale(1.16)} } @media(prefers-reduced-motion:reduce){.progress-ring:before{animation:none}} .progress-ring:after{content:"";position:absolute;inset:8px;background:#12131A;border-radius:50%} .ring-inner{position:relative;z-index:1;display:flex;flex-direction:column} .ring-inner strong{font-size:23px;letter-spacing:-.02em;font-family:var(--font-mono)} .ring-inner span,.ring-card p{font-size:11px;color:var(--muted)} .ring-card p{margin:5px 0 0} .quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 22px} .quick-card{ display:flex;align-items:center;gap:12px;text-align:left;padding:16px;border-radius:20px; background:#121722;border:1px solid var(--line);color:var(--text) } .quick-card strong,.quick-card span{display:block} .quick-card div span{color:var(--muted);font-size:11px;margin-top:4px} .quick-icon{font-size:27px} .section-block{margin-top:18px} .section-title{display:flex;justify-content:space-between;align-items:center;margin:8px 0 14px} .section-title h3{margin:0;font-size:18px} .section-title>span{color:var(--muted);font-size:12px} .timeline,.list-stack{display:flex;flex-direction:column;gap:10px} .empty-state{color:var(--muted);padding:18px;border:1px dashed rgba(255,255,255,.09);border-radius:18px;text-align:center} .log-item{ padding:14px;border-radius:18px;background:#111620;border:1px solid rgba(255,255,255,.06); display:flex;justify-content:space-between;align-items:center } .log-item strong{display:block;font-size:14px} .log-item small{color:var(--muted)} .log-value{text-align:right;font-weight:850} /* v1.9.4 — delete button on each logged activity, since there was previously no way to remove a mis-entered walk/run/workout. */ .activity-log-item{gap:10px} .activity-log-right{display:flex;align-items:center;gap:10px;flex:none} .activity-delete-btn{ width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,107,122,.25); background:rgba(255,107,122,.08);color:#ff9aa5;font-size:15px;display:grid;place-items:center;flex:none; } .activity-delete-btn:active{background:rgba(255,107,122,.18)} .checkout-btn{ width:100%;margin-top:22px;padding:17px;background:linear-gradient(135deg,#1c2331,#252d40);color:#eef1f7; border:1px solid rgba(255,255,255,.08) } .mini-btn{padding:10px 13px;background:#202738;color:#e9ecf2} .metric-card{padding:18px;margin-bottom:14px} .metric-card>span{color:var(--muted);font-size:12px} .metric-card strong{display:block;font-size:28px;margin:5px 0 13px} .bar{height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden} .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--cyan));border-radius:999px;transition:.4s} .scan-card{padding:18px;margin-bottom:18px;display:flex;justify-content:space-between;gap:15px;align-items:center} .scan-card h3{margin:2px 0 5px}.scan-card p:last-child{color:var(--muted);font-size:12px;margin:0} .exercise-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 10px} .oneoff-card{width:100%;display:flex;align-items:center;gap:14px;text-align:left;margin-bottom:20px} .oneoff-card span{margin-bottom:0!important;font-size:24px} .activity-type-card{ padding:16px 10px;border-radius:18px;border:1px solid var(--line);background:#111620;color:var(--text);text-align:left } .activity-type-card span{font-size:27px;display:block;margin-bottom:12px} .activity-type-card strong,.activity-type-card small{display:block} .activity-type-card small{color:var(--muted);font-size:10px;margin-top:4px} .rewards-hero{padding:25px;text-align:center;margin-bottom:16px} .rewards-hero p{color:var(--muted);margin:0} .rewards-hero strong{font-size:74px;letter-spacing:-.07em;display:block;background:linear-gradient(135deg,var(--green),var(--cyan),var(--violet));-webkit-background-clip:text;color:transparent} .rewards-hero span{color:#c9ced8} .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px} .stat-card{padding:16px 10px;text-align:center;background:#111620;border:1px solid var(--line);border-radius:18px} .stat-card span,.stat-card strong,.stat-card small{display:block} .stat-card strong{font-size:24px}.stat-card small{color:var(--muted)} .achievement-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .achievement{padding:17px;background:#10141e;border:1px solid var(--line);border-radius:18px;opacity:.38} .achievement.unlocked{opacity:1;box-shadow:0 0 0 1px rgba(85,240,167,.15)} .achievement span{font-size:26px;display:block}.achievement strong,.achievement small{display:block} .achievement small{color:var(--muted);margin-top:4px} .calendar-card{padding:16px} .calendar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px} .calendar-head button{border:0;background:#202634;color:white;border-radius:12px;width:36px;height:36px;font-size:22px} .weekday-row,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .weekday-row span{text-align:center;font-size:10px;color:var(--muted);padding:5px 0} .day-cell{ aspect-ratio:1;border-radius:12px;border:1px solid transparent;background:rgba(255,255,255,.025);color:#cbd1dc; display:grid;place-items:center;position:relative;font-size:12px } .day-cell.muted{opacity:.2}.day-cell.has-data{border-color:rgba(85,240,167,.25)} .day-cell.has-data:after{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);position:absolute;bottom:6px} .day-cell.selected{background:#233044;border-color:var(--cyan)} /* v1.4.0 — days with any exercise logged (workout/walk/run/one-off) get a pulsing ring instead of just the plain dot, so they're easy to spot at a glance on the month grid. */ .day-cell.has-exercise{border-color:rgba(84,217,255,.4)} .day-cell.has-exercise::before{ content:"";position:absolute;inset:-3px;border-radius:14px;border:1.5px solid var(--cyan); opacity:.7;animation:dayPulse 2.2s ease-out infinite;pointer-events:none; } .day-cell.has-exercise.has-data:after{background:var(--cyan)} @keyframes dayPulse{ 0%{transform:scale(1);opacity:.7} 70%{transform:scale(1.28);opacity:0} 100%{transform:scale(1.28);opacity:0} } @media(prefers-reduced-motion:reduce){.day-cell.has-exercise::before{animation:none;opacity:.35}} .history-detail{margin-top:14px;padding:18px} .history-detail h3{margin:0 0 10px} .history-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .history-grid div{background:rgba(255,255,255,.03);padding:10px;border-radius:12px} .history-grid span,.history-grid strong{display:block}.history-grid span{color:var(--muted);font-size:10px} .bottom-nav{ position:fixed;left:50%;transform:translateX(-50%);bottom:10px;width:min(calc(100% - 20px),860px); background:rgba(15,18,26,.88);backdrop-filter:blur(22px);border:1px solid var(--line);border-radius:24px; display:grid;grid-template-columns:repeat(5,1fr);padding:8px;z-index:20 } .nav-btn{background:none;border:0;color:#767e90;padding:8px 4px;border-radius:14px} .nav-btn span,.nav-btn small{display:block}.nav-btn span{font-size:18px;margin-bottom:2px} .nav-btn.active{background:linear-gradient(135deg,rgba(255,100,82,.16),rgba(108,95,255,.14));color:var(--text)} .modal{ width:min(92vw,500px);border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(180deg,#15161F,#0D0E14);color:var(--text); padding:20px;box-shadow:0 30px 100px rgba(0,0,0,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px) } .modal::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(8px)} .modal-head{display:flex;justify-content:space-between;align-items:center} .modal-head h3{margin:0}.modal-head button{background:none;border:0;color:white;font-size:30px} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px} .feeling-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px} .feeling-row button{font-size:25px;background:#0c1018;border:1px solid var(--line);border-radius:14px;padding:10px} .feeling-row button.selected{border-color:var(--cyan);background:#1c2a36} .celebration{text-align:center}.celebrate-icon{font-size:40px}.celebration h2{font-size:30px;margin:10px 0} .celebration p{color:#b5bdca;line-height:1.5} .checkout-score{background:#0d1119;border-radius:18px;padding:16px;margin:18px 0} .checkout-score span,.checkout-score strong{display:block}.checkout-score span{color:var(--muted)}.checkout-score strong{font-size:50px} @media(max-width:620px){ #app{padding-bottom:105px} .rings-wrap{gap:6px} .ring-card{padding:10px 3px} .progress-ring{width:90px;height:90px} .ring-inner strong{font-size:18px} .quick-grid{grid-template-columns:1fr} .target-grid{grid-template-columns:1fr} .exercise-actions{grid-template-columns:1fr 1fr 1fr} .activity-type-card{padding:13px 8px} .activity-type-card small{display:none} .stats-grid{gap:7px} } /* CholScore v0.2 — routines + live workouts */ .routine-list{display:flex;flex-direction:column;gap:11px} .routine-card{ background:linear-gradient(180deg,#151b27,#10151e); border:1px solid var(--line);border-radius:20px;padding:16px; } .routine-card-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start} .routine-card h4{font-size:18px;margin:0 0 4px} .routine-card p{margin:0;color:var(--muted);font-size:12px} .routine-preview{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0} .routine-chip{ padding:7px 9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05); border-radius:10px;color:#bac1ce;font-size:10px } .routine-card-actions{display:grid;grid-template-columns:1fr auto;gap:8px} .start-routine-btn{ border:0;border-radius:14px;padding:12px 14px;font-weight:900; background:linear-gradient(135deg,var(--green),var(--cyan));color:#07130e } .delete-routine-btn{ border:1px solid var(--line);background:#171c26;color:#9098a8;border-radius:14px;padding:0 14px } .active-workout-banner{ padding:16px;margin:12px 0 18px;border-radius:20px;border:1px solid rgba(84,217,255,.28); background:linear-gradient(135deg,rgba(84,217,255,.10),rgba(168,121,255,.08)); display:flex;align-items:center;justify-content:space-between;gap:12px } .active-workout-banner strong,.active-workout-banner small{display:block} .active-workout-banner small{color:var(--muted);margin-top:3px} /* v1.10.1: was a floating card (94vw wide, default modal padding, native dialog centering) — fine for a short confirmation, wrong for a long, scrollable editing surface with a variable number of exercises. Full screen like .workout-modal instead, so there's no wasted margin on either side and the exercise list can actually use the available height rather than being capped at a fixed viewport fraction. */ .routine-modal{ width:100vw;height:100dvh;max-width:none;max-height:none;margin:0; border:0;border-radius:0;padding:0;background:#121722;color:var(--text); box-shadow:none; } .routine-modal::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(8px)} .routine-modal #routineForm{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom))} .routine-builder-head{display:flex;justify-content:space-between;align-items:center;margin:20px 0 10px} .routine-builder-head strong,.routine-builder-head small{display:block} .routine-builder-head small{color:var(--muted);font-size:11px;margin-top:3px} .routine-builder-list{display:flex;flex-direction:column;gap:14px;padding-right:2px} /* v1.10.0: old grid-based .routine-exercise-row layout removed — replaced by the collapsible .exercise-row component (see the dedicated block below). .row-remove is still used by the new markup, kept as-is. */ .row-remove{ width:40px;height:40px;border-radius:11px;background:#1b202c;color:#9198a8;border:1px solid var(--line);font-size:19px } .workout-modal{ width:min(100vw,760px);height:min(100dvh,920px);max-width:none;max-height:none;margin:auto; border:0;border-radius:28px;background:#090c12;color:var(--text);padding:0; box-shadow:0 30px 120px rgba(0,0,0,.8) } .workout-modal::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(10px)} .live-workout-shell{min-height:100%;padding:calc(24px + env(safe-area-inset-top)) 18px 30px;background: radial-gradient(circle at 85% 0%,rgba(84,217,255,.12),transparent 26%),#090c12} .live-workout-top{display:flex;justify-content:space-between;align-items:flex-start;position:sticky;top:0;padding:5px 0 12px;background:linear-gradient(#090c12 80%,transparent);z-index:3} .live-workout-top h2{font-size:30px;margin:0;letter-spacing:-.04em} #liveWorkoutClock{display:block;font-size:19px;color:var(--green);font-weight:900;margin-top:5px;font-variant-numeric:tabular-nums} .live-hint{font-size:12px;color:#9da6b6;padding:11px 13px;border-radius:13px;background:rgba(255,255,255,.035);margin:4px 0 14px} .live-exercise-list{display:flex;flex-direction:column;gap:12px} .live-exercise-card{ border-radius:21px;background:linear-gradient(180deg,#151a25,#111620);border:1px solid var(--line);padding:15px } .live-exercise-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px} .live-exercise-head h4{margin:0;font-size:17px} .live-exercise-head span{color:var(--muted);font-size:11px} .live-exercise-head .random-tag{color:var(--amber);font-weight:800} .set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:7px} .set-box label{font-size:9px;color:var(--muted);margin:0} .set-box input{ text-align:center;font-size:18px;font-weight:850;padding:11px 6px;margin-top:5px; background:#0b1017;border-radius:12px } .finish-workout-btn{ width:100%;padding:15px;border-radius:16px;font-weight:900;margin-top:13px } .cancel-workout-btn{ width:100%;padding:13px 15px;border-radius:16px;margin-top:10px;font-weight:850; border:1px solid rgba(255,115,115,.22);background:rgba(255,92,92,.055);color:#e6a7a7 } .cancel-workout-btn:active{transform:scale(.99)} .finish-workout-btn{border:0;background:linear-gradient(135deg,var(--green),var(--cyan));color:#07130e;font-size:16px;margin-top:18px} .modal-note{color:var(--muted);font-size:11px;line-height:1.45} .finish-feeling-row{margin:14px 0 6px} .finish-feeling-row button{border:1px solid var(--line)} .finish-feeling-row button.selected{border-color:var(--cyan);background:#1c2a36} @media(max-width:620px){ .row-remove{width:36px;height:40px} .workout-modal{width:100vw;height:100dvh;border-radius:0} } .cancel-btn{ width:100%; margin-top:9px; padding:13px 16px; border-radius:15px; border:1px solid rgba(255,255,255,.09); background:#171c26; color:#b9c0cd; font-weight:800; } .cancel-btn:active{transform:scale(.99)} /* CholScore v0.3 — barcode scanner */ .scanner-modal{ width:min(100vw,680px); height:min(100dvh,900px); max-width:none;max-height:none; margin:auto;border:0;border-radius:28px; background:#080b10;color:var(--text);padding:0; } .scanner-modal::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(10px)} .scanner-shell{min-height:100%;padding:calc(24px + env(safe-area-inset-top)) 18px 30px;background: radial-gradient(circle at 50% 0%,rgba(84,217,255,.13),transparent 30%),#080b10} .scanner-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px} .scanner-head h2{font-size:30px;margin:0;letter-spacing:-.04em} .scanner-reader{ overflow:hidden;border-radius:22px;background:#020305; border:1px solid rgba(84,217,255,.20);min-height:290px; } #scannerReader video{border-radius:20px!important;object-fit:cover!important} #scannerReader img{display:none!important} #scannerReader__dashboard{padding:12px!important} #scannerReader__dashboard_section_csr button, #scannerReader__dashboard_section_swaplink{ border:1px solid var(--line)!important;background:#1a2130!important;color:white!important; border-radius:12px!important;padding:10px 12px!important;text-decoration:none!important } #scannerReader__scan_region{background:#030506!important} .scanner-guide{text-align:center;padding:14px 8px 5px} .scanner-guide strong,.scanner-guide span{display:block} .scanner-guide span{color:var(--muted);font-size:11px;margin-top:4px} .scanner-status{ margin:10px 0;padding:11px 12px;border-radius:13px; background:rgba(255,255,255,.035);color:#a9b1c0;font-size:11px;text-align:center } .manual-barcode{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)} .manual-barcode>span{display:block;color:var(--muted);font-size:11px;margin-bottom:8px} .manual-barcode-row{display:grid;grid-template-columns:1fr auto;gap:8px} .manual-barcode-row input{margin:0} .product-modal{width:min(94vw,520px)} .product-top{display:flex;align-items:center;gap:13px;margin:14px 0} .product-image{ width:74px;height:74px;border-radius:15px;object-fit:contain;background:white;padding:5px } .product-meta span,.product-meta small{display:block} .product-meta span{font-weight:800}.product-meta small{color:var(--muted);margin-top:4px} .nutrition-highlight{ display:grid;grid-template-columns:1fr auto;align-items:end; padding:16px;border-radius:18px;background:linear-gradient(135deg,rgba(85,240,167,.08),rgba(84,217,255,.06)); border:1px solid rgba(85,240,167,.15);margin:13px 0 } .nutrition-highlight span{color:#c7ced9;font-weight:750} .nutrition-highlight strong{font-size:28px} .nutrition-highlight small{grid-column:2;color:var(--muted);text-align:right} .amount-row{display:grid;grid-template-columns:1fr 1.2fr;gap:8px} .serving-info{ padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035); color:var(--muted);font-size:11px;margin-top:8px } .calculated-sat-card{ text-align:center;padding:16px;margin:15px 0 2px;border-radius:18px;background:#0d121a;border:1px solid var(--line) } .calculated-sat-card span,.calculated-sat-card strong,.calculated-sat-card small{display:block} .calculated-sat-card span,.calculated-sat-card small{color:var(--muted);font-size:11px} .calculated-sat-card strong{font-size:38px;margin:3px 0;color:var(--green)} .product-warning{ padding:10px 12px;border-radius:12px; background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.2); color:#f4d98c;font-size:11px;line-height:1.45;margin-bottom:12px } @media(max-width:620px){ .scanner-modal{width:100vw;height:100dvh;border-radius:0} } /* CholScore v0.3.1 — product imagery */ .food-log-item{gap:12px} .food-log-main{ min-width:0; display:flex; align-items:center; gap:12px; flex:1; } .food-log-main>div:last-child{min-width:0} .food-log-main strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .food-thumb{ width:46px; height:46px; flex:0 0 46px; border-radius:12px; object-fit:contain; background:#fff; padding:3px; border:1px solid rgba(255,255,255,.08); } .food-thumb-large{ width:58px; height:58px; flex-basis:58px; border-radius:14px; } .food-thumb-fallback{ display:grid; place-items:center; background:#171d29; padding:0; font-size:22px; } /* CholScore v0.4 — cleaner Today + food record detail */ .food-log-item{cursor:pointer} .food-log-item:active{transform:scale(.995)} .food-detail-modal{width:min(94vw,520px)} .detail-food-hero{ display:flex;align-items:center;gap:14px; padding:14px;border-radius:18px;background:#0d121a;border:1px solid var(--line);margin:14px 0 } .detail-food-image{ width:84px;height:84px;flex:0 0 84px;border-radius:16px;object-fit:contain;background:#fff;padding:5px } .detail-food-fallback{display:grid;place-items:center;background:#171d29;font-size:30px;padding:0} .detail-food-hero strong,.detail-food-hero small{display:block} .detail-food-hero small{color:var(--muted);margin-top:4px} .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .detail-grid div{background:#0d121a;border:1px solid var(--line);border-radius:15px;padding:13px} .detail-grid span,.detail-grid strong{display:block} .detail-grid span{color:var(--muted);font-size:10px;margin-bottom:4px} .detail-grid strong{font-size:14px} /* CholScore v0.5 — Check Food + Weekly Bank */ .check-food-card{ width:100%; display:flex; align-items:center; gap:13px; margin:14px 0 18px; padding:16px; border-radius:20px; border:1px solid rgba(84,217,255,.16); background:linear-gradient(135deg,rgba(84,217,255,.08),rgba(168,121,255,.06)); color:var(--text); text-align:left; } .check-food-card div:nth-child(2){flex:1} .check-food-card strong,.check-food-card span{display:block} .check-food-card strong{font-size:16px} .check-food-card span{font-size:11px;color:var(--muted);margin-top:3px} .check-food-card b{font-size:28px;color:#7e8798} .check-food-icon{ width:44px;height:44px;border-radius:14px; display:grid;place-items:center; background:#172131;border:1px solid rgba(84,217,255,.15); font-size:24px;color:var(--cyan) } .weekly-bank-card{ margin-top:18px; padding:16px; display:flex; align-items:center; gap:13px; border-radius:20px; border:1px solid rgba(255,209,102,.16); background:linear-gradient(135deg,rgba(255,209,102,.08),rgba(255,255,255,.025)); } .bank-icon{ width:48px;height:48px;border-radius:15px; display:grid;place-items:center; background:#1b1b16;font-size:24px } .bank-copy{flex:1} .bank-copy span,.bank-copy strong,.bank-copy small{display:block} .bank-copy span{font-size:10px;letter-spacing:.15em;color:#bca86b;font-weight:900} .bank-copy strong{font-size:22px;margin-top:2px} .bank-copy small{color:var(--muted);font-size:10px;margin-top:3px} .bank-badge{ padding:8px 10px;border-radius:999px; background:rgba(255,209,102,.10); border:1px solid rgba(255,209,102,.18); color:#f2d982;font-size:10px;font-weight:900 } .weekly-bank-card{cursor:pointer} .weekly-bank-card:active{transform:scale(.99)} .bank-goal-bar{height:5px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:7px;max-width:180px} .bank-goal-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--amber),#ffb347)} /* v1.13.0 Reward Bank dialog */ .reward-bank-modal{width:min(94vw,480px)} .balance-row{text-align:center;padding:14px 0 18px} .balance-row strong{font-size:40px;display:block;color:var(--amber);font-variant-numeric:tabular-nums} .balance-row small{color:var(--muted);font-size:12px} .today-earn-row{ display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:13px; background:rgba(85,240,167,.06);border:1px solid rgba(85,240,167,.2);margin-bottom:16px;font-size:12.5px } .today-earn-row strong{color:var(--green)} .goal-card{background:#0d1119;border:1px solid rgba(255,209,102,.22);border-radius:16px;padding:16px;margin-bottom:14px} .goal-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .goal-card-head strong{font-size:15px} .goal-card-head span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .goal-bar-track{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:10px} .goal-bar-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--amber),#ffb347);transition:width .3s ease} .goal-note{font-size:12.5px;color:#e2c07a;margin:0} .cashout-btn{ width:100%;margin-top:12px;padding:13px;border:none;border-radius:13px;font-weight:800;font-size:14px; background:linear-gradient(135deg,var(--amber),#ffb347);color:#241a04 } .cashout-btn:disabled{opacity:.4;background:#2a2f3a;color:#8a93a8} .clear-goal-link{display:block;width:100%;text-align:center;margin-top:10px;padding:6px;font-size:12px;color:#8a93a8;background:none;border:none} .goal-form label{display:block;font-size:12.5px;font-weight:700;color:#cbd0db;margin:12px 0 6px} .goal-form input{width:100%;padding:13px;border-radius:13px;background:#0d1119;border:1px solid rgba(255,255,255,.1);color:var(--text);font-size:15px} .goal-save-btn{width:100%;margin-top:16px;padding:14px;border:none;border-radius:13px;font-weight:800;font-size:14.5px;background:linear-gradient(135deg,var(--green),var(--cyan));color:#07130e} /* icon picker — a custom "pulldown" grid, not a native select, so it stays visually consistent with the rest of the app's custom controls */ .icon-picker{position:relative;margin-bottom:4px} .icon-picker-trigger{ width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px; background:#0d1119;border:1px solid rgba(255,255,255,.1);color:var(--text);text-align:left } .icon-picker-trigger .current-icon{ width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:19px;flex:none; position:relative;overflow:hidden; background:linear-gradient(155deg,rgba(255,180,84,.16),rgba(255,255,255,.02)); border:1px solid rgba(255,180,84,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.28); } .icon-picker-trigger .current-icon:before{ content:"";position:absolute;inset:0;opacity:.55; background:radial-gradient(circle at 28% 22%,rgba(255,180,84,.5),transparent 68%); } .icon-picker-trigger .current-icon span{position:relative;z-index:1} .icon-picker-trigger .current-label{flex:1;font-size:14.5px;font-weight:700} .icon-picker-trigger .chevron{color:#8a93a8;font-size:12px;transition:transform .2s ease} .icon-picker.open .chevron{transform:rotate(180deg)} .icon-picker-panel{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.22,1,.36,1)} .icon-picker.open .icon-picker-panel{max-height:340px} .icon-picker-panel-inner{ margin-top:8px;padding:12px;border-radius:16px;background:#0a0d13;border:1px solid var(--line); display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:280px;overflow-y:auto;-webkit-overflow-scrolling:touch } .icon-option{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:12px;background:transparent;border:1px solid transparent;color:var(--text)} .emoji-tile{ width:42px;height:42px;border-radius:13px;display:grid;place-items:center;position:relative;overflow:hidden; background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 10px rgba(0,0,0,.28); transition:box-shadow .15s ease; } .emoji-tile:before{ content:"";position:absolute;inset:0;opacity:.6; background:radial-gradient(circle at 28% 22%,var(--pf-glow),transparent 68%); } .emoji-tile .emoji{position:relative;z-index:1;font-size:20px} .icon-option span.label{font-size:9.5px;color:var(--muted);text-align:center;line-height:1.2} .icon-option.selected .emoji-tile{box-shadow:0 0 0 2px rgba(255,209,102,.85),0 4px 14px rgba(255,209,102,.35)} .icon-option.selected span.label{color:#ffe6ac} .checkout-reward-note{ display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 13px;border-radius:13px; background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.25);font-size:12.5px;color:#ffe6ac } .checkout-reward-note.reached{background:rgba(85,240,167,.1);border-color:rgba(85,240,167,.3);color:#bdf5da} .check-result-modal{width:min(94vw,540px)} .check-product-top{ display:flex;align-items:center;gap:13px; padding:13px;border-radius:17px;background:#0d121a;border:1px solid var(--line);margin:13px 0 } .check-food-image{ width:76px;height:76px;flex:0 0 76px;border-radius:15px;object-fit:contain;background:#fff;padding:5px } .check-food-fallback{display:grid;place-items:center;background:#171d29;font-size:28px;padding:0} .check-product-top strong,.check-product-top small{display:block} .check-product-top small{color:var(--muted);margin-top:3px} .impact-card{ text-align:center; margin:14px 0 10px; padding:17px; border-radius:18px; background:#0d121a; border:1px solid var(--line) } .impact-card span,.impact-card strong,.impact-card small{display:block} .impact-card span{font-size:12px;font-weight:850} .impact-card strong{font-size:40px;margin:4px 0} .impact-card small{color:var(--muted);font-size:11px} .impact-card.good{border-color:rgba(85,240,167,.25);background:rgba(85,240,167,.05)} .impact-card.close{border-color:rgba(255,209,102,.24);background:rgba(255,209,102,.05)} .impact-card.over{border-color:rgba(255,107,122,.25);background:rgba(255,107,122,.05)} .impact-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0} .impact-stats div{padding:11px;border-radius:13px;background:#0d121a;border:1px solid var(--line)} .impact-stats span,.impact-stats strong{display:block} .impact-stats span{font-size:9px;color:var(--muted)} .impact-stats strong{font-size:14px;margin-top:3px} .check-message{ padding:12px 13px;border-radius:14px;background:rgba(255,255,255,.035); color:#bdc4d0;font-size:12px;line-height:1.45;margin:11px 0 } /* CholScore v0.6 — Protein Today */ .protein-card{ padding:18px; margin:14px 0 18px; border-radius:22px; border:1px solid rgba(168,121,255,.16); background:linear-gradient(135deg,rgba(168,121,255,.08),rgba(84,217,255,.05)); } .protein-card-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; } .protein-card-top strong{ display:block; font-size:34px; letter-spacing:-.04em; } .protein-card-top small{ display:block; color:var(--muted); font-size:11px; margin-top:3px; } .protein-badge{ width:54px;height:54px;border-radius:17px; display:grid;place-items:center; font-size:27px; background:#171728; border:1px solid rgba(168,121,255,.16); } .protein-breakdown{ display:flex; flex-direction:column; gap:8px; margin-top:14px; } .protein-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px; border-radius:14px; background:rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.045); } .protein-row-main{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; } .protein-row-main>div:last-child{min-width:0} .protein-row strong{ display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .protein-row small{ display:block; color:var(--muted); font-size:9px; margin-top:2px; } .protein-row b{ font-size:14px; white-space:nowrap; } .protein-thumb{ width:38px;height:38px;flex:0 0 38px; border-radius:10px; object-fit:contain; background:#fff; padding:2px; } .protein-thumb-fallback{ display:grid; place-items:center; background:#171d29; padding:0; } /* CholScore v0.7 — editable routines + achievement collection */ .routine-card{cursor:pointer} .routine-card:hover{border-color:rgba(84,217,255,.18)} .routine-card-actions{position:relative;z-index:2} .routine-card-edit-hint{ font-size:10px;color:var(--muted);margin-top:8px; display:flex;align-items:center;gap:5px } .collection-hero strong{font-size:56px} .collection-progress{ height:9px;margin:14px auto 0;max-width:360px;border-radius:999px; background:rgba(255,255,255,.07);overflow:hidden } .collection-progress i{ display:block;height:100%;width:0;border-radius:999px; background:linear-gradient(90deg,var(--green),var(--cyan),var(--violet)); transition:.35s } .reward-tabs{ display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;margin:4px -2px 10px; scrollbar-width:none } .reward-tabs::-webkit-scrollbar{display:none} .reward-tab{ flex:0 0 auto;border:1px solid var(--line);background:#111620;color:#aeb6c4; border-radius:999px;padding:9px 13px;font-size:12.5px;font-weight:850 } .reward-tab.active{ color:#08110d;background:linear-gradient(135deg,var(--green),var(--cyan)); border-color:transparent } .achievement-category-summary{ display:flex;justify-content:space-between;align-items:center; padding:12px 14px;border-radius:15px;background:#10151e;border:1px solid var(--line); margin-bottom:10px } .achievement-category-summary strong{font-size:15px} .achievement-category-summary span{font-size:12px;color:var(--muted)} .achievement-collection{ display:grid;grid-template-columns:1fr 1fr;gap:10px } .achievement-card{ position:relative;overflow:hidden;min-height:166px; padding:17px;border-radius:20px;background:linear-gradient(180deg,#151a24,#10151e); border:1px solid var(--line) } .achievement-card.locked{opacity:.52;filter:saturate(.5)} .achievement-card.unlocked{ border-color:rgba(85,240,167,.22); box-shadow:0 0 0 1px rgba(85,240,167,.05),0 18px 45px rgba(0,0,0,.14) } .achievement-card.unlocked:after{ content:"";position:absolute;inset:auto -25px -45px auto;width:110px;height:110px; border-radius:50%;background:radial-gradient(circle,rgba(85,240,167,.15),transparent 65%) } .achievement-icon{font-size:32px;display:block;margin-bottom:12px} .achievement-card h4{margin:0 0 4px;font-size:15.5px} .achievement-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.42;min-height:34px} .achievement-state{ display:flex;justify-content:space-between;align-items:center;margin-top:12px; font-size:11px;font-weight:850;color:#8e97a7 } .achievement-card.unlocked .achievement-state{color:var(--green)} .achievement-mini-progress{ height:6px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:8px } .achievement-mini-progress i{ display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--violet)) } .achievement-rarity{ position:absolute;right:11px;top:11px;padding:5px 7px;border-radius:999px; background:rgba(255,255,255,.05);font-size:9.5px;color:#929bad;font-weight:900;letter-spacing:.08em } /* v1.11.0 — colour-coded rarity, applied to every existing achievement via the r-{rarity} class added at render time. Previously every tier just said the word with no visual distinction at all. */ .achievement-card.r-common{border-color:rgba(154,163,181,.16)} .achievement-card.r-common .achievement-rarity{background:rgba(154,163,181,.14);color:#c4cad8} .achievement-card.r-rare{border-color:rgba(84,217,255,.2)} .achievement-card.r-rare .achievement-rarity{background:rgba(84,217,255,.14);color:#a6ecff} .achievement-card.r-epic{border-color:rgba(168,121,255,.22)} .achievement-card.r-epic .achievement-rarity{background:rgba(168,121,255,.16);color:#dcc6ff} .achievement-card.r-legend{border-color:rgba(255,209,102,.25)} .achievement-card.r-legend .achievement-rarity{background:rgba(255,209,102,.16);color:#ffe6ac} /* MYTHIC — reserved for the true long-haul achievements (a year-long streak, lifetime tonnage lifted). Deliberately a different treatment, not just "gold but bigger": a multi-colour glow around the whole card, an animated gradient ring instead of a flat border, a shimmer sweep that periodically catches the light like foil, a glowing icon, and a gradient-text title. Stays glowing even while locked (just slightly dimmer) rather than the usual flat grey-out, since the whole point is that it should look enticing and worth the year of work before it's earned, not just after. */ .achievement-card.r-mythic{ border:none; background: radial-gradient(120% 100% at 50% 0%, rgba(255,95,209,.16), transparent 60%), linear-gradient(165deg,#1c1424 0%,#12081a 45%,#0a0510 100%); box-shadow:0 0 0 1px rgba(255,95,209,.22), 0 0 36px -6px rgba(255,95,209,.35), 0 0 60px -18px rgba(84,217,255,.3); } .achievement-card.r-mythic.locked{opacity:.78;filter:saturate(.9)} .achievement-card.r-mythic::before{ content:"";position:absolute;inset:-1.5px;border-radius:21px;padding:1.5px;pointer-events:none;z-index:1; background:linear-gradient(120deg,#ff5fd1,#54d9ff,#a879ff,#ffd166,#ff5fd1); background-size:400% 400%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:mythicBorderShift 4.5s linear infinite; } .achievement-card.r-mythic::after{ content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;z-index:1; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 46%, transparent 62%); background-size:250% 250%;background-position:-40% -40%; animation:mythicShimmer 3.4s ease-in-out infinite; } .achievement-card.r-mythic .achievement-icon{filter:drop-shadow(0 0 9px rgba(255,95,209,.55)) drop-shadow(0 0 16px rgba(84,217,255,.35));position:relative;z-index:2} .achievement-card.r-mythic h4{ position:relative;z-index:2; background:linear-gradient(90deg,#ffd8f4,#d8f3ff 65%);-webkit-background-clip:text;background-clip:text;color:transparent; } .achievement-card.r-mythic p,.achievement-card.r-mythic .achievement-state{position:relative;z-index:2} .achievement-card.r-mythic .achievement-rarity{ background:linear-gradient(135deg,#ff5fd1,#54d9ff);color:#0c0614;z-index:2; animation:mythicPulse 2.1s ease-in-out infinite; } .achievement-card.r-mythic .achievement-mini-progress i{background:linear-gradient(90deg,#ff5fd1,#54d9ff,#a879ff)} @keyframes mythicBorderShift{0%{background-position:0% 50%}100%{background-position:400% 50%}} @keyframes mythicShimmer{0%,20%{background-position:-40% -40%}65%,100%{background-position:140% 140%}} @keyframes mythicPulse{0%,100%{box-shadow:0 0 6px rgba(255,95,209,.35)}50%{box-shadow:0 0 18px rgba(255,95,209,.75)}} @media(prefers-reduced-motion:reduce){ .achievement-card.r-mythic::before,.achievement-card.r-mythic::after,.achievement-card.r-mythic .achievement-rarity{animation:none} .achievement-card.r-mythic::before{opacity:.7} } @media(max-width:520px){ .achievement-collection{grid-template-columns:1fr 1fr;gap:8px} .achievement-card{padding:14px;min-height:160px} } /* CholScore v0.8 — user-selected distance units */ .unit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; } .unit-option{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px; border-radius:16px; border:1px solid var(--line); background:#0e121b; color:var(--text); text-align:left; } .unit-option strong{font-size:15px} .unit-option span{ color:var(--muted); font-size:12px; font-weight:900; text-transform:lowercase; } .unit-option.selected{ border-color:var(--cyan); box-shadow:0 0 0 2px rgba(84,217,255,.10); background:rgba(84,217,255,.05); } #deleteFoodBtn{margin-top:18px;} /* CholScore v0.9 — guided strength workouts */ textarea{ width:100%;margin-top:8px;background:#0d1119;color:var(--text);border:1px solid rgba(255,255,255,.1); border-radius:14px;padding:14px;outline:none;resize:vertical;font:inherit;font-size:16px; } textarea:focus{border-color:rgba(84,217,255,.6);box-shadow:0 0 0 3px rgba(84,217,255,.08)} .rb-main-fields{min-width:0} .rb-number-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .rb-main-fields label{margin-top:7px} .rb-main-fields textarea{min-height:66px} .guided-progress{margin:5px 0 18px;padding:13px 15px;border:1px solid rgba(84,217,255,.16);border-radius:16px;background:rgba(84,217,255,.045)} .guided-progress>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:center} .guided-progress span{font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:900} .guided-progress strong{font-size:12px;color:#dce5ef} .guided-progress-bar{height:5px;background:#111923;border-radius:999px;overflow:hidden;margin-top:10px} .guided-progress-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--cyan));transition:width .2s ease} .guided-exercise-card{ border-radius:24px;padding:18px;background:linear-gradient(180deg,#171d29,#10151e);border:1px solid rgba(255,255,255,.08); box-shadow:0 18px 60px rgba(0,0,0,.25) } .guided-exercise-heading{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;margin-bottom:14px} .guided-count{ width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:17px;font-weight:950;color:#07130e; background:linear-gradient(135deg,var(--green),var(--cyan)) } .guided-exercise-heading h3{margin:0;font-size:26px;letter-spacing:-.035em} .guided-exercise-heading p:last-child{margin:5px 0 0;color:var(--muted);font-size:12px} .guided-exercise-heading .random-tag{color:var(--amber)} .exercise-note{ padding:12px 14px;margin:0 0 15px;border-radius:15px;background:rgba(168,121,255,.075);border:1px solid rgba(168,121,255,.16); color:#d9d0f4;font-size:13px;line-height:1.45 } .exercise-note span{display:block;font-size:9px;font-weight:950;letter-spacing:.14em;color:#a68ada;margin-bottom:4px} .guided-set-list{display:flex;flex-direction:column;gap:9px} .guided-set-row{ position:relative;display:grid;grid-template-columns:70px 1fr;align-items:center;gap:10px;margin:0;padding:10px 11px;border-radius:16px; background:#0b1017;border:1px solid rgba(255,255,255,.06);transition:border-color .15s ease,background .15s ease } .guided-set-row>span{font-size:11px;letter-spacing:.11em;font-weight:900;color:#8e98aa} .guided-rep-entry{display:grid;grid-template-columns:1fr 42px;gap:8px;align-items:center} .guided-rep-entry input{margin:0;padding:12px 10px;text-align:center;font-size:20px;font-weight:900;border-radius:12px} .set-tick{ width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#131923;border:1px solid rgba(255,255,255,.07); color:#06130d;font-size:22px } /* v1.14.0 — in-workout weight adjuster */ .weight-adjuster{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:12px 14px;margin-bottom:14px;border-radius:14px;background:#0d1119;border:1px solid rgba(255,255,255,.07) } .weight-adjuster-label{font-size:13.5px;font-weight:700;color:#cbd0db} .stepper{display:flex;align-items:center;background:#141a24;border:1px solid rgba(255,255,255,.1);border-radius:13px;overflow:hidden;flex:none} .stepper button{width:38px;height:38px;border:none;background:none;color:var(--cyan);font-size:19px;font-weight:800;display:grid;place-items:center} .stepper button:active{background:rgba(84,217,255,.14)} .stepper .weight-value{ min-width:70px;text-align:center;font-size:15.5px;font-weight:850;padding:0 4px;color:#fff; border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08) } .set-weight-tag{ position:absolute;top:-8px;right:10px;font-size:8.5px;font-weight:800;z-index:1; background:#1c2331;color:#ffd166;padding:2px 7px;border-radius:999px;border:1px solid rgba(255,209,102,.4) } .guided-set-row.is-complete{border-color:rgba(85,240,167,.35);background:rgba(85,240,167,.055)} .guided-set-row.is-complete .set-tick{background:linear-gradient(135deg,var(--green),var(--cyan));border-color:transparent;box-shadow:0 0 22px rgba(85,240,167,.16)} .enter-hint{text-align:center;color:#7e8899;font-size:11px;margin:13px 0 0} .complete-exercise-btn{ width:100%;padding:16px;margin-top:16px;border:0;border-radius:17px;font-size:16px;font-weight:950; background:linear-gradient(135deg,var(--green),var(--cyan));color:#07130e;box-shadow:0 12px 30px rgba(85,240,167,.09) } .complete-exercise-btn:disabled{opacity:.28;box-shadow:none} .exercise-note-btn{ display:block;width:100%;text-align:center;background:none;border:none; color:#c9c2db;font-size:13.5px;font-weight:600;padding:14px 0 2px;text-decoration:underline; text-underline-offset:3px; } .exercise-complete-modal{ width:min(95vw,520px);padding:0;overflow:hidden;border-radius:30px; position:fixed;inset:0;margin:auto;height:auto;max-height:94dvh; border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px -20px rgba(0,0,0,.6); } .ecm-scene{ position:absolute;inset:0;pointer-events:none; background: radial-gradient(120% 70% at 18% -10%, var(--ecm-glow-a,rgba(85,240,167,.28)), transparent 55%), radial-gradient(110% 65% at 100% 0%, var(--ecm-glow-b,rgba(84,217,255,.22)), transparent 55%), radial-gradient(140% 90% at 50% 120%, var(--ecm-glow-c,rgba(168,121,255,.22)), transparent 60%), linear-gradient(180deg,#171b28 0%, #0d1119 75%); } .ecm-stars{position:absolute;inset:0;overflow:hidden} .ecm-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.5;animation:ecmTwinkle 3.2s ease-in-out infinite} @keyframes ecmTwinkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}} .ecm-content{position:relative;z-index:1;padding:calc(34px + env(safe-area-inset-top)) 26px 28px;text-align:center} .exercise-complete-modal.variant-standard{ --ecm-accent:var(--green);--ecm-badge-bg:rgba(85,240,167,.1); --ecm-glow-a:rgba(85,240,167,.28);--ecm-glow-b:rgba(84,217,255,.2);--ecm-glow-c:rgba(168,121,255,.2); } .exercise-complete-modal.variant-timed{ --ecm-accent:var(--cyan);--ecm-badge-bg:rgba(84,217,255,.1); --ecm-glow-a:rgba(84,217,255,.3);--ecm-glow-b:rgba(168,121,255,.22);--ecm-glow-c:rgba(85,240,167,.18); } .exercise-complete-modal.variant-final{ --ecm-accent:#f7c84a;--ecm-badge-bg:rgba(255,196,53,.12); --ecm-glow-a:rgba(255,196,53,.32);--ecm-glow-b:rgba(168,121,255,.24);--ecm-glow-c:rgba(255,138,61,.18); } .ecm-icon-badge{ width:84px;height:84px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center; font-size:40px;border:2px solid var(--ecm-accent,var(--green)); background:var(--ecm-badge-bg,rgba(85,240,167,.1)); box-shadow:0 0 30px var(--ecm-glow-a,rgba(85,240,167,.28)),inset 0 0 20px var(--ecm-badge-bg,rgba(85,240,167,.08)); } .exercise-complete-modal.variant-standard .ecm-icon-badge{animation:ecmFlex 1.7s ease-in-out infinite} .exercise-complete-modal.variant-timed .ecm-icon-badge{animation:ecmTick 2.1s ease-in-out infinite} .exercise-complete-modal.variant-final .ecm-icon-badge{animation:ecmSparkleIcon 1.7s ease-in-out infinite} @keyframes ecmFlex{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.09) rotate(-4deg)}} @keyframes ecmTick{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}} @keyframes ecmSparkleIcon{0%,100%{transform:scale(1);filter:drop-shadow(0 0 6px rgba(255,210,80,.45))}50%{transform:scale(1.13);filter:drop-shadow(0 0 18px rgba(255,210,80,.85))}} .exercise-complete-modal h2{font-size:34px;line-height:1.06;margin:6px 0 10px;color:#fff} .exercise-complete-modal #exerciseCompleteMessage{font-size:16px;line-height:1.55;color:#c9c2db;max-width:390px;margin:0 auto} .exercise-complete-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin:24px 0 4px} .exercise-complete-stats div{ padding:18px 12px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09); opacity:0;transform:translateY(12px);animation:ecmStatIn .5s ease forwards; } .exercise-complete-stats div:nth-child(1){animation-delay:.12s} .exercise-complete-stats div:nth-child(2){animation-delay:.24s} .exercise-complete-stats div:nth-child(3){animation-delay:.36s} @keyframes ecmStatIn{to{opacity:1;transform:translateY(0)}} .exercise-complete-stats span{display:block;font-size:9.5px;letter-spacing:.1em;color:#909aab;font-weight:900} .exercise-complete-stats strong{display:block;font-size:23px;margin-top:6px;color:#fff} .exercise-complete-modal .primary-btn{font-size:16px;padding:17px;margin-top:6px} @media(prefers-reduced-motion:reduce){ .ecm-icon-badge,.ecm-stars i{animation:none} .exercise-complete-stats div{animation:none;opacity:1;transform:none} } @media(max-width:420px){ .ecm-content{padding:calc(28px + env(safe-area-inset-top)) 20px 24px} .exercise-complete-modal h2{font-size:28px} .ecm-icon-badge{width:72px;height:72px;font-size:34px} } /* ============ v1.3.0 quick-activity (walk/run) completion card ============ */ .activity-complete-modal{ width:min(95vw,480px);padding:0;overflow:hidden;border-radius:30px; position:fixed;inset:0;margin:auto;height:auto;max-height:94dvh; border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px -20px rgba(0,0,0,.6); } .acm-scene{ position:absolute;inset:0;pointer-events:none;overflow:hidden; background:linear-gradient(180deg,#171b28 0%, #0d1119 75%); } /* Slow-drifting color washes — same palette as the original static gradient, just given gentle independent motion so the screen doesn't sit flat and empty on larger phones. Kept subtle: long durations, soft blur, low opacity. */ .acm-aurora{position:absolute;inset:-20%;filter:blur(40px)} .acm-aurora span{position:absolute;border-radius:50%;opacity:.5} .acm-aurora .a1{ width:70%;height:35%;top:-6%;left:-8%; background:radial-gradient(circle, rgba(255,209,102,.5), transparent 70%); animation:acmDriftA 14s ease-in-out infinite; } .acm-aurora .a2{ width:60%;height:30%;top:12%;right:-10%; background:radial-gradient(circle, rgba(84,217,255,.35), transparent 70%); animation:acmDriftB 18s ease-in-out infinite; } .acm-aurora .a3{ width:75%;height:38%;bottom:-14%;left:15%; background:radial-gradient(circle, rgba(168,121,255,.4), transparent 70%); animation:acmDriftC 16s ease-in-out infinite; } @keyframes acmDriftA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,8%) scale(1.15)}} @keyframes acmDriftB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,6%) scale(1.1)}} @keyframes acmDriftC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-7%) scale(1.08)}} /* Very slow rotating light sweep behind the medal — barely perceptible as motion, reads more as a soft living spotlight than an obvious animation. */ .acm-ray-sweep{ position:absolute;top:8%;left:50%;width:130%;aspect-ratio:1;margin-left:-65%; background:conic-gradient(from 0deg, transparent 0deg, rgba(255,209,102,.1) 40deg, transparent 90deg, transparent 220deg, rgba(84,217,255,.08) 260deg, transparent 310deg); animation:acmRotateRay 22s linear infinite; filter:blur(6px); } @keyframes acmRotateRay{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){ .acm-aurora span,.acm-ray-sweep{animation:none} } .acm-stars{position:absolute;inset:0;overflow:hidden} .acm-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.5;animation:acmTwinkle 3.2s ease-in-out infinite} @keyframes acmTwinkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}} .acm-content{ position:relative;z-index:1;padding:calc(34px + env(safe-area-inset-top)) 26px 28px;text-align:center; min-height:100%;display:flex;flex-direction:column;justify-content:center; } .acm-medal-wrap{position:relative;width:130px;height:130px;margin:0 auto 18px} .acm-medal-glow{ position:absolute;inset:-26px;border-radius:50%; background:radial-gradient(circle, rgba(255,209,102,.4), transparent 70%); animation:acmGlowPulse 2.6s ease-in-out infinite; } @keyframes acmGlowPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}} .acm-medal-ribbon{ position:absolute;top:-17px;left:50%;transform:translateX(-50%);width:42px;height:36px; background:linear-gradient(180deg,#ff6b7a,#c23f52);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%); } .acm-medal{ position:relative;z-index:1;width:130px;height:130px;border-radius:50%; background:radial-gradient(circle at 32% 28%, #fff6da, var(--amber) 42%, #d99a1f 82%, #b87c14 100%); border:3px solid #fff0c2;box-shadow:0 0 32px rgba(255,209,102,.45),inset 0 -6px 12px rgba(0,0,0,.25),inset 0 4px 10px rgba(255,255,255,.5); display:grid;place-items:center;font-size:50px; animation:acmMedalSwing 3.4s ease-in-out infinite;transform-origin:top center; } .acm-medal::after{ content:"";position:absolute;inset:0;border-radius:50%; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 46%, transparent 62%); background-size:250% 250%;background-position:-40% -40%; animation:acmMedalShine 3.4s ease-in-out infinite; } @keyframes acmMedalSwing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}} @keyframes acmMedalShine{0%,30%{background-position:-40% -40%}55%,100%{background-position:110% 110%}} .acm-type-badge{ position:absolute;bottom:-2px;right:-2px;width:32px;height:32px;border-radius:50%; background:#12151c;border:2.5px solid #171b28;display:grid;place-items:center;font-size:17px;z-index:2; } .activity-complete-modal h2{font-size:29px;margin:6px 0 12px;font-weight:800;color:#fff} .activity-complete-modal #acmMessage{font-size:15.5px;line-height:1.55;color:#dcd6ea;margin:0 0 4px} .activity-complete-modal #acmMessage strong{color:#fff;font-weight:700} .acm-stats{display:flex;gap:10px;margin:22px 0 18px} .acm-stats div{ flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:18px; padding:16px 8px;text-align:center;opacity:0;transform:translateY(12px);animation:acmStatIn .5s ease forwards; } .acm-stats div:nth-child(1){animation-delay:.12s} .acm-stats div:nth-child(2){animation-delay:.24s} .acm-stats div:nth-child(3){animation-delay:.36s} @keyframes acmStatIn{to{opacity:1;transform:translateY(0)}} .acm-stats span{display:block;font-size:9.5px;letter-spacing:.1em;color:#909aab;font-weight:900} .acm-stats strong{display:block;font-size:20px;margin-top:6px;color:#fff} .acm-stats small{display:block;font-size:9px;color:#7d7690;margin-top:2px} /* distance is the "contrast" stat — gold-tinted and a touch bigger */ .acm-stats div.is-distance{background:rgba(255,209,102,.09);border-color:rgba(255,209,102,.35)} .acm-stats div.is-distance strong{font-size:24px;color:#ffe6ac} .activity-complete-modal .primary-btn{font-size:16px;padding:17px;margin-top:16px} @media(prefers-reduced-motion:reduce){ .acm-medal,.acm-medal::after,.acm-stars i{animation:none} .acm-stats div{animation:none;opacity:1;transform:none} } @media(max-width:420px){ .acm-content{padding:calc(28px + env(safe-area-inset-top)) 20px 24px} .activity-complete-modal h2{font-size:25px} .acm-medal-wrap{width:76px;height:76px} .acm-medal{width:76px;height:76px;font-size:30px} } .workout-celebration-message{max-width:360px;margin:0 auto} .workout-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0} .workout-result-grid strong{display:block;font-size:23px;margin-top:6px;color:#fff} .workout-celebration .primary-btn{font-size:16px;margin-top:16px} @media(max-width:620px){ .rb-number-grid{grid-template-columns:1fr 1fr 1.25fr;gap:6px} .rb-number-grid input{padding:10px 7px} .guided-exercise-heading h3{font-size:24px} } /* v0.9.2 premium workout completion */ .premium-workout-result{ width:min(94vw,560px);height:auto;max-height:94dvh;padding:calc(24px + env(safe-area-inset-top)) 20px 22px;border:1px solid rgba(255,190,45,.48); position:fixed;inset:0;margin:auto;overscroll-behavior:contain;scroll-behavior:auto; border-radius:30px;background: radial-gradient(circle at 50% 38%,rgba(165,35,255,.34),transparent 29%), radial-gradient(circle at 50% 0%,rgba(74,25,130,.34),transparent 38%), linear-gradient(180deg,#090615 0%,#080913 58%,#05070d 100%); box-shadow:0 30px 90px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,196,58,.08);overflow:auto;-webkit-overflow-scrolling:touch } .premium-workout-result::backdrop{background:rgba(0,0,0,.84);backdrop-filter:blur(8px)} .premium-workout-result::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 33%,rgba(187,63,255,.18),transparent 34%)} .premium-workout-result>*{position:relative;z-index:2} .premium-complete-label{margin-top:4px;color:#a794c7} .premium-star{width:64px;height:64px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;font-size:34px;color:#ffc834;border:2px solid #f7c84a;background:rgba(255,196,53,.06);box-shadow:0 0 28px rgba(255,196,53,.22),inset 0 0 20px rgba(255,196,53,.08)} .premium-workout-result h2{font-size:clamp(34px,8vw,52px);line-height:.98;margin:8px auto 8px;letter-spacing:-.05em;color:#fff;max-width:490px} .premium-workout-result h2 span{display:block;font-size:.72em;letter-spacing:-.035em} .premium-workout-result h2 strong{display:block;color:#ffd34e;font-weight:950;text-shadow:0 4px 24px rgba(255,183,30,.18)} .premium-subtitle{font-size:18px!important;color:#fff!important;font-weight:750;min-height:26px} .premium-athlete{height:165px;margin:-4px auto -8px;max-width:320px;filter:drop-shadow(0 0 24px rgba(187,48,255,.34))} .premium-athlete svg{width:100%;height:100%;overflow:visible} .athlete-rays path{stroke:#9c2df4;stroke-width:2;opacity:.28} .premium-result-grid{margin:4px 0 14px;gap:10px} .workout-result-grid .premium-stat-card{padding:15px 10px 13px;border-radius:20px;background:linear-gradient(180deg,rgba(50,21,68,.72),rgba(7,10,18,.96));border:1px solid rgba(204,119,255,.32);box-shadow:inset 0 1px rgba(255,255,255,.04),0 14px 34px rgba(0,0,0,.22)} .premium-stat-icon{width:50px;height:50px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:23px;border:2px solid #ffd357;background:rgba(100,31,136,.48);box-shadow:0 0 22px rgba(187,65,255,.18)} .premium-stat-card span{color:#cc75ff!important;font-size:9px!important;letter-spacing:.11em!important} .premium-stat-card strong{color:#ffd13f!important;font-size:clamp(27px,7vw,40px)!important;line-height:1.05;margin:7px 0 10px!important;text-shadow:0 3px 18px rgba(255,188,31,.12)} .premium-stat-card small{display:block;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);color:#f4f5f8;font-size:11px;line-height:1.35} .premium-motivation{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:center;text-align:left;padding:13px 16px;margin:0 0 14px;border-radius:18px;border:1px solid rgba(190,76,255,.34);background:linear-gradient(90deg,rgba(85,21,108,.35),rgba(31,13,47,.72),rgba(64,18,84,.32));box-shadow:inset 0 0 24px rgba(173,43,255,.06)} .premium-motivation b{font-size:46px;line-height:1;color:#da68ff;text-shadow:0 0 16px rgba(218,104,255,.4);font-weight:400} .premium-motivation span{color:#f8f8fb;font-size:14px;line-height:1.35} .premium-motivation strong{color:#ffd44d} .premium-feeling-panel{padding:10px 12px 6px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.055);margin-bottom:12px} .premium-feeling-panel label{font-size:11px;color:#a7afbe;font-weight:800} .premium-workout-result .finish-feeling-row{margin:8px 0 3px} .premium-workout-result .finish-feeling-row button{background:#0f1420;border-color:rgba(255,255,255,.09)} .premium-workout-result .finish-feeling-row button.selected{border-color:#ffd047;background:rgba(255,199,48,.12);box-shadow:0 0 16px rgba(255,199,48,.08)} .premium-done-btn{width:100%;border:1px solid #ffe986;border-radius:999px;padding:12px 20px 11px;background:linear-gradient(180deg,#ffe16c,#f5ae24);color:#221300;box-shadow:0 10px 28px rgba(245,174,36,.20),inset 0 1px rgba(255,255,255,.55);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;justify-content:center} .premium-done-btn span{grid-row:1/3;font-size:28px;justify-self:end}.premium-done-btn b{font-size:25px;line-height:1;justify-self:start}.premium-done-btn small{font-size:11px;justify-self:start;opacity:.74} /* v1.0.0 animated confetti burst — spawned dynamically in app.js each time the workout completion screen is shown (see spawnConfetti). Replaces the old static, non-animated confetti dots and the baked-in artwork sparkles (the source PNG has had those cleaned out). */ .confetti-burst{ position:absolute!important;top:0;left:0;right:0;height:235px; overflow:hidden;pointer-events:none;z-index:1!important; border-radius:30px 30px 0 0; } .confetti-piece{ position:absolute;top:-18px;left:0;border-radius:2px;opacity:0; animation-name:confettiFall;animation-timing-function:cubic-bezier(.32,.62,.42,1); animation-fill-mode:forwards;will-change:transform,opacity; } .confetti-piece.circle{border-radius:50%} @keyframes confettiFall{ 0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.5)} 10%{opacity:1;transform:translate(calc(var(--sway) * .15),26px) rotate(120deg) scale(1)} 55%{opacity:1} 100%{opacity:0;transform:translate(var(--sway),265px) rotate(var(--rot)) scale(.85)} } @media(prefers-reduced-motion:reduce){ .confetti-piece{animation:none!important;opacity:0!important} } @media(max-width:430px){ .premium-workout-result{padding:calc(18px + env(safe-area-inset-top)) 14px 18px;border-radius:25px}.premium-star{width:56px;height:56px;font-size:29px}.premium-workout-result h2{font-size:38px}.premium-subtitle{font-size:15px!important}.premium-athlete{height:145px}.premium-result-grid{gap:7px}.workout-result-grid .premium-stat-card{padding:12px 7px}.premium-stat-card strong{font-size:28px!important}.premium-stat-card small{font-size:10px}.premium-motivation{grid-template-columns:45px 1fr;padding:11px 12px}.premium-motivation b{font-size:38px}.premium-motivation span{font-size:12px} } /* v0.9.3 completion-screen fixes */ @media(max-width:620px){ .premium-workout-result{ width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:calc(20px + env(safe-area-inset-top)) 16px 18px; border-radius:28px; } .premium-athlete{height:172px;margin:-2px auto -8px} } /* v0.9.5 approved premium workout silhouette asset */ .premium-athlete-image{ height:190px; max-width:390px; margin:-6px auto -10px; display:flex; align-items:center; justify-content:center; overflow:visible; filter:none; } .premium-athlete-image img{ display:block; width:100%; height:100%; object-fit:contain; object-position:center; pointer-events:none; user-select:none; -webkit-user-drag:none; } @media(max-width:620px){ .premium-athlete-image{ height:184px; max-width:360px; margin:-4px auto -10px; } } /* v0.9.8 timed exercises */ .timed-exercise-toggle{ display:flex;align-items:center;gap:10px;padding:11px 12px;margin:8px 0 10px; border:1px solid rgba(84,217,255,.14);border-radius:13px; background:rgba(84,217,255,.045);cursor:pointer } .timed-exercise-toggle input{width:20px;height:20px;margin:0;flex:0 0 auto;accent-color:var(--cyan)} .timed-exercise-toggle span{display:block;min-width:0} .timed-exercise-toggle b,.timed-exercise-toggle small{display:block} .timed-exercise-toggle b{font-size:12px;color:#eaf8ff} .timed-exercise-toggle small{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.3} .rb-reps-label.timed-disabled{opacity:.38} .timed-set-row{cursor:default} .timed-set-controls{ display:grid;grid-template-columns:minmax(72px,1fr) auto 44px;align-items:center;gap:9px;width:min(100%,330px) } .timed-set-display{ min-height:54px;display:grid;place-items:center;padding:10px 12px;border-radius:14px; background:#0b1017;border:1px solid rgba(255,255,255,.10);font-size:21px;font-variant-numeric:tabular-nums } .timed-set-btn{ min-width:92px;height:54px;border-radius:14px;border:1px solid rgba(84,217,255,.28); background:rgba(84,217,255,.08);color:#c9f3ff;font-weight:900;padding:0 13px } .timed-set-btn.is-running{border-color:rgba(255,107,122,.45);background:rgba(255,107,122,.12);color:#ffb4bc} .timed-set-btn:disabled{opacity:.46} .timed-set-row.is-complete .timed-set-display{border-color:rgba(85,240,167,.34);background:rgba(85,240,167,.08);color:#d8ffec} @media(max-width:620px){ .timed-set-controls{grid-template-columns:minmax(66px,1fr) 88px 38px;gap:7px} .timed-set-btn{min-width:0;padding:0 8px} } /* ============ v1.1.0 daily checkout redesign ============ */ .checkout-premium{ width:calc(100vw - 24px);max-width:460px;height:auto;max-height:calc(100dvh - 28px); position:fixed;top:max(14px, env(safe-area-inset-top));left:50%;transform:translateX(-50%);margin:0; padding:0;border:1px solid rgba(255,255,255,.1);border-radius:28px;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); text-align:left; } .checkout-premium::backdrop{background:rgba(4,5,9,.72);backdrop-filter:blur(3px)} .checkout-scene{ position:absolute;inset:0;pointer-events:none; background: radial-gradient(120% 70% at 18% -10%, rgba(85,240,167,.30), transparent 55%), radial-gradient(110% 65% at 100% 0%, rgba(84,217,255,.28), transparent 55%), radial-gradient(140% 90% at 50% 120%, rgba(168,121,255,.32), transparent 60%), linear-gradient(180deg,#171b28 0%, #0f1219 75%); } .checkout-stars{position:absolute;inset:0;overflow:hidden} .checkout-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.5;animation:checkoutTwinkle 3.2s ease-in-out infinite} @keyframes checkoutTwinkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}} @media(prefers-reduced-motion:reduce){.checkout-stars i{animation:none;opacity:.4}} .checkout-content{position:relative;padding:24px 20px 22px;z-index:1} .checkout-text-panel{ background:rgba(10,9,18,.46);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:18px 18px 16px;margin-bottom:18px; } .checkout-eyebrow{font-size:11.5px;letter-spacing:.16em;color:#c7c0dc;font-weight:700;text-transform:uppercase} .checkout-premium h2{font-size:28px;margin:8px 0 12px;font-weight:800;color:#fff} .checkout-premium #checkoutText{font-size:15.5px;line-height:1.55;color:#e4dff0;margin:0} .checkout-premium #checkoutText strong{color:#fff;font-weight:700} .checkout-rings{display:flex;gap:10px;margin-bottom:20px} .checkout-ring-card{ flex:1;background:rgba(15,13,24,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:14px 6px 12px;text-align:center;position:relative; } .checkout-ring-wrap{position:relative;width:82px;height:82px;margin:0 auto} /* v1.16.1: was ".checkout-ring-wrap svg" (a descendant selector), which matches ANY svg anywhere inside the wrapper — including the checkmark badge's own inner svg, nested two levels deep inside .checkout-check-badge. That accidentally rotated the checkmark -90deg along with the ring arc, turning it into what looks exactly like a ">" chevron. Direct-child selector scopes this to only the ring's own svg, which is the only one that actually needs the rotation (to start its progress arc at 12 o'clock instead of SVG's default 3 o'clock start). */ .checkout-ring-wrap > svg{width:82px;height:82px;transform:rotate(-90deg)} .checkout-ring-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:8} .checkout-ring-fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)} .checkout-ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15.5px;font-weight:800;flex-direction:column;line-height:1.05;color:#fff} .checkout-ring-num small{font-size:9px;font-weight:600;color:#c9c2db;margin-top:1px} .checkout-ring-label{font-size:10.5px;color:#c9c2db;margin-top:8px;font-weight:600;letter-spacing:.02em} .checkout-check-badge{ position:absolute;top:-4px;right:-4px;width:23px;height:23px;border-radius:50%; background:linear-gradient(135deg,var(--green),#a9f7d1); display:flex;align-items:center;justify-content:center;border:2.5px solid #14121e; transform:scale(0);opacity:0; } .checkout-check-badge.pop{animation:checkoutBadgePop .5s cubic-bezier(.34,1.56,.64,1) forwards} .checkout-check-badge svg{width:11px;height:11px} @keyframes checkoutBadgePop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:1}} @media(prefers-reduced-motion:reduce){ .checkout-check-badge.pop{animation:none;transform:scale(1);opacity:1} .checkout-ring-fill{transition:none} } .checkout-premium .primary-btn{margin-top:0} .checkout-share-btn{ display:flex;align-items:center;justify-content:center;gap:10px;width:100%; padding:15px 18px;margin-bottom:16px;border-radius:999px; background:linear-gradient(155deg,rgba(108,95,255,.16),rgba(28,207,169,.10)); border:1.5px solid rgba(108,95,255,.4); color:var(--text);font-size:15.5px;font-weight:700; box-shadow:0 6px 18px rgba(108,95,255,.18); } .checkout-share-btn svg{width:18px;height:18px;color:var(--violet)} @media(max-width:420px){ .checkout-ring-wrap{width:72px;height:72px} .checkout-ring-wrap > svg{width:72px;height:72px} .checkout-premium h2{font-size:25px} } /* ============================================================ v1.4.0 — full-screen Day Report ("sports report" theme). Deliberately breaks from the rest of the app's dark navy/purple scheme, per design brief — near-black background, single cyan accent (matches the calendar's own --cyan so it still feels like part of the same product), angled "broadcast graphics" dividers. ============================================================ */ :root{ --rep-bg:#050607;--rep-accent:#54d9ff;--rep-accent-dim:rgba(84,217,255,.16);--rep-ink:#f4f6ee; } .day-report-dialog{ position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh; padding:0;border:none;border-radius:0;overflow:hidden;background:var(--rep-bg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--rep-ink); } .day-report-dialog::backdrop{background:var(--rep-bg)} .rep-close{ position:absolute;top:calc(env(safe-area-inset-top) + 16px);right:16px;z-index:10;width:40px;height:40px;border-radius:50%; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff; font-size:18px;display:grid;place-items:center;backdrop-filter:blur(6px); } .day-report-dialog .report-inner{ height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch; transform:translateY(14px);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .45s ease; } .day-report-dialog.is-visible .report-inner{transform:translateY(0);opacity:1} .rep-hero{ position:relative;padding:64px 22px 34px;overflow:hidden; background: radial-gradient(120% 60% at 15% -20%, rgba(84,217,255,.14), transparent 55%), radial-gradient(90% 50% at 100% 0%, rgba(168,121,255,.1), transparent 55%), linear-gradient(180deg,#0b0d0e 0%, #050607 100%); } .rep-hero::after{ content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:2px; background:linear-gradient(90deg, transparent, var(--rep-accent), transparent);opacity:.6; } .rep-eyebrow{ font-size:11px;letter-spacing:.28em;font-weight:800;color:var(--rep-accent);text-transform:uppercase; display:flex;align-items:center;gap:8px; } .rep-eyebrow::before{content:"";width:18px;height:2px;background:var(--rep-accent);display:inline-block;transform:skewX(-20deg)} .rep-date{ font-size:clamp(30px,9vw,42px);font-weight:900;letter-spacing:-.02em;line-height:1.02;margin:10px 0 2px; text-transform:uppercase;color:var(--rep-ink); } .rep-date small{display:block;font-size:.42em;font-weight:700;color:#9aa8b8;letter-spacing:.1em;margin-top:4px} .rep-score-row{display:flex;align-items:flex-end;gap:18px;margin-top:26px;flex-wrap:wrap} .rep-score-box{ background:linear-gradient(155deg, rgba(84,217,255,.14), rgba(84,217,255,.02)); border:1px solid rgba(84,217,255,.32);border-radius:18px;padding:16px 22px;flex:1;min-width:150px; } .rep-score-box span{display:block;font-size:10px;letter-spacing:.16em;color:#9aa8b8;font-weight:800;text-transform:uppercase} .rep-score-num{font-size:56px;font-weight:900;color:var(--rep-accent);line-height:1;margin-top:4px;font-variant-numeric:tabular-nums} .rep-score-label{font-size:13px;font-weight:700;color:#c7e6ff;margin-top:4px} .rep-mini-stats{display:flex;flex-direction:column;gap:10px} .rep-mini-stats div{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;color:#aab19a;min-width:120px} .rep-mini-stats strong{color:#fff;font-weight:800} .rep-section{padding:30px 22px;border-top:1px solid rgba(255,255,255,.06)} .rep-section-head{display:flex;align-items:center;gap:12px;margin-bottom:18px} .rep-section-bar{width:26px;height:12px;background:var(--rep-accent);transform:skewX(-20deg);flex:none} .rep-section-head h2{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:900;margin:0;color:#e9ecdf} .rep-rings{display:flex;gap:14px} .rep-ring-card{flex:1;text-align:center} .rep-ring-wrap{position:relative;width:78px;height:78px;margin:0 auto} .rep-ring-wrap svg{width:78px;height:78px;transform:rotate(-90deg)} .rep-ring-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:7} .rep-ring-fill{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)} .rep-ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff} .rep-ring-label{font-size:10px;color:#8a93a8;margin-top:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase} .rep-exercise-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06)} .rep-exercise-row:last-child{border-bottom:none} .rep-exercise-num{ width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(84,217,255,.4);color:var(--rep-accent); display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:none; } .rep-exercise-name{flex:1;font-size:14.5px;font-weight:700;color:#fff} .rep-exercise-meta{font-size:11.5px;color:#8a93a8;margin-top:2px} .rep-exercise-value{text-align:right;font-size:14px;font-weight:800;color:var(--rep-accent);font-variant-numeric:tabular-nums} .rep-exercise-value small{display:block;font-size:9.5px;color:#8a93a8;font-weight:600} .rep-cardio-row{ display:grid;grid-template-columns:28px 1fr 52px 52px 76px;align-items:center;gap:12px; padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px; } .rep-cardio-row:last-child{border-bottom:none} .rep-cardio-icon{font-size:16px} .rep-cardio-name{font-weight:700;color:#fff;min-width:0;display:flex;align-items:center;gap:6px} .rep-cardio-name-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rep-cardio-col{text-align:right;font-variant-numeric:tabular-nums} .rep-cardio-col strong{display:block;font-size:13.5px;color:#fff} .rep-cardio-col small{display:block;font-size:9px;color:#8a93a8;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-top:1px} .rep-cardio-col small.rep-pr-trophy{font-size:13px;color:inherit;letter-spacing:normal;text-transform:none;margin-top:2px} .rep-cardio-head{display:grid;grid-template-columns:28px 1fr 52px 52px 76px;gap:12px;font-size:9px;letter-spacing:.08em;color:#6d7688;font-weight:800;text-transform:uppercase;padding-bottom:8px} .rep-cardio-head span:not(:first-child){text-align:right} .rep-protein-hero{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px; background:rgba(84,217,255,.06);border:1px solid rgba(84,217,255,.24);border-radius:16px; padding:16px 18px;margin-bottom:18px; } .rep-protein-hero span{font-size:10px;letter-spacing:.14em;color:#9aa8b8;font-weight:800;text-transform:uppercase;display:block} .rep-protein-hero strong{font-size:30px;color:var(--rep-accent);font-weight:900;font-variant-numeric:tabular-nums} .rep-satfat-bar-wrap{flex:1;max-width:150px} .rep-satfat-bar-track{height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden} .rep-satfat-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--rep-accent),#8fc7ff);width:0%;transition:width 1s cubic-bezier(.22,1,.36,1)} .rep-satfat-bar-text{font-size:10.5px;color:#8a93a8;margin-top:5px;text-align:right} .rep-food-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px} .rep-food-row:last-child{border-bottom:none} .rep-food-name{font-weight:700;color:#fff} .rep-food-meal{font-size:10.5px;color:#8a93a8;text-transform:uppercase;letter-spacing:.05em;margin-top:1px} .rep-food-nums{text-align:right;font-size:11.5px;color:#aab19a;font-variant-numeric:tabular-nums} .rep-food-nums b{color:#fff;font-weight:800} .rep-empty{font-size:13px;color:#6d7688;font-style:italic;padding:6px 0} .rep-footer{padding:34px 22px 60px;text-align:center} .rep-footer-mark{font-size:11px;letter-spacing:.2em;color:#4d5568;font-weight:800;text-transform:uppercase} .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)} .reveal.in{opacity:1;transform:translateY(0)} @media(prefers-reduced-motion:reduce){ .day-report-dialog .report-inner{transition:none;transform:none;opacity:1} .reveal{transition:none;opacity:1;transform:none} .rep-ring-fill,.rep-satfat-bar-fill{transition:none} } @media(max-width:420px){ .rep-hero{padding:56px 18px 28px} .rep-section{padding:24px 18px} .rep-score-num{font-size:46px} } /* ============ v1.6.0 Personal Records ============ */ .pr-badges{display:flex;flex-direction:column;align-items:center;gap:6px;margin:2px 0 4px} .pr-badge{ display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px; font-size:11.5px;font-weight:800;text-align:center;line-height:1.3; background:linear-gradient(135deg,rgba(255,196,53,.2),rgba(255,196,53,.06)); border:1px solid rgba(255,196,53,.5);color:#ffd875; animation:prBadgeGlow 2.2s ease-in-out infinite; } @keyframes prBadgeGlow{0%,100%{box-shadow:0 0 0 rgba(255,196,53,0)}50%{box-shadow:0 0 16px rgba(255,196,53,.4)}} @media(prefers-reduced-motion:reduce){.pr-badge{animation:none;box-shadow:0 0 10px rgba(255,196,53,.25)}} .pr-section{margin-bottom:16px} .pr-section-head{margin:4px 0 8px} .pr-section-head h3{margin:0;font-size:16px} .pr-list{display:flex;flex-direction:column;gap:8px} .pr-row{ display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:15px; background:#10151e;border:1px solid var(--line); } .pr-row-icon{font-size:20px;flex:none;width:24px;text-align:center} .pr-row-main{flex:1;min-width:0} .pr-row-main strong{display:block;font-size:14px} .pr-row-main small{display:block;font-size:11px;color:var(--muted);margin-top:1px} .pr-row-value{text-align:right;flex:none} .pr-row-value b{display:block;font-size:15px;color:var(--green);font-variant-numeric:tabular-nums} .pr-row-value small{display:block;font-size:10px;color:var(--muted);margin-top:1px} .pr-empty{font-size:13px;color:var(--muted);font-style:italic;padding:14px 2px;margin:0} /* v1.6.1 — flag PR rows inside the Day Report itself, right next to the exercise/activity they belong to. Gold against the report's cyan theme for maximum contrast, matching the gold "record" language used everywhere else in the app (medals, PR badges, final-exercise variant). */ .rep-exercise-row.is-pr{ background:linear-gradient(90deg, rgba(255,196,53,.14), transparent 75%); border-left:3px solid #ffd166;margin-left:-22px;padding-left:19px; } /* Cardio rows use a fixed-width column grid where alignment across rows matters (see .rep-cardio-row above) — the margin/padding "bleed" trick above shifts a grid row's own box model, which very subtly misaligns its column tracks against every other row's. An absolutely-positioned accent bar can't affect grid sizing at all, since it's pure decoration layered on top rather than a change to the row's own box. */ .rep-cardio-row.is-pr{position:relative;background:linear-gradient(90deg, rgba(255,196,53,.14), transparent 75%)} .rep-cardio-row.is-pr::before{content:"";position:absolute;left:-22px;top:0;bottom:0;width:3px;background:#ffd166} @media(max-width:420px){.rep-cardio-row.is-pr::before{left:-18px}} @media(max-width:420px){.rep-exercise-row.is-pr{margin-left:-18px;padding-left:15px}} .rep-pr-chip{ display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;flex-shrink:0; background:rgba(255,196,53,.2);border:1px solid rgba(255,196,53,.55);color:#ffd875; font-size:9.5px;font-weight:900;letter-spacing:.03em;margin-left:8px;vertical-align:middle; white-space:nowrap;animation:repPrPulse 2s ease-in-out infinite; } .rep-cardio-name .rep-pr-chip{margin-left:0} /* spacing handled by the parent's flex gap instead */ @keyframes repPrPulse{0%,100%{box-shadow:0 0 0 rgba(255,196,53,0)}50%{box-shadow:0 0 10px rgba(255,196,53,.5)}} @media(prefers-reduced-motion:reduce){.rep-pr-chip{animation:none;box-shadow:0 0 6px rgba(255,196,53,.3)}} .rep-reward-claim{ display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px; background:linear-gradient(135deg,rgba(255,196,53,.12),rgba(255,196,53,.03));border:1px solid rgba(255,196,53,.3); } .rep-reward-icon{font-size:28px;flex:none} .rep-reward-claim strong{display:block;font-size:15px;color:#fff} .rep-reward-claim small{display:block;color:#e2c07a;font-size:12px;margin-top:2px} /* ============ v1.7.0 Staples (quick-add) ============ */ .staples-section{margin-bottom:18px} .staples-heading{margin:2px 0 12px;font-size:16px} .staples-row{ display:flex;gap:10px;overflow-x:auto;padding-bottom:2px;margin:0 -2px;padding-left:2px;padding-right:2px; scrollbar-width:none;-webkit-overflow-scrolling:touch; } .staples-row::-webkit-scrollbar{display:none} .staple-card{ flex:0 0 auto;width:104px;padding:12px 10px;border-radius:16px; background:#111620;border:1px solid var(--line);color:var(--text);text-align:left; } .staple-card:active{transform:scale(.97)} .staple-thumb{width:100%;height:64px;border-radius:11px;object-fit:cover;margin-bottom:8px;display:block} .staple-thumb-fallback{display:flex;align-items:center;justify-content:center;font-size:26px;background:rgba(255,255,255,.04)} .staple-card strong{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-size:12.5px;line-height:1.25;font-weight:750; } .staple-card small{display:block;color:var(--muted);font-size:10.5px;margin-top:5px} /* ============ v1.8.0 Trends ============ */ .segmented{display:flex;background:#0d1119;border:1px solid var(--line);border-radius:14px;padding:4px;margin-bottom:16px} .segmented button{flex:1;padding:10px;border:none;border-radius:11px;background:none;color:var(--muted);font-weight:800;font-size:13.5px} .segmented button.active{background:linear-gradient(135deg,var(--green),var(--cyan));color:#07130e} .range-row{display:flex;gap:8px;margin-bottom:16px} .range-btn{flex:1;padding:9px;border-radius:11px;border:1px solid var(--line);background:#111620;color:#aeb6c4;font-weight:800;font-size:12.5px} .range-btn.active{background:rgba(84,217,255,.14);border-color:rgba(84,217,255,.5);color:#bfeeff} .trend-card{background:#111620;border:1px solid var(--line);border-radius:20px;padding:18px;margin-bottom:14px} .trend-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:10px} .trend-head h3{margin:0 0 3px;font-size:15px} .trend-head p{margin:0;font-size:11.5px;color:var(--muted)} .trend-stat{text-align:right;flex:none} .trend-stat strong{display:block;font-size:22px;font-variant-numeric:tabular-nums} .trend-stat small{display:block;font-size:10.5px;color:var(--muted);margin-top:1px} .chart-wrap{width:100%} .chart-wrap svg{width:100%;height:auto;display:block;overflow:visible} .chart-area{opacity:.16} .chart-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .chart-target-line{stroke:rgba(255,255,255,.25);stroke-width:1;stroke-dasharray:4 4} .chart-dot{fill:#111620;stroke-width:2.5} .chart-xlabels{display:flex;justify-content:space-between;margin-top:6px;font-size:9.5px;color:#6b7284} .exercise-picker{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px;scrollbar-width:none} .exercise-picker::-webkit-scrollbar{display:none} .exercise-chip{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#0d1119;color:#aeb6c4;font-size:12.5px;font-weight:700;white-space:nowrap} .exercise-chip.active{background:rgba(168,121,255,.16);border-color:rgba(168,121,255,.5);color:#e3d4ff} .pr-callout{ display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 14px;border-radius:13px; background:linear-gradient(135deg,rgba(255,196,53,.12),rgba(255,196,53,.03));border:1px solid rgba(255,196,53,.3); } .pr-callout span{font-size:18px} .pr-callout div{font-size:12.5px;color:#ffd875;font-weight:700;line-height:1.4} .pr-callout b{color:#fff} /* ============================================================ v1.10.0 — collapsible exercise rows in the routine builder. Was: every exercise fully expanded all the time (name, timed toggle with its 2-line description, sets/reps/weight, notes) — fine for one exercise, a scrolling slog for a real routine. Now: collapsed by default showing name + a one-line summary, tap to expand. A brand-new blank exercise still opens automatically since there's nothing to summarize yet. ============================================================ */ .exercise-row{ border-radius:16px;background:#0d121a;border:1px solid rgba(255,255,255,.055);overflow:hidden; transition:border-color .2s ease,box-shadow .2s ease; } .exercise-row.is-open{border-color:rgba(84,217,255,.32);box-shadow:0 0 0 1px rgba(84,217,255,.1)} .exercise-row-head{display:flex;align-items:center;gap:10px;padding:12px 12px;cursor:pointer} .exercise-row-head-main{flex:1;min-width:0} .exercise-row-title{display:block;font-size:14.5px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff} .exercise-row-summary{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:11.5px;color:var(--muted)} .exercise-row-summary .notes-flag{font-size:12px} .exercise-row-summary .notes-flag.hidden{display:none} .exercise-row-num{ width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.06);color:#aeb6c4; display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;flex:none } .exercise-row-expand{ width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--line); color:#aeb6c4;flex:none;display:grid;place-items:center;font-size:13px;transition:transform .25s ease } .exercise-row.is-open .exercise-row-expand{transform:rotate(180deg);color:var(--cyan);border-color:rgba(84,217,255,.35);background:rgba(84,217,255,.08)} .exercise-row .row-remove{width:32px;height:32px;font-size:16px;border-radius:9px} /* Darker background + a visible divider mark exactly where the collapsed header ends and the expanded editing fields begin — without this it reads as one continuous block rather than a header with a drawer underneath it, which was the actual source of the confusion. */ .exercise-row-body{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.22,1,.36,1);background:rgba(0,0,0,.2)} .exercise-row.is-open .exercise-row-body{max-height:600px;border-top:1px solid rgba(255,255,255,.07)} .exercise-row-body .rb-main-fields{padding:14px 12px 14px} @media(prefers-reduced-motion:reduce){.exercise-row-body{transition:none}.exercise-row-expand{transition:none}} /* ============================================================ v1.19.0 — Weekly/Monthly Report. Reuses the same standard app palette as Trends/Calendar (not the special gold sports-report theme), since this is a permanent navigational view rather than a one-off celebration. ============================================================ */ .report-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:22px;margin-bottom:16px} .report-badge{ width:56px;height:56px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font-size:26px; background:linear-gradient(135deg,rgba(85,240,167,.16),rgba(84,217,255,.1));border:1px solid rgba(85,240,167,.3) } .report-title{font-size:20px;font-weight:800;text-align:center;margin:0 0 4px} .report-sub{font-size:12.5px;color:var(--muted);text-align:center;margin:0 0 16px} .report-message{ font-size:14px;line-height:1.55;color:#dcd6ea;text-align:center;margin:0 0 18px; padding:13px 15px;border-radius:14px;background:rgba(85,240,167,.06);border:1px solid rgba(85,240,167,.18) } .report-message strong{color:#fff} .report-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .report-stat-card{background:#111620;border:1px solid var(--line);border-radius:16px;padding:14px} .report-stat-card span{display:block;font-size:9.5px;letter-spacing:.1em;color:#909aab;font-weight:900;text-transform:uppercase} .report-stat-card strong{display:block;font-size:22px;margin-top:6px;font-variant-numeric:tabular-nums} .report-stat-card small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px} .report-stat-card.green strong{color:var(--green)} .report-stat-card.cyan strong{color:var(--cyan)} .report-stat-card.violet strong{color:var(--violet)} .report-stat-card.amber strong{color:var(--amber)} .report-stat-card.full-width{grid-column:1/-1} .report-week-breakdown{display:flex;flex-direction:column;gap:8px;margin-top:16px} .report-week-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:13px;background:#111620;border:1px solid var(--line)} .report-week-row .wk-label{font-size:12px;font-weight:700;width:78px;flex:none;color:#cfc9de} .report-week-row .wk-bar-track{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden} .report-week-row .wk-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--cyan))} .report-week-row .wk-value{font-size:11.5px;color:var(--muted);width:60px;text-align:right;flex:none;font-variant-numeric:tabular-nums} /* v1.23.0 — profile photo avatar, replacing the plain gear icon. Two states: a user-chosen photo (cropped to fill the circle), or initials on a subtle gradient when none has been set yet — both keep the same 46px tap target and both open Settings, matching the gear icon's existing behaviour. */ .profile-avatar{ width:60px;height:60px;border-radius:50%;border:1px solid var(--line); background:#151a24;color:#dce0e7;overflow:hidden;position:relative; display:flex;align-items:center;justify-content:center;padding:0;flex:none; } .profile-avatar img{width:100%;height:100%;object-fit:cover;display:block} .profile-avatar .avatar-initials{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; font-weight:800;font-size:20px;color:#0b0d12; background:linear-gradient(135deg,var(--green),var(--cyan)); } .settings-photo-row{display:flex;align-items:center;gap:14px;margin-bottom:18px} .settings-photo-row .profile-avatar{width:72px;height:72px} .settings-photo-row .avatar-initials{font-size:24px} /* Paywall/upgrade screen mockup styles */ .paywall-badge{ width:72px;height:72px;margin:0 auto 16px;position:relative;display:grid;place-items:center; } .paywall-badge:before{ content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1; background:radial-gradient(circle,var(--glow-green) 0%,var(--glow-violet) 55%,transparent 72%); filter:blur(11px);opacity:.5; animation:ringGlowPulse 5.4s ease-in-out infinite; } .paywall-badge img{ width:100%;height:100%;border-radius:19px;display:block;object-fit:cover; box-shadow:0 8px 22px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.08) inset; } .paywall-title{font-size:24px;font-weight:800;text-align:center;margin:0 0 8px;font-family:var(--font-display)} .paywall-sub{font-size:14px;color:var(--muted);text-align:center;margin:0 0 26px;line-height:1.5} .paywall-feature-list{display:flex;flex-direction:column;gap:2px;margin-bottom:24px} .paywall-feature{display:flex;align-items:center;gap:14px;padding:13px 4px} .paywall-feature-icon{ width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;position:relative;overflow:hidden; background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 4px 10px rgba(0,0,0,.28); } .paywall-feature-icon:before{ content:"";position:absolute;inset:0;opacity:.6; background:radial-gradient(circle at 28% 22%,var(--pf-glow),transparent 68%); } .paywall-feature-icon svg{width:19px;height:19px;position:relative;z-index:1} .pf-green{color:var(--green);--pf-glow:rgba(28,207,169,.5)} .pf-cyan{color:var(--cyan);--pf-glow:rgba(255,100,82,.45)} .pf-violet{color:var(--violet);--pf-glow:rgba(108,95,255,.5)} .pf-amber{color:var(--amber);--pf-glow:rgba(255,180,84,.5)} .paywall-feature-text strong{display:block;font-size:14px;color:var(--text)} .paywall-feature-text span{display:block;font-size:12px;color:var(--muted);margin-top:1px} .paywall-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px} .paywall-plan{ border:1.5px solid var(--line);border-radius:16px;padding:16px 14px;text-align:center;position:relative; background:#111620; } .paywall-plan.selected{border-color:var(--green);background:rgba(85,240,167,.06)} .paywall-plan-badge{ position:absolute;top:-11px;left:50%;transform:translateX(-50%); background:linear-gradient(135deg,var(--green),var(--cyan));color:#07130e; font-size:9.5px;font-weight:900;letter-spacing:.05em;padding:3px 10px;border-radius:999px;white-space:nowrap; } .paywall-plan-name{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-top:4px} .paywall-plan-price{font-size:22px;font-weight:800;margin-top:6px} .paywall-plan-price small{font-size:12px;font-weight:600;color:var(--muted)} .paywall-plan-note{font-size:11px;color:var(--green);margin-top:4px;font-weight:700} .paywall-footnote{text-align:center;font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.5} .paywall-dismiss{ display:block;width:100%;text-align:center;background:none;border:none; color:#c9c2db;font-size:13.5px;font-weight:600;padding:16px 0 4px;text-decoration:underline;text-underline-offset:3px; } /* Global scrollbar hiding — this is a native app, not a web page, so no scrollable area should ever show a visible browser-style scrollbar (this was leaking through on the main page scroll, since previously only individual horizontal-scroll strips like .reward-tabs had this applied, not html/body or generic containers). */ *{scrollbar-width:none;-ms-overflow-style:none;} *::-webkit-scrollbar{display:none;width:0;height:0;} /* v244 — four-step premium first-run experience */ .onboarding-v244{ min-height:100svh; padding:0!important; text-align:center; overflow:hidden; background: radial-gradient(circle at 12% 4%,rgba(255,100,82,.13),transparent 27%), radial-gradient(circle at 88% 14%,rgba(108,95,255,.16),transparent 30%), linear-gradient(180deg,#090b12 0%,#07090f 100%); } .onboarding-shell{ position:relative; width:min(100%,580px); min-height:100svh; margin:0 auto; padding:calc(22px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; } .onboarding-slides{position:relative;flex:1;min-height:0} .onboarding-slide{ position:absolute;inset:0; display:flex;flex-direction:column;align-items:center; opacity:0;visibility:hidden;pointer-events:none; transform:translateX(24px); transition:opacity .28s ease,transform .32s ease,visibility .32s; padding:34px 0 54px; overflow-y:auto; -webkit-overflow-scrolling:touch; } .onboarding-slide.active{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0)} .onboarding-skip{ position:absolute;top:calc(18px + env(safe-area-inset-top));right:20px;z-index:5; border:0;background:transparent;color:#b7bfd0;padding:8px;font-size:14px;font-weight:700; } .onboarding-brand-mark{ width:118px;height:104px;margin:12px auto 10px; filter:drop-shadow(0 0 28px rgba(74,214,231,.19)); } .onboarding-brand-mark svg{width:100%;height:100%;display:block} .onboarding-wordmark{ font-family:var(--font-display);font-size:42px;font-weight:800;letter-spacing:-.05em;line-height:1; } .onboarding-wordmark span, .onboarding-welcome-copy h1 span, .onboarding-heading h2 span{ background:linear-gradient(100deg,#45e6e1 0%,#59cfff 42%,#8970ff 72%,#ff718c 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .onboarding-kicker{ margin:9px 0 0;color:#8c96aa;font-size:10px;font-weight:800;letter-spacing:.22em; } .onboarding-welcome-copy{margin:auto 0 20px;max-width:470px} .onboarding-welcome-copy h1{ font-size:clamp(38px,9vw,52px);line-height:1.02;letter-spacing:-.055em;margin:0 0 18px; } .onboarding-welcome-copy p, .onboarding-heading>p:last-child{ margin:0 auto;color:#aeb6c8;font-size:16px;line-height:1.55;max-width:440px; } .onboarding-primary{ width:100%;min-height:54px;border:1px solid rgba(255,255,255,.16);border-radius:18px; color:white;font-family:var(--font-display);font-size:17px;font-weight:750; background:linear-gradient(105deg,#20cfc1 0%,#39c9f5 38%,#6f64ff 70%,#e45edc 100%); box-shadow:0 14px 32px rgba(60,117,255,.20),inset 0 1px 0 rgba(255,255,255,.30); margin-top:auto;padding:14px 18px; } .onboarding-primary:active{transform:translateY(1px)} .onboarding-primary span{font-size:20px;margin-left:7px} .onboarding-heading{width:100%;margin:10px auto 20px} .onboarding-heading .eyebrow{color:#7f8aa1;margin-bottom:8px} .onboarding-heading h2{ font-size:clamp(34px,8vw,46px);line-height:1.02;letter-spacing:-.052em;margin:0 0 14px; } .onboarding-score-orbit{display:grid;place-items:center;margin:4px auto 20px} .onboarding-score-ring{ width:208px;height:208px;border-radius:50%;padding:13px; background:conic-gradient(#45e5e0 0 25%,#62d7ff 25% 49%,#7164ff 49% 73%,#dc62db 73% 88%,#32d8aa 88% 100%); box-shadow:0 0 42px rgba(77,213,232,.16),0 0 65px rgba(108,95,255,.13); position:relative; } .onboarding-score-ring:after{ content:"";position:absolute;inset:7px;border-radius:50%; background:rgba(8,11,17,.76);z-index:0; } .onboarding-score-inner{ position:relative;z-index:1;width:100%;height:100%;border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center; background:radial-gradient(circle at 50% 35%,rgba(47,67,90,.58),#090c13 67%); border:1px solid rgba(255,255,255,.09); } .onboarding-score-inner strong{font-family:var(--font-display);font-size:62px;line-height:.9} .onboarding-score-inner span{color:#9beaf1;font-size:15px;margin-top:7px;font-weight:700} .onboarding-pillars{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:20px} .onboarding-pillar{ min-width:0;padding:13px 7px 12px;border:1px solid rgba(255,255,255,.09);border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); } .onboarding-pillar strong{display:block;font-size:11px;line-height:1.2;margin-top:7px} .onboarding-pillar small{display:block;color:#858fa3;font-size:9px;margin-top:4px} .pillar-icon{ width:42px;height:42px;margin:auto;border-radius:50%;display:grid;place-items:center; background:#111722;border:1px solid rgba(255,255,255,.1) } .pillar-icon svg,.feature-glyph svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .pillar-food{color:#ff7464;box-shadow:0 0 18px rgba(255,100,82,.13)} .pillar-move{color:#55d9a9;box-shadow:0 0 18px rgba(28,207,169,.13)} .pillar-consistency{color:#8c79ff;box-shadow:0 0 18px rgba(108,95,255,.13)} .onboarding-feature-list{width:100%;display:grid;gap:9px;margin:2px 0 14px} .onboarding-feature{ display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;text-align:left; column-gap:8px;padding:12px 16px 12px 24px; border:1px solid rgba(77,207,224,.25);border-radius:17px; background:linear-gradient(135deg,rgba(17,28,39,.94),rgba(10,15,24,.96)); } .onboarding-feature>div{ min-width:0; } .feature-glyph{ width:58px;height:58px;justify-self:end;position:relative;border-radius:50%; display:grid;place-items:center;color:#62dfe9;background:none;border:0;box-shadow:none } .feature-glyph::before{ content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(81,219,231,.14) 0%,rgba(81,219,231,.07) 42%,rgba(81,219,231,.02) 66%,transparent 74%); } .feature-glyph svg{ position:relative;z-index:1;display:block; width:38px!important;height:38px!important; margin:0!important;transform:none!important; } .onboarding-feature:nth-child(1) .feature-glyph{ color:#58dfe8; filter:drop-shadow(0 0 12px rgba(69,218,229,.28)) } .onboarding-feature:nth-child(2) .feature-glyph{ color:#69cfff; filter:drop-shadow(0 0 12px rgba(91,181,255,.28)) } .onboarding-feature:nth-child(3) .feature-glyph{ color:#e5bc66; filter:drop-shadow(0 0 13px rgba(229,188,102,.26)) } .onboarding-feature:nth-child(4) .feature-glyph{ color:#9b84ff; filter:drop-shadow(0 0 12px rgba(135,105,255,.28)) } .onboarding-feature .feature-glyph{ transform-origin:50% 50%; } .onboarding-feature .feature-glyph svg{ stroke-width:1.65 } .onboarding-feature strong{display:block;font-size:14px;margin-bottom:3px} .onboarding-feature span{display:block;color:#9da7ba;font-size:12px;line-height:1.35} .onboarding-no-calories{ width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;margin-bottom:16px; border-radius:16px;border:1px solid rgba(85,220,229,.18);background:rgba(32,93,106,.09) } .onboarding-no-calories>span{ width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center; background:rgba(77,220,200,.14);color:#5fe4ca;font-weight:900 } .onboarding-no-calories strong{display:block;font-size:13px} .onboarding-no-calories small{display:block;color:#8f99ad;font-size:11px;line-height:1.35;margin-top:2px} .onboarding-setup-slide{padding-top:18px} .onboarding-setup-heading{margin-bottom:13px} .onboarding-setup-heading h2{font-size:clamp(31px,7vw,40px)} .onboarding-setup-card{ width:100%;padding:16px;border-radius:22px;text-align:left; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 65px rgba(0,0,0,.3) } .onboarding-setup-card label{font-size:13px;margin:6px 0;color:#d4d9e4} .onboarding-setup-card input{padding:13px 14px;border-radius:14px} .onboarding-target-grid{grid-template-columns:repeat(3,1fr);gap:8px} .onboarding-target-grid .target-option{ min-width:0;padding:12px 8px;text-align:center;border-radius:15px; background:#0d131d;border:1px solid rgba(255,255,255,.11) } .onboarding-target-grid .target-option strong{font-size:17px} .onboarding-target-grid .target-option span{font-size:9px} .onboarding-target-grid .target-option.selected, .onboarding-v244 .unit-option.selected{ border-color:#42dbe1!important; box-shadow:0 0 0 2px rgba(66,219,225,.10),0 0 20px rgba(66,219,225,.08)!important } .onboarding-v244 .unit-grid{gap:8px} .onboarding-v244 .unit-option{padding:12px 12px;border-radius:14px} .onboarding-v244 .unit-option strong{font-size:14px} .onboarding-v244 .unit-option span{font-size:11px} .onboarding-photo-row{margin:7px 0 0} .onboarding-photo-row .profile-avatar{width:58px;height:58px} .onboarding-photo-row .secondary-btn{font-size:13px;padding:11px 15px;border-radius:14px} .onboarding-optional{color:#7f889b;font-weight:600} .onboarding-setup-card .onboarding-primary{margin-top:14px;min-height:50px} .onboarding-dots{ position:absolute;left:50%;bottom:calc(13px + env(safe-area-inset-bottom));transform:translateX(-50%); z-index:6;display:flex;gap:8px;align-items:center; } .onboarding-dots button{ width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#394357; transition:width .22s ease,background .22s ease } .onboarding-dots button.active{width:22px;border-radius:99px;background:#62dcea} @media (max-height:760px){ .onboarding-slide{padding-top:22px} .onboarding-brand-mark{width:92px;height:82px;margin-top:0} .onboarding-wordmark{font-size:36px} .onboarding-welcome-copy h1{font-size:35px} .onboarding-score-ring{width:174px;height:174px} .onboarding-score-inner strong{font-size:52px} .onboarding-heading h2{font-size:32px} .onboarding-heading>p:last-child{font-size:14px} .onboarding-feature{padding:9px 10px} .feature-glyph{width:52px;height:52px} .onboarding-feature .feature-glyph svg{width:34px!important;height:34px!important} .onboarding-setup-card{padding:13px} .onboarding-setup-card .top-gap{margin-top:12px} } @media (max-width:380px){ .onboarding-shell{padding-left:15px;padding-right:15px} .onboarding-pillars{gap:6px} .onboarding-pillar{padding-left:4px;padding-right:4px} } /* v252 Reward Bank premium goal experience */ .reward-bank-modal{width:min(94vw,480px);overflow:hidden} .reward-bank-modal .modal-head{margin-bottom:2px} .balance-row{position:relative;padding:8px 0 16px} .balance-row:before{content:"";position:absolute;left:50%;top:42%;width:190px;height:90px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(255,196,72,.12),transparent 68%);pointer-events:none} .balance-row strong{position:relative;font-family:'Space Grotesk',sans-serif;font-size:48px;line-height:1;color:#ffd166;text-shadow:0 0 28px rgba(255,193,72,.18)} .balance-row small{position:relative;display:block;margin-top:5px;font-size:11px;letter-spacing:.03em} .reward-form-intro{padding:14px 15px;margin:0 0 14px;border-radius:16px;background:linear-gradient(135deg,rgba(85,240,167,.07),rgba(84,217,255,.035));border:1px solid rgba(84,217,255,.13)} .reward-form-intro strong,.reward-form-intro span{display:block}.reward-form-intro strong{font-size:14px;color:#f3f6fb}.reward-form-intro span{margin-top:4px;font-size:11.5px;line-height:1.45;color:#929aab} .reward-point-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:9px} .reward-point-presets button{padding:10px 4px;border-radius:12px;background:#0d1119;border:1px solid rgba(255,255,255,.09);color:#cfd5e0;font-size:13px;font-weight:800;transition:.18s ease} .reward-point-presets button.selected{border-color:rgba(85,240,167,.5);background:linear-gradient(135deg,rgba(85,240,167,.15),rgba(84,217,255,.08));color:#75f3c4;box-shadow:0 0 18px rgba(85,240,167,.08)} .reward-goal-hero{position:relative;text-align:center;padding:2px 14px 18px;margin-top:-2px} .reward-goal-art-wrap{position:relative;width:min(68vw,270px);height:min(55vw,220px);max-height:220px;margin:0 auto 26px;display:grid;place-items:center;isolation:isolate} .reward-goal-glow{position:absolute;width:78%;height:58%;left:11%;bottom:9%;border-radius:50%;background:radial-gradient(ellipse,rgba(84,217,255,.15),rgba(108,95,255,.08) 42%,transparent 72%);filter:blur(8px)} .reward-goal-art{position:relative;z-index:1;display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))} .reward-goal-art-fallback{position:relative;z-index:1;width:132px;height:132px;border-radius:38px;display:grid;place-items:center;font-size:64px;background:radial-gradient(circle at 35% 25%,rgba(255,209,102,.18),rgba(17,21,31,.96) 62%);border:1px solid rgba(255,209,102,.2);box-shadow:0 18px 38px rgba(0,0,0,.28)} .reward-goal-kicker{position:relative;z-index:3;margin:0 0 5px;font-size:9px;font-weight:900;letter-spacing:.22em;color:#e8c86f} .reward-goal-hero h3{position:relative;z-index:3;margin:0;font-family:'Space Grotesk',sans-serif;font-size:24px;line-height:1.15;color:#f7f8fb} .reward-goal-progress-line{display:flex;align-items:baseline;justify-content:space-between;margin:16px 1px 8px;font-variant-numeric:tabular-nums}.reward-goal-progress-line strong{font-size:15px;color:#f1f4f8}.reward-goal-progress-line span{font-size:12px;font-weight:800;color:#64e9ba} .reward-goal-hero .goal-bar-track{height:9px;margin-bottom:10px;background:rgba(255,255,255,.065);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)} .reward-goal-hero .goal-bar-fill{background:linear-gradient(90deg,#55f0a7,#54d9ff);box-shadow:0 0 14px rgba(85,240,167,.22)} .reward-goal-hero .goal-note{font-size:12.5px;color:#9aa3b4} .cashout-btn{margin-top:0;background:linear-gradient(135deg,#55f0a7,#54d9ff);color:#07130e;box-shadow:0 8px 24px rgba(84,217,255,.08)} .cashout-btn:disabled{box-shadow:none;background:#202631;color:#747e91;opacity:1} .goal-save-btn{box-shadow:0 10px 28px rgba(84,217,255,.09)} @media(max-height:720px){.reward-goal-art-wrap{height:170px;margin-bottom:16px}.reward-goal-hero{padding-bottom:12px}.balance-row strong{font-size:42px}} /* v254 Reward Bank cash-out celebration */ .reward-cashout-dialog{width:min(94vw,470px);max-height:94dvh;padding:0;border:0;background:transparent;color:#f7f8fb;overflow:visible} .reward-cashout-dialog::backdrop{background:rgba(2,5,10,.82);backdrop-filter:blur(9px)} .reward-cashout-shell{position:relative;overflow:hidden;text-align:center;padding:22px 22px 20px;border-radius:30px;background:linear-gradient(155deg,#101927 0%,#0c111c 52%,#151124 100%) padding-box,linear-gradient(125deg,#42dfe7,#7165ff 52%,#f06191) border-box;border:1.5px solid transparent;box-shadow:0 28px 70px rgba(0,0,0,.5)} .reward-cashout-shell:before{content:"";position:absolute;left:50%;top:36%;width:330px;height:300px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(84,217,255,.13),rgba(116,91,255,.07) 48%,transparent 72%);pointer-events:none} .reward-cashout-brand{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:800}.reward-cashout-brand img{width:30px;height:30px;border-radius:8px}.reward-cashout-kicker{position:relative;z-index:3;margin:0;color:#ffd166;font-size:10px;font-weight:900;letter-spacing:.24em} .reward-cashout-art-wrap{position:relative;z-index:2;width:min(69vw,290px);height:min(58vw,245px);max-height:245px;margin:5px auto 4px;display:grid;place-items:center;isolation:isolate}.reward-cashout-glow{position:absolute;width:83%;height:60%;bottom:7%;border-radius:50%;background:radial-gradient(ellipse,rgba(84,217,255,.18),rgba(112,96,255,.08) 48%,transparent 72%);filter:blur(9px)}.reward-cashout-art{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 26px rgba(0,0,0,.42));transform:scale(.94);opacity:0}.reward-cashout-live .reward-cashout-art{animation:rewardCashoutArtIn .7s cubic-bezier(.18,.85,.3,1.16) forwards}.reward-cashout-fallback{position:relative;z-index:2;font-size:84px;filter:drop-shadow(0 16px 25px rgba(0,0,0,.35))} .reward-cashout-shell h2{position:relative;z-index:3;margin:2px 0 4px;font-family:'Space Grotesk',sans-serif;font-size:30px;line-height:1.05}.reward-cashout-title{position:relative;z-index:3;margin:0 auto 14px;max-width:92%;font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:800;color:#dfe5f0}.reward-cashout-points{position:relative;z-index:3;display:flex;align-items:baseline;justify-content:center;gap:7px;margin:0 0 8px}.reward-cashout-points strong{font-family:'Space Grotesk',sans-serif;font-size:28px;color:#ffd166}.reward-cashout-points span{font-size:11px;color:#9ea8b9}.reward-cashout-message{position:relative;z-index:3;margin:0 auto 17px;max-width:370px;color:#9fa8ba;font-size:12.5px;line-height:1.48} .reward-cashout-share-btn,.reward-cashout-continue-btn{position:relative;z-index:4;width:100%;border-radius:15px;font-weight:850}.reward-cashout-share-btn{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:9px;padding:13px 16px;background:linear-gradient(135deg,rgba(84,217,255,.16),rgba(112,96,255,.15));border:1px solid rgba(84,217,255,.32);color:#eafaff}.reward-cashout-share-btn svg{width:19px;height:19px}.reward-cashout-continue-btn{padding:14px 16px;background:linear-gradient(135deg,#55f0a7,#54d9ff);border:0;color:#07130e;box-shadow:0 10px 27px rgba(84,217,255,.12)} .reward-cashout-confetti{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}.reward-cashout-confetti i{position:absolute;left:var(--x);top:-24px;width:7px;height:15px;border-radius:2px;opacity:.9;animation:rewardCashoutFall var(--dur) linear var(--delay) infinite;transform:translate3d(0,-30px,0) rotate(0)}.reward-cashout-confetti i.round{width:8px;height:8px;border-radius:50%} @keyframes rewardCashoutFall{0%{transform:translate3d(0,-35px,0) rotate(0);opacity:0}8%{opacity:.92}100%{transform:translate3d(var(--drift),calc(94dvh + 40px),0) rotate(var(--rot));opacity:.72}} @keyframes rewardCashoutArtIn{0%{transform:scale(.72) translateY(16px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}} @media(max-height:720px){.reward-cashout-shell{padding-top:16px}.reward-cashout-brand{margin-bottom:9px}.reward-cashout-art-wrap{height:175px;margin-top:0}.reward-cashout-shell h2{font-size:26px}.reward-cashout-message{margin-bottom:12px}} @media(prefers-reduced-motion:reduce){.reward-cashout-confetti i,.reward-cashout-live .reward-cashout-art{animation:none!important}.reward-cashout-art{opacity:1;transform:none}} /* v255 premium Settings refresh */ .settings-premium-dialog{width:min(94vw,760px)!important;max-width:760px!important;max-height:94dvh!important;padding:0!important;border:1px solid rgba(105,139,183,.28)!important;border-radius:30px!important;background:linear-gradient(180deg,#0b1220 0%,#0b0d16 100%)!important;box-shadow:0 28px 80px #000b,0 0 48px rgba(43,132,255,.08)!important;overflow:auto!important;color:#f5f7fb} .settings-premium-form{padding:22px 22px 28px;display:grid;gap:14px;background:radial-gradient(circle at 8% 0%,rgba(25,146,255,.13),transparent 24%),radial-gradient(circle at 96% 95%,rgba(120,65,255,.1),transparent 25%)} .settings-premium-head{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;text-align:center;gap:10px;padding:0 0 4px}.settings-premium-head h3{font-size:28px;margin:0}.settings-premium-head p{margin:4px 0 0;color:#9fb1cb;font-size:14px}.settings-back-btn,.settings-head-glyph{width:46px;height:46px;border-radius:16px;border:1px solid #294768;background:linear-gradient(180deg,#19324f,#101d30);color:#dceaff;font-size:32px;display:grid;place-items:center}.settings-head-glyph{font-size:22px} .settings-profile-card,.settings-section-card{border:1px solid rgba(68,153,220,.42);border-radius:24px;background:linear-gradient(145deg,rgba(16,38,59,.92),rgba(10,19,32,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 28px rgba(0,0,0,.18)} .settings-profile-card{min-height:138px;padding:18px;display:grid;grid-template-columns:96px 1fr 74px;gap:18px;align-items:center;background:radial-gradient(circle at 90% 50%,rgba(28,226,202,.16),transparent 28%),linear-gradient(145deg,#12324d,#0c1727)}.settings-avatar{width:92px!important;height:92px!important;border:2px solid #6de9ee!important}.settings-profile-copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.settings-profile-copy>strong{font-size:27px}.settings-profile-copy>span{color:#7fdce7}.settings-mini-btn{margin-top:10px!important;padding:10px 16px!important;border-radius:14px!important;border:1px solid #31577c!important;background:#152941!important;color:#f4f7fb!important;font-weight:800!important}.settings-brand-mark{font-size:62px;color:#42e2d2;text-shadow:0 0 22px #24cfd899} .settings-section-card{padding:18px}.settings-section-title{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;margin-bottom:14px}.settings-section-title>div{display:flex;flex-direction:column;gap:3px}.settings-section-title strong{font-size:20px}.settings-section-title span:not(.settings-section-icon):not(.settings-status-pill){color:#9eb1ca;font-size:13px}.settings-section-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:27px;color:#56e9d4;background:#102b38;border:1px solid #245568}.settings-crown{color:#ffd65e;background:#392e12;border-color:#6f5b20}.settings-status-pill{padding:6px 13px;border-radius:999px;background:#17253a;border:1px solid #33465e;color:#aab7c9;font-weight:800}.settings-status-pill.active{color:#70ffd0;background:#073d36;border-color:#15cda7;box-shadow:0 0 16px #15cda744} .settings-compact-field{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:12px;margin:0 0 12px!important;padding:10px 14px;border:1px solid #26394e;border-radius:16px;background:#0b1421}.settings-compact-field>span,.settings-value-tile>span{color:#aebbd0;font-size:13px}.settings-compact-field input{margin:0!important;background:transparent!important;border:0!important;padding:8px!important;font-weight:800;color:#fff!important}.settings-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.settings-value-tile{margin:0!important;padding:14px;border:1px solid #2b4c68;border-radius:18px;background:#0d1b2b;min-height:84px}.settings-value-tile div{display:flex;align-items:center}.settings-value-tile input,.settings-value-tile select{margin:5px 0 0!important;padding:4px 0!important;border:0!important;background:transparent!important;color:#fff!important;font-size:23px!important;font-weight:900!important;width:100%}.settings-value-tile b{font-size:20px}.settings-save-btn{width:100%;margin-top:12px!important;border:0!important;border-radius:17px!important;padding:14px!important;font-weight:900!important;background:linear-gradient(90deg,#2bd2b5,#5bd7e8,#ff705f)!important;color:#071019!important} .settings-status-note,.settings-help{color:#aab5c9;margin:6px 0 10px;font-size:13px;line-height:1.45}.settings-actions{margin-top:12px}.settings-action-btn{min-height:78px;border:1px solid #275e91;border-radius:18px;background:linear-gradient(145deg,#12355a,#10233d);color:white;text-align:left;padding:12px 12px 12px 52px;position:relative}.settings-action-btn>span{position:absolute;left:15px;top:17px;font-size:30px;color:#67dfff}.settings-action-btn b,.settings-action-btn small{display:block}.settings-action-btn small{color:#aebbd0;margin-top:4px}.settings-row-select{display:grid;grid-template-columns:90px 1fr;align-items:center;border:1px solid #2b4863;border-radius:17px;padding:8px 14px;background:#0d1b2b}.settings-row-select select{margin:0!important;border:0!important;background:transparent!important;color:white!important;font-weight:800!important}.settings-vacation-btn{margin-top:12px!important}.settings-bottom-help{margin-bottom:0}.settings-row-button{width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid #2b4863;border-radius:17px;padding:14px 16px;background:#0d1b2b;color:white;font-weight:800}.settings-row-button span{font-size:26px;color:#9dc8f5}.settings-danger-row{width:100%;text-align:left;padding:14px 16px;border-radius:17px;border:1px solid #9a3347;background:linear-gradient(90deg,rgba(104,21,39,.45),rgba(51,19,31,.62));color:#ff8ea1}.settings-danger-row b,.settings-danger-row span{display:block}.settings-danger-row span{font-size:12px;margin-top:4px;color:#f07d91}.settings-footer{text-align:center;padding:10px 0 2px;display:grid;gap:6px;color:#8297b8}.settings-footer strong{font-size:11px;letter-spacing:.22em;color:#6e9bd7}.settings-footer span{font-size:18px;font-weight:900;color:#eaf5ff}.settings-footer small{font-size:11px;color:#77859c} @media(max-width:560px){.settings-premium-dialog{width:calc(100vw - 18px)!important;border-radius:24px!important}.settings-premium-form{padding:16px 14px 22px}.settings-profile-card{grid-template-columns:78px 1fr 44px;gap:12px}.settings-avatar{width:76px!important;height:76px!important}.settings-brand-mark{font-size:38px}.settings-two-col{grid-template-columns:1fr 1fr}.settings-section-card{padding:15px}.settings-section-title strong{font-size:18px}.settings-action-btn{padding-left:42px;font-size:12px}.settings-action-btn>span{left:11px}.settings-premium-head p{font-size:12px}} /* v256 Reward Ready state + incomplete food logging checkout guard */ .premium-bank-card{position:relative;isolation:isolate;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease,transform .2s ease,background .25s ease} .premium-bank-card.reward-ready{ border-color:rgba(95,235,205,.7); background:linear-gradient(135deg,rgba(85,240,167,.13),rgba(84,217,255,.08) 55%,rgba(255,209,102,.08)); box-shadow:0 0 0 1px rgba(84,217,255,.14),0 0 28px rgba(84,217,255,.16),0 0 46px rgba(255,209,102,.08); animation:rewardReadyPulse 2.2s ease-in-out infinite; } .premium-bank-card.reward-ready:before{ content:"REWARD READY"; position:absolute; top:9px; right:36px; z-index:3; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,209,102,.42); background:linear-gradient(135deg,rgba(255,209,102,.16),rgba(85,240,167,.12)); color:#ffe49a; font-size:8px; line-height:1; font-weight:950; letter-spacing:.14em; box-shadow:0 0 15px rgba(255,209,102,.12); } .premium-bank-card.reward-ready:after{ content:""; position:absolute; inset:-45%; z-index:-1; background:conic-gradient(from 0deg,transparent 0 28%,rgba(84,217,255,.15) 36%,transparent 44% 68%,rgba(255,209,102,.12) 76%,transparent 84%); animation:rewardReadySweep 5.2s linear infinite; } .premium-bank-card.reward-ready .premium-bank-icon{border-color:rgba(85,240,167,.46);box-shadow:0 0 20px rgba(84,217,255,.18)} .premium-bank-card.reward-ready .bank-copy>span{color:#86f3d4} .premium-bank-card.reward-ready #bankGoalText{color:#e8fff7;font-weight:800} .premium-bank-card.reward-ready .bank-goal-bar i{background:linear-gradient(90deg,#55f0a7,#54d9ff,#ffd166);box-shadow:0 0 12px rgba(84,217,255,.32)} @keyframes rewardReadyPulse{0%,100%{box-shadow:0 0 0 1px rgba(84,217,255,.12),0 0 20px rgba(84,217,255,.12),0 0 38px rgba(255,209,102,.06)}50%{box-shadow:0 0 0 1px rgba(85,240,167,.22),0 0 34px rgba(84,217,255,.24),0 0 56px rgba(255,209,102,.12)}} @keyframes rewardReadySweep{to{transform:rotate(360deg)}} .checkout-incomplete-dialog{width:min(92vw,430px);padding:24px 22px 20px!important;text-align:center;border:1px solid rgba(255,209,102,.28)!important;border-radius:26px!important;background:radial-gradient(circle at 50% 0%,rgba(255,209,102,.09),transparent 34%),linear-gradient(160deg,#111827,#0a0f18)!important;color:#f5f7fb!important;box-shadow:0 28px 70px rgba(0,0,0,.55),0 0 38px rgba(255,209,102,.06)!important} .checkout-incomplete-dialog::backdrop{background:rgba(2,5,10,.78);backdrop-filter:blur(8px)} .checkout-incomplete-icon{width:62px;height:62px;margin:0 auto 14px;border-radius:20px;display:grid;place-items:center;color:#ffd166;background:linear-gradient(145deg,rgba(255,209,102,.12),rgba(255,255,255,.03));border:1px solid rgba(255,209,102,.28);box-shadow:0 0 26px rgba(255,209,102,.08)} .checkout-incomplete-icon svg{width:34px;height:34px;stroke:currentColor;stroke-width:2.3;stroke-linecap:round} .checkout-incomplete-dialog .eyebrow{margin:0 0 7px;color:#e4bc59} .checkout-incomplete-dialog h3{margin:0 auto 12px;max-width:320px;font-family:'Space Grotesk',sans-serif;font-size:24px;line-height:1.12} .checkout-incomplete-count{display:inline-block;margin:0 0 11px;padding:6px 10px;border-radius:999px;background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.18);color:#ffe49a;font-size:11px;letter-spacing:.04em} .checkout-incomplete-text{margin:0 auto 12px;max-width:350px;color:#aeb8c9;font-size:13px;line-height:1.52} .checkout-incomplete-note{margin:0 0 18px;padding:10px 12px;border-radius:14px;background:rgba(84,217,255,.045);border:1px solid rgba(84,217,255,.10);color:#8594aa;font-size:10.5px;line-height:1.42} .checkout-incomplete-primary{width:100%;margin:0 0 8px!important;background:linear-gradient(135deg,#55f0a7,#54d9ff)!important;color:#07130e!important;border:0!important} .checkout-incomplete-secondary{width:100%;margin:0!important} @media(prefers-reduced-motion:reduce){.premium-bank-card.reward-ready,.premium-bank-card.reward-ready:after{animation:none!important}}