/* Flakk site v7.5: feature visuals on the monitor. The palette is the real console's (its CSS variables), dark by night, light by day.
   Everything animates through --k (the section's scroll progress, 0..1) and the per-element variables v7feat.js derives from it. */
.fv { --f-ink: #EEF2F7; --f-soft: #B9C4D2; --f-surf: #10263F; --f-surf2: #0D2137; --f-surf3: #163152; --f-ground: #0A1D33; --f-hdr: #071526; --f-rule: rgba(214, 226, 240, .14);
  --f-conf: #24466E; --f-conf-ink: #E6EEF8; --f-in: #1B5A40; --f-in-ink: #E3F6EC; --f-hold: #5B4314; --f-hold-ink: #FBE7C0; --f-amber: #F2A741; --f-ok: #7FD3AA; --f-bad: #E2675A; --f-shadow: 0 30px 60px -28px rgba(0, 0, 0, .7);
  --c-direct: #F2A741; --c-bcom: #5B9BE0; --c-exp: #3FB47F; --c-air: #E2675A; --c-ggl: #A189D6; }
html.day .fv { --f-ink: #16181D; --f-soft: #4A4E58; --f-surf: #FFFFFF; --f-surf2: #F7F3EC; --f-surf3: #EFE9DE; --f-ground: #FBF8F2; --f-hdr: #0A1D33; --f-rule: rgba(15, 42, 71, .13);
  --f-conf: #DCE6F2; --f-conf-ink: #13304F; --f-in: #D3EEDF; --f-in-ink: #114A33; --f-hold: #FBEBCB; --f-hold-ink: #6B4507; --f-ok: #1F8A5B; --f-bad: #C2402F; --f-shadow: 0 30px 60px -30px rgba(10, 29, 51, .35);
  --c-direct: #E0952F; --c-bcom: #2F6FB3; --c-exp: #1F8A5B; --c-air: #C2402F; --c-ggl: #7A5BB5; }
#mon .mp.fvb { padding: 0; display: block; background: var(--f-ground); color: var(--f-ink); font-family: 'Geist', system-ui, sans-serif; overflow: hidden; }
#mon .mp.fv:not(.fvb) { background: var(--f-ground); }
.fv-hdr { position: absolute; left: 0; right: 0; top: 0; height: 68px; display: flex; align-items: center; gap: 26px; padding: 0 40px; background: var(--f-hdr); color: #F3EDE2; }
.fv-hdr b { font: 500 32px 'Fraunces', Georgia, serif; color: var(--f-amber); letter-spacing: -.01em; }
.fv-hdr span { font: 600 21px 'Geist', system-ui, sans-serif; opacity: .92; }
.fv-hdr em { margin-left: auto; font: 500 17px 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; font-style: normal; opacity: .65; }
/* the calendar */
.fv-cal { position: absolute; left: 56px; right: 56px; top: 232px; bottom: 56px; --rh: 68px; }
[data-fv=tetris] .fv-cal { top: 110px; }
.fv-days { display: grid; grid-template-columns: 80px repeat(7, 1fr); height: 44px; align-items: center; font: 600 19px 'Geist', system-ui, sans-serif; color: var(--f-soft); text-align: center; }
.fv-rows { position: relative; border-top: 2px solid var(--f-rule); background: var(--f-surf); border-radius: 0 0 18px 18px; box-shadow: var(--f-shadow); }
.fv-row { display: grid; grid-template-columns: 80px 1fr; height: var(--rh); border-bottom: 1px solid var(--f-rule); background: repeating-linear-gradient(90deg, transparent 0 calc((100% - 80px) / 7 - 1px), var(--f-rule) calc((100% - 80px) / 7 - 1px) calc((100% - 80px) / 7)); }
.fv-row:nth-child(even) { background-color: var(--f-surf2); }
.fv-row .lab, .fv-days .lab { font: 600 19px 'Geist Mono', ui-monospace, monospace; font-style: normal; color: var(--f-soft); display: grid; place-items: center; }
.fv-stage { position: absolute; left: 80px; right: 0; top: 0; bottom: 0; }
.fv-chip { position: absolute; top: calc(var(--r) * var(--rh) + 8px); height: calc(var(--rh) - 16px); left: calc(var(--c) / 7 * 100% + 4px); width: calc(var(--w) / 7 * 100% - 8px); display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 12px; background: var(--f-conf); color: var(--f-conf-ink); font: 600 19px 'Geist', system-ui, sans-serif; white-space: nowrap; overflow: hidden; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); }
.fv-chip.in { background: var(--f-in); color: var(--f-in-ink); } .fv-chip.hold { background: var(--f-hold); color: var(--f-hold-ink); }
.fv-chip .ch { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c-direct); } .fv-chip .ch.c-bcom { background: var(--c-bcom); } .fv-chip .ch.c-exp { background: var(--c-exp); } .fv-chip .ch.c-air { background: var(--c-air); } .fv-chip .ch.c-ggl { background: var(--c-ggl); }
.fv-chip.elena { left: calc((var(--c) + var(--mv, 0)) / 7 * 100% + 4px); z-index: 3; outline: 3px solid rgba(242, 167, 65, calc(var(--glow, 0))); box-shadow: 0 0 calc(var(--glow, 0) * 44px) calc(var(--glow, 0) * 8px) rgba(242, 167, 65, calc(var(--glow, 0) * .75)); background: color-mix(in srgb, var(--f-conf) calc((1 - var(--glow, 0)) * 100%), #F2A741); color: var(--f-conf-ink); }
[data-fv=tetris] .fv-chip { --e: clamp(0, calc(var(--k, 0) * 2.2 - var(--i, 0) * .045 - .1), 1); opacity: min(1, calc(var(--e) * 3)); transform: translate(calc((1 - var(--e)) * var(--dx, 0px)), calc((1 - var(--e)) * var(--dy, 0px))) rotate(calc((1 - var(--e)) * var(--rot, 0deg))); }
.fv-count { position: absolute; right: 56px; top: 14px; display: flex; align-items: baseline; gap: 12px; color: #F3EDE2; z-index: 4; }
.fv-count b { font: 500 40px 'Fraunces', Georgia, serif; color: var(--f-amber); min-width: 52px; text-align: right; } .fv-count span { font: 500 17px 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
/* talk: the ask bar */
.fv-ask { position: absolute; left: 56px; right: 56px; top: 104px; height: 96px; display: flex; align-items: center; justify-content: flex-start; gap: 22px; padding: 0 230px 0 30px; border-radius: 48px; background: var(--f-surf); border: 2px solid var(--f-rule); box-shadow: var(--f-shadow); font: 500 38px 'Geist', system-ui, sans-serif; color: var(--f-ink); }
.fv-ask .orb { width: 58px; height: 58px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #ffe3ad, #F2A741 55%, #b86d12); box-shadow: 0 0 34px rgba(242, 167, 65, .55); }
.fv-ask .t { min-width: 2px; } .fv-ask .caret { width: 3px; height: 44px; background: var(--f-amber); margin-left: -14px; opacity: 0; } .fv-ask.typing .caret { opacity: 1; }
.fv-go { position: absolute; right: 90px; top: 124px; padding: 16px 36px; border-radius: 999px; background: #F2A741; color: #071322; font: 700 28px 'Geist', system-ui, sans-serif; opacity: var(--a, 0); transform: translateY(calc((1 - var(--a, 0)) * 14px)) scale(calc(1 - var(--tap, 0) * .12)); box-shadow: 0 0 calc(var(--tap, 0) * 30px) rgba(242, 167, 65, .8); }
.fv-toast { position: absolute; left: 50%; bottom: 14px; display: flex; align-items: center; gap: 16px; padding: 16px 30px; border-radius: 18px; background: var(--f-in); color: var(--f-in-ink); font: 600 27px 'Geist', system-ui, sans-serif; opacity: var(--a, 0); transform: translate(-50%, calc((1 - var(--a, 0)) * 24px)); box-shadow: var(--f-shadow); }
.fv-toast b { font-size: 30px; }
/* board: three decisions */
.fv-cards { position: absolute; left: 56px; right: 56px; top: 120px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.fv-card { position: relative; min-height: 440px; padding: 34px 30px; border-radius: 26px; background: var(--f-surf); border: 2px solid var(--f-rule); box-shadow: var(--f-shadow); display: flex; flex-direction: column; opacity: var(--in, 0); transform: translateY(calc((1 - var(--in, 0)) * 70px)) rotateX(calc((1 - var(--in, 0)) * 18deg)); overflow: hidden; }
.fv-card small { font: 500 17px 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--f-amber); }
.fv-card b { margin-top: 14px; font: 500 36px/1.18 'Fraunces', Georgia, serif; color: var(--f-ink); }
.fv-card .row { margin-top: auto; display: flex; gap: 14px; }
.fv-card u { text-decoration: none; flex: 1; text-align: center; padding: 16px 0; border-radius: 999px; font: 700 26px 'Geist', system-ui, sans-serif; background: var(--f-surf3); color: var(--f-soft); }
.fv-card u.yes { background: #F2A741; color: #071322; transform: scale(calc(1 - var(--tap, 0) * .14)); box-shadow: 0 0 calc(var(--tap, 0) * 34px) rgba(242, 167, 65, .85); }
.fv-card .ok { position: absolute; inset: 0; display: grid; place-items: center; background: var(--f-in); color: var(--f-in-ink); font: 600 40px 'Geist', system-ui, sans-serif; font-style: normal; opacity: var(--done, 0); transform: scale(calc(1.06 - var(--done, 0) * .06)); }
.fv-sub { position: absolute; left: 0; right: 0; bottom: 36px; text-align: center; font: 500 27px 'Fraunces', Georgia, serif; color: var(--f-soft); }
/* agents: the memory fills up */
.fv-agent .mem { display: grid; grid-template-columns: repeat(36, 1fr); gap: 5px; margin: 8px 0 2px; }
.fv-agent .mem i { height: 16px; border-radius: 4px; background: var(--f-rule); transition: background .25s, box-shadow .25s; }
.fv-agent .mem i.on { background: var(--f-amber); box-shadow: 0 0 10px rgba(242, 167, 65, .6); }
.fv-agent .mag img { transform: scale(calc(.9 + var(--k, 0) * .1)); }
.fv-agent .mag dd { --o: clamp(0, calc((var(--k, 0) - .06) * 5), 1); opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 16px)); }
.fv-agent .mag dd:nth-of-type(2) { --o: clamp(0, calc((var(--k, 0) - .26) * 5), 1); } .fv-agent .mag dd:nth-of-type(3) { --o: clamp(0, calc((var(--k, 0) - .46) * 5), 1); }
.fv-agent .mvs { opacity: clamp(0, calc((var(--k, 0) - .6) * 5), 1); }
/* cost: the human cost bar grows */
.fv-cost .mp-t { font-size: 19px; } .fv-cost .mp-t td { padding: 7px 10px; } .fv-cost .mp-t td b { font-size: 20px; }
.fv-cost .mp-t td.bar { width: 34%; padding-right: 22px; } .fv-cost .bar i { display: block; height: 18px; border-radius: 9px; background: linear-gradient(90deg, #C2402F, #F2A741); width: calc(var(--w, 0%) * var(--g, 0)); box-shadow: 0 0 14px rgba(194, 64, 47, .45); }
.fv-cost .mp-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; opacity: var(--vs, 0); transform: translateY(calc((1 - var(--vs, 0)) * 34px)); }
.fv-cost .mp-vs > div { padding: 14px 22px; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.fv-cost .mp-vs > div.gold { background: rgba(242, 167, 65, .15); box-shadow: inset 0 0 0 2px rgba(242, 167, 65, .6); }
.fv-cost .mp-vs b { display: block; font: 500 24px 'Fraunces', Georgia, serif; margin-bottom: 4px; } .fv-cost .mp-vs span { display: block; font-size: 17px; opacity: .9; }
.fv-cost .mp-vs > div:not(.gold) span::before { content: '✗ '; color: #E2675A; } .fv-cost .mp-vs > div.gold span::before { content: '✓ '; color: #3FB47F; }
html.day .fv-cost .mp-vs > div { background: rgba(15, 42, 71, .05); box-shadow: inset 0 0 0 1px rgba(15, 42, 71, .1); } html.day .fv-cost .mp-vs > div.gold { background: rgba(242, 167, 65, .22); }
/* system: packets */
.fv-sys .msys path { animation: none; } .fv-sys .pkt { display: none; }
.fv-sys .pk2 { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #F2A741; box-shadow: 0 0 24px 8px rgba(242, 167, 65, .7); pointer-events: none; z-index: 4; opacity: 0; }
/* staff: an alarm arrives, is acknowledged, the role versions appear */
.fs-stage { position: absolute; left: 0; right: 0; top: 96px; bottom: 20px; --in: 0; --swap: 0; --side: 0; }
.fs-ph { position: absolute; top: 4px; width: 262px; aspect-ratio: 390 / 844; border-radius: 32px; overflow: hidden; background: #000; box-shadow: 0 0 0 6px #0d0e11, 0 0 0 8px #2a2d33, 0 30px 60px -20px rgba(0, 0, 0, .7); }
.fs-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-main { left: calc(50% - 131px); transform: translateY(calc((1 - var(--in)) * 640px)) rotate(calc(var(--shake, 0) * 3deg)); }
.fs-main .job { opacity: var(--swap); } .fs-main .alarm { opacity: calc(1 - var(--swap)); }
.fs-ring { position: absolute; left: 50%; bottom: 44px; width: 150px; height: 56px; margin-left: -75px; border-radius: 999px; box-shadow: 0 0 0 calc(var(--tap, 0) * 14px) rgba(255, 255, 255, .55); opacity: calc(var(--tap, 0) * 2); pointer-events: none; }
.fs-l { left: calc(50% - 131px - 340px); } .fs-r { left: calc(50% - 131px + 340px); }
.fs-l, .fs-r { opacity: var(--side); transform: translateX(calc((1 - var(--side)) * (var(--dir) * -340px))) scale(calc(.9 + var(--side) * .1)); } .fs-l { --dir: -1; } .fs-r { --dir: 1; }
.fs-cap { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font: 500 15px 'Geist Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--f-soft); }
.fs-ph img.lt { display: none; } html.day .fs-ph img.lt { display: block; } html.day .fs-ph img.dk { display: none; }

/* v7.6c: the cost screen fits whole (the table and the total row), also in long languages */
.fv-cost.mp { padding: 26px 44px 22px; gap: 14px; } .fv-cost .mp-t { font-size: 18px; } .fv-cost .mp-t td { padding: 4px 10px; } .fv-cost .mp-t th { padding: 3px 10px; } .fv-cost .mp-t tfoot td { font-size: 23px; padding: 6px 10px; }
.fv-cost .mp-vs > div { padding: 9px 18px; } .fv-cost .mp-vs b { font-size: 21px; margin-bottom: 2px; } .fv-cost .mp-vs span { font-size: 15px; line-height: 1.3; }

/* v7.6c: the freed nights light up amber once the week has been tidied */
.fv-free { position: absolute; top: calc(var(--r) * var(--rh) + 8px); height: calc(var(--rh) - 16px); left: calc(var(--c) / 7 * 100% + 4px); width: calc(1 / 7 * 100% - 8px); border-radius: 12px; border: 2px dashed rgba(242, 167, 65, .9); background: rgba(242, 167, 65, .16); box-shadow: 0 0 calc(var(--a, 0) * 26px) rgba(242, 167, 65, .55); opacity: var(--a, 0); transform: scale(calc(.92 + var(--a, 0) * .08)); }
.fv-toast.freed { background: #F2A741; color: #071322; } .fv-toast.freed b { color: #071322; }

/* v7.6g: whole pictures only, never cropped (the content-fit gate) */
#mon .fs-ph img, #mon .fv img:not(.mag img) { object-fit: contain !important; }

/* v7.8-a: nothing on the screen is cropped. Staff: three phones, as large as the 760 px screen allows, no overlap at rest (290 px wide, 350 px pitch) */
#mon .fs-ph { top: 6px; height: 628px; width: auto; aspect-ratio: 390 / 844; }
#mon .fs-main { left: calc(50% - 145px); }
#mon .fs-l { left: calc(50% - 145px - 350px); } #mon .fs-r { left: calc(50% - 145px + 350px); }
/* v7.8-a: the recorded console film is 16:9 inside a 1280x760 screen: contain + letterbox (20 px bars). Its own nav row is cut by the recording (right end 'Acc' before 3.25 s, 'Propi' behind the AI column after it):
   a patch in the header colour hides ONLY the cut item (phase a / b is set from the video time in v7feat.js). */
#mon .mp.film::before, #mon .mp.film::after { content: ''; position: absolute; top: 58px; height: 26px; background: #0b1b2e; opacity: 0; pointer-events: none; z-index: 2; }
html.day #mon .mp.film::before, html.day #mon .mp.film::after { background: #0e2843; }
#mon .mp.film::before { left: 1229px; width: 51px; } #mon .mp.film::after { left: 946px; width: 44px; }
#mon .mp.film[data-ph="a"]::before, #mon .mp.film[data-ph="b"]::after { opacity: 1; }
/* v7.8-a: cost screen: the 'versus' cards sat on the bottom bezel, compact the stack so every line is inside with margin */
#mon .fv-cost.mp { padding: 18px 44px 16px; gap: 8px; }
.fv-cost .mp-h { padding-bottom: 8px; } .fv-cost .mp-h b { font-size: 32px; }
.fv-cost .mp-vs { gap: 14px; } .fv-cost .mp-vs > div { padding: 8px 16px; }
.fv-cost .mp-vs span { display: inline-block; margin-right: 18px; line-height: 1.25; }

/* v7.8-e: the booking-feature slides on the monitor (front desk, AI inbox, reviews, prices, tasks, report). Crisp DOM, console palette, driven only by scroll variables */
.fx { position: absolute; left: 56px; right: 56px; top: 110px; bottom: 56px; display: flex; flex-direction: column; gap: 22px; justify-content: center; opacity: 0; }
.fx.fx-center { align-items: center; }
.fx-list { display: flex; flex-direction: column; gap: 18px; }
.fx-row, .fx-msg { display: flex; align-items: center; gap: 22px; padding: 22px 30px; border-radius: 20px; background: var(--f-surf); border: 2px solid var(--f-rule); box-shadow: var(--f-shadow); opacity: var(--in, 0); transform: translateY(calc((1 - var(--in, 0)) * 28px)); }
.fx-row .av { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--f-conf); color: var(--f-conf-ink); font: 600 28px 'Geist', system-ui, sans-serif; font-style: normal; flex: none; }
.fx-who { display: flex; flex-direction: column; gap: 4px; margin-right: auto; } .fx-who b { font: 600 30px 'Geist', system-ui, sans-serif; color: var(--f-ink); } .fx-who small { font: 500 21px 'Geist Mono', ui-monospace, monospace; color: var(--f-soft); letter-spacing: .08em; }
.fx-chip { text-decoration: none; padding: 10px 22px; border-radius: 999px; font: 600 23px 'Geist', system-ui, sans-serif; background: var(--f-surf3); color: var(--f-soft); white-space: nowrap; }
.fx-chip.ok { background: var(--f-in); color: var(--f-in-ink); } .fx-row .fx-chip.c1 { opacity: var(--c1, 0); } .fx-row .fx-chip.c2 { opacity: var(--c2, 0); }
.fx-note { text-align: center; font: 500 26px 'Fraunces', Georgia, serif; color: var(--f-soft); }
.fx-msg { position: relative; overflow: hidden; } .fx-msg em { font: 500 17px 'Geist Mono', ui-monospace, monospace; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--f-soft); width: 170px; flex: none; }
.fx-msg b { font: 600 30px 'Geist', system-ui, sans-serif; color: var(--f-ink); margin-right: auto; }
.fx-msg .chn { width: 16px; height: 16px; border-radius: 50%; background: var(--c-direct); flex: none; } .fx-msg .chn.n1 { background: var(--c-bcom); } .fx-msg .chn.n2 { background: var(--c-exp); }
.fx-msg .draft { background: var(--f-hold); color: var(--f-hold-ink); opacity: var(--d, 0); }
.fx-yes { text-decoration: none; padding: 12px 38px; border-radius: 999px; font: 700 26px 'Geist', system-ui, sans-serif; background: #F2A741; color: #071322; transform: scale(calc(1 - var(--tap, 0) * .14)); box-shadow: 0 0 calc(var(--tap, 0) * 34px) rgba(242, 167, 65, .85); }
.fx-msg::after { content: '\2713'; position: absolute; inset: 0; display: grid; place-items: center; background: var(--f-in); color: var(--f-in-ink); font: 600 44px 'Geist', system-ui, sans-serif; opacity: var(--done, 0); }
.fx-rv { position: relative; width: min(1080px, 100%); padding: 40px 48px; border-radius: 26px; background: var(--f-surf); border: 2px solid var(--f-rule); box-shadow: var(--f-shadow); display: flex; flex-direction: column; gap: 22px; opacity: var(--in, 0); transform: translateY(calc((1 - var(--in, 0)) * 30px)); overflow: hidden; }
.fx-rv .stars { font: 500 38px 'Geist', system-ui, sans-serif; color: var(--f-amber); letter-spacing: .06em; } .fx-rv .stars small { font: 500 22px 'Geist', system-ui, sans-serif; color: var(--f-soft); letter-spacing: 0; margin-left: 16px; }
.fx-rv .rv { margin: 0; font: 500 34px/1.3 'Fraunces', Georgia, serif; color: var(--f-ink); }
.fx-rv .rep { padding: 22px 28px; border-radius: 18px; background: var(--f-surf2); border-left: 6px solid var(--f-amber); min-height: 150px; } .fx-rv .rep small { font: 500 17px 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--f-amber); }
.fx-rv .typed { margin: 10px 0 0; font: 400 28px/1.4 'Geist', system-ui, sans-serif; color: var(--f-ink); }
.fx-act { display: flex; justify-content: flex-end; }
.fx-rv .ok { position: absolute; inset: 0; display: grid; place-items: center; background: var(--f-in); color: var(--f-in-ink); font: 600 44px 'Geist', system-ui, sans-serif; font-style: normal; opacity: var(--done, 0); }
.fx-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.fx-tile { padding: 30px 34px; border-radius: 22px; background: var(--f-surf); border: 2px solid var(--f-rule); box-shadow: var(--f-shadow); display: flex; flex-direction: column; gap: 10px; opacity: var(--in, 0); transform: translateY(calc((1 - var(--in, 0)) * 28px)); }
.fx-tile small { font: 500 24px 'Geist', system-ui, sans-serif; color: var(--f-soft); } .fx-tile b { font: 500 74px/1 'Fraunces', Georgia, serif; color: var(--f-ink); min-height: 74px; } .fx-tile span { font: 500 22px 'Geist', system-ui, sans-serif; color: var(--f-soft); }
.fx-reasons { display: flex; flex-direction: column; } .fx-reasons small { font: 500 19px 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--f-soft); margin-bottom: 8px; }
.fx-rr { display: flex; justify-content: space-between; padding: 16px 6px; border-top: 2px solid var(--f-rule); font: 500 27px 'Geist', system-ui, sans-serif; color: var(--f-ink); opacity: var(--in, 0); } .fx-rr i { font: 600 27px 'Geist Mono', ui-monospace, monospace; font-style: normal; color: var(--c-bcom); } .fx-rr i.up { color: var(--f-ok); }
.fx-flow { display: flex; align-items: center; justify-content: center; gap: 0; }
.fx-box { position: relative; width: 480px; min-height: 250px; padding: 34px 36px; border-radius: 24px; background: var(--f-surf); border: 2px solid var(--f-rule); box-shadow: var(--f-shadow); display: flex; flex-direction: column; gap: 14px; }
.fx-box small { font: 500 19px 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--f-amber); } .fx-box b { font: 500 40px/1.15 'Fraunces', Georgia, serif; color: var(--f-ink); }
.fx-box.a { opacity: var(--a, 0); transform: translateX(calc((1 - var(--a, 0)) * -40px)); } .fx-box.b { opacity: var(--b, 0); transform: translateX(calc((1 - var(--b, 0)) * 40px)); outline: 4px solid rgba(226, 103, 90, calc(var(--ring, 0) * .9)); box-shadow: var(--f-shadow), 0 0 calc(var(--ring, 0) * 40px) rgba(226, 103, 90, calc(var(--ring, 0) * .7)); }
.fx-box .ring { font: 500 23px 'Geist', system-ui, sans-serif; color: var(--f-bad); } .fx-box .taken { align-self: flex-start; opacity: var(--taken, 0); }
.fx-arrow { width: 200px; height: 6px; position: relative; } .fx-arrow i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--ar, 0) * 100%); border-radius: 3px; background: var(--f-amber); } .fx-arrow::after { content: ''; position: absolute; right: -4px; top: -11px; border: 14px solid transparent; border-left: 22px solid var(--f-amber); opacity: var(--ar, 0); }
.fx-goals { display: flex; flex-direction: column; gap: 14px; } .fx-goals small { font: 500 19px 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--f-soft); }
.fx-g { height: 20px; border-radius: 10px; background: var(--f-surf3); overflow: hidden; } .fx-g i { display: block; height: 100%; width: calc(var(--w) * var(--g, 0)); background: linear-gradient(90deg, #3FB47F, #F2A741); border-radius: 10px; }

/* v7.8-a2: cost rows a touch tighter (margin above the bezel in long languages too) */
#mon .fv-cost .mp-t td { padding: 2px 10px; } #mon .fv-cost .mp-t th { padding: 2px 10px; } #mon .fv-cost .mp-t tfoot td { padding: 4px 10px; }
#mon .fv-cost.mp { padding: 14px 44px 14px; gap: 6px; } .fv-cost .mp-vs > div { padding: 6px 16px; }