/* ============================================================
   Spatial portfolio · flows-a
   Motion graphics for Herc, Zaiby, CalorieCart and Hestior.
   Everything is scoped under .fa (the player root that
   js/space/flows-a.js builds inside a [data-flow] host).
   The scene is drawn on a fixed design canvas (880×440 wide,
   400×520 tall) scaled to fit, so type stays proportional.
   ============================================================ */

.fa { --fa-accent: 255 255 255; position: relative; width: 100%; color: var(--vx-label-1); font-family: var(--vx-font); -webkit-user-select: none; user-select: none; }
.fa .fa-i { width: 1em; height: 1em; flex: none; display: block; }

/* ---------- Stage ---------- */
.fa-stage {
  position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; isolation: isolate;
  border-radius: 30px;
  background:
    radial-gradient(90% 80% at 50% -10%, rgb(var(--fa-accent) / 0.22), transparent 62%),
    radial-gradient(70% 50% at 50% 115%, rgb(var(--fa-accent) / 0.14), transparent 70%),
    linear-gradient(180deg, rgb(8 8 12 / 0.26), rgb(8 8 12 / 0.4));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
/* Ambient light drifting across the stage (only while playing). */
.fa-stage::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(34% 30% at 30% 40%, rgb(var(--fa-accent) / 0.16), transparent 70%), radial-gradient(28% 26% at 72% 64%, rgb(255 255 255 / 0.06), transparent 70%);
  animation: fa-drift 18s ease-in-out infinite alternate; animation-play-state: paused;
}
.fa.is-running .fa-stage::before { animation-play-state: running; }
/* Spatial floor: a faint dot field that fades toward the horizon. */
.fa-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgb(255 255 255 / 0.2) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent 35%, #000 100%); mask-image: linear-gradient(180deg, transparent 35%, #000 100%);
}
@keyframes fa-drift { from { transform: translate3d(-6%, -3%, 0) rotate(-4deg); } to { transform: translate3d(6%, 4%, 0) rotate(5deg); } }

.fa-vp { position: absolute; inset: 0; --tx: 0; --ty: 0; }
.fa-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.fa-g {
  position: absolute; box-sizing: border-box; will-change: transform, opacity;
  translate: calc(var(--tx) * var(--d, 6) * -1px) calc(var(--ty) * var(--d, 6) * -0.7px);
  transition: translate 0.9s var(--vx-ease-out);
}
/* Reduced motion overview: the whole composition, every beat complete. */
.fa.is-overview .fa-g.fa-shown { opacity: 1 !important; transform: none !important; }

/* ---------- Shared pieces inside scenes ---------- */
.fa-card {
  border-radius: 24px; padding: 16px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.07));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.24), inset 0 0 0 1px rgb(255 255 255 / 0.07);
}
/* Soft ground shadow under each floating card (a gradient, not a blurred box shadow:
   WebKit clips large blurred shadows on scaled, composited layers into hard lines). */
.fa-card::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: -26px; height: 30px; pointer-events: none; background: radial-gradient(50% 50% at 50% 30%, rgb(0 0 0 / 0.34), transparent 100%); }
.fa-row-h { display: flex; align-items: center; gap: 11px; min-height: 38px; }
.fa-row-h > div { min-width: 0; }
.fa-disc { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--fa-accent)); color: rgb(12 14 10); font-size: 20px; box-shadow: 0 6px 18px -6px rgb(var(--fa-accent) / 0.8); }
.fa-disc .fa-i { stroke-width: 2.2; }
.fa-disc--sm { width: 32px; height: 32px; font-size: 17px; }
.fa-t { display: block; font-size: 15px; line-height: 1.2; font-weight: 650; letter-spacing: -0.012em; white-space: nowrap; }
.fa-s { display: block; font-size: 12px; line-height: 1.3; color: var(--vx-label-2); white-space: nowrap; }
.fa-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: #fff; background: rgb(22 22 28 / 0.82);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 10px 24px -10px rgb(0 0 0 / 0.7);
}
.fa-pill .fa-i { font-size: 14px; color: rgb(var(--fa-accent)); }
.fa-tag { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; padding: 3px 7px; border-radius: 999px; background: rgb(var(--fa-accent)); color: rgb(12 16 8); }
.fa-src { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--vx-label-3); }
.fa-src .fa-i { font-size: 13px; }

/* Inside a sized window (Work reads its free height into --avail), the stage never pushes
   its captions below the fold: it shrinks and the design canvas scales down to fit. */
[style*="--avail"] .fa:not(.fa--mini) .fa-stage { max-height: max(300px, calc(var(--avail) - 158px)); }

/* ---------- HUD: play/pause · synced caption · step scrubber ---------- */
.fa-hud { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 8px 20px 8px 8px; border-radius: 999px; background: var(--vx-platter, rgb(255 255 255 / 0.07)); }
.fa-play { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--vx-fill, rgb(255 255 255 / 0.14)); cursor: pointer; transition: background 0.2s, scale 0.35s var(--vx-spring); }
.fa-play:hover { background: var(--vx-fill-hi, rgb(255 255 255 / 0.22)); }
.fa-play:active { scale: 0.92; }
.fa-play svg { width: 20px; height: 20px; }
.fa-cap { flex: 1; min-width: 0; }
.fa-cap__eye, .fa-cap__text, .fa-minicap { display: grid; }
.fa-cap__eye > span, .fa-cap__text > span, .fa-minicap > span { grid-area: 1 / 1; will-change: transform, opacity; }
.fa-cap__eye { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--vx-label-3); white-space: nowrap; }
.fa-cap__eye > span { overflow: hidden; text-overflow: ellipsis; }
.fa-cap__text { font-size: 16px; line-height: 1.32; font-weight: 600; letter-spacing: -0.01em; }
.fa-hud__end { flex: none; width: 210px; display: flex; flex-direction: column; align-items: stretch; }
.fa-segs { display: flex; gap: 5px; touch-action: none; cursor: grab; }
.fa.is-scrubbing .fa-segs { cursor: grabbing; }
.fa-seg { flex: 1; min-width: 0; height: 32px; padding: 0; border: 0; background: none; display: flex; align-items: center; cursor: inherit; border-radius: 8px; }
.fa-seg__bar { position: relative; width: 100%; height: 5px; border-radius: 999px; background: rgb(255 255 255 / 0.18); overflow: hidden; transition: height 0.3s var(--vx-spring), background 0.2s; }
.fa-seg:hover .fa-seg__bar, .fa-seg.is-active .fa-seg__bar { height: 7px; background: rgb(255 255 255 / 0.24); }
.fa-seg__bar i { position: absolute; inset: 0; border-radius: inherit; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.fa-note { font-size: 11px; line-height: 1.2; color: var(--vx-label-3); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Narrow containers: step bar on top, caption below */
.fa.is-tall .fa-hud { flex-wrap: wrap; row-gap: 2px; border-radius: 26px; padding: 6px 16px 12px 8px; }
.fa.is-tall .fa-hud__end { order: -1; width: 100%; flex-direction: row; align-items: center; gap: 12px; padding-left: 8px; }
.fa.is-tall .fa-segs { flex: 1; }
.fa.is-tall .fa-note { max-width: 42%; }
.fa.is-tall .fa-cap__text { font-size: 15px; }
.fa.is-compact .fa-note { display: none; }

/* Mini mode: the stage only, with a floating caption */
.fa--mini { height: 100%; }
.fa--mini .fa-stage { height: 100%; min-height: 150px; border-radius: inherit; }
.fa--mini .fa-canvas { will-change: transform; }
.fa-minicap { position: absolute; left: 12px; right: 12px; bottom: 12px; justify-items: center; pointer-events: none; }
.fa-minicap > span { max-width: 100%; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgb(22 22 28 / 0.8); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2); }


/* ---------- Device + in-screen pieces shared by every story ---------- */
.fa-phone {
  border-radius: 38px; padding: 0;
  background: linear-gradient(145deg, #5b5c63, #26272c 38%, #3b3c42 62%, #1d1e22);
  box-shadow: 0 34px 60px -26px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(0 0 0 / 0.5), inset 0 1px 1px rgb(255 255 255 / 0.35);
}
.fa-phone__scr { position: absolute; inset: 7px; border-radius: 31px; overflow: hidden; background: #000; isolation: isolate; }
.fa-phone__island { position: absolute; left: 50%; top: 15px; width: 58px; height: 17px; margin-left: -29px; border-radius: 10px; background: #000; z-index: 5; }
.fa-phone__btn { position: absolute; right: -2px; top: 118px; width: 3px; height: 46px; border-radius: 0 2px 2px 0; background: #45464c; }
.fa-layer { position: absolute; inset: 0; overflow: hidden; will-change: transform, opacity; }
.fa-layer img { display: block; }
.fa-tap { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; pointer-events: none; z-index: 30; background: radial-gradient(circle, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.18) 60%, transparent 72%); box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.7); opacity: 0; }
.fa-tap--big { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
/* Lifted component: a floating UI card with a soft neutral shadow */
.fa-lift { border-radius: 22px; box-shadow: 0 30px 50px -26px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.08); }

/* ============================================================
   Herc · #0A0A0A canvas, #141414/#1A1A1A surfaces, neon #9FE870,
   rings Burn #FF9500 / Workout #9FE870 / Steps #00BFFF, Inter UI,
   Anton standing in for the licensed Parafina display face.
   ============================================================ */
.fa--herc { --hg: #9FE870; --hk: #0A0A0A; --hs: #141414; --hs2: #1C1C1C; --hl: #2A2A2A; --hm: #8A8A8A; }
.fa--herc .fa-canvas { font-family: Inter, var(--vx-font); }
.fa--herc .fa-phone__scr { background: var(--hk); color: #fff; }
.fa-hp { padding: 38px 10px 0; font-size: 9px; color: #fff; }
.fa-hp-h1, .fa-h-rt__t, .fa-hp-pace, .fa-hp-rt b { font-family: Anton, Impact, 'Arial Narrow', sans-serif; font-weight: 400; letter-spacing: 0.01em; }
/* Workout tab */
.fa-hp-top { display: flex; align-items: center; gap: 5px; height: 36px; }
.fa-hp-h1 { font-size: 22px; line-height: 1; flex: 1; }
.fa-hp-bub { max-width: 70px; padding: 4px 6px; border-radius: 7px; background: var(--hg); color: #0A0A0A; font-size: 6.5px; line-height: 1.2; font-weight: 600; }
.fa-hp-mas { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #fff; }
.fa-hp-start { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 7px 8px; border-radius: 10px; background: var(--hs); box-shadow: inset 0 0 0 1px rgb(159 232 112 / 0.22); }
.fa-hp-minus { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--hg); color: #0A0A0A; font-size: 12px; flex: none; }
.fa-hp-minus .fa-i { stroke-width: 2.6; }
.fa-hp-start b { display: block; font-size: 10px; font-weight: 700; }
.fa-hp-start small { display: block; font-size: 7px; color: var(--hm); margin-top: 1px; }
.fa-hp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 6px; }
.fa-hp-tiles span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 5px; border-radius: 9px; background: var(--hs); box-shadow: inset 0 0 0 1px rgb(159 232 112 / 0.16); font-size: 7px; color: #bdbdbd; font-weight: 600; }
.fa-hp-tiles i { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--hg); color: #0A0A0A; font-size: 10px; }
.fa-hp-sec { display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px; font-size: 7px; letter-spacing: 0.1em; color: var(--hm); font-weight: 600; }
.fa-hp-sec em { font-style: normal; letter-spacing: 0; color: var(--hg); }
.fa-hp-quick { display: flex; gap: 5px; margin-top: 5px; margin-right: -12px; }
.fa-hp-quick span { flex: none; width: 40px; height: 44px; border-radius: 9px; background: var(--hg); color: #0A0A0A; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; }
.fa-hp-quick b { font-size: 6.5px; font-weight: 700; }
.fa-hp-routines { display: flex; gap: 6px; margin-top: 5px; margin-right: -30px; }
.fa-hp-rt { position: relative; flex: none; width: 112px; height: 104px; border-radius: 10px; overflow: hidden; background: #161616; }
.fa-hp-rt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fa-hp-rt b { position: absolute; left: 8px; bottom: 8px; font-size: 15px; line-height: 0.95; }
.fa-hp-rt--2 b { top: 8px; bottom: auto; }
/* PrismTabBar */
.fa-hp-tab { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: #1A1A1A; z-index: 4; overflow: hidden; }
.fa-hp-hill { position: absolute; left: 0; bottom: 0; width: 84px; height: 40px; fill: var(--hg); }
.fa-hp-tab > span { position: absolute; top: 0; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 13px; color: #666; }
.fa-hp-tab .t0 { left: 0; width: 64px; } .fa-hp-tab .t1 { left: 64px; width: 64px; color: #0A0A0A; } .fa-hp-tab .t2 { left: 128px; width: 64px; }
.fa-hp-tab b { font-size: 6.5px; font-weight: 700; color: #0A0A0A; }
.fa-hp-tab .t0 b { opacity: 0; }
/* Active workout */
.fa-hp-bar { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px solid var(--hl); }
.fa-hp-bar > b { font-size: 13px; font-weight: 800; }
.fa-hp-dur { text-align: right; }
.fa-hp-dur small { display: block; font-size: 6px; color: var(--hm); letter-spacing: 0.08em; }
.fa-hp-dur b { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--hg); }
.fa-hp-ex { margin-top: 7px; padding: 7px; border-radius: 10px; background: var(--hs); }
.fa-hp-exh { display: flex; align-items: center; gap: 6px; font-size: 9.5px; }
.fa-hp-exh i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--hl); color: var(--hg); font-size: 10px; }
.fa-hp-cols, .fa-hp-row { display: grid; grid-template-columns: 20px 1fr 1fr 18px; align-items: center; text-align: center; }
.fa-hp-cols { margin-top: 6px; font-size: 6px; color: var(--hm); letter-spacing: 0.08em; }
.fa-hp-row { height: 20px; margin-top: 3px; border-radius: 6px; background: var(--hs2); font-size: 8.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fa-hp-row i { width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; font-size: 9px; background: #2E2E2E; color: transparent; }
.fa-hp-row i .fa-i { stroke-width: 3; }
.fa-hp-presets { display: flex; gap: 4px; margin-top: 6px; }
.fa-hp-presets span { flex: 1; height: 15px; border-radius: 5px; background: var(--hs2); display: grid; place-items: center; font-size: 7px; color: #bbb; }
.fa-hp-ex--next { opacity: 0.55; }
.fa-hp-ghost { height: 14px; margin-top: 5px; border-radius: 5px; background: var(--hs2); }
.fa-hp-slide { position: absolute; left: 10px; right: 10px; bottom: 12px; height: 34px; border-radius: 17px; background: #151515; box-shadow: inset 0 0 0 1px rgb(159 232 112 / 0.35); display: grid; place-items: center; font-size: 8.5px; font-weight: 700; color: #bbb; overflow: hidden; }
.fa-hp-slide__trail { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, rgb(159 232 112 / 0.05), rgb(159 232 112 / 0.35)); }
.fa-hp-slide__thumb { position: absolute; left: 3px; top: 3px; width: 28px; height: 28px; border-radius: 50%; background: var(--hg); color: #0A0A0A; display: grid; place-items: center; font-size: 14px; box-shadow: 0 0 12px rgb(159 232 112 / 0.6); }
.fa-hp-slide__thumb .fa-i { stroke-width: 2.6; }
/* Home dashboard */
.fa-hp--home { padding: 0; }
.fa-hp-band { height: 92px; padding: 40px 12px 0; background: var(--hg); color: #0A0A0A; }
.fa-hp-band span { display: block; font-size: 8px; color: #2c4a1a; }
.fa-hp-band b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.fa-hp-sheet { position: absolute; left: 0; right: 0; top: 84px; bottom: 0; padding: 12px 10px 0; border-radius: 16px 16px 0 0; background: var(--hk); }
.fa-hp-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; gap: 2px; }
.fa-hp-week small { display: block; font-size: 6px; color: var(--hm); }
.fa-hp-week i { display: grid; place-items: center; width: 19px; height: 19px; margin: 3px auto 0; border-radius: 50%; font-style: normal; font-size: 7.5px; box-shadow: inset 0 0 0 1.5px #262626; }
.fa-hp-week .is-today small { color: var(--hg); }
.fa-hp-week .is-today i { background: var(--hg); color: #0A0A0A; font-weight: 700; box-shadow: 0 0 0 1.5px #0A0A0A, 0 0 0 3px var(--hg); }
.fa-hp-sum { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; }
.fa-hp-rings { display: block; width: 116px; height: 116px; margin: 6px auto 0; fill: none; stroke-width: 8; }
.fa-hp-rings .arc { stroke-linecap: round; }
.fa-hp-goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.fa-hp-goals span { padding: 6px 2px; border-radius: 8px; background: var(--hs); text-align: center; }
.fa-hp-goals b { display: block; font-size: 8px; color: var(--c); }
.fa-hp-goals i { display: block; margin-top: 2px; font-style: normal; font-size: 9px; font-weight: 700; }
/* Live run */
.fa-hp--run { background: radial-gradient(120% 70% at 50% 110%, rgb(159 232 112 / 0.12), transparent 60%); }
.fa-hp-route { position: absolute; inset: auto 0 0 0; width: 100%; height: 150px; fill: none; stroke: var(--hg); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.3; }
.fa-hp-lbl { display: flex; align-items: center; gap: 4px; font-size: 7.5px; letter-spacing: 0.1em; font-weight: 700; color: var(--hg); }
.fa-hp-pace { display: block; margin-top: 12px; font-size: 44px; line-height: 1; }
.fa-hp-unit { display: block; font-size: 7px; letter-spacing: 0.1em; color: var(--hm); }
.fa-hp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }
.fa-hp-stats span { padding: 7px 8px; border-radius: 9px; background: var(--hs); }
.fa-hp-stats small { display: block; font-size: 6px; letter-spacing: 0.08em; color: var(--hm); }
.fa-hp-stats b { display: block; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.fa-hp-hr { display: flex; align-items: center; gap: 5px; margin-top: 6px; padding: 7px 8px; border-radius: 9px; background: var(--hs); font-size: 12px; color: #FF6B6B; }
.fa-hp-hr b { font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.fa-hp-hr small { font-size: 7px; color: var(--hm); }
.fa-hp-hr em { margin-left: auto; font-style: normal; font-size: 7px; font-weight: 800; padding: 2px 6px; border-radius: 99px; background: #F5A623; color: #0A0A0A; }

/* ---------- Herc components lifted into the space ---------- */
.fa-h-card { border-radius: 22px; padding: 16px; background: var(--hs); color: #fff; box-shadow: 0 30px 50px -26px rgb(0 0 0 / 0.8), inset 0 0 0 1px rgb(255 255 255 / 0.07); }
.fa-pill.fa-h-count__w, .fa-pill.fa-h-trophy__l, .fa-pill.fa-h-fly__saved { background: #151515; }
.fa--herc .fa-pill .fa-i { color: var(--hg); }
/* Routine */
.fa-h-rt { border-radius: 22px; overflow: hidden; background: #111; box-shadow: 0 30px 50px -26px rgb(0 0 0 / 0.85), inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.fa-h-rt__img { position: absolute; inset: 0; overflow: hidden; }
.fa-h-rt__img img { width: 100%; height: 100%; object-fit: cover; }
.fa-h-rt__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(10 10 10 / 0.92) 88%); }
.fa-h-rt__t { position: absolute; left: 22px; bottom: 84px; font-size: 50px; line-height: 0.92; color: #fff; }
.fa-h-rt__m { position: absolute; left: 22px; bottom: 56px; font-size: 13px; color: #d4d4d4; }
.fa-h-rt__p { position: absolute; left: 22px; bottom: 22px; display: flex; gap: 6px; }
.fa-h-rt__p i { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 99px; background: rgb(255 255 255 / 0.12); color: #ddd; }
.fa-h-rt__p i.g { background: rgb(159 232 112 / 0.18); color: var(--hg); }
/* Countdown */
.fa-h-count { display: flex; flex-direction: column; align-items: center; }
.fa-h-count__l { font-size: 15px; font-weight: 700; color: #fff; }
.fa-h-count__ring { position: relative; width: 190px; height: 190px; margin-top: 10px; }
.fa-h-count__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.fa-h-count__ring .trk { stroke: rgb(255 255 255 / 0.1); stroke-width: 10; }
.fa-h-count__ring .arc { stroke: var(--hg); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 8px rgb(159 232 112 / 0.6)); }
.fa-h-count__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 92px; color: #fff; opacity: 0; }
.fa-h-count__w { margin-top: 14px; }
/* Sets */
.fa-h-exh { display: flex; align-items: center; gap: 10px; }
.fa-h-disc { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #262626; color: var(--hg); font-size: 18px; flex: none; }
.fa-h-exh > span { flex: 1; min-width: 0; }
.fa-h-exh b { display: block; font-size: 15px; font-weight: 700; }
.fa-h-exh small { display: block; font-size: 11px; color: var(--hm); margin-top: 1px; }
.fa-h-timer { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11px; font-weight: 700; color: #0A0A0A; background: var(--hg); padding: 4px 9px; border-radius: 99px; }
.fa-h-cols, .fa-h-row { position: relative; display: grid; grid-template-columns: 44px 1fr 1fr 34px; align-items: center; text-align: center; }
.fa-h-cols { margin-top: 12px; font-size: 10px; letter-spacing: 0.1em; color: var(--hm); font-weight: 600; }
.fa-h-row { height: 30px; margin-top: 5px; border-radius: 9px; background: var(--hs2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fa-h-row .n { color: var(--hm); font-size: 12px; }
.fa-h-row .ck { justify-self: center; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 14px; background: #2E2E2E; color: transparent; }
.fa-h-row .ck .fa-i { stroke-width: 3; }
.fa-h-prtag { position: absolute; left: 30px; top: 50%; margin-top: -9px; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.05em; padding: 3px 5px; border-radius: 5px; background: #F5A623; color: #0A0A0A; line-height: 1; }
.fa-h-presets { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.fa-h-presets small { width: 58px; font-size: 11px; color: var(--hm); }
.fa-h-presets span { height: 26px; min-width: 38px; padding: 0 10px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: #1E1E1E; font-size: 12px; font-weight: 600; }
.fa-h-presets .add { margin-left: auto; color: var(--hg); background: transparent; box-shadow: inset 0 0 0 1px rgb(159 232 112 / 0.4); }
/* PR trophy */
.fa-h-trophy { display: flex; flex-direction: column; align-items: center; }
.fa-h-rays { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--hg); stroke-width: 3; stroke-linecap: round; }
.fa-h-trophy__img { position: relative; width: 136px; height: 136px; margin-top: 14px; object-fit: contain; filter: drop-shadow(0 14px 22px rgb(0 0 0 / 0.5)); }
.fa-h-trophy__l { position: relative; margin-top: 6px; }
/* Progression chart */
.fa-h-chart { padding: 14px 14px 10px; }
.fa-h-chart__h b { display: block; font-size: 13px; font-weight: 700; }
.fa-h-chart__h small { display: block; font-size: 10.5px; color: var(--hm); }
.fa-h-chart svg { display: block; width: 100%; height: 128px; margin-top: 6px; overflow: visible; }
.fa-h-chart .grid { stroke: #262626; stroke-width: 1; fill: none; }
.fa-h-chart .dash { stroke: rgb(159 232 112 / 0.5); stroke-dasharray: 3 4; fill: none; }
.fa-h-chart .ln { stroke: var(--hg); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fa-h-chart .pt { transform-box: fill-box; transform-origin: center; } /* pops from its own dot (px origins were read inside the fill box and threw the dots past the card) */
.fa-h-chart .pt circle { fill: #1F1F1F; stroke: var(--hg); stroke-width: 2; }
.fa-h-chart .pt circle.now { fill: var(--hg); }
.fa-h-chart .pt text { font-size: 8.5px; font-weight: 700; fill: #fff; text-anchor: middle; font-family: Inter, sans-serif; }
.fa-h-chart .pt circle.now + text { fill: #0A0A0A; }
.fa-h-chart__tro { position: absolute; right: 16px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #F5A623; color: #0A0A0A; font-size: 15px; }
/* Slide to Finish */
.fa-h-slide { border-radius: 43px; background: #131313; overflow: hidden; box-shadow: 0 30px 50px -26px rgb(0 0 0 / 0.8), inset 0 0 0 1.5px rgb(159 232 112 / 0.4); }
.fa-h-slide__trail { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, rgb(159 232 112 / 0.04), rgb(159 232 112 / 0.4)); border-radius: inherit; }
.fa-h-slide__l { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 700; color: #cfcfcf; letter-spacing: -0.01em; }
.fa-h-slide__l b { color: var(--hg); font-weight: 800; letter-spacing: -0.1em; }
.fa-h-slide__thumb { position: absolute; left: 7px; top: 7px; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--hg); color: #0A0A0A; font-size: 32px; box-shadow: 0 0 26px rgb(159 232 112 / 0.55); }
.fa-h-slide__thumb .fa-i { stroke-width: 2.6; }
.fa-h-slide__ring { position: absolute; top: 7px; width: 72px; height: 72px; margin-left: -36px; border-radius: 50%; box-shadow: 0 0 0 3px var(--hg); opacity: 0; }
/* Workout complete */
.fa-h-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px; }
.fa-h-done__ck { width: 52px; height: 52px; fill: none; stroke: var(--hg); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.fa-h-done__t { margin-top: 8px; font-size: 18px; font-weight: 800; }
.fa-h-done > small { font-size: 11.5px; color: var(--hm); }
.fa-h-done__s { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 12px; }
.fa-h-done__s span { padding: 8px 4px; border-radius: 12px; background: var(--hs2); }
.fa-h-done__s small { display: block; font-size: 9px; letter-spacing: 0.1em; color: var(--hm); }
.fa-h-done__s b { display: block; margin-top: 2px; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fa-h-done__s i { font-style: normal; }
/* CorePrism rings */
.fa-h-prism svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; overflow: visible; }
.fa-h-prism .trk { stroke-width: 22; stroke-opacity: 0.2; }
.fa-h-prism .arc { stroke-width: 22; stroke-linecap: round; filter: drop-shadow(0 0 5px rgb(0 0 0 / 0.6)); }
.fa-h-prism .core { fill: #050505; }
.fa-h-badge { position: absolute; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; display: grid; place-items: center; color: #0A0A0A; font-size: 13px; z-index: 2; box-shadow: 0 2px 6px rgb(0 0 0 / 0.5); }
.fa-h-badge .fa-i { stroke-width: 2.4; }
/* Goals */
.fa-h-goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fa-h-goal { padding: 12px 6px; border-radius: 16px; background: var(--hs); text-align: center; box-shadow: 0 24px 40px -24px rgb(0 0 0 / 0.8), inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.fa-h-goal .l { display: block; font-size: 15px; font-weight: 700; color: var(--c); }
.fa-h-goal .n { display: block; margin-top: 3px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fa-h-goal .n i { font-style: normal; }
.fa-h-goal .n small { font-size: 12px; font-weight: 500; color: var(--c); }
.fa-h-goal .u, .fa-h-goal .g { display: block; font-size: 10px; color: var(--hm); margin-top: 2px; }
.fa-h-goal .g { color: var(--c); }
.fa-h-goal u { display: block; height: 1px; margin: 5px 10px 0; background: var(--c); opacity: 0.5; }
/* Streak */
.fa-h-streak { border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: 30px; background: linear-gradient(180deg, #0E2238, #0A1422); box-shadow: 0 30px 50px -26px rgb(0 0 0 / 0.85), inset 0 0 0 1px rgb(127 196 255 / 0.18); }
.fa-h-snow { position: absolute; inset: 0; }
.fa-h-snow i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgb(234 246 255 / 0.55); }
.fa-h-flame { position: relative; width: 48px; height: 60px; filter: drop-shadow(0 0 14px rgb(58 123 255 / 0.55)); }
.fa-h-streak__n { position: relative; display: grid; height: 58px; overflow: hidden; margin-top: 6px; font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 50px; line-height: 58px; }
.fa-h-streak__n i { grid-area: 1 / 1; font-style: normal; text-align: center; }
.fa-h-streak__l { position: relative; font-size: 10.5px; letter-spacing: 0.22em; color: #9fb6cf; font-weight: 700; }
.fa-h-streak__d { position: relative; display: grid; grid-template-columns: repeat(7, 18px); gap: 5px; margin-top: 16px; text-align: center; }
.fa-h-streak__d small { display: block; font-size: 8.5px; color: #7f95ad; }
.fa-h-streak__d i { display: block; width: 14px; height: 14px; margin: 4px auto 0; border-radius: 50%; background: rgb(255 255 255 / 0.08); }
.fa-h-streak__d .on i { background: #7FC4FF; }
.fa-h-streak__d .now i { box-shadow: 0 0 0 1.5px #EAF6FF; }
.fa-h-streak__d .now small { color: #fff; }
/* Route flyover */
.fa-h-fly { padding: 0; overflow: hidden; background: #0f0f0f; }
.fa-h-fly__view { position: absolute; inset: 0; perspective: 700px; display: grid; place-items: center; overflow: hidden; }
.fa-h-fly__plane { position: relative; width: 300px; height: 300px; transform-origin: 50% 55%; transform-style: preserve-3d; }
.fa-h-fly__plane svg { width: 100%; height: 100%; display: block; border-radius: 8px; }
.fa-h-fly .st { stroke: #242424; stroke-width: 6; fill: none; }
.fa-h-fly .st2 { stroke: #1d1d1d; stroke-width: 3; fill: none; }
.fa-h-fly .rt { stroke: var(--hg); stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fa-h-fly .rt-glow { stroke: rgb(159 232 112 / 0.35); stroke-width: 14; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: blur(3px); }
.fa-h-fly .st-pt { fill: #fff; stroke: var(--hg); stroke-width: 3; }
.fa-h-fly__dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(159 232 112 / 0.5), 0 0 16px var(--hg); }
.fa-h-fly::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(15 15 15 / 0.85), transparent 26%, transparent 70%, rgb(15 15 15 / 0.9)); }
.fa-h-fly__hud { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 18px; z-index: 2; }
.fa-h-fly__hud small { display: block; font-size: 9.5px; letter-spacing: 0.12em; color: var(--hm); font-weight: 600; }
.fa-h-fly__hud b { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fa-h-fly__hud b i { font-style: normal; }
.fa-h-fly__tag { position: absolute; left: 16px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--hg); }
.fa-h-fly__saved { position: absolute; right: 14px; bottom: 16px; z-index: 2; }
/* Apple Watch */
.fa-h-watch__strap { position: absolute; left: 34px; width: 90px; height: 50px; background: linear-gradient(90deg, #1e1e22, #333338 50%, #1e1e22); }
.fa-h-watch__strap.t { top: 0; border-radius: 18px 18px 4px 4px; }
.fa-h-watch__strap.b { bottom: 0; border-radius: 4px 4px 18px 18px; }
.fa-h-watch__crown { position: absolute; left: 146px; top: 88px; width: 9px; height: 26px; border-radius: 4px; background: linear-gradient(90deg, #6d6d75, #a5a5ad, #5c5c64); }
.fa-h-watch__case { position: absolute; left: 12px; top: 40px; width: 136px; height: 152px; padding: 7px; border-radius: 40px; background: linear-gradient(150deg, #66666e, #28282d 58%, #404047); box-shadow: 0 26px 40px -18px rgb(0 0 0 / 0.8), inset 0 1px 1px rgb(255 255 255 / 0.35); }
.fa-h-watch__scr { width: 100%; height: 100%; border-radius: 33px; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #fff; }
.fa-h-watch__scr .a { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--hg); }
.fa-h-watch__scr .b { display: flex; align-items: baseline; gap: 3px; }
.fa-h-watch__scr .b b { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.fa-h-watch__scr .b small { font-size: 10px; color: #FF6B6B; font-weight: 700; }
.fa-h-watch__scr .z { display: flex; gap: 3px; }
.fa-h-watch__scr .z i { width: 14px; height: 5px; border-radius: 3px; background: #2a2a2a; }
.fa-h-watch__scr .z i.on { background: #F5A623; }
.fa-h-watch__scr .c { font-size: 9.5px; color: #bbb; }

/* ============================================================
   Zaiby V1 · #0F0F1A canvas, #1E1E32 cards with 8% glass,
   purple #8B5CF6 → blue #3B82F6, pink #EC4899, cyan eyes,
   success #10B981, SF Pro Rounded (Nunito off Apple devices).
   ============================================================ */
.fa--zaiby { --zb: #0F0F1A; --zc: #1E1E32; --zp: #8B5CF6; --zbl: #3B82F6; --zk: #EC4899; --zg: #10B981; --zd: #A0A0B0; --zgrad: linear-gradient(135deg, #8B5CF6, #3B82F6); }
.fa--zaiby .fa-canvas { font-family: ui-rounded, 'SF Pro Rounded', Nunito, var(--vx-font); }
.fa--zaiby .fa-phone__scr { background: radial-gradient(70% 40% at 20% 10%, rgb(139 92 246 / 0.35), transparent 70%), radial-gradient(60% 40% at 90% 90%, rgb(59 130 246 / 0.28), transparent 70%), var(--zb); color: #fff; }
.fa--zaiby .fa-pill .fa-i { color: #C4B5FD; }
.fa-z-av { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-style: normal; font-size: 12px; font-weight: 800; box-shadow: 0 0 0 2px var(--zb); }
.fa-z-av.is-me { background: linear-gradient(135deg, #2a2350, #1b1b36); }
.fa-z-av svg { width: 76%; height: 76%; }
/* phone screens */
.fa-zp { padding: 38px 10px 0; font-size: 9px; }
.fa-zp--cam { padding: 0; background: #07070c; }
.fa-zp-shot { position: absolute; left: 34px; right: 34px; top: 70px; bottom: 96px; display: grid; place-items: center; }
.fa-zp-paper { width: 100%; height: 100%; padding: 12px 10px; background: #f4f1ea; border-radius: 2px; color: #333; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 10px 24px rgb(0 0 0 / 0.6); filter: blur(0.3px); }
.fa-zp-paper b { font-family: var(--vx-mono); font-size: 8px; text-align: center; letter-spacing: 0.05em; }
.fa-zp-paper i { display: block; height: 4px; border-radius: 2px; background: #c9c4b8; }
.fa-zp-paper i.w { width: 60%; margin-left: auto; background: #b3ad9f; }
.fa-zp-brk { position: absolute; left: 21px; right: 21px; top: 58px; bottom: 84px; width: calc(100% - 42px); height: calc(100% - 142px); fill: none; stroke: url(#faZB); stroke-width: 4; stroke-linecap: round; overflow: visible; }
.fa-zp-hint { position: absolute; left: 12px; right: 12px; top: 36px; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 10px; background: rgb(30 30 50 / 0.85); font-size: 12px; color: #C4B5FD; }
.fa-zp-hint b { display: block; font-size: 7.5px; color: #fff; }
.fa-zp-hint small { display: block; font-size: 6px; color: var(--zd); }
.fa-zp-x { position: absolute; left: 12px; bottom: 30px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.12); font-size: 12px; color: #fff; }
.fa-zp-shutter { position: absolute; left: 50%; bottom: 22px; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; background: var(--zgrad); box-shadow: 0 0 0 3px var(--zb), 0 0 0 5px rgb(139 92 246 / 0.7), 0 0 20px rgb(139 92 246 / 0.6); }
.fa-zp-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.fa-zp-stars { position: absolute; inset: 0; }
.fa-zp-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgb(255 255 255 / 0.45); }
.fa-zp--pro { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px; text-align: center; }
.fa-z-bot { position: relative; width: 96px; height: 96px; }
.fa-z-bot img { width: 100%; height: 100%; object-fit: contain; }
.fa-z-bot .e { position: absolute; top: 45%; width: 8%; height: 13%; border-radius: 2px; background: #22D3EE; box-shadow: 0 0 6px #22D3EE; }
.fa-z-bot .e:nth-of-type(1) { left: 36%; } .fa-z-bot .e:nth-of-type(2) { left: 54.5%; }
.fa-zp-q { display: grid; margin-top: 14px; font-size: 9.5px; font-weight: 700; line-height: 1.3; }
.fa-zp-q > span { grid-area: 1 / 1; }
.fa-zp-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 22px; font-size: 7.5px; color: #C4B5FD; }
.fa-zp-nav b { font-size: 9.5px; color: #fff; text-align: center; }
.fa-zp-nav b small { display: block; font-size: 7px; color: var(--zd); font-weight: 600; }
.fa-zp-nav i { font-style: normal; text-align: right; font-size: 7px; color: var(--zd); }
.fa-zp-nav .c { text-align: left; font-size: 11px; color: #fff; }
.fa-zp-row { display: flex; justify-content: space-between; margin-top: 6px; padding: 8px 9px; border-radius: 10px; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); font-size: 8.5px; font-weight: 700; }
.fa-zp-row em { font-style: normal; color: #C4B5FD; }
.fa-zp-tot { display: flex; justify-content: space-between; margin-top: 10px; padding: 0 4px; font-size: 10px; font-weight: 800; }
.fa-zp-h { display: block; margin: 8px 0 8px; font-size: 14px; font-weight: 800; }
.fa-zp-prow { display: flex; align-items: center; gap: 7px; margin-top: 5px; padding: 6px 8px; border-radius: 10px; background: rgb(255 255 255 / 0.06); font-size: 9px; font-weight: 700; }
.fa-zp-prow small { color: var(--zd); font-size: 7px; }
.fa-zp-cta { position: absolute; left: 12px; right: 12px; bottom: 22px; height: 30px; border-radius: 15px; display: grid; place-items: center; font-style: normal; font-size: 9.5px; font-weight: 800; background: var(--zgrad); box-shadow: 0 6px 18px -6px rgb(139 92 246 / 0.8); }
.fa-zp-avs { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.fa-zp-seg, .fa-z-seg { display: flex; gap: 3px; padding: 3px; margin-top: 10px; border-radius: 99px; background: rgb(255 255 255 / 0.07); }
.fa-zp-seg span, .fa-z-seg span { flex: 1; height: 20px; border-radius: 99px; display: grid; place-items: center; font-size: 7.5px; font-weight: 700; color: var(--zd); }
.fa-zp-seg .on, .fa-z-seg .on { background: var(--zk); color: #fff; }
.fa-zp-slot { position: relative; height: 150px; margin-top: 12px; }
.fa-zp-slot i { position: absolute; left: 10px; right: 10px; height: 120px; border-radius: 14px; background: var(--zc); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.fa-zp-slot i:nth-child(1) { top: 16px; transform: scale(0.9); opacity: 0.5; } .fa-zp-slot i:nth-child(2) { top: 8px; transform: scale(0.95); opacity: 0.75; } .fa-zp-slot i:nth-child(3) { top: 0; background: linear-gradient(#3a3a5c, #3a3a5c) 50% 26px / 60% 8px no-repeat, linear-gradient(#C4B5FD, #C4B5FD) 50% 44px / 40% 12px no-repeat, radial-gradient(circle, #3B82F6 60%, transparent 62%) 30% 82px / 22px 22px no-repeat, radial-gradient(circle, #10B981 60%, transparent 62%) 70% 82px / 22px 22px no-repeat, var(--zc); }
.fa-zp--done { display: flex; flex-direction: column; align-items: center; padding-top: 70px; text-align: center; }
.fa-zp-ring { padding: 8px; border-radius: 50%; background: radial-gradient(circle, rgb(139 92 246 / 0.3), transparent 70%); }
.fa-zp-alld { margin-top: 6px; font-size: 17px; font-weight: 900; }
.fa-zp-pill { margin-top: 6px; padding: 4px 12px; border-radius: 99px; background: var(--zgrad); font-size: 10px; font-weight: 800; }
.fa-zp-sub { margin-top: 8px; font-size: 7.5px; line-height: 1.4; color: var(--zd); }

/* ---------- lifted components ---------- */
.fa-z-rc { filter: drop-shadow(0 28px 30px rgb(0 0 0 / 0.45)); }
.fa-z-paper { position: absolute; inset: 0; padding: 22px 16px 0; background: linear-gradient(180deg, #fbf9f4, #efebe2); color: #2a2826; font-family: var(--vx-mono); font-size: 10.5px; text-align: left; overflow: hidden; }
.fa-z-merch { display: block; text-align: center; font-size: 14px; letter-spacing: 0.08em; }
.fa-z-meta { display: block; text-align: center; font-size: 9px; color: #77736b; margin-top: 3px; }
.fa-z-paper hr { border: 0; border-top: 1.5px dashed #b8b2a6; margin: 12px 0 10px; }
.fa-z-line { display: flex; justify-content: space-between; gap: 8px; padding: 5px 4px; margin: 0 -4px; border-radius: 4px; line-height: 1.3; }
.fa-z-line span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-z-line.s { color: #6b675f; padding: 3px 4px; }
.fa-z-line.t { font-weight: 800; font-size: 12px; margin-top: 4px; }
.fa-z-thanks { display: block; margin-top: 16px; text-align: center; font-size: 9px; color: #8a857b; letter-spacing: 0.06em; }
.fa-z-beam { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #8B5CF6 20%, #EC4899 80%, transparent); box-shadow: 0 0 16px 3px rgb(139 92 246 / 0.55); opacity: 0; }
.fa-z-vision { position: absolute; left: 0; right: 0; top: -14px; margin: 0 auto; width: max-content; }
.fa-z-snap { position: absolute; left: 0; top: 0; width: 150px; height: 200px; border-radius: 6px; background: #fff; opacity: 0; pointer-events: none; }
.fa-z-card { border-radius: 24px; padding: 16px 18px; background: linear-gradient(180deg, #23233b, #1a1a2e); color: #fff; box-shadow: 0 30px 50px -26px rgb(0 0 0 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.fa-z-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 12px; color: #C4B5FD; }
.fa-z-nav b { font-size: 14px; color: #fff; }
.fa-z-lab { display: block; margin-top: 9px; font-size: 10.5px; font-weight: 700; color: var(--zd); letter-spacing: 0.02em; }
.fa-z-merchant { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; padding: 7px 12px; border-radius: 14px; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.fa-z-merchant b { font-size: 14px; }
.fa-z-cat { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: #F9A8D4; padding: 3px 8px; border-radius: 99px; background: rgb(236 72 153 / 0.18); }
.fa-z-item { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 5px 12px; border-radius: 14px; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.fa-z-item b { display: block; font-size: 13px; }
.fa-z-item small { display: block; font-size: 10px; color: var(--zd); margin-top: 1px; }
.fa-z-item em { font-style: normal; font-size: 13px; font-weight: 800; color: #C4B5FD; font-variant-numeric: tabular-nums; }
.fa-z-sums { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgb(255 255 255 / 0.1); display: grid; gap: 3px; }
.fa-z-sums span { display: flex; justify-content: space-between; font-size: 11px; color: var(--zd); }
.fa-z-sums i { font-style: normal; font-variant-numeric: tabular-nums; }
.fa-z-sums .t { font-size: 14px; color: #fff; margin-top: 2px; }
.fa-z-sums .t b:last-child { font-variant-numeric: tabular-nums; color: #C4B5FD; }
.fa-z-h1 { display: block; font-size: 22px; font-weight: 900; letter-spacing: -0.01em; }
.fa-z-sub { display: block; font-size: 12px; color: var(--zd); margin-top: 2px; }
.fa-z-input { display: flex; gap: 8px; margin-top: 14px; }
.fa-z-input span { flex: 1; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 14px; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(139 92 246 / 0.5); font-size: 16px; color: var(--zd); }
.fa-z-input .typed { font-style: normal; font-size: 13px; font-weight: 700; color: #fff; }
.fa-z-input .caret { width: 1.5px; height: 16px; margin-left: -6px; background: #C4B5FD; animation: fa-caret 1s steps(1) infinite; }
@keyframes fa-caret { 50% { opacity: 0; } }
.fa-z-input b { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--zgrad); font-size: 18px; }
.fa-z-quick { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 10.5px; color: var(--zd); }
.fa-z-quick span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 99px; background: rgb(255 255 255 / 0.07); color: #ddd; font-weight: 700; }
.fa-z-prow { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 12px; border-radius: 14px; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.fa-z-prow > small { width: 12px; font-size: 11px; color: var(--zd); }
.fa-z-prow .fa-z-av { width: 30px; height: 30px; font-size: 13px; }
.fa-z-prow b { flex: 1; font-size: 14px; }
.fa-z-prow .xx { font-size: 12px; color: var(--zd); }
.fa-z-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin-top: 14px; border-radius: 22px; background: var(--zgrad); font-size: 14px; font-weight: 800; color: #fff; box-shadow: 0 10px 24px -10px rgb(139 92 246 / 0.9); }
.fa-z-strip { display: flex; align-items: center; gap: 16px; }
.fa-z-strip__avs { display: flex; gap: 12px; }
.fa-z-strip__avs > span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fa-z-strip__avs .fa-z-av { width: 34px; height: 34px; font-size: 14px; }
.fa-z-strip__avs .add i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.3); font-size: 16px; color: #ddd; }
.fa-z-strip__avs small { font-size: 10.5px; font-weight: 800; color: #ddd; font-variant-numeric: tabular-nums; }
.fa-z-strip .fa-z-seg { flex: 1; margin-top: 0; }
.fa-z-strip .fa-z-seg span { height: 30px; font-size: 12px; }
.fa-z-prog { display: flex; align-items: center; gap: 10px; height: 20px; }
.fa-z-prog__n { font-size: 11px; font-weight: 800; color: #C4B5FD; min-width: 54px; }
.fa-z-prog u { flex: 1; height: 5px; border-radius: 3px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.fa-z-prog s { display: block; height: 100%; background: var(--zgrad); transform-origin: 0 50%; transform: scaleX(0.25); }
.fa-z-sc { position: absolute; left: 0; right: 0; top: 30px; height: 262px; padding: 14px 16px; border-radius: 24px; background: linear-gradient(180deg, #27274a, #1d1d34); box-shadow: 0 24px 40px -20px rgb(0 0 0 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 0 0 1px rgb(255 255 255 / 0.08); color: #fff; transform-origin: 50% 0; }
.fa-z-sc[data-i="0"] { z-index: 4; } .fa-z-sc[data-i="1"] { z-index: 3; } .fa-z-sc[data-i="2"] { z-index: 2; } .fa-z-sc[data-i="3"] { z-index: 1; }
.fa-z-sc__top { display: flex; justify-content: space-between; align-items: center; height: 18px; font-size: 10.5px; color: var(--zd); }
.fa-z-sc__top .as { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 700; color: #6EE7B7; opacity: 0; }
.fa-z-sc__top .as i { font-style: normal; }
.fa-z-sc__n { display: block; margin-top: 8px; font-size: 17px; font-weight: 800; text-align: center; }
.fa-z-sc__p { display: block; margin-top: 2px; font-size: 28px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; color: #C4B5FD; }
.fa-z-sc__per { display: block; text-align: center; font-size: 10.5px; color: var(--zd); }
.fa-z-sc__q { display: block; margin-top: 10px; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--zd); }
.fa-z-sc__avs { display: flex; justify-content: space-between; margin: 6px 20px 0; }
.fa-z-sc__avs > span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 56px; }
.fa-z-sc__avs .fa-z-av { width: 40px; height: 40px; font-size: 16px; }
.fa-z-sc__avs small { font-size: 10.5px; font-weight: 700; color: #ddd; }
.fa-z-sc__avs .ck { position: absolute; right: 6px; top: -2px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--zg); font-size: 10px; color: #fff; opacity: 0; box-shadow: 0 0 0 2px #22223e; }
.fa-z-sc__avs .ck .fa-i { stroke-width: 3; }
.fa-z-sc__bot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.fa-z-sc__bot > i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.07); font-size: 14px; color: var(--zd); font-style: normal; }
.fa-z-sc__bot .all { position: relative; flex: 1; height: 34px; border-radius: 17px; background: rgb(139 92 246 / 0.22); display: grid; }
.fa-z-sc__bot .all b { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 800; }
.fa-z-sc__bot .a2 { opacity: 0; }
.fa-z-btn--split { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.fa-z-final__p { position: absolute; inset: 0; padding: 20px 18px 0; background: #fbf9f4; color: #1d1b26; font-family: ui-rounded, Nunito, var(--vx-font); display: flex; flex-direction: column; align-items: center; }
.fa-z-final { filter: drop-shadow(0 28px 30px rgb(0 0 0 / 0.5)); }
.fa-z-final__ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #1d1b26; color: #fff; font-size: 14px; }
.fa-z-final__m { margin-top: 5px; font-size: 14px; font-weight: 900; letter-spacing: 0.06em; }
.fa-z-final__d { font-size: 9px; color: #77737f; letter-spacing: 0.06em; }
.fa-z-final__ok { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; padding: 3px 9px; border-radius: 99px; background: rgb(16 185 129 / 0.14); color: #047857; font-size: 9.5px; font-weight: 900; }
.fa-z-final__w { align-self: stretch; margin-top: 9px; padding-top: 7px; border-top: 1.5px dashed #cfcac0; font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em; color: #77737f; }
.fa-z-final__r { align-self: stretch; display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.fa-z-final__r .fa-z-av { width: 24px; height: 24px; font-size: 11px; box-shadow: none; }
.fa-z-final__r span { flex: 1; min-width: 0; }
.fa-z-final__r b { display: block; font-size: 11px; }
.fa-z-final__r small { display: block; font-size: 8px; color: #77737f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-z-final__r em { font-style: normal; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; }
.fa-z-final__t { align-self: stretch; display: flex; justify-content: space-between; font-size: 9px; color: #5f5b67; margin-top: 3px; }
.fa-z-final__t:first-of-type { margin-top: 8px; padding-top: 6px; border-top: 1.5px dashed #cfcac0; }
.fa-z-final__t.g { font-size: 11px; font-weight: 900; color: #1d1b26; }
.fa-z-final__pay { margin-top: 7px; font-size: 8px; font-weight: 900; letter-spacing: 0.14em; color: #6d28d9; }
.fa-z-final__qrp { display: none; }
.fa-z-final__qr { width: 70px; height: 70px; margin-top: 4px; padding: 4px; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px #e5e1d8; }
.fa-z-final__qr svg { display: block; width: 100%; height: 100%; }
.fa-z-done { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 10px; border-radius: 24px; text-align: center; background: linear-gradient(180deg, #23233b, #1a1a2e); box-shadow: 0 30px 50px -26px rgb(0 0 0 / 0.85), inset 0 0 0 1px rgb(255 255 255 / 0.08); color: #fff; }
.fa-z-done__ring { padding: 4px; border-radius: 50%; background: radial-gradient(circle, rgb(139 92 246 / 0.4), transparent 70%); }
.fa-z-done .fa-z-bot { width: 72px; height: 72px; }
.fa-z-done > b { margin-top: 4px; font-size: 16px; font-weight: 900; }
.fa-z-done > span { margin-top: 4px; padding: 3px 10px; border-radius: 99px; background: var(--zgrad); font-size: 11px; font-weight: 800; }
.fa-z-done > small { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 10px; color: #6EE7B7; font-weight: 700; }

/* ============================================================
   CalorieCart · primary #FFA805 (gradient #FFB23E → #FFA805),
   browns #C27E00 / #422B00, cream #FFFDF7 cards, track #D9D9D9,
   macros protein #FF5A5F / carbs #34B27B / fat #F5A623, Poppins.
   ============================================================ */
.fa--caloriecart { --co: #FFA805; --cgrad: linear-gradient(135deg, #FFB23E, #FFA805); --cbr: #C27E00; --cdk: #422B00; --ccr: #FFFDF7; --cbd: #F0EDE6; --ctx: #222; --cmt: #999; }
.fa--caloriecart .fa-canvas { font-family: Poppins, var(--vx-font); }
.fa--caloriecart .fa-phone__scr { background: #F7F6F3; color: var(--ctx); }
.fa--caloriecart .fa-tap { background: radial-gradient(circle, rgb(255 168 5 / 0.45), rgb(255 168 5 / 0.12) 60%, transparent 72%); box-shadow: 0 0 0 1.5px rgb(255 168 5 / 0.8); }
.fa--caloriecart .fa-pill .fa-i { color: var(--co); }
.fa-c-th { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; font-style: normal; }
/* phone screens */
.fa-cp { font-size: 8px; }
.fa-cp-head { height: 118px; padding: 40px 10px 0; background: linear-gradient(160deg, #FFE3A8, #FFC766 55%, #FFB23E); }
.fa-cp-stats { display: flex; justify-content: space-between; align-items: center; color: var(--cdk); }
.fa-cp-stats > span { display: flex; flex-direction: column; align-items: center; width: 50px; }
.fa-cp-stats b { font-size: 11px; font-weight: 700; }
.fa-cp-stats small { font-size: 6.5px; color: #7a5a1a; }
.fa-cp-stats .ring { position: relative; width: 66px; height: 66px; justify-content: center; }
.fa-cp-stats .ring svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.fa-cp-stats .ring .trk { stroke: rgb(255 255 255 / 0.55); stroke-width: 6; }
.fa-cp-stats .ring .arc { stroke: var(--cbr); stroke-width: 6; stroke-linecap: round; }
.fa-cp-stats .ring b { font-size: 13px; color: var(--cbr); line-height: 1; }
.fa-cp-card { margin: -12px 10px 0; position: relative; padding: 8px 10px; border-radius: 12px; background: var(--ccr); box-shadow: 0 0 0 1px var(--cbd), 0 6px 14px -8px rgb(0 0 0 / 0.2); }
.fa-cp-card > b { font-size: 9px; color: var(--cdk); }
.fa-cp-card u, .fa-cp-mac u { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: #EEE9DF; overflow: hidden; }
.fa-cp-card u s { display: block; height: 100%; background: var(--co); border-radius: inherit; }
.fa-cp-card > small { display: block; font-size: 6.5px; color: var(--cmt); margin-top: 2px; }
.fa-cp-mac { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 5px; }
.fa-cp-mac small { font-size: 6px; color: #666; }
.fa-cp-mac s { display: block; height: 100%; border-radius: inherit; }
.fa-cp-sec { display: block; margin: 9px 10px 0; font-size: 9px; color: var(--cdk); }
.fa-cp-reco { display: flex; gap: 6px; margin: 5px 10px 0; }
.fa-cp-reco span { flex: 1; height: 50px; border-radius: 10px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px #EDEDED; }
.fa-cp-tab { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 40px; border-radius: 20px; background: #fff; box-shadow: 0 6px 16px -6px rgb(0 0 0 / 0.25); display: flex; align-items: center; justify-content: space-around; color: #AAA; font-size: 13px; z-index: 2; }
.fa-cp-tab i:first-child { color: var(--co); }
.fa-cp-tab b { width: 34px; height: 34px; margin-top: -18px; border-radius: 50%; display: grid; place-items: center; background: var(--cgrad); color: #fff; font-size: 14px; box-shadow: 0 6px 14px -4px rgb(255 168 5 / 0.8); }
.fa-cp-dim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.4); opacity: 0; z-index: 3; }
.fa-cp-dial { position: absolute; right: 10px; bottom: 105px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 4; }
.fa-cp-dial span { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px 0 7px; border-radius: 11px; background: #fff; font-size: 7.5px; font-weight: 600; color: var(--cdk); box-shadow: 0 4px 10px -4px rgb(0 0 0 / 0.3); opacity: 0; }
.fa-cp-dial .fa-i { color: var(--co); font-size: 10px; }
.fa-cp-fab { position: absolute; left: 149px; top: 313px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--cgrad); color: #fff; font-size: 16px; z-index: 5; box-shadow: 0 6px 14px -4px rgb(255 168 5 / 0.8); }
.fa-cp-fab .fa-i { stroke-width: 2.6; }
.fa-cp--cam { background: #141210; color: #fff; }
.fa-cp-nav { display: grid; grid-template-columns: 20px 1fr 20px; align-items: center; height: 24px; margin-top: 36px; padding: 0 10px; font-size: 11px; }
.fa-cp-nav b { font-size: 9.5px; text-align: center; font-weight: 600; }
.fa-cp--cam .fa-cp-nav .fa-i:last-child { color: var(--co); }
.fa-cp-view { position: absolute; left: 0; right: 0; top: 66px; bottom: 74px; overflow: hidden; background: radial-gradient(80% 70% at 50% 50%, #3a2e22, #15110d 80%); }
.fa-cp-dish { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; background: radial-gradient(circle, #f3efe7 58%, #d9d2c4 61%, #efe9de 64%, #cfc6b5 100%); box-shadow: 0 16px 30px rgb(0 0 0 / 0.5); filter: blur(1.2px); }
.fa-cp-dish i { position: absolute; border-radius: 50%; filter: blur(7px); }
.fa-cp-dish i:nth-child(1) { left: 26px; top: 40px; width: 50px; height: 42px; background: #e58b5e; }
.fa-cp-dish i:nth-child(2) { left: 66px; top: 32px; width: 44px; height: 46px; background: #c8a77e; }
.fa-cp-dish i:nth-child(3) { left: 50px; top: 74px; width: 46px; height: 30px; background: #7cb342; }
.fa-cp-cap { position: absolute; left: 0; right: 0; top: 10px; text-align: center; font-size: 7.5px; color: #eee; }
.fa-cp-brk { position: absolute; left: 22px; right: 22px; top: 36px; bottom: 30px; }
.fa-cp-brk i { position: absolute; width: 22px; height: 22px; border: 3px solid var(--co); }
.fa-cp-brk i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.fa-cp-brk i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.fa-cp-brk i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.fa-cp-brk i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.fa-cp-busy { position: absolute; left: 20px; right: 20px; bottom: 16px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 12px; background: rgb(255 255 255 / 0.95); color: var(--cdk); opacity: 0; }
.fa-cp-busy .spin, .fa-c-hud .spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #F3E3C0; border-top-color: var(--co); }
.fa-cp-busy span { display: grid; font-size: 8px; }
.fa-cp-busy b { grid-area: 1 / 1; }
.fa-cp-shut { position: absolute; left: 0; right: 0; bottom: 16px; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; }
.fa-cp-shut .lib { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; color: #fff; }
.fa-cp-shut .lib:first-child { background: rgb(255 255 255 / 0.14); }
.fa-cp-shut .sh { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #141210, 0 0 0 5px rgb(255 255 255 / 0.6); }
.fa-cp-bbox { position: absolute; left: 36px; right: 36px; top: 60px; height: 76px; padding: 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 3px var(--co); overflow: hidden; }
.fa-cp-bbox svg { width: 100%; height: 100%; fill: #222; display: block; }
.fa-cp-bbox .laser, .fa-c-label__bars .laser { position: absolute; left: 6px; right: 6px; top: 12px; height: 2px; border-radius: 1px; background: #E53935; box-shadow: 0 0 8px #E53935; }
.fa-cp--cam .fa-cp-cap { top: auto; bottom: 20px; }
.fa-cp-manual { position: absolute; left: 20px; right: 20px; bottom: 26px; height: 30px; border-radius: 15px; display: grid; place-items: center; background: rgb(255 255 255 / 0.12); font-size: 8px; color: #fff; }
.fa-cp--chat, .fa-cp--mac { background: #fff; }
.fa-cp--chat .fa-cp-nav, .fa-cp--mac .fa-cp-nav { color: var(--cdk); }
.fa-cp-msgs { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }
.fa-cp-msgs span { max-width: 80%; padding: 6px 8px; border-radius: 10px; font-size: 7.5px; line-height: 1.35; }
.fa-cp-msgs .ai { align-self: flex-start; background: #F2F2F4; color: #333; }
.fa-cp-msgs .me { align-self: flex-end; background: var(--co); color: #fff; }
.fa-cp-msgs .s { width: 70%; height: 22px; }
.fa-cp-input { position: absolute; left: 10px; right: 10px; bottom: 16px; height: 30px; padding: 0 5px 0 12px; border-radius: 15px; background: #F2F2F4; display: flex; align-items: center; justify-content: space-between; font-size: 7.5px; color: #999; }
.fa-cp-input i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cgrad); color: #fff; font-size: 11px; }
.fa-cp-h { display: block; margin: 4px 10px 0; font-size: 13px; color: var(--cdk); }
.fa-cp-chips { display: flex; gap: 4px; margin: 7px 10px 0; }
.fa-cp-chips span { padding: 4px 7px; border-radius: 99px; font-size: 6.5px; background: #F2F2F4; color: #666; }
.fa-cp-chips .on { background: var(--cgrad); color: #fff; }
.fa-cp-res { height: 66px; margin: 8px 10px 0; border-radius: 12px; background: var(--ccr); box-shadow: 0 0 0 1px var(--cbd); }

/* ---------- lifted components ---------- */
.fa-c-sheet { border-radius: 26px; padding: 14px 18px; background: #fff; color: var(--ctx); box-shadow: 0 30px 50px -26px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(0 0 0 / 0.04); }
.fa-c-grab { display: block; width: 36px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: #D9D9D9; }
.fa-c-h1 { display: block; font-size: 22px; font-weight: 700; color: var(--cdk); letter-spacing: -0.01em; }
.fa-c-h2 { display: block; font-size: 16px; font-weight: 700; color: var(--cdk); }
.fa-c-sub { display: block; font-size: 11px; color: var(--cmt); margin-top: 1px; }
.fa-c-opt { display: flex; align-items: center; gap: 11px; height: 50px; margin-top: 6px; padding: 0 12px; border-radius: 14px; background: var(--ccr); border: 1px solid var(--cbd); }
.fa-c-opt:first-of-type { margin-top: 10px; }
.fa-c-well { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #FFF3DA; color: var(--cbr); font-size: 16px; font-style: normal; }
.fa-c-opt > span { flex: 1; min-width: 0; }
.fa-c-opt b { display: block; font-size: 12.5px; font-weight: 600; color: var(--cdk); }
.fa-c-opt small { display: block; font-size: 10px; color: var(--cmt); }
.fa-c-opt .chev { font-size: 13px; color: #BBB; }
.fa-c-half { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.fa-c-half span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 12px; background: #F2F2F4; font-size: 11.5px; font-weight: 600; color: #444; }
.fa-c-half .fa-i { color: #4586FF; font-size: 14px; }
.fa-c-hud { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: #fff; color: var(--cdk); box-shadow: 0 24px 40px -20px rgb(0 0 0 / 0.7); }
.fa-c-hud .spin { width: 26px; height: 26px; border-width: 3px; }
.fa-c-hud span { display: grid; flex: 1; }
.fa-c-hud b { grid-area: 1 / 1; font-size: 14px; font-weight: 600; }
.fa-c-hud small { grid-area: 2 / 1; font-size: 10.5px; color: var(--cmt); margin-top: 2px; }
.fa-c-meal { display: flex; gap: 5px; margin-top: 8px; }
.fa-c-meal span { flex: 1; height: 28px; border-radius: 14px; display: grid; place-items: center; font-size: 10.5px; font-weight: 500; background: #F2F2F4; color: #666; }
.fa-c-meal .on { background: #FFBE45; color: var(--cdk); font-weight: 600; }
.fa-c-row { display: flex; align-items: center; gap: 10px; height: 56px; margin-top: 6px; padding: 0 10px; border-radius: 14px; background: var(--ccr); border: 1px solid var(--cbd); }
.fa-c-row:first-of-type { margin-top: 10px; }
.fa-c-row > span { flex: 1; min-width: 0; }
.fa-c-row b { display: block; font-size: 12.5px; font-weight: 600; color: var(--cdk); }
.fa-c-row small { display: block; font-size: 9.5px; color: var(--cmt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-c-row em { display: block; font-style: normal; font-size: 10px; font-weight: 600; color: var(--co); }
.fa-c-row .miss { display: flex; align-items: center; gap: 4px; color: #E53935; }
.fa-c-row.is-miss { border-color: #F6C9C7; background: #FFF8F7; }
.fa-c-row.is-miss .rad { visibility: hidden; }
.fa-c-row .rad { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #D9D9D9; font-size: 12px; color: transparent; }
.fa-c-row .rad .fa-i { stroke-width: 3; }
.fa-c-btns { display: flex; gap: 8px; margin-top: 12px; }
.fa-c-btns span { flex: 1; height: 44px; border-radius: 22px; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.fa-c-btns .log { background: var(--cgrad); color: #fff; box-shadow: 0 10px 20px -10px rgb(255 168 5 / 0.9); }
.fa-c-btns .more { background: #FFF3DA; color: var(--cbr); }
.fa-c-note { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 18px; background: #fff; color: var(--cdk); box-shadow: 0 24px 40px -20px rgb(0 0 0 / 0.7); }
.fa-c-note__ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #34B27B; color: #fff; font-size: 13px; }
.fa-c-note__ic .fa-i { stroke-width: 3; }
.fa-c-note__ic--o { background: var(--cgrad); }
.fa-c-note b { font-size: 12.5px; font-weight: 600; }
.fa-c-note small { font-size: 10px; line-height: 1.35; color: #777; }
.fa-c-label { padding: 14px; border-radius: 16px; background: #fff; color: #222; box-shadow: 0 24px 40px -20px rgb(0 0 0 / 0.7); }
.fa-c-label > b { display: block; font-size: 14px; font-weight: 700; }
.fa-c-label > small { display: block; font-size: 10px; color: #888; }
.fa-c-label__bars { position: relative; margin-top: 10px; text-align: center; }
.fa-c-label__bars svg { display: block; width: 100%; height: 56px; fill: #222; }
.fa-c-label__bars small { display: block; margin-top: 3px; font-family: var(--vx-mono); font-size: 9.5px; letter-spacing: 0.12em; }
.fa-c-label__bars .laser { left: -4px; right: -4px; top: 4px; }
.fa-c-match { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 10.5px; font-weight: 600; color: #34B27B; }
.fa-c-big { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; }
.fa-c-big b { font-size: 44px; font-weight: 700; color: var(--cbr); line-height: 1; font-variant-numeric: tabular-nums; }
.fa-c-big span { font-size: 14px; font-weight: 600; color: var(--cdk); }
.fa-c-big small { display: block; font-size: 10px; font-weight: 400; color: var(--cmt); }
.fa-c-mrow { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-top: 12px; font-size: 12px; color: #444; }
.fa-c-mrow b { font-size: 12px; font-weight: 600; color: var(--cdk); }
.fa-c-mrow b i { font-style: normal; font-variant-numeric: tabular-nums; }
.fa-c-mrow u { grid-column: 1 / -1; display: block; height: 6px; margin-top: 5px; border-radius: 3px; background: #EEE; overflow: hidden; }
.fa-c-mrow s { display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; }
.fa-c-food .fa-c-btns { margin-top: 18px; }
.fa-c-chat { display: flex; flex-direction: column; padding: 14px 16px; }
.fa-c-chat__h { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #F0F0F0; }
.fa-c-orb { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cgrad); color: #fff; font-size: 15px; box-shadow: 0 0 14px rgb(255 168 5 / 0.6); }
.fa-c-chat__h b { font-size: 15px; font-weight: 700; color: var(--cdk); }
.fa-c-msgs { position: relative; flex: 1; display: flex; flex-direction: column; gap: 7px; padding-top: 10px; }
.fa-c-msgs > span { max-width: 84%; padding: 8px 11px; border-radius: 14px; font-size: 11px; line-height: 1.4; }
.fa-c-msgs .ai { align-self: flex-start; background: #F2F2F4; color: #333; border-bottom-left-radius: 4px; }
.fa-c-msgs .me { align-self: flex-end; background: var(--co); color: #fff; border-bottom-right-radius: 4px; font-weight: 500; }
.fa-c-msgs .typing { position: absolute; left: 0; top: 108px; display: flex; gap: 4px; padding: 11px 12px; background: #F2F2F4; border-radius: 14px; }
.fa-c-msgs .typing i { width: 6px; height: 6px; border-radius: 50%; background: #AAA; }
.fa-c-msgs .ai.r { display: grid; }
.fa-c-msgs .ai.r i { grid-area: 1 / 1; font-style: normal; }
.fa-c-msgs .ai.r .ghost { visibility: hidden; }
.fa-c-sugg { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 14px; background: var(--ccr); border: 1px solid var(--cbd); }
.fa-c-sugg > span { flex: 1; min-width: 0; }
.fa-c-sugg b { display: block; font-size: 12px; font-weight: 600; color: var(--cdk); }
.fa-c-sugg small { display: block; font-size: 9.5px; color: #888; }
.fa-c-sugg small i { font-style: normal; font-weight: 600; }
.fa-c-sugg em { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cgrad); color: #fff; font-size: 14px; }
.fa-c-sugg em .fa-i { stroke-width: 2.6; }
.fa-c-logged { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 14px; background: #EBFFEE; border: 1px solid #BDEBC6; }
.fa-c-logged > i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #34B27B; color: #fff; font-size: 12px; }
.fa-c-logged > i .fa-i { stroke-width: 3; }
.fa-c-logged > span { flex: 1; }
.fa-c-logged b { display: block; font-size: 11.5px; font-weight: 600; color: #0b5c2a; }
.fa-c-logged small { display: block; font-size: 9.5px; color: #3d7a50; }
.fa-c-logged em { font-style: normal; font-size: 9.5px; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: #FFBE45; color: var(--cdk); }
.fa-c-input { display: flex; align-items: center; justify-content: space-between; height: 38px; margin-top: 8px; padding: 0 5px 0 14px; border-radius: 19px; background: #F2F2F4; font-size: 11px; color: #999; }
.fa-c-input i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cgrad); color: #fff; font-size: 13px; }
.fa-c-pre { display: flex; gap: 5px; margin-top: 10px; }
.fa-c-pre span { white-space: nowrap; padding: 6px 10px; border-radius: 99px; border: 1px solid #ECECEF; font-size: 10.5px; font-weight: 600; color: #555; }
.fa-c-tg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.fa-c-tg span { padding: 8px 10px; border-radius: 12px; background: #F7F7F9; }
.fa-c-tg small { display: block; font-size: 9.5px; color: #888; }
.fa-c-tg b { display: block; font-size: 15px; font-weight: 700; color: var(--cdk); font-variant-numeric: tabular-nums; }
.fa-c-rc { display: flex; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 16px; background: var(--ccr); border: 1px solid var(--cbd); }
.fa-c-rc__a { flex: 1; min-width: 0; }
.fa-c-rc__a > b { display: block; font-size: 12.5px; font-weight: 600; color: var(--cdk); }
.fa-c-rc__a > small { display: flex; align-items: center; gap: 3px; font-size: 9.5px; color: #888; margin-top: 1px; }
.fa-c-rc__a .dots { display: flex; gap: 9px; margin-top: 6px; }
.fa-c-rc__a .dots i { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 9.5px; font-weight: 600; color: #555; }
.fa-c-rc__a .dots i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.fa-c-rc__a u { display: flex; height: 6px; margin-top: 7px; border-radius: 3px; overflow: hidden; gap: 1.5px; }
.fa-c-rc__a u s { display: block; height: 100%; }
.fa-c-rc__b { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; }
.fa-c-rc__b > b { font-size: 16px; font-weight: 700; color: var(--cbr); line-height: 1; }
.fa-c-rc__b > small { font-size: 9px; color: #888; }
.fa-c-rc__b .ring { position: relative; width: 36px; height: 36px; margin-top: 4px; display: grid; place-items: center; }
.fa-c-rc__b .ring svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.fa-c-rc__b .trk { stroke: #EEE; stroke-width: 3.5; }
.fa-c-rc__b .arc { stroke: var(--m); stroke-width: 3.5; stroke-linecap: round; }
.fa-c-rc__b .ring i { position: relative; font-style: normal; font-size: 8.5px; font-weight: 700; color: var(--cdk); }
.fa-c-all { display: flex; align-items: center; gap: 3px; margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--co); }
.fa-c-map { padding: 0; overflow: hidden; }
.fa-c-map__v { position: relative; height: 190px; }
.fa-c-map__v svg { display: block; width: 100%; height: 100%; }
.fa-c-map__v .me { position: absolute; left: 88px; top: 110px; width: 14px; height: 14px; border-radius: 50%; background: #4586FF; box-shadow: 0 0 0 3px #fff, 0 0 0 10px rgb(69 134 255 / 0.2); }
.fa-c-map__v .pin { position: absolute; width: 22px; height: 22px; margin: -22px 0 0 -11px; border-radius: 50% 50% 50% 0; transform-origin: 50% 100%; }
.fa-c-map__v .pin b { position: absolute; inset: 0; border-radius: 50% 50% 50% 0; background: var(--co); rotate: -45deg; box-shadow: 0 4px 8px -2px rgb(0 0 0 / 0.35); }
.fa-c-map__v .pin b::after { content: ""; position: absolute; left: 7px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.fa-c-map__f { padding: 10px 14px; }
.fa-c-map__f b { display: block; font-size: 13px; font-weight: 600; color: var(--cdk); }
.fa-c-map__f small { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #888; }

/* ============================================================
   Hestior · only the real App Store screens. Magnified crops of
   the screen lift out like a loupe; focus rings mark the region.
   ============================================================ */
.fa--hestior .fa-phone__scr { background: #FDFBF6; }
.fa-x-scr img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.fa-x-focus { border-radius: 12px; box-shadow: 0 0 0 2.5px rgb(255 255 255 / 0.95), 0 0 0 7px rgb(var(--fa-accent) / 0.45), 0 0 26px rgb(255 255 255 / 0.35); pointer-events: none; }
.fa-x-lens { border-radius: 22px; overflow: hidden; background: #FDFBF6; box-shadow: 0 34px 60px -28px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.5), inset 0 0 0 1px rgb(0 0 0 / 0.04); }
.fa-x-lens--btns { border-radius: 18px; }
.fa-x-crop { position: relative; overflow: hidden; }
.fa-x-crop img { position: absolute; max-width: none; height: auto; }
.fa-x-pulse { position: absolute; border-radius: 50%; box-shadow: 0 0 0 3px rgb(var(--fa-accent)); opacity: 0; pointer-events: none; }
.fa-x-sel { position: absolute; border-radius: 16px; box-shadow: 0 0 0 3px #2B2B2B, 0 0 0 6px rgb(255 255 255 / 0.9); opacity: 0; pointer-events: none; }
.fa--hestior .fa-tap { background: radial-gradient(circle, rgb(43 43 43 / 0.35), rgb(43 43 43 / 0.1) 60%, transparent 72%); box-shadow: 0 0 0 1.5px rgb(43 43 43 / 0.6); }
.fa-x-gen { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-radius: 20px; background: #2B2B2B; color: #fff; box-shadow: 0 26px 44px -22px rgb(0 0 0 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.12); overflow: hidden; }
.fa-x-gen__ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: rgb(255 255 255 / 0.1); color: #F2E4CF; }
.fa-x-gen > span { flex: 1; min-width: 0; }
.fa-x-gen b { display: block; font-size: 15px; font-weight: 650; }
.fa-x-gen small { display: block; font-size: 11.5px; color: rgb(255 255 255 / 0.62); }
.fa-x-gen u { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(255 255 255 / 0.1); }
.fa-x-gen s { display: block; height: 100%; background: #F2E4CF; transform-origin: 0 50%; transform: scaleX(0); }
.fa-x-res { border-radius: 22px; overflow: hidden; background: #E5E5E5; box-shadow: 0 34px 60px -26px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.3); }
.fa-x-res img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fa-x-toast { position: absolute; left: 0; right: 0; top: 14px; width: max-content; margin: 0 auto; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px; border-radius: 17px; background: #fff; color: #1f1f1f; font-size: 13px; font-weight: 600; box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.5); }
.fa-x-toast .fa-i { color: rgb(var(--fa-accent)); }

/* ---------- Reduced motion: no drift, no parallax, no caret blink ---------- */
@media (prefers-reduced-motion: reduce) {
  .fa-stage::before { animation: none; }
  .fa-g { transition: none; translate: none; }
  .fa-z-input .caret { animation: none; }
}
html.vx-reduced .fa-stage::before, html.vx-reduced .fa-z-input .caret { animation: none; }
html.vx-reduced .fa-g { transition: none; translate: none; }

/* Herc rings: pin each badge glyph to the exact centre of its 22px badge
   (grid centring was not applying; the glyph sat ~4px left of centre) */
.fa-h-badge .fa-i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }