/* RepLog website: live app screens in the phone frames and the live coach dashboard (site3, 20 Oct 2026).
   Driven by /js/site-phones.js. Phone screens are drawn on a 300-unit-wide grid that scales with the frame
   (100cqw = 300 units, so 3 units = 1cqw): text stays crisp at every size. Motion is transform/opacity only.
   No JavaScript: <noscript> in <head> hides .lv and the original screenshot inside each frame shows instead.
   Generated from scratchpad/agents/site3/src/phones.src.css (u units); edit either, keep them in step. */

/* ------------------------------------------------ shared phone screen ------------------------------------------------ */
.lv { position: relative; display: block; width: 100%; aspect-ratio: 600 / 1333; overflow: hidden; container-type: inline-size; border-radius: inherit; background: #0b0c10; color: #f2f3f5; font-family: var(--font, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif); line-height: 1.25; text-align: start; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; font-variant-numeric: tabular-nums; isolation: isolate; }
.phone .lv { border-radius: 30px; }
@media (max-width: 480px) { .phone .lv { border-radius: 22px; } }
.hx-ph .scr > .lv { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .7s ease; }
.hx-ph .scr > .lv.lv-in { opacity: 1; }
.lv-s { position: absolute; inset: 0; font-size: 4cqw; transition: opacity .32s ease; }
.lv.lv-fade .lv-s { opacity: 0; }
.lv b, .lv strong { font-weight: 800; }
.lv small { font-size: inherit; }
.lv i, .lv em { font-style: normal; }
.lv svg { display: block; flex: none; }
.lv img { display: block; }
:where(.lv) button { all: unset; box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1.333cqw; cursor: pointer; border-radius: 999px; transition: transform .18s cubic-bezier(.2,.8,.2,1); -webkit-tap-highlight-color: transparent; }
.lv button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .2s; pointer-events: none; }
@media (hover: hover) { .lv button:hover::before { opacity: .1; } }
.lv button:active, .lv button.lv-press { transform: scale(.95); }
.lv button:focus-visible { outline: 2px solid #ffb27a; outline-offset: 1px; }
.lv [hidden] { display: none !important; }
.lv-sb { display: flex; align-items: center; justify-content: space-between; height: 10cqw; padding: 1.333cqw 8cqw 0; font-size: 3.667cqw; font-weight: 700; letter-spacing: .02em; }
.lv-sb i { width: 10cqw; height: 3cqw; background: radial-gradient(circle at 25% 50%, #f2f3f5 1.067cqw, transparent 1.2cqw), linear-gradient(#f2f3f5, #f2f3f5) 78% 50% / 2.333cqw 3cqw no-repeat; border-radius: 0.667cqw; }
.lv-k { margin: 4.333cqw 5cqw 2cqw; font-size: 3cqw; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #9aa0aa; }
.lv-muted { color: #9aa0aa; }
.lv-hd { display: flex; align-items: center; gap: 2.333cqw; padding: 3cqw 5cqw 0; }
.lv-hd > div { flex: 1; min-width: 0; }
.lv-h1 { display: block; font-size: 8.333cqw; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.lv-hd small { display: block; margin-top: 0.667cqw; font-size: 3.5cqw; color: #9aa0aa; }
.lv-ib { width: 10.667cqw; height: 10.667cqw; flex: none; background: #1b1d23; color: #e9ebef; }
.lv-ib svg { width: 5cqw; height: 5cqw; }
span.lv-ib { display: grid; place-items: center; border-radius: 50%; }
.lv-food span.lv-ib { background: none; }
.lv-dnav > span { display: grid; place-items: center; width: 7.333cqw; height: 7.333cqw; }
.lv-dnav > span svg { width: 4cqw; height: 4cqw; }
.lv-av { display: grid; place-items: center; width: 10.667cqw; height: 10.667cqw; flex: none; border-radius: 50%; background: #d6d1ee; color: #15171c; font-size: 3.667cqw; font-weight: 800; }
.lv-badge { position: absolute; top: -0.667cqw; inset-inline-end: -0.667cqw; display: grid; place-items: center; min-width: 4.333cqw; height: 4.333cqw; border-radius: 2.333cqw; background: #e8714f; color: #fff; font-size: 2.5cqw; font-weight: 800; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.lv-msg .lv-badge { transform: scale(1); }
.lv-card { margin: 2.667cqw 4.333cqw 0; padding: 3.333cqw 4cqw; border-radius: 4.667cqw; background: #16181d; }
.lv-touch { position: absolute; left: 0; top: 0; z-index: 30; width: 8cqw; height: 8cqw; margin: -4cqw 0 0 -4cqw; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 0 0 0.5cqw rgba(255,255,255,.35), 0 1.333cqw 4.667cqw rgba(0,0,0,.45); opacity: 0; pointer-events: none; transform: translate3d(var(--tx, 150px), var(--ty, 300px), 0) scale(.7); transition: transform .6s cubic-bezier(.3,.7,.2,1), opacity .3s; }
.lv-touch.on { opacity: 1; transform: translate3d(var(--tx), var(--ty), 0) scale(1); }
.lv-touch.tap { transform: translate3d(var(--tx), var(--ty), 0) scale(.8); transition-duration: .12s; }
.lv-touch::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0.5cqw solid rgba(255,255,255,.9); opacity: 0; }
.lv-touch.tap::after { animation: lvRip .6s ease-out; }
@keyframes lvRip { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.lv-toast { position: absolute; top: 11.333cqw; left: 50%; z-index: 25; display: flex; align-items: center; gap: 1.667cqw; padding: 2cqw 3.667cqw; border-radius: 999px; background: #b6f36b; color: #15171c; font-size: 3.167cqw; font-weight: 800; white-space: nowrap; box-shadow: 0 2cqw 6cqw rgba(0,0,0,.4); transform: translate3d(-50%, -20cqw, 0); transition: transform .45s cubic-bezier(.2,.9,.25,1.15); pointer-events: none; }
.lv-toast svg { width: 3.667cqw; height: 3.667cqw; }
.lv-toast.on { transform: translate3d(-50%, 0, 0); }
.lv-home { position: absolute; bottom: 1.667cqw; left: 50%; width: 30.667cqw; height: 1.167cqw; margin-left: -15.333cqw; border-radius: 0.667cqw; background: rgba(255,255,255,.85); }

/* bottom navigation (Today · Plans · Food · History · More) */
.lv-nav { position: absolute; left: 3.667cqw; right: 3.667cqw; bottom: 4.667cqw; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr); height: 16.667cqw; border-radius: 8.333cqw; background: rgba(27,29,35,.94); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 -3.333cqw 8.667cqw rgba(0,0,0,.5); }
.lv-nav button { flex-direction: column; gap: 1cqw; border-radius: 4.667cqw; font-size: 2.833cqw; font-weight: 700; color: #c9ccd3; }
.lv-nav button::before { display: none; }
.lv-nav button svg { position: relative; z-index: 1; width: 5cqw; height: 5cqw; margin-top: 0.667cqw; transition: color .2s; }
.lv-nav button[aria-current="page"] svg { color: #15171c; }
.lv-nav button[aria-current="page"] span { color: #fff; }
.lv-pill { position: absolute; top: 1.833cqw; left: 2.6cqw; width: 13.333cqw; height: 7.667cqw; border-radius: 4cqw; background: #f2f3f5; transform: translateX(calc(var(--i, 0) * 18.533cqw)); transition: transform .5s cubic-bezier(.3,1.25,.5,1); }
[dir="rtl"] .lv-pill { left: auto; right: 2.6cqw; transform: translateX(calc(var(--i, 0) * -18.533cqw)); }
@media (hover: hover) { .lv-nav button:hover span { color: #fff; } }

/* bottom sheet */
.lv-dim { position: absolute; inset: 0; z-index: 14; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .35s; }
.lv-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 15; padding: 2.667cqw 4.667cqw 7.333cqw; border-radius: 6.667cqw 6.667cqw 0 0; background: #1b1d23; box-shadow: 0 -3.333cqw 10cqw rgba(0,0,0,.5); transform: translate3d(0, 105%, 0); transition: transform .5s cubic-bezier(.2,.9,.25,1); }
.lv-sheet-on .lv-dim { opacity: 1; pointer-events: auto; }
.lv-sheet-on .lv-sheet { transform: none; }
.lv-grab { display: block; width: 12cqw; height: 1.333cqw; margin: 0 auto 3.333cqw; border-radius: 0.667cqw; background: rgba(255,255,255,.25); }
.lv-sheet-t { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.667cqw; font-size: 4.333cqw; font-weight: 800; }
.lv-x { width: 8cqw; height: 8cqw; background: #2a2d35; color: #e9ebef; font-size: 4.333cqw; }

/* ------------------------------------------------ Today ------------------------------------------------ */
.lv-free { display: block !important; margin: 2.333cqw 8.333cqw 0; font-size: 3.333cqw; font-weight: 700; color: #b9bec7; }
.lv-streak { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.lv-streak b { display: block; font-size: 3.833cqw; }
.lv-streak small { display: block; margin-top: 0.667cqw; font-size: 2.833cqw; color: #9aa0aa; }
.lv-days { display: flex; gap: 1.5cqw; direction: ltr; }
.lv-days span { display: flex; flex-direction: column; align-items: center; gap: 1cqw; font-size: 2.333cqw; color: #9aa0aa; }
.lv-days i { width: 3cqw; height: 3cqw; border-radius: 50%; background: #3a3d45; }
.lv-days .on i { background: #b6f36b; }
.lv-days .now { color: #fff; font-weight: 800; }
.lv-days .now i { transform: scale(0); background: #b6f36b; transition: transform .45s cubic-bezier(.3,1.6,.5,1); box-shadow: 0 0 0 0.5cqw #3a3d45; }
.lv-trained .lv-days .now i { transform: scale(1); }
.lv-mus { display: flex; gap: 2.667cqw; overflow-x: auto; padding: 0 4.333cqw; scroll-padding: 0 4.333cqw; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.lv-mus::-webkit-scrollbar { display: none; }
.lv-mus:focus-visible { outline: 2px solid #ffb27a; outline-offset: -2px; }
.lv-mc { flex: 0 0 37.333cqw; scroll-snap-align: start; padding: 2.667cqw 3cqw 3cqw; border-radius: 4.333cqw; background: #14161b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.lv .lv-mc img { width: auto; height: 18cqw; border-radius: 0; margin: 0 0 1.667cqw; pointer-events: none; }
.lv-mc > b { display: block; font-size: 4.5cqw; }
.lv-tr { display: flex; align-items: center; gap: 1cqw; margin-top: 0.667cqw; font-size: 2.833cqw; font-weight: 800; color: #d0d3d9; }
.lv-tr.up { color: #b6f36b; }
.lv-mc small { display: block; margin-top: 0.667cqw; font-size: 2.5cqw; color: #9aa0aa; }
.lv-mc .lv-sets { margin-top: 2cqw; font-size: 2.667cqw; color: #c9ccd3; }
.lv-mc .lv-sets b { font-size: 3.5cqw; color: #fff; margin-inline-end: 0.667cqw; }
.lv-ticks { display: block; height: 1.833cqw; margin-top: 1.333cqw; background: repeating-linear-gradient(90deg, #f07a3c 0 0.867cqw, transparent 0 1.467cqw) 0 0 / calc(var(--p) * 100%) 100% no-repeat, repeating-linear-gradient(90deg, #3a3d45 0 0.867cqw, transparent 0 1.467cqw); }
[dir="rtl"] .lv-ticks { transform: scaleX(-1); }
.lv-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2.667cqw; margin: 2.667cqw 4.333cqw 0; }
.lv-tile { display: block !important; padding: 3cqw 3.667cqw 3.333cqw !important; border-radius: 5cqw !important; color: #15171c; text-align: start; }
.lv-tile small { display: block; font-size: 3cqw; font-weight: 700; }
.lv-tile > b { display: flex; align-items: baseline; gap: 1cqw; margin-top: 0.333cqw; font-size: 7.333cqw; letter-spacing: -.02em; }
.lv-tile > b em { font-size: 3cqw; font-weight: 600; letter-spacing: 0; }
.lv-tile > span { display: block; font-size: 2.667cqw; opacity: .78; }
.lv-steps { background: linear-gradient(140deg, #cfe3d3 0%, #c0ec8a 100%); }
.lv-foodt { background: linear-gradient(140deg, #d6d1ee 0%, #f1b4d9 100%); }
.lv-dots { display: flex; gap: 1.067cqw; margin-top: 2.333cqw; }
.lv-dots i { width: 2.167cqw; height: 2.167cqw; border-radius: 50%; background: #15171c; opacity: .22; transition: opacity .4s; }
.lv-dots i.on { opacity: 1; }
.lv-water { position: relative; margin-top: 2.667cqw; padding-bottom: 16cqw; }
.lv-water > small { display: block; font-size: 3.167cqw; font-weight: 600; color: #c9ccd3; }
.lv-wbig { display: flex; align-items: baseline; gap: 1.333cqw; margin-top: 0.667cqw; }
.lv-wbig b { font-size: 8.333cqw; letter-spacing: -.02em; }
.lv-wbig span, .lv-wleft { font-size: 3.167cqw; color: #9aa0aa; }
.lv-wleft b { color: #c9ccd3; font-weight: 700; }
.lv-glass { position: absolute; top: 4cqw; inset-inline-end: 5.333cqw; width: 10cqw; height: 12.667cqw; overflow: hidden; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); background: rgba(255,255,255,.08); }
.lv-glass::after { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 0.733cqw 0, 13% calc(100% - 0.667cqw), 87% calc(100% - 0.667cqw), calc(100% - 0.733cqw) 0, 100% 0, 88% 100%, 12% 100%); background: #c9ccd3; }
.lv-glass i { position: absolute; inset: 0; background: linear-gradient(#6fb0ff, #3d86e0); transform-origin: 50% 100%; transform: scaleY(var(--f, .54)); transition: transform .8s cubic-bezier(.3,.9,.3,1); }
.lv-glass i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1cqw; background: rgba(255,255,255,.35); }
.lv-wt { position: relative; height: 4.333cqw; width: 56.667cqw; margin: 3cqw auto 0; overflow: hidden; }
.lv-wt::before, .lv-wt b::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #3a3d45 0 0.867cqw, transparent 0 2.023cqw); }
.lv-wt b { position: absolute; inset: 0; overflow: hidden; transform: translateX(calc((var(--f, .54) - 1) * 100%)); transition: transform .8s cubic-bezier(.3,.9,.3,1); }
.lv-wt b::before { background: repeating-linear-gradient(90deg, #5aa2ff 0 0.867cqw, transparent 0 2.023cqw); transform: translateX(calc((1 - var(--f, .54)) * 100%)); transition: transform .8s cubic-bezier(.3,.9,.3,1); }
[dir="rtl"] .lv-wt { transform: scaleX(-1); }
.lv-wbtn { position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; display: flex; gap: 2cqw; }
.lv-wbtn button { height: 8.333cqw; padding: 0 3.667cqw; background: #26292f; color: #e9ebef; font-size: 3.167cqw; font-weight: 800; }
.lv-wbtn button.lv-blue { background: #4a90e2; color: #08111f; }

/* ------------------------------------------------ Immersive workout ------------------------------------------------ */
.lv-imm { background: #000; }
.lv-itop { display: flex; align-items: center; gap: 3cqw; padding: 4cqw 4cqw 0; }
.lv-itop > div { flex: 1; min-width: 0; }
.lv-itop b { display: block; font-size: 3.5cqw; font-weight: 700; }
.lv-itop small { display: block; margin-top: 0.333cqw; font-size: 2.833cqw; color: #9aa0aa; }
.lv-itop .lv-ib { background: #1d1f25; }
.lv-fin { height: 9.333cqw; padding: 0 4.333cqw; background: #fff; color: #000; font-size: 3.5cqw; font-weight: 800; }
.lv-media { position: relative; height: 80.333cqw; margin: 3.667cqw 4cqw 0; overflow: hidden; border-radius: 5.333cqw; background: #fff; }
.lv-vid { position: absolute; inset: 0; background: #fff url("/img/shot-immersive.jpg") -4cqw -28.667cqw / 100cqw auto no-repeat; transform-origin: 48% 55%; }
.lv-media.play .lv-vid { animation: lvKen 6s ease-in-out infinite alternate; }
@keyframes lvKen { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(-1.5%, -1%, 0); } }
.lv-hot { position: absolute; left: 37.333cqw; top: 27.333cqw; width: 15.333cqw; height: 11.333cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,40,40,.65), rgba(255,40,40,0)); opacity: 0; pointer-events: none; }
.lv-media.play .lv-hot { animation: lvHot 1.6s ease-in-out infinite; }
@keyframes lvHot { 0%, 100% { opacity: .15; transform: scale(.9); } 50% { opacity: .85; transform: scale(1.12); } }
.lv-pl { position: absolute !important; right: 3cqw; bottom: 3cqw; width: 10cqw; height: 10cqw; background: #6b6d72; color: #fff; }
.lv-pl svg { width: 4.333cqw; height: 4.333cqw; }
.lv-pl .lv-ip, .lv-media.play .lv-pl .lv-ipl { display: none; }
.lv-media.play .lv-pl .lv-ip { display: block; }
.lv-ex { margin-top: 3.333cqw; text-align: center; }
.lv-ex small { display: block; font-size: 2.667cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9aa0aa; }
.lv-ex b { display: block; margin-top: 1cqw; font-size: 5.167cqw; letter-spacing: -.01em; }
.lv-ex span { display: block; margin-top: 1cqw; padding: 0 3.333cqw; font-size: 2.433cqw; color: #9aa0aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-sdots { display: flex; justify-content: center; gap: 1.333cqw; margin-top: 1.667cqw; }
.lv-sdots i { width: 2cqw; height: 2cqw; border-radius: 50%; background: #3a3d45; transition: transform .3s; }
.lv-sdots i.cur { background: transparent; box-shadow: inset 0 0 0 0.467cqw #fff; }
.lv-sdots i.done { background: #b6f36b; transform: scale(1.15); }
.lv-clock { position: relative; height: 20.667cqw; margin-top: 1cqw; text-align: center; }
.lv-clock > b { display: block; font-size: 13.333cqw; font-weight: 800; letter-spacing: .02em; line-height: 1.15; direction: ltr; transition: color .3s; }
.lv-rest .lv-clock > b { color: #ff9a7a; }
.lv-clab { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 2cqw; height: 5cqw; font-size: 2.5cqw; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9aa0aa; transition: opacity .3s, transform .3s; }
.lv-clab.b { opacity: 0; transform: translateY(1.667cqw); pointer-events: none; }
.lv-rest .lv-clab.a { opacity: 0; transform: translateY(-1.667cqw); }
.lv-rest .lv-clab.b { opacity: 1; transform: none; pointer-events: auto; }
.lv-clab.b > span { color: #ff9a7a; }
.lv-skip { height: 5cqw; padding: 0 2.333cqw; background: #26292f; color: #fff; letter-spacing: .02em; text-transform: none; font-size: 2.667cqw; }
.lv-setl { margin-top: 1.667cqw; text-align: center; font-size: 3.333cqw; font-weight: 800; }
.lv-steps2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.667cqw; margin: 2.333cqw 4cqw 0; }
.lv-stp { display: flex; align-items: center; justify-content: space-between; height: 14.667cqw; padding: 0 2cqw; border-radius: 4.667cqw; background: #16181d; }
.lv-stp button { width: 10cqw; height: 10cqw; background: #26292f; color: #fff; font-size: 5cqw; font-weight: 500; }
.lv-stp > span { text-align: center; }
.lv-stp > span b { display: block; font-size: 5cqw; transition: transform .25s; }
.lv-stp > span b.bump { transform: scale(1.18); }
.lv-stp > span small { display: block; font-size: 2.5cqw; color: #9aa0aa; }
.lv-log { display: flex !important; width: calc(100% - 8cqw); height: 14cqw; margin: 2.667cqw 4cqw 0; background: #e8714f; color: #fff; font-size: 3.833cqw; font-weight: 800; overflow: hidden; }
.lv-log svg { width: 4.333cqw; height: 4.333cqw; }
.lv-log::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #b6f36b; opacity: 0; transform: scale(.4); pointer-events: none; }
.lv-log.flash::after { animation: lvFlash .7s ease-out; }
@keyframes lvFlash { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }
.lv-log > span { position: relative; z-index: 1; }
.lv-ctl { position: absolute; left: 4cqw; right: 4cqw; bottom: 4.667cqw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 18.667cqw; padding: 0 3.333cqw; border-radius: 9.333cqw; background: #16181d; }
.lv-ctl > button:not(.lv-pp) { flex-direction: column; gap: 1cqw; height: 14.667cqw; font-size: 2.667cqw; font-weight: 700; color: #fff; border-radius: 4.667cqw; }
.lv-ctl > button.lv-dis { color: #6b6f78; }
.lv-ctl svg { width: 4cqw; height: 4cqw; }
.lv-pp { width: 14.667cqw; height: 14.667cqw; background: #fff; color: #000; }
.lv-pp svg { width: 5cqw; height: 5cqw; }
.lv-pp .lv-ipl, .lv-paused .lv-pp .lv-ip { display: none; }
.lv-paused .lv-pp .lv-ipl { display: block; }
[dir="rtl"] .lv-ctl svg { transform: scaleX(-1); }

/* ------------------------------------------------ Food diary ------------------------------------------------ */
.lv-day { margin: 2.667cqw 4cqw 0; padding: 3cqw 3.667cqw 3.333cqw; border-radius: 5.333cqw; background: #16181d; }
.lv-dnav { display: flex; align-items: center; gap: 1.333cqw; }
.lv-dnav > div { flex: 1; text-align: center; }
.lv-dnav b { display: block; font-size: 3.5cqw; }
.lv-dnav small { display: block; margin-top: 0.667cqw; font-size: 2.667cqw; color: #b9bec7; }
.lv-dnav small b { display: inline; font-size: inherit; font-weight: 700; color: #fff; }
.lv-dnav button { width: 7.333cqw; height: 7.333cqw; color: #fff; font-size: 4.333cqw; }
[dir="rtl"] .lv-dnav button svg { transform: scaleX(-1); }
.lv-seg { display: flex; justify-content: flex-end; margin-top: 2.333cqw; }
.lv-seg > span { display: flex; padding: 0.667cqw; border-radius: 999px; background: #22252b; }
.lv-seg button { height: 6cqw; padding: 0 3cqw; font-size: 2.667cqw; font-weight: 700; color: #c9ccd3; }
.lv-seg button::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #d8ecd9; opacity: 0; transition: opacity .25s; }
.lv-seg button[aria-pressed="true"] { color: #15171c; }
.lv-seg button[aria-pressed="true"]::after { opacity: 1; }
.lv-seg button { z-index: 0; }
.lv-meal { margin-top: 2.333cqw; }
.lv-mh { display: flex; align-items: center; gap: 1.333cqw; }
.lv-mh > div { flex: 1; min-width: 0; }
.lv-mh > div > b { display: block; font-size: 3.667cqw; }
.lv-mh small { display: block; margin-top: 0.333cqw; font-size: 2.5cqw; color: #9aa0aa; min-height: 3.133cqw; }
.lv-mh small b { font-weight: 600; }
.lv-add { width: 7.333cqw; height: 7.333cqw; color: #ff7a4a; font-size: 5.667cqw; font-weight: 400; }
.lv-dotv { width: 3.333cqw; color: #c9ccd3; font-size: 3.667cqw; text-align: center; }
.lv-fr { display: grid; grid-template-columns: 1fr auto 8cqw 10cqw; align-items: center; gap: 1.333cqw; min-height: 5.333cqw; font-size: 2.933cqw; transition: min-height .01s; }
.lv-comfy .lv-fr { min-height: 7cqw; }
.lv-fr > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #e9ebef; }
.lv-fr em { padding: 0.5cqw 1.667cqw; border-radius: 1.667cqw; background: #6f7a72; color: #15191a; font-size: 2.267cqw; font-weight: 800; }
.lv-fr b { text-align: end; font-size: 2.933cqw; }
.lv-fr i { text-align: end; font-size: 2.4cqw; color: #9aa0aa; direction: ltr; }
.lv-fr.lv-new { animation: lvIn .55s cubic-bezier(.2,.9,.25,1) both; }
@keyframes lvIn { from { opacity: 0; transform: translate3d(0, 2cqw, 0) scale(.97); } to { opacity: 1; transform: none; } }
.lv-empty { display: flex; align-items: center; gap: 2.667cqw; min-height: 5.333cqw; font-size: 2.933cqw; color: #9aa0aa; }
.lv-empty button { padding: 0 0.667cqw; font-size: 2.933cqw; font-weight: 800; color: #93b2ff; }
.lv-food .lv-water { margin: 2.667cqw 4cqw 0; border-radius: 5.333cqw; }
.lv-srch { display: flex; align-items: center; gap: 2cqw; height: 10cqw; padding: 0 3.333cqw; border-radius: 3.333cqw; background: #26292f; font-size: 3.5cqw; }
.lv-srch svg { width: 4cqw; height: 4cqw; color: #9aa0aa; }
.lv-q { position: relative; display: inline-flex; align-items: center; }
.lv-q > i { position: absolute; top: -0.667cqw; bottom: -0.667cqw; left: -0.333cqw; right: -0.667cqw; background: #26292f; transform-origin: 100% 50%; }
.lv-q > i::before { content: ""; position: absolute; left: 0; top: 0.667cqw; bottom: 0.667cqw; width: 0.4cqw; background: #ff9a7a; }
.lv-typing .lv-q > i { animation: lvType 1s steps(6) .1s both; }
.lv-typed .lv-q > i { transform: translateX(101%); }
@keyframes lvType { from { transform: translateX(0); } to { transform: translateX(101%); } }
[dir="rtl"] .lv-q > i { transform-origin: 0 50%; }
[dir="rtl"] .lv-typed .lv-q > i { transform: translateX(-101%); }
[dir="rtl"] .lv-typing .lv-q > i { animation-name: lvTypeR; }
@keyframes lvTypeR { from { transform: translateX(0); } to { transform: translateX(-101%); } }
.lv-res { margin-top: 2.667cqw; }
.lv-res button { display: flex; width: 100%; justify-content: space-between; height: 11.333cqw; padding: 0 3cqw; margin-top: 1.667cqw; border-radius: 3.667cqw; background: #22252b; color: #fff; font-size: 3.167cqw; font-weight: 700; text-align: start; }
.lv-res button span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lv-res button small { display: block; font-size: 2.5cqw; font-weight: 600; color: #9aa0aa; }
.lv-res button > b { margin-inline-start: 2cqw; font-size: 3.167cqw; }
.lv-res button > i { display: grid; place-items: center; width: 6.667cqw; height: 6.667cqw; margin-inline-start: 2.333cqw; border-radius: 50%; background: #e8714f; color: #fff; font-size: 4.333cqw; }

/* ------------------------------------------------ History ------------------------------------------------ */
.lv-htabs { display: flex; gap: 1.667cqw; margin: 3cqw 4cqw 0; }
.lv-htabs button { z-index: 0; flex: 1 1 auto; height: 8.333cqw; padding: 0 2.333cqw; background: #1d1f25; color: #e9ebef; font-size: 3.167cqw; font-weight: 700; white-space: nowrap; }
.lv-htabs button::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; opacity: 0; transition: opacity .25s; }
.lv-htabs button[aria-selected="true"] { color: #15171c; }
.lv-htabs button[aria-selected="true"]::after { opacity: 1; }
.lv-views { position: relative; height: 156.667cqw; margin-top: 3cqw; }
.lv-view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translate3d(0, 2cqw, 0); transition: opacity .35s, transform .45s cubic-bezier(.2,.9,.25,1), visibility 0s .35s; }
.lv-view.on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .45s cubic-bezier(.2,.9,.25,1), visibility 0s; }
.lv-cal { margin: 0 4cqw; padding: 3cqw 3cqw 3.333cqw; border-radius: 5.333cqw; background: #15171c; }
.lv-mon { display: flex; align-items: center; }
.lv-mon > div { flex: 1; text-align: center; }
.lv-mon b { display: block; font-size: 3.833cqw; }
.lv-mon small { display: block; margin-top: 0.333cqw; font-size: 2.5cqw; color: #9aa0aa; }
.lv-mon > span { display: grid; place-items: center; width: 8cqw; height: 8cqw; border-radius: 50%; background: #26292f; font-size: 3.333cqw; color: #fff; }
.lv-mon > span.off { opacity: .4; }
[dir="rtl"] .lv-mon > span { transform: scaleX(-1); }
.lv-wk, .lv-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.lv-wk { margin: 2.333cqw 0 1cqw; font-size: 2.5cqw; color: #9aa0aa; }
.lv-grid > * { height: 11cqw; }
.lv-d { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start !important; gap: 0.833cqw; padding-top: 0.667cqw !important; border-radius: 2.333cqw !important; font-size: 2.833cqw; font-weight: 700; color: #fff; }
.lv-d::before { display: none; }
.lv-d > i { position: relative; display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 50%; }
.lv-d > i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#b6f36b calc(var(--p) * 1turn), rgba(182,243,107,.2) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.767cqw), #000 calc(100% - 0.733cqw)); mask: radial-gradient(farthest-side, transparent calc(100% - 0.767cqw), #000 calc(100% - 0.733cqw)); }
.lv-d.w > i::after { content: ""; position: absolute; inset: 1.1cqw; z-index: -1; border-radius: 50%; background: #d9663f; }
.lv-d > i > span { position: relative; }
.lv-d > em { display: flex; gap: 0.467cqw; height: 1.067cqw; }
.lv-d > em > s { width: 1.067cqw; height: 1.067cqw; border-radius: 50%; text-decoration: none; }
.lv-d.now { box-shadow: inset 0 0 0 0.433cqw #d9663f; }
.lv-d.sel > i { box-shadow: 0 0 0 0.5cqw #fff; }
.lv-d.fut { color: #4a4e57; font-weight: 600; }
@media (hover: hover) { .lv-d:not(.fut):hover > i { transform: scale(1.12); } }
.lv-d > i { transition: transform .25s; }
.lv-cal.pop .lv-d > i { animation: lvPop .55s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--n) * 28ms); }
@keyframes lvPop { from { opacity: 0; transform: scale(.4) rotate(-40deg); } to { opacity: 1; transform: none; } }
.lv-leg { display: flex; flex-wrap: wrap; justify-content: center; gap: 1cqw 2.333cqw; margin-top: 2cqw; font-size: 2.333cqw; color: #c9ccd3; }
.lv-leg span { display: inline-flex; align-items: center; gap: 0.833cqw; }
.lv-leg s { width: 1.667cqw; height: 1.667cqw; border-radius: 50%; text-decoration: none; }
.lv-leg s.st { box-shadow: inset 0 0 0 0.4cqw #b6f36b; }
.c-w { background: #d9663f; } .c-f { background: #ff5fa8; } .c-a { background: #4f9bff; } .c-g { background: #ff9f3d; } .c-h { background: #ff5b5b; }
.lv-tyy { display: grid; grid-template-columns: 1fr 1fr; gap: 2.667cqw; margin: 3cqw 4cqw 0; }
.lv-tyy > button { height: 10.667cqw; background: #1d1f25; color: #fff; font-size: 3.667cqw; font-weight: 800; }
.lv-tyy > button.on { background: #fff; color: #15171c; }
.lv-hnum { display: grid; grid-template-columns: 1fr 1fr; gap: 2.667cqw; margin: 0 4cqw; }
.lv-hnum > div { padding: 3cqw 3.333cqw 10cqw; border-radius: 4.667cqw; color: #15171c; }
.lv-hnum small { display: block; font-size: 2.833cqw; font-weight: 700; }
.lv-hnum b { display: block; margin-top: 0.667cqw; font-size: 7.333cqw; }
.lv-hnum span { display: block; font-size: 2.5cqw; opacity: .75; }
.lv-pk { background: linear-gradient(140deg, #f1c9d6, #f2a7a0); } .lv-gr { background: linear-gradient(140deg, #cfe3d3, #c0ec8a); }
.lv-tcard { margin: 0 4cqw 2.667cqw; padding: 3.333cqw 3.667cqw; border-radius: 5cqw; background: #15171c; }
.lv-tcard > small { display: block; font-size: 2.833cqw; font-weight: 700; color: #9aa0aa; }
.lv-tv { display: flex; align-items: baseline; gap: 1.333cqw; margin-top: 0.667cqw; }
.lv-tv b { font-size: 6.667cqw; }
.lv-tv span { font-size: 3cqw; color: #9aa0aa; }
.lv-tv em { margin-inline-start: auto; padding: 0.667cqw 2.333cqw; border-radius: 999px; background: rgba(182,243,107,.14); color: #b6f36b; font-size: 2.667cqw; font-weight: 800; direction: ltr; }
.lv-chart { position: relative; height: 23.333cqw; margin-top: 2.333cqw; overflow: hidden; direction: ltr; }
.lv-chart svg { width: 100%; height: 100%; }
.lv-chart > i { position: absolute; inset: 0 -0.667cqw 0 0; background: #15171c; transform-origin: 100% 50%; transform: scaleX(1); }
.lv-view.on .lv-chart > i { transform: scaleX(0); transition: transform 1.3s cubic-bezier(.4,.1,.2,1) .15s; }
.lv-note { display: flex; gap: 2.333cqw; margin-top: 2.667cqw; padding: 2.667cqw 3cqw; border-radius: 3.667cqw; background: #1e2128; font-size: 2.833cqw; line-height: 1.35; color: #dfe2e7; }
.lv-note i { flex: none; display: grid; place-items: center; width: 5.333cqw; height: 5.333cqw; border-radius: 2cqw; background: rgba(182,243,107,.15); color: #b6f36b; font-size: 3cqw; font-weight: 800; }
.lv-bars { display: flex; align-items: flex-end; gap: 1.333cqw; height: 18cqw; margin-top: 2.667cqw; direction: ltr; }
.lv-bars i { flex: 1; height: 100%; border-radius: 1cqw 1cqw 0.333cqw 0.333cqw; background: linear-gradient(#ff9a7a, #e8714f); transform-origin: 50% 100%; transform: scaleY(.04); }
.lv-view.on .lv-bars i { transform: scaleY(var(--h)); transition: transform .8s cubic-bezier(.3,1.2,.5,1); transition-delay: calc(.2s + var(--n) * 60ms); }
.lv-wrow { display: flex; align-items: center; gap: 3cqw; margin: 0 4cqw 2.333cqw; padding: 3cqw 3.333cqw; border-radius: 4.667cqw; background: #15171c; }
.lv-wrow > i { display: grid; place-items: center; width: 9.333cqw; height: 9.333cqw; border-radius: 3cqw; background: rgba(232,113,79,.16); color: #ff9a7a; }
.lv-wrow > i svg { width: 4.667cqw; height: 4.667cqw; }
.lv-wrow > div { flex: 1; min-width: 0; }
.lv-wrow b { display: block; font-size: 3.5cqw; }
.lv-wrow small { display: block; margin-top: 0.667cqw; font-size: 2.667cqw; color: #9aa0aa; }
.lv-wrow > em { font-size: 2.833cqw; font-weight: 800; color: #b6f36b; }
.lv-bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.667cqw; margin: 0 4cqw; }
.lv-bgrid > div { padding: 3.333cqw 3.667cqw; border-radius: 4.667cqw; background: #15171c; }
.lv-bgrid small { display: block; font-size: 2.833cqw; font-weight: 700; color: #9aa0aa; }
.lv-bgrid b { display: inline-block; margin-top: 1cqw; font-size: 6cqw; }
.lv-bgrid span { font-size: 2.833cqw; color: #9aa0aa; margin-inline-start: 0.667cqw; }
.lv-bgrid em { display: block; margin-top: 1cqw; font-size: 2.667cqw; font-weight: 800; color: #b6f36b; direction: ltr; text-align: start; }
.lv-dsum { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin-top: 1.333cqw; }
.lv-dsum > div { padding: 2.667cqw 3cqw; border-radius: 3.667cqw; background: #22252b; }
.lv-dsum small { display: block; font-size: 2.667cqw; color: #9aa0aa; font-weight: 700; }
.lv-dsum b { display: block; margin-top: 0.667cqw; font-size: 4.167cqw; }
.lv-dsum b i { font-size: 2.667cqw; font-weight: 600; color: #9aa0aa; margin-inline-start: 0.667cqw; }
.lv-dsum > div.wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 2.667cqw; }
.lv-dsum > div.wide > i { display: grid; place-items: center; width: 8.667cqw; height: 8.667cqw; border-radius: 3cqw; background: rgba(232,113,79,.18); color: #ff9a7a; }
.lv-dsum > div.wide > i svg { width: 4.333cqw; height: 4.333cqw; }
.lv-dsum [data-wo] { display: none; }
.lv-dsum [data-wo].on { display: block; }
.lv-sheet-t .lv-dd b { display: inline; font-size: 5.667cqw; margin-inline-end: 1cqw; }
.lv-sheet-t .lv-dd span { font-size: 3.667cqw; color: #c9ccd3; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .lv *, .lv *::before, .lv *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  .lv-touch { display: none; }
}

/* ------------------------------------------------ Coach dashboard (browser frame) ------------------------------------------------ */
.cd-stage { position: relative; width: 100%; max-width: 560px; perspective: 1400px; }
.browser.cd { position: relative; max-width: none; transform: rotateX(var(--cd-ry, 0deg)) rotateY(var(--cd-rx, 0deg)); transform-style: flat; transition: transform .5s cubic-bezier(.2,.8,.2,1); box-shadow: 0 50px 100px -30px rgba(0,0,0,.8), 0 30px 80px -40px rgba(255,140,60,.35), inset 0 0 0 1px rgba(255,255,255,.08); }
.cd-stage.cd-hov .browser.cd { transition-duration: .12s; }
.browser.cd::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(255,170,110,.65), rgba(255,170,110,0) 35%, rgba(255,170,110,0) 70%, rgba(182,243,107,.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.cd-glare { position: absolute; z-index: 6; left: 0; top: 0; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255,255,255,.09), rgba(255,255,255,0)); opacity: 0; transform: translate3d(var(--gx, 50%), var(--gy, 30%), 0); transition: opacity .4s; }
.cd-stage.cd-hov .cd-glare { opacity: 1; }
.cd-app { position: relative; overflow: hidden; container-type: inline-size; padding: 13px 15px 16px; background: #0e0f13; color: #f2f3f5; font-size: 12px; line-height: 1.3; text-align: start; font-variant-numeric: tabular-nums; -webkit-user-select: none; user-select: none; }
.cd-app b { font-weight: 800; }
.cd-app i, .cd-app em { font-style: normal; }
:where(.cd-app) button { all: unset; box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; border-radius: 999px; white-space: nowrap; transition: transform .18s cubic-bezier(.2,.8,.2,1); -webkit-tap-highlight-color: transparent; }
.cd-app button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .2s; pointer-events: none; }
@media (hover: hover) { .cd-app button:hover::before { opacity: .1; } }
.cd-app button:active, .cd-app button.lv-press { transform: scale(.95); }
.cd-app button:focus-visible { outline: 2px solid #ffb27a; outline-offset: 2px; }
.cd-app [hidden] { display: none !important; }
.cd-top { display: flex; align-items: center; gap: 10px; }
.cd-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 13px; font-weight: 900; letter-spacing: -.3px; }
.cd-logo em { padding: 1px 6px; border-radius: 999px; background: #f0dfc2; color: #15171c; font-size: 7.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.cd-links { display: flex; gap: 2px; flex: 1; min-width: 0; overflow: hidden; font-size: 10.5px; font-weight: 700; color: #b9bec7; }
.cd-links span { padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.cd-links span.on { background: #23262d; color: #fff; }
.cd-me { display: flex; align-items: center; gap: 7px; margin-inline-start: auto; font-size: 10px; color: #c9ccd3; }
.cd-me i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f1c9d6; color: #15171c; font-size: 9.5px; font-weight: 800; }
.cd-bell { width: 26px; height: 26px; background: #1d2026; color: #e9ebef; }
.cd-bell svg { width: 13px; height: 13px; }
.cd-bell em { position: absolute; top: -3px; inset-inline-end: -3px; display: grid; place-items: center; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #e8714f; color: #fff; font-size: 8px; font-weight: 800; transform: scale(0); transition: transform .4s cubic-bezier(.3,1.7,.5,1); }
.cd-msg .cd-bell em { transform: scale(1); }
.cd-head { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; }
.cd-head > div { flex: 1; min-width: 0; }
.cd-h { display: block; font-size: 20px; letter-spacing: -.4px; }
.cd-head small { display: block; margin-top: 2px; font-size: 10.5px; color: #9aa0aa; }
.cd-ship { height: 30px; padding: 0 13px; background: #e8714f; color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 8px 20px -8px rgba(232,113,79,.8); }
.cd-ship svg { width: 12px; height: 12px; }
.cd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.cd-st { position: relative; overflow: hidden; padding: 9px 10px 10px; border-radius: 13px; color: #15171c; transition: transform .25s; }
.cd-st small { display: block; font-size: 9.5px; font-weight: 700; }
.cd-st b { display: inline-block; margin-top: 3px; font-size: 21px; letter-spacing: -.5px; }
.cd-st b.bump { animation: cdBump .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes cdBump { 50% { transform: scale(1.25); } }
.cd-st span { font-size: 10px; font-weight: 700; opacity: .6; margin-inline-start: 2px; }
.cd-st > em { display: block; margin-top: 1px; font-size: 8.5px; opacity: .72; }
.cd-st.s1 { background: linear-gradient(140deg, #cfe3d3, #bfe7a6); } .cd-st.s2 { background: linear-gradient(140deg, #f1c9d6, #f3b2c3); }
.cd-st.s3 { background: linear-gradient(140deg, #d6d1ee, #c3b9f0); } .cd-st.s4 { background: linear-gradient(140deg, #f0dfc2, #f1cf98); }
.cd-bar { display: block; height: 4px; margin-top: 7px; border-radius: 2px; background: rgba(21,23,28,.15); overflow: hidden; }
.cd-bar i { display: block; height: 100%; border-radius: 2px; background: #15171c; transform-origin: 0 50%; transform: scaleX(var(--p, .23)); transition: transform 1.2s cubic-bezier(.3,.9,.3,1); }
[dir="rtl"] .cd-bar i { transform-origin: 100% 50%; }
.cd-pre .cd-bar i { transform: scaleX(0); }
.cd-fil { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.cd-search { flex: 1 1 120px; min-width: 0; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; background: #17191f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); color: #8b9099; font-size: 10.5px; overflow: hidden; white-space: nowrap; }
.cd-search svg { width: 11px; height: 11px; flex: none; }
.cd-chips { display: flex; gap: 5px; }
.cd-chip { z-index: 0; height: 26px; padding: 0 10px; background: #17191f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: #e9ebef; font-size: 10.5px; font-weight: 700; }
.cd-chip::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; opacity: 0; transition: opacity .25s; }
.cd-chip[aria-pressed="true"] { color: #15171c; }
.cd-chip[aria-pressed="true"]::after { opacity: 1; }
.cd-chip i { display: inline-grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: rgba(232,113,79,.2); color: #ff9a7a; font-size: 8.5px; font-weight: 800; }
.cd-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; align-items: start; }
.cd-c { position: relative; padding: 10px 10px 9px; border-radius: 14px; background: #17191f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.cd-c::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 18px 36px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(255,170,110,.35); opacity: 0; transition: opacity .3s; }
.cd-c::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px #b6f36b; opacity: 0; transition: opacity .25s; pointer-events: none; }
@media (hover: hover) { .cd-c:hover { transform: translate3d(0, -4px, 0); } .cd-c:hover::before { opacity: 1; } }
.cd-c.cd-lift { transform: translate3d(0, -4px, 0); } .cd-c.cd-lift::before { opacity: 1; }
.cd-c.cd-out { opacity: 0; transform: scale(.92); pointer-events: none; }
.cd-c.cd-gone { display: none; }
.cd-c.cd-enter { animation: cdEnter .45s cubic-bezier(.2,.9,.25,1) both; }
@keyframes cdEnter { from { opacity: 0; transform: scale(.92) translate3d(0, 8px, 0); } }
.cd-sel .cd-c.cd-on::after { opacity: 1; }
.cd-ch { display: flex; align-items: center; gap: 7px; }
.cd-ch > div { flex: 1; min-width: 0; }
.cd-av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: #15171c; font-size: 10px; font-weight: 800; }
.cd-nm { display: block; font-size: 11.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-ch small { display: block; margin-top: 1px; font-size: 8.5px; color: #9aa0aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-new { flex: none; padding: 2px 6px; border-radius: 999px; background: #e8714f; color: #fff; font-size: 8px; font-weight: 800; transform: scale(0); transition: transform .4s cubic-bezier(.3,1.7,.5,1); }
.cd-new.on { transform: scale(1); }
.cd-pick { position: absolute !important; top: 10px; inset-inline-start: 10px; z-index: 2; display: grid !important; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(14,15,19,.45); box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); color: #15171c; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.cd-pick svg { width: 13px; height: 13px; opacity: 0; transition: opacity .2s; }
.cd-sel .cd-pick { transform: scale(1); }
.cd-c.cd-on .cd-pick { background: #b6f36b; box-shadow: none; }
.cd-c.cd-on .cd-pick svg { opacity: 1; }
.cd-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.cd-tags span { padding: 3px 7px; border-radius: 999px; background: #23262d; font-size: 8.5px; font-weight: 700; color: #dfe2e7; }
.cd-tags .q { background: rgba(232,113,79,.16); color: #ff9a7a; }
.cd-tags .ok { background: rgba(182,243,107,.13); color: #b6f36b; }
.cd-tags .pn { background: rgba(255,91,91,.15); color: #ff8a8a; }
.cd-pl { position: relative; margin-top: 7px; height: 12px; font-size: 9px; font-weight: 700; color: #e9ebef; }
.cd-pl > span { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s, transform .35s; }
.cd-pl > span.nx { opacity: 0; transform: translate3d(0, 6px, 0); color: #b6f36b; }
.cd-c.cd-sent .cd-pl > span.cu { opacity: 0; transform: translate3d(0, -6px, 0); }
.cd-c.cd-sent .cd-pl > span.nx { opacity: 1; transform: none; }
.cd-last { display: block; margin-top: 3px; font-size: 8.5px; color: #8b9099; }
.cd-act { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.cd-act button { height: 22px; padding: 0 10px; font-size: 9.5px; font-weight: 800; }
.cd-act .cd-open { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: #e8714f; color: #fff; font-size: 9.5px; font-weight: 800; }
.cd-chat { background: transparent; color: #e9ebef; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.cd-done { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px 3px 4px; border-radius: 999px; background: #b6f36b; color: #15171c; font-size: 8.5px; font-weight: 800; transform: scale(0); transition: transform .45s cubic-bezier(.3,1.7,.5,1); }
.cd-done svg { width: 10px; height: 10px; }
.cd-c.cd-sent .cd-done { transform: scale(1); }
.cd-pop { position: absolute; z-index: 8; top: 84px; inset-inline-end: 15px; width: 236px; padding: 10px; border-radius: 15px; background: #1e2128; box-shadow: 0 24px 50px -10px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.1); opacity: 0; transform: translate3d(0, -6px, 0) scale(.96); transform-origin: 90% 0; pointer-events: none; transition: opacity .25s, transform .35s cubic-bezier(.2,.9,.25,1.1); }
[dir="rtl"] .cd-pop { transform-origin: 10% 0; }
.cd-popon .cd-pop { opacity: 1; transform: none; pointer-events: auto; }
.cd-pop > b { display: block; margin: 2px 4px 7px; font-size: 11px; }
.cd-pop button { display: flex; width: 100%; justify-content: flex-start; gap: 9px; padding: 7px 8px; margin-top: 3px; border-radius: 10px; text-align: start; }
.cd-pop button > i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: rgba(232,113,79,.16); color: #ff9a7a; }
.cd-pop button > i svg { width: 13px; height: 13px; }
.cd-pop button span { display: block; font-size: 10.5px; font-weight: 800; color: #fff; }
.cd-pop button small { display: block; margin-top: 1px; font-size: 8.5px; color: #9aa0aa; }
.cd-pop button.on { background: rgba(255,255,255,.08); }
.cd-dock { position: absolute; z-index: 7; left: 50%; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 13px; border-radius: 999px; background: #f2f3f5; color: #15171c; box-shadow: 0 18px 40px -8px rgba(0,0,0,.8); font-size: 10.5px; font-weight: 700; white-space: nowrap; opacity: 0; transform: translate3d(-50%, 30px, 0); pointer-events: none; transition: opacity .3s, transform .45s cubic-bezier(.2,.9,.25,1.1); }
[dir="rtl"] .cd-dock { padding: 6px 13px 6px 6px; }
.cd-sel .cd-dock { opacity: 1; transform: translate3d(-50%, 0, 0); pointer-events: auto; }
.cd-dock .cd-send { height: 28px; padding: 0 12px; background: #e8714f; color: #fff; font-size: 10.5px; font-weight: 800; }
.cd-dock .cd-send[disabled] { opacity: .45; pointer-events: none; }
.cd-dock .cd-send span { display: none; }
.cd-dock .cd-send span.on { display: inline; }
.cd-dock .cd-x { width: 24px; height: 24px; background: rgba(21,23,28,.08); font-size: 12px; }
.cd-toast { position: absolute; z-index: 9; top: 12px; left: 50%; display: flex; align-items: center; gap: 7px; padding: 8px 13px 8px 9px; border-radius: 999px; background: #b6f36b; color: #15171c; font-size: 10.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 14px 30px -8px rgba(0,0,0,.7); opacity: 0; transform: translate3d(-50%, -14px, 0); pointer-events: none; transition: opacity .3s, transform .45s cubic-bezier(.2,.9,.25,1.2); }
.cd-toast i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #15171c; color: #b6f36b; }
.cd-toast svg { width: 10px; height: 10px; }
.cd-toast.on { opacity: 1; transform: translate3d(-50%, 0, 0); }
.cd-cur { position: absolute; z-index: 20; left: 0; top: 0; width: 18px; height: 18px; pointer-events: none; opacity: 0; transform: translate3d(var(--tx, 200px), var(--ty, 200px), 0); transition: transform .75s cubic-bezier(.35,.7,.2,1), opacity .3s; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.cd-cur.on { opacity: 1; }
.cd-cur svg { width: 18px; height: 18px; transition: transform .12s; transform-origin: 3px 2px; }
.cd-cur.tap svg { transform: scale(.82); }
.cd-cur::after { content: ""; position: absolute; left: -9px; top: -10px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); opacity: 0; }
.cd-cur.tap::after { animation: cdRip .55s ease-out; }
@keyframes cdRip { from { opacity: .8; transform: scale(.4); } to { opacity: 0; transform: scale(1.8); } }
.cd-app .cd-reset { transition: opacity .3s; }
.cd-app.cd-fade .cd-body { opacity: 0; }
.cd-body { transition: opacity .3s; }
@container (min-width: 760px) {
  .cd-app { padding: 16px 20px 20px; }
  .cd-h { font-size: 24px; } .cd-head small { font-size: 11.5px; }
  .cd-st small { font-size: 10.5px; } .cd-st b { font-size: 25px; } .cd-st > em { font-size: 9.5px; }
  .cd-chip { height: 28px; font-size: 11.5px; } .cd-search { height: 30px; font-size: 11.5px; }
  .cd-grid { gap: 10px; }
  .cd-c { padding: 12px 12px 11px; }
  .cd-nm { font-size: 13px; } .cd-ch small { font-size: 9.5px; } .cd-av { width: 32px; height: 32px; font-size: 11px; }
  .cd-pick { width: 32px; height: 32px; }
  .cd-tags span { font-size: 9.5px; } .cd-pl { height: 14px; font-size: 10.5px; } .cd-last { font-size: 9.5px; }
  .cd-act button, .cd-act .cd-open { height: 24px; font-size: 10.5px; }
}
@container (max-width: 760px) {
  .cd-grid { grid-template-columns: 1fr 1fr; }
}
@container (max-width: 560px) {
  .cd-links, .cd-me > span { display: none; }
  .cd-stats { grid-template-columns: 1fr 1fr; }
  .cd-search { display: none; }
  .cd-chips { overflow-x: auto; scrollbar-width: none; margin: 0 -15px; padding: 0 15px; }
  .cd-chips::-webkit-scrollbar { display: none; }
  .cd-pop { top: 74px; }
}
@container (max-width: 400px) {
  .cd-grid { grid-template-columns: 1fr; gap: 7px; }
  .cd-c { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 9px 10px; }
  .cd-c .cd-ch { grid-column: 1 / -1; }
  .cd-c .cd-tags { grid-column: 1; margin-top: 6px; }
  .cd-c .cd-pl { grid-column: 1 / -1; margin-top: 6px; }
  .cd-c .cd-last { grid-column: 1 / -1; }
  .cd-c .cd-act { grid-column: 2; grid-row: 2; align-self: end; margin-top: 6px; }
  .cd-c .cd-act .cd-done { position: absolute; top: 40px; inset-inline-end: 10px; }
  .cd-pop { width: auto; inset-inline: 12px; }
  .cd-ship { padding: 0 11px; }
}
/* the coach row: copy on top (two columns on wide screens), the dashboard full width below it */
.feat-row.cd-row { grid-template-columns: minmax(0, 1fr); gap: 34px; }
.feat-row.flip.cd-row .media { order: 1; }
.cd-row .cd-stage { max-width: 1000px; margin: 0 auto; }
@media (min-width: 921px) {
  .feat-row.cd-row > div:first-child { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 64px; align-items: center; width: 100%; max-width: 1000px; margin: 0 auto; }
  .feat-row.cd-row > div:first-child > * { grid-column: 1; }
  .feat-row.cd-row > div:first-child > .h2 { margin-bottom: 14px; }
  .feat-row.cd-row > div:first-child > .lead { margin: 0; }
  .feat-row.cd-row > div:first-child > .cta-row { margin-top: 26px; }
  .feat-row.cd-row > div:first-child > ul { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-app *, .cd-app *::before, .cd-app *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  .browser.cd { transform: none !important; }
  .cd-cur, .cd-glare { display: none; }
}