/* ============================================================
   Spatial portfolio · flows-b
   Motion graphics for Jollibee & Smashburger, GlobeOne & Globe
   Benta (+ Flowise), Fleetsmarts and CityGuide (js/space/flows-b.js).
   Stage = dark spatial glass; inside it float light app screens
   redrawn in each app's own tokens, with glass callouts beside.
   Everything is namespaced .fb-*; JS writes transform/opacity
   only. No nested backdrop-filter inside a window (cheap glass).
   ============================================================ */

.fb {
  --fb-a: 255 255 255;
  --fb-ok: 76 217 120;
  container-type: inline-size;
  position: relative; display: grid; gap: 14px; width: 100%;
  color: var(--vx-label-1); font-family: var(--vx-font);
  -webkit-user-select: none; user-select: none;
}

/* ---------- Stage ---------- */
.fb-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: min(52vh, 440px); min-height: 220px;
  overflow: hidden; border-radius: 30px; isolation: isolate; cursor: pointer; contain: layout paint;
  background:
    radial-gradient(120% 90% at 50% 120%, rgb(var(--fb-a) / 0.2), transparent 60%),
    linear-gradient(180deg, rgb(26 26 32 / 0.8), rgb(10 10 14 / 0.88));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
.fb-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fb-glow {
  position: absolute; left: -10%; top: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--fb-a) / 0.3), rgb(var(--fb-a) / 0.08) 55%, transparent);
}
.fb-glow--b { left: auto; right: -20%; top: 30%; width: 80%; background: radial-gradient(closest-side, rgb(255 255 255 / 0.08), transparent); }
.fb-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgb(255 255 255 / 0.1) 1px, transparent 1.6px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 85%);
}
.fb-scene { position: absolute; inset: 0; z-index: 1; }
.fb-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.fb-world * { transition: none; }
.fb-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 60px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.12); }

/* ---------- Controls: play/pause + stepped progress, captions ---------- */
.fb-bar { display: flex; align-items: center; gap: 14px; }
.fb-play {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--vx-label-1); background: var(--vx-fill);
  transition: background .2s, scale .35s var(--vx-spring);
}
.fb-play:hover { background: var(--vx-fill-hi); }
.fb-play:active { scale: 0.92; }
.fb-play svg { grid-area: 1 / 1; width: 18px; height: 18px; }
.fb-play svg:last-child, .fb.is-paused .fb-play svg:first-child { display: none; }
.fb.is-paused .fb-play svg:last-child { display: block; }
.fb.is-reduced .fb-play { display: none; }
.fb.is-reduced .fb-stage { cursor: default; }
.fb-steps { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.fb-step {
  min-width: 0; min-height: 44px; border: 0; padding: 8px 0 0; background: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 8px; color: var(--vx-label-3); font: 500 13px/1.2 var(--vx-font); letter-spacing: -0.005em;
  transition: color .2s;
}
.fb-step:hover, .fb-step[aria-current] { color: var(--vx-label-1); }
.fb-step.is-done { color: var(--vx-label-2); }
.fb-step__track { position: relative; display: block; height: 4px; border-radius: 4px; background: rgb(255 255 255 / 0.16); overflow: hidden; }
.fb-step__fill { position: absolute; inset: 0; border-radius: inherit; background: rgb(255 255 255 / 0.92); transform: scaleX(0); transform-origin: 0 50%; }
.fb-step__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-step:focus-visible { outline-offset: 2px; border-radius: 8px; }
.fb-cap { display: flex; align-items: flex-start; gap: 20px; min-height: 48px; }
.fb-cap__main { flex: 1; min-width: 0; margin: 0; font-size: 16px; line-height: 1.5; color: var(--vx-label-2); max-width: 78ch; text-wrap: pretty; }
.fb-cap__title { font-weight: 650; color: var(--vx-label-1); letter-spacing: -0.01em; }
.fb-cap__title::after { content: "."; }
.fb-cap__title, .fb-cap__text { display: inline; }
.fb-cap__note { flex: none; margin: 3px 0 0; max-width: 22ch; font-size: 12.5px; line-height: 1.35; font-weight: 500; color: var(--vx-label-3); text-align: right; text-wrap: balance; }
.fb-cap__main.is-in { animation: fb-cap-in .6s var(--vx-ease-out) both; }
@keyframes fb-cap-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Mini mode: stage only, fills its host (the container overlays its own call to action) */
.fb--mini { gap: 0; height: 100%; }
.fb--mini .fb-stage { height: 100%; aspect-ratio: auto; max-height: none; min-height: 150px; border-radius: inherit; cursor: inherit; }
.fb--mini .fb-vignette { box-shadow: inset 0 0 50px rgb(0 0 0 / 0.5); }
.fb--mini .fb-tap { display: none; }

/* Full mode reads as one player card: stage on top, one compact control strip below
   (play · caption · step tracks), so the stage keeps as much height as the window allows. */
.fb:not(.fb--mini) { gap: 0; border-radius: 30px; overflow: hidden; background: rgb(255 255 255 / 0.035); }
.fb:not(.fb--mini) .fb-stage { border-radius: 30px 30px 0 0; }
.fb-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 30%); grid-template-areas: "play cap steps" "play cap note"; align-items: center; column-gap: 18px; row-gap: 2px; padding: 12px 22px 14px 14px; }
.fb-ctl .fb-bar, .fb-ctl .fb-cap { display: contents; }
.fb-ctl .fb-play { grid-area: play; align-self: center; }
.fb-ctl .fb-cap__main { grid-area: cap; align-self: center; }
.fb-ctl .fb-steps { grid-area: steps; align-self: end; gap: 6px; }
.fb-ctl .fb-step { min-height: 30px; padding: 12px 0 14px; }
.fb-ctl .fb-step__label { display: none; }
.fb-ctl .fb-cap__note { grid-area: note; align-self: start; margin: 0; max-width: none; text-align: left; }
.fb.is-reduced .fb-ctl { grid-template-areas: "cap steps" "cap note"; grid-template-columns: minmax(0, 1fr) minmax(220px, 30%); padding-left: 22px; }
@container (max-width: 760px) {
  .fb-ctl { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "play steps" "cap cap" "note note"; row-gap: 6px; padding: 10px 18px 16px 12px; }
  .fb-ctl .fb-step__label { display: block; }
  .fb-ctl .fb-step { min-height: 44px; padding: 8px 0 0; }
  .fb-ctl .fb-cap__main { padding: 0 4px; }
  .fb-ctl .fb-cap__note { padding: 0 4px; }
  .fb.is-reduced .fb-ctl { grid-template-columns: minmax(0, 1fr); grid-template-areas: "steps" "cap" "note"; padding-left: 16px; }
}

@container (max-width: 560px) {
  .fb-stage { aspect-ratio: 4 / 5; max-height: min(64vh, 520px); }
  .fb:not(.fb--mini) .fb-stage { border-radius: 26px 26px 0 0; }
  .fb:not(.fb--mini) { border-radius: 26px; }
  .fb-ctl { padding: 6px 14px 16px 10px; }
  .fb-ctl .fb-step__label { display: none; }
  .fb-ctl .fb-step { padding: 20px 0 20px; }
  .fb-cap__main { font-size: 15px; }
}

/* ---------- World vocabulary (sizes in world px, scaled by the camera) ---------- */
.fb-sk { display: block; height: 9px; border-radius: 6px; background: rgb(255 255 255 / 0.2); }
.fb-sk + .fb-sk { margin-top: 8px; }
.fb-sk--lg { height: 12px; }
.fb-sk--xl { height: 16px; border-radius: 8px; }
.fb-grab { display: block; width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: rgb(0 0 0 / 0.16); }
.fb-scrim { position: absolute; inset: 0; z-index: 5; background: #000; opacity: 0; pointer-events: none; }
.fb-spin { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; opacity: 0.8; animation: fb-spin .8s linear infinite; }
@keyframes fb-spin { to { transform: rotate(360deg); } }
.fb-caret { display: inline-block; width: 2px; height: 18px; margin-left: 1px; border-radius: 1px; background: currentColor; opacity: 0; vertical-align: middle; }
.fb-tap { position: absolute; z-index: 20; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.18) 60%, transparent 70%); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85), 0 6px 18px rgb(0 0 0 / 0.35); }

/* App screen: a light app surface floating in the space (not a device, not a screenshot) */
.fb-scr {
  position: absolute; width: 300px; height: 600px; border-radius: 38px; overflow: hidden; isolation: isolate;
  background: #fff; color: #222; font-size: 15px; line-height: 1.3;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.5), 0 0 0 7px rgb(255 255 255 / 0.07), 0 50px 90px -40px rgb(0 0 0 / 0.9), 0 18px 40px -20px rgb(0 0 0 / 0.6);
}
.fb-scr.is-active { box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.85), 0 0 0 8px rgb(var(--fb-a) / 0.28), 0 0 70px -10px rgb(var(--fb-a) / 0.7), 0 50px 90px -40px rgb(0 0 0 / 0.9); }
.fb-scr .fb-sk { background: #E7E7E7; }
.fb-scr .fb-sk.is-dk { background: #C9C9CF; }
.fb-scr .fb-sk.is-w { background: rgb(255 255 255 / 0.85); }
.fb-scr .vx-ico { width: 18px; height: 18px; }

/* Glass callout: a small visionOS ornament floating beside a screen */
.fb-call {
  position: absolute; z-index: 10; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; white-space: nowrap; opacity: 0;
  background: linear-gradient(180deg, rgb(62 62 72 / 0.94), rgb(36 36 44 / 0.94)); color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 20px 40px -18px rgb(0 0 0 / 0.8);
}
.fb-call__ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--fb-a)); color: #fff; box-shadow: 0 6px 16px -6px rgb(var(--fb-a)); }
.fb-call__ico .vx-ico { width: 20px; height: 20px; }
.fb-call__img { width: 40px; height: 40px; border-radius: 50%; }
.fb-call__txt { display: grid; gap: 2px; }
.fb-call__txt b { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
.fb-call__txt small { font-size: 14px; line-height: 1.2; color: rgb(255 255 255 / 0.72); }
.fb-call__state { position: relative; display: grid !important; }
.fb-call__state > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; }
.fb-call__state .is-ok { color: rgb(var(--fb-ok)); font-weight: 600; opacity: 0; }
.fb-call__state .vx-ico { width: 15px; height: 15px; }
.fb-call__state .fb-spin { width: 13px; height: 13px; border-width: 2px; }
.fb-call.is-ok .fb-call__ico { background: rgb(var(--fb-ok)); color: #06220f; box-shadow: 0 6px 16px -6px rgb(var(--fb-ok)); }
.fb-call--apps { padding-left: 12px; gap: 8px; }
.fb-call--apps > img { width: 36px; height: 36px; border-radius: 10px; }
.fb-call--apps > img + img { margin-left: -2px; }
.fb-call--apps .fb-call__txt { margin-left: 6px; }

/* ---------- Canvas kit: wires, travelling pulses, logo nodes (n8n / Flowise style) ---------- */
.fb-wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fb-w, .fb-w__lit { fill: none; stroke-linecap: round; }
.fb-w { stroke: rgb(255 255 255 / 0.16); stroke-width: 2.5; }
.fb-w__lit { stroke: rgb(var(--fb-a)); stroke-width: 3; stroke-dasharray: 0 99999; }
.fb-w.is-dash, .fb-w__lit.is-dash { stroke-dasharray: 6 8; }
.fb-pulse { position: absolute; left: 0; top: 0; z-index: 6; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: #fff; box-shadow: 0 0 0 4px rgb(var(--fb-a) / 0.3), 0 0 16px 3px rgb(var(--fb-a) / 0.8); }
.fb-pulse.is-ok { box-shadow: 0 0 0 4px rgb(var(--fb-ok) / 0.3), 0 0 16px 3px rgb(var(--fb-ok) / 0.85); }
.fb-pulse.is-tag { width: auto; height: 30px; margin: -15px 0 0; padding: 0 12px 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; translate: -50% 0;
  background: #fff; color: #1B1B22; font-size: 13px; font-weight: 700; font-style: normal; }
.fb-pulse.is-tag .vx-ico { width: 15px; height: 15px; color: rgb(var(--fb-a)); }
.fb-logo { display: block; object-fit: contain; }
.fb-cv { position: absolute; border-radius: 30px; opacity: 0;
  background: rgb(18 18 24 / 0.72) radial-gradient(rgb(255 255 255 / 0.13) 1.3px, transparent 1.5px) 0 0 / 24px 24px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(255 255 255 / 0.07), 0 50px 90px -40px rgb(0 0 0 / 0.85); }
.fb-cv__t { position: absolute; left: 26px; top: 20px; display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vx-label-2); }
.fb-cv__t .vx-ico { width: 17px; height: 17px; }
.fb-node { position: absolute; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-radius: 20px; opacity: 0;
  background: linear-gradient(180deg, rgb(58 58 68 / 0.96), rgb(38 38 46 / 0.96)); color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.09), 0 24px 44px -22px rgb(0 0 0 / 0.9); transition: box-shadow .3s; }
.fb-node.is-on { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 0 0 2px rgb(var(--fb-a)), 0 0 0 8px rgb(var(--fb-a) / 0.18), 0 0 40px -6px rgb(var(--fb-a) / 0.7), 0 24px 44px -22px rgb(0 0 0 / 0.9); }
.fb-node__art { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: #1B1B22; box-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.6); overflow: hidden; }
.fb-node__art .fb-logo { width: 30px; height: 30px; }
.fb-node__art img[src$=".png"] { width: 100%; height: 100%; }
.fb-node__art .vx-ico { width: 24px; height: 24px; }
.fb-node__art.is-dark { background: #1B1B22; color: #fff; }
.fb-node__t { min-width: 0; display: grid; gap: 3px; }
.fb-node__t b { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.fb-node__t small { font-size: 13.5px; line-height: 1.25; color: rgb(255 255 255 / 0.66); }
.fb-node__port { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #26262E; box-shadow: inset 0 0 0 2.5px rgb(255 255 255 / 0.45); }
.fb-node__port.is-in { left: -6px; }
.fb-node__port.is-out { right: -6px; }
.fb-node.is-on .fb-node__port { box-shadow: inset 0 0 0 2.5px rgb(var(--fb-a)); }
.fb-node.no-in .fb-node__port.is-in, .fb-node.no-out .fb-node__port.is-out { display: none; }

/* =========================================================
   1 · Jollibee NA (and Smashburger on the same platform)
   red #E31837 · yellow #FDB913 · grays #F6F6F6 / #E7E7E7 / #6D6D6D / #222
   ========================================================= */
.fb-jb { --jr: #E31837; --jy: #FDB913; font-family: "Nunito", ui-rounded, "SF Pro Rounded", "Varela Round", var(--vx-font); display: flex; flex-direction: column; }
.fb-jb .fb-sk { height: 8px; }
.fb-jb-seg { display: flex; gap: 4px; margin: 16px auto 12px; padding: 4px; border-radius: 999px; background: #F1F1F1; }
.fb-jb-seg span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 800; color: #6D6D6D; }
.fb-jb-seg span .vx-ico { width: 16px; height: 16px; }
.fb-jb-seg .is-on { background: var(--jr); color: #fff; }
.fb-jb-map { position: relative; flex: none; height: 250px; background: #EEF1EA; overflow: hidden; }
.fb-jb-map svg { position: absolute; inset: 0; }
.fb-jb-map path { fill: none; stroke-linecap: round; }
.fb-jb-map__st { stroke: #fff; stroke-width: 6; }
.fb-jb-map__st.is-fwy { stroke: #F7D98B; stroke-width: 8; }
.fb-jb-map__park { fill: #CFE6C6 !important; }
.fb-jb-map__water { fill: #BFDDF3 !important; }
.fb-jb-me { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #2F80ED; box-shadow: 0 0 0 3px #fff, 0 0 0 12px rgb(47 128 237 / 0.18); opacity: 0; }
.fb-jb-pin { position: absolute; width: 38px; height: 38px; margin: -44px 0 0 -19px; padding: 3px; border-radius: 50%; background: #fff; box-shadow: 0 6px 14px -4px rgb(0 0 0 / 0.45); transform-origin: 50% 120%; opacity: 0; }
.fb-jb-pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fff; }
.fb-jb-pin img { width: 32px; height: 32px; border-radius: 50%; display: block; }
.fb-jb-pin.is-on { background: #F36B1C; box-shadow: 0 0 0 4px rgb(243 107 28 / 0.28), 0 10px 20px -6px rgb(0 0 0 / 0.5); }
.fb-jb-pin.is-on::after { border-top-color: #F36B1C; }
.fb-jb-cluster { position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; display: grid; place-items: center; background: var(--jr); color: #fff; font-size: 15px; font-weight: 900; box-shadow: 0 0 0 3px #fff, 0 6px 12px -4px rgb(0 0 0 / 0.4); opacity: 0; }
.fb-jb-sheet { position: relative; flex: 1; margin-top: -18px; padding: 10px 16px 0; border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -8px 20px -12px rgb(0 0 0 / 0.3); }
.fb-jb-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 14px; background: #F1F1F1; color: #6D6D6D; font-size: 16px; font-weight: 700; }
.fb-jb-search span { color: #222; }
.fb-jb-search .fb-caret { background: var(--jr); }
.fb-jb-hint { margin: 6px 2px 10px; font-size: 12px; color: #6D6D6D; font-weight: 600; }
.fb-jb-lbl { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #6D6D6D; }
.fb-jb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.fb-jb-row em { font-style: normal; font-size: 13px; font-weight: 700; color: #454545; white-space: nowrap; }
.fb-jb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.fb-jb-btn { display: grid; place-items: center; height: 40px; border-radius: 999px; background: var(--jr); color: #fff; font-size: 15px; font-weight: 800; }
.fb-jb-btn.is-y { background: var(--jy); color: #222; }
.fb-jb-tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); height: 60px; margin-top: auto; background: #fff; }
.fb-jb-tabs span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-top: 1.5px solid #E7E7E7; color: #6D6D6D; font-size: 11px; font-weight: 700; }
.fb-jb-tabs span .vx-ico { width: 20px; height: 20px; }
.fb-jb-tabs .is-rw b { font-size: 12px; font-weight: 900; color: var(--jr); letter-spacing: -0.02em; }
.fb-jb-tabs .is-on { border-top-color: var(--jr); color: var(--jr); font-weight: 900; }
.fb-jb-head { flex: none; display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; height: 56px; padding: 6px 16px 0; font-size: 18px; font-weight: 900; text-align: center; color: #222; }
.fb-jb-head .vx-ico { width: 20px; height: 20px; }
.fb-jb-h { margin: 12px 16px 8px; font-size: 16px; font-weight: 900; color: #222; }
.fb-jb-item { display: flex; align-items: center; gap: 12px; margin: 0 16px 8px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 10px rgb(109 109 109 / 0.22); }
.fb-jb-item__txt { flex: 1; min-width: 0; }
.fb-jb-thumb { flex: none; display: block; width: 44px; height: 44px; border-radius: 10px; background: radial-gradient(circle at 35% 35%, #F9C66B, #E8893A 60%, #C4502A); }
.fb-jb-thumb.is-b { background: radial-gradient(circle at 40% 40%, #FFE9A8, #FDB913 60%, #E08E0B); }
.fb-jb-qty { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 4px; border-radius: 999px; border: 1.5px solid #E7E7E7; font-size: 14px; font-weight: 800; }
.fb-jb-qty b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--jr); }
.fb-jb-qty b .vx-ico { width: 13px; height: 13px; }
.fb-jb-ups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px; }
.fb-jb-ups > span { position: relative; display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: #F6F6F6; transition: box-shadow .3s; }
.fb-jb-ups > span.is-on { box-shadow: inset 0 0 0 2px var(--jr); }
.fb-jb-ups .fb-jb-thumb { width: 100%; height: 44px; }
.fb-jb-add { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--jr); color: #fff; }
.fb-jb-add .vx-ico { width: 14px; height: 14px; }
.fb-jb-chips { display: flex; gap: 8px; margin: 0 16px; flex-wrap: wrap; }
.fb-jb-chips span { height: 30px; padding: 0 12px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #454545; box-shadow: inset 0 0 0 1.5px #E7E7E7; }
.fb-jb-chips .is-on { color: var(--jr); box-shadow: inset 0 0 0 1.5px var(--jr); background: #FFF1F1; }
.fb-jb-bar { position: absolute; left: 14px; right: 14px; bottom: 16px; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px 0 12px; border-radius: 12px; background: var(--jr); color: #fff; box-shadow: 0 10px 22px -10px rgb(227 24 55 / 0.9); }
.fb-jb-bar__n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--jr); font-size: 14px; font-weight: 900; }
.fb-jb-bar__t { position: relative; flex: 1; display: grid; font-size: 16px; font-weight: 800; }
.fb-jb-bar__t b { grid-area: 1 / 1; font-weight: 800; }
.fb-jb-bar__t .is-b { opacity: 0; }
.fb-jb-bar__p { font-size: 16px; font-weight: 800; }
.fb-jb-flbl { margin: 12px 18px 6px; font-size: 13px; font-weight: 800; color: #454545; }
.fb-jb-field { display: flex; align-items: center; gap: 10px; height: 46px; margin: 0 16px; padding: 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px #E7E7E7; font-size: 16px; font-weight: 700; color: #222; font-variant-numeric: tabular-nums; }
.fb-jb-field.is-focus { box-shadow: inset 0 0 0 2px #222; }
.fb-jb-field .fb-caret { background: #222; }
.fb-jb-ph { color: #A8A8A8; }
.fb-jb-num { white-space: nowrap; letter-spacing: 0.02em; }
.fb-jb-brand { position: relative; flex: none; width: 36px; height: 24px; }
.fb-jb-brand > * { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 5px; transition: opacity .25s; }
.fb-jb-brand i { color: #6D6D6D; background: #F1F1F1; }
.fb-jb-brand i .vx-ico { width: 18px; height: 18px; }
.fb-jb-brand b, .fb-jb-visa { background: #1A1F71; color: #fff; font: italic 900 11px/1 var(--vx-font); letter-spacing: 0.02em; opacity: 0; }
.fb-jb-brand.is-visa b { opacity: 1; }
.fb-jb-brand.is-visa i { opacity: 0; }
.fb-jb-visa { display: grid; place-items: center; width: 40px; height: 26px; border-radius: 5px; opacity: 1; }
.fb-call__ico .fb-jb-visa { width: 34px; height: 22px; font-size: 10px; background: #fff; color: #1A1F71; }
.fb-jb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.fb-jb-two .fb-jb-field { margin-right: 8px; }
.fb-jb-two > div + div .fb-jb-field { margin: 0 16px 0 8px; }
.fb-jb-two > div + div .fb-jb-flbl { margin-left: 10px; }
.fb-jb-check { display: flex; align-items: center; gap: 10px; margin: 14px 16px 0; font-size: 14px; font-weight: 700; color: #454545; }
.fb-jb-check i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px #BDBDBD; color: transparent; transition: background .2s; }
.fb-jb-check i .vx-ico { width: 14px; height: 14px; }
.fb-jb-check i.is-on { background: var(--jr); box-shadow: none; color: #fff; }
.fb-jb-acc { margin: 14px 16px 6px; font-size: 12px; font-weight: 700; color: #6D6D6D; }
.fb-jb-cards { display: flex; gap: 6px; margin: 0 16px; }
.fb-jb-cards i { width: 32px; height: 21px; border-radius: 4px; background: #F1F1F1; box-shadow: inset 0 0 0 1px #E0E0E0; }
.fb-jb-cta { display: grid; place-items: center; height: 48px; margin: 16px 16px 0; border-radius: 12px; background: var(--jr); color: #fff; font-size: 17px; font-weight: 900; }
.fb-jb-fp { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 12px; font-weight: 700; color: #6D6D6D; }
.fb-jb-fp .vx-ico { width: 13px; height: 13px; }
.fb-jb-3ds { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 10px 20px 26px; border-radius: 26px 26px 0 0; background: #fff; text-align: center; box-shadow: 0 -10px 30px -10px rgb(0 0 0 / 0.4); opacity: 0; }
.fb-jb-3ds__ico { display: grid; place-items: center; width: 60px; height: 60px; margin: 4px auto 10px; border-radius: 50%; background: #F1F1F1; color: #454545; transition: background .3s, color .3s; }
.fb-jb-3ds__ico .vx-ico { width: 30px; height: 30px; }
.fb-jb-3ds__ico.is-ok { background: #E4F4DE; color: #3C9123; }
.fb-jb-3ds__t { margin: 0; font-size: 19px; font-weight: 900; font-family: var(--vx-font); }
.fb-jb-3ds__s { margin: 4px 0 14px; font-size: 13px; color: #6D6D6D; font-family: var(--vx-font); }
.fb-jb-otp { display: flex; justify-content: center; gap: 7px; }
.fb-jb-otp i { width: 30px; height: 38px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px #D6D6D6; position: relative; }
.fb-jb-otp i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: #222; transform: scale(0); transition: transform .2s; }
.fb-jb-otp i.is-on::after { transform: scale(1); }
.fb-jb-3ds__st { position: relative; display: grid; justify-items: center; margin: 14px 0 0; font: 700 14px/1 var(--vx-font); color: #6D6D6D; }
.fb-jb-3ds__st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; }
.fb-jb-3ds__st .is-ok { color: #3C9123; opacity: 0; }
.fb-jb-3ds__st .vx-ico { width: 16px; height: 16px; }
.fb-jb-pay { display: flex; align-items: center; gap: 12px; margin: 0 16px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px #E7E7E7; font-size: 15px; font-weight: 800; }
.fb-jb-pay span { flex: 1; letter-spacing: 0.04em; }
.fb-jb-pay > i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #4BB62C; color: #fff; }
.fb-jb-pay > i .vx-ico { width: 13px; height: 13px; }
.fb-jb-tot { display: flex; align-items: center; justify-content: space-between; margin: 10px 18px 0; font-size: 14px; font-weight: 700; color: #6D6D6D; }
.fb-jb-tot .fb-sk { margin: 0; }
.fb-jb-tot.is-b { color: #222; font-size: 16px; font-weight: 900; }
.fb-jb-placing { position: absolute; left: 50%; bottom: 84px; z-index: 4; display: inline-flex; align-items: center; gap: 10px; height: 40px; margin-left: -96px; width: 192px; justify-content: center; border-radius: 999px; background: #222; color: #fff; font-size: 14px; font-weight: 800; opacity: 0; box-shadow: 0 10px 22px -10px rgb(0 0 0 / 0.6); }
.fb-jb--done { align-items: center; justify-content: center; padding-bottom: 20px; }
.fb-jb-art { width: 250px; opacity: 0; }
.fb-jb-art img { display: block; width: 100%; height: auto; }
.fb-jb-done { margin: 10px 0 0; font-size: 24px; font-weight: 900; color: #222; letter-spacing: -0.01em; opacity: 0; }
.fb-jb-track { display: flex; align-items: flex-start; margin-top: 22px; opacity: 0; }
.fb-jb-track > span { display: grid; justify-items: center; gap: 6px; width: 74px; text-align: center; font-size: 11px; font-weight: 800; color: #A0A0A0; line-height: 1.2; }
.fb-jb-track > span i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #F1F1F1; color: #A0A0A0; transition: background .3s, color .3s; }
.fb-jb-track > span i .vx-ico { width: 17px; height: 17px; }
.fb-jb-track > span.is-on { color: #222; }
.fb-jb-track > span.is-on i { background: var(--jr); color: #fff; }
.fb-jb-track em { flex: none; position: relative; width: 20px; height: 3px; margin: 16px -14px 0; border-radius: 2px; background: #E7E7E7; overflow: hidden; }
.fb-jb-track em::after { content: ""; position: absolute; inset: 0; background: var(--jr); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.fb-jb-eta { margin: 16px 0 0; font-size: 13px; font-weight: 700; color: #6D6D6D; opacity: 0; }

/* =========================================================
   2 · GlobeOne · #2274E5 primary · #1A458B · #F5F9FC · neutrals A0 #1F3B59 … A5 #E9EBEE
   ========================================================= */
.fb-g1 { --g1: #2274E5; --g1d: #1A458B; background: #F5F9FC; color: #1F3B59; font-family: var(--vx-font); }
.fb-g1--w { background: #fff; }
.fb-g1 .fb-sk { background: #E3E7EC; }
.fb-g1-hero { display: flex; align-items: center; gap: 10px; height: 130px; padding: 0 16px 40px; color: #fff; background: radial-gradient(120% 120% at 90% 0%, #5AA8FF 0%, transparent 55%), linear-gradient(180deg, #2E86F0, #2274E5); }
.fb-g1-hero > span:nth-child(2) { flex: 1; display: grid; gap: 6px; }
.fb-g1-hero small { font-size: 14px; font-weight: 500; }
.fb-g1-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--g1); }
.fb-g1-av .vx-ico { width: 22px; height: 22px; }
.fb-g1-bell { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.18); }
.fb-g1-acct { position: relative; margin: -40px 14px 0; padding: 12px 14px 14px; border-radius: 8px; background: #fff; box-shadow: 0 6px 16px -8px rgb(31 59 89 / 0.35); }
.fb-g1-acct__top { display: flex; align-items: flex-start; justify-content: space-between; }
.fb-g1-acct__top > span { display: grid; gap: 6px; }
.fb-g1-acct__top small { font-size: 12px; color: #62768B; font-weight: 600; }
.fb-g1-acct__top em { font-style: normal; height: 20px; padding: 0 8px; border-radius: 4px; background: #E3F5EA; color: #047130; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; display: grid; place-items: center; }
.fb-g1-bal { display: flex; align-items: flex-end; gap: 6px; margin-top: 8px; }
.fb-g1-bal > b { font: 800 40px/0.95 "Arial Narrow", "Roboto Condensed", var(--vx-font); font-stretch: condensed; letter-spacing: -0.02em; color: #1F3B59; font-variant-numeric: tabular-nums; }
.fb-g1-bal > span { display: grid; font-size: 16px; font-weight: 800; line-height: 1; padding-bottom: 3px; }
.fb-g1-bal small { font-size: 11px; font-weight: 600; color: #62768B; margin-top: 3px; }
.fb-g1-gift { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 999px; background: #FFF4DE; color: #9A5B00; font-style: normal; font-size: 11px; font-weight: 800; }
.fb-g1-gift .vx-ico { width: 13px; height: 13px; }
.fb-g1-use { display: block; position: relative; height: 6px; margin-top: 10px; border-radius: 3px; background: #E9EBEE; overflow: hidden; }
.fb-g1-use i { position: absolute; inset: 0; background: var(--g1); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); border-radius: inherit; }
.fb-g1-dots { display: flex; justify-content: center; gap: 5px; margin: 10px 0 2px; }
.fb-g1-dots i { width: 6px; height: 6px; border-radius: 50%; background: #BCC4CD; }
.fb-g1-dots i.is-on { width: 16px; border-radius: 3px; background: var(--g1); }
.fb-g1-h { margin: 12px 16px 10px; font-size: 16px; font-weight: 800; color: #1F3B59; letter-spacing: -0.01em; }
.fb-g1-qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 4px; padding: 0 8px; }
.fb-g1-qa > span { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 11px; line-height: 1.15; font-weight: 600; color: #354F6A; }
.fb-g1-qa > span > i { position: relative; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--g1); box-shadow: 0 2px 8px -3px rgb(31 59 89 / 0.3); transition: background .2s, color .2s; }
.fb-g1-qa > span > i .vx-ico { width: 22px; height: 22px; }
.fb-g1-qa > span.is-on > i { background: var(--g1); color: #fff; }
.fb-g1-qa em { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 6px; border-radius: 4px; background: #D32020; color: #fff; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.02em; }
.fb-g1-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: 62px; background: #fff; box-shadow: 0 -1px 0 #E9EBEE; }
.fb-g1-tabs > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #62768B; font-size: 10px; font-weight: 600; }
.fb-g1-tabs > span.is-on { color: var(--g1); }
.fb-g1-tabs .vx-ico { width: 21px; height: 21px; }
.fb-g1-mid i { position: relative; top: -16px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 -4px 10px -4px rgb(31 59 89 / 0.3), 0 0 0 5px #fff; }
.fb-g1-mid img { width: 44px; height: 44px; border-radius: 50%; }
.fb-g1-nav { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; height: 54px; padding: 4px 14px 0; background: #fff; color: var(--g1d); text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 0.14em; box-shadow: 0 1px 0 #E9EBEE; }
.fb-g1-search { display: flex; align-items: center; gap: 10px; height: 44px; margin: 12px 14px 0; padding: 0 12px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #BCC4CD; font-size: 15px; font-weight: 600; color: #1F3B59; }
.fb-g1-search .vx-ico { color: var(--g1d); }
.fb-g1-search .fb-caret { background: var(--g1); }
.fb-g1-ph { color: #9AA6B2 !important; font-weight: 500; }
.fb-g1-sugg { position: absolute; left: 14px; right: 14px; top: 116px; z-index: 3; padding: 10px 12px 6px; border-radius: 8px; background: #fff; box-shadow: 0 12px 30px -10px rgb(31 59 89 / 0.35), 0 0 0 1px #E9EBEE; opacity: 0; }
.fb-g1-sugg p { margin: 2px 0 8px; font-size: 11px; font-weight: 800; color: #62768B; letter-spacing: 0.06em; text-transform: uppercase; }
.fb-g1-recent { display: flex; gap: 6px; margin-bottom: 10px; }
.fb-g1-recent span { height: 26px; padding: 0 10px; border-radius: 999px; background: #F5F9FC; box-shadow: inset 0 0 0 1px #CFDDF4; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.fb-g1-srow { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 6px; margin: 0 -6px; border-radius: 6px; font-size: 14px; font-weight: 700; }
.fb-g1-srow .vx-ico { width: 15px; height: 15px; color: #9AA6B2; }
.fb-g1-srow .fb-sk { margin: 0; }
.fb-g1-srow.is-on { background: #CFDDF4; }
.fb-g1-promo { margin: 16px 14px 0; border-radius: 6px; background: #fff; overflow: hidden; box-shadow: 0 4px 14px -6px rgb(31 59 89 / 0.35); opacity: 0; }
.fb-g1-promo__hd { position: relative; display: grid; grid-template-columns: 1fr auto; padding: 10px 12px; color: #fff; background: radial-gradient(90% 160% at 100% 0%, rgb(255 255 255 / 0.22), transparent 55%), linear-gradient(135deg, #3E8EF7, #2274E5 60%, #1A5BC4); }
.fb-g1-promo__hd small { grid-column: 1 / -1; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; opacity: 0.85; }
.fb-g1-promo__hd b { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.fb-g1-promo__hd em { font-style: normal; font-size: 20px; font-weight: 800; grid-row: 2 / 4; grid-column: 2; align-self: end; }
.fb-g1-promo__hd span { font-size: 12px; opacity: 0.9; }
.fb-g1-promo__bd { display: grid; gap: 8px; padding: 12px; font-size: 13px; color: #354F6A; }
.fb-g1-promo__bd > span { display: flex; align-items: center; gap: 8px; }
.fb-g1-promo__bd .vx-ico { width: 15px; height: 15px; color: var(--g1); flex: none; }
.fb-g1-promo__bd .fb-sk { margin: 0; }
.fb-g1-paybar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px 14px 20px; background: #fff; box-shadow: 0 -8px 24px -12px rgb(31 59 89 / 0.35); opacity: 0; }
.fb-g1-method { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px #E9EBEE; }
.fb-g1-method > i { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: #CFDDF4; color: var(--g1d); }
.fb-g1-method > span { flex: 1; display: grid; }
.fb-g1-method small { font-size: 11px; color: #62768B; font-weight: 600; }
.fb-g1-method b { font-size: 15px; font-weight: 800; }
.fb-g1-method > .vx-ico { color: #9AA6B2; }
.fb-g1-buy, .fb-g1-cta { display: grid; place-items: center; height: 46px; margin-top: 10px; border-radius: 6px; background: var(--g1); color: #fff; font-size: 16px; font-weight: 800; }
.fb-g1-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 10px 14px 20px; border-radius: 16px 16px 0 0; background: #fff; opacity: 0; }
.fb-g1-sheet__t { margin: 0 2px 10px; font-size: 17px; font-weight: 800; }
.fb-g1-mrow { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 4px; border-bottom: 1px solid #E9EBEE; font-size: 15px; font-weight: 700; }
.fb-g1-mrow > i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #F5F9FC; color: var(--g1d); }
.fb-g1-mrow > i .vx-ico { width: 16px; height: 16px; }
.fb-g1-mrow b { flex: 1; font-weight: 700; }
.fb-radio { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px #BCC4CD; }
.fb-g1-mrow.is-on { background: #F5F9FC; }
.fb-g1-mrow.is-on .fb-radio { box-shadow: inset 0 0 0 6px var(--g1); }
.fb-g1-ok { position: absolute; left: 50%; top: 45%; z-index: 7; width: 190px; margin: -70px 0 0 -95px; padding: 20px 10px 18px; border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 20px 50px -10px rgb(31 59 89 / 0.5); opacity: 0; }
.fb-g1-ok i { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: #00A441; color: #fff; }
.fb-g1-ok i .vx-ico { width: 28px; height: 28px; }
.fb-g1-ok b { font-size: 16px; font-weight: 800; }
.fb-g1-pt { margin: 18px 16px 8px; font-size: 21px; font-weight: 800; color: #1F3B59; letter-spacing: -0.01em; }
.fb-g1-pd { margin: 0 16px; }
.fb-g1-cap { margin: 20px 16px 8px; font-size: 11px; font-weight: 800; color: var(--g1); letter-spacing: 0.12em; }
.fb-g1-all { display: flex; align-items: center; gap: 10px; margin: 0 16px; padding: 10px 0; font-size: 15px; font-weight: 700; border-bottom: 1px solid #E9EBEE; }
.fb-cbx { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px #BCC4CD; color: transparent; }
.fb-cbx .vx-ico { width: 14px; height: 14px; }
.fb-cbx.is-on { background: var(--g1); box-shadow: none; color: #fff; }
.fb-g1-list > span { display: flex; align-items: center; gap: 14px; margin: 0 16px; padding: 12px 0; border-bottom: 1px solid #E9EBEE; }
.fb-g1-list > span > span { flex: 1; }
.fb-sw { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: #D5DAE0; transition: background .25s; }
.fb-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgb(0 0 0 / 0.25); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.fb-sw.is-on { background: #34C759; }
.fb-sw.is-on::after { transform: translateX(18px); }
.fb-g1-cta { position: absolute; left: 16px; right: 16px; bottom: 26px; margin: 0; }
.fb-g1-pop { position: absolute; left: 24px; right: 24px; top: 200px; z-index: 6; padding: 20px 18px 16px; border-radius: 10px; background: #fff; text-align: center; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.5); opacity: 0; }
.fb-g1-pop b { font-size: 17px; font-weight: 800; }
.fb-g1-pop p { margin: 8px 0 16px; font-size: 14px; line-height: 1.4; color: #354F6A; }
.fb-g1-pop div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fb-g1-pop div span { height: 40px; border-radius: 6px; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--g1); box-shadow: inset 0 0 0 1.5px var(--g1); }
.fb-g1-pop div .is-p { background: var(--g1); color: #fff; }
.fb-g1-save { position: absolute; left: 50%; bottom: 90px; z-index: 7; display: grid; justify-items: center; width: 150px; margin-left: -75px; padding: 10px; border-radius: 999px; background: #1F3B59; color: #fff; font-size: 14px; font-weight: 800; opacity: 0; }
.fb-g1-save > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; }
.fb-g1-save .is-ok { color: #7EE2A4; opacity: 0; }
.fb-g1-save .vx-ico { width: 16px; height: 16px; }

/* Globe Benta · Roboto · #053A8A navy · #0964EC · #2274E5 · #F2F5F8 page · 12px cards · 4px buttons */
.fb-bt { --bn: #053A8A; --bb: #0964EC; background: #F2F5F8; color: #354F6A; font-family: Roboto, "Helvetica Neue", Arial, var(--vx-font); }
.fb-bt .fb-sk { background: #E3E7EC; height: 7px; }
.fb-bt-view { position: absolute; inset: 0; }
.fb-bt-view--b { background: #F2F5F8; opacity: 0; }
.fb-bt-top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 6px 16px 0; background: #fff; }
.fb-bt-top b { font-size: 20px; font-weight: 700; color: var(--bn); }
.fb-bt-top span { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--bb); }
.fb-bt-top span .vx-ico { width: 15px; height: 15px; }
.fb-bt-top.is-c { display: grid; grid-template-columns: 24px 1fr 24px; text-align: center; }
.fb-bt-top.is-c b { font-size: 16px; }
.fb-bt-top.is-c .vx-ico { color: var(--bn); }
.fb-bt-card { margin: 12px 12px 0; padding: 12px; border-radius: 12px; background: #fff; }
.fb-bt-hi { display: flex; align-items: center; justify-content: space-between; }
.fb-bt-hi b { font-size: 16px; font-weight: 700; color: var(--bn); }
.fb-bt-hi span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--bb); }
.fb-bt-hi .vx-ico { width: 15px; height: 15px; }
.fb-bt-wallet { display: grid; gap: 4px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #FAFAFA; box-shadow: inset 0 0 0 1px #7BABF4; }
.fb-bt-wallet small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #62768B; }
.fb-bt-wallet small .vx-ico { width: 14px; height: 14px; color: var(--bn); }
.fb-bt-wallet b { font-size: 20px; font-weight: 700; color: var(--bn); }
.fb-bt-wallet em { font-style: normal; font-size: 11px; color: #62768B; }
.fb-bt-h { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--bn); }
.fb-bt-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fb-bt-tile { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px #9197A1; font-size: 12px; font-weight: 700; color: #354F6A; text-align: center; transition: background .25s, box-shadow .25s; }
.fb-bt-tile > i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.fb-bt-tile > i .vx-ico { width: 18px; height: 18px; }
.fb-bt-tile.is-on { background: #E9F2FF; box-shadow: inset 0 0 0 2px var(--bb); }
.is-gp { background: #E2F1FF; color: #1739B3; }
.is-tm { background: #FFE9E8; color: #A30000; }
.is-gf { background: #FAE4F1; color: #831464; }
.is-hp { background: #FDEDBE; color: #624204; }
.fb-bt-num { margin-top: 12px; opacity: 0; }
.fb-bt-num p { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: #354F6A; }
.fb-bt-field { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--bb); font-size: 15px; font-weight: 700; color: var(--bn); letter-spacing: 0.03em; }
.fb-bt-field .fb-caret { background: var(--bb); height: 16px; }
.fb-bt-next { display: grid; place-items: center; height: 40px; margin-top: 8px; border-radius: 4px; background: #2274E5; color: #fff; font-size: 14px; font-weight: 700; }
.fb-bt-selling { display: flex; align-items: center; gap: 6px; margin: 14px 14px 10px; font-size: 14px; font-weight: 700; color: var(--bn); }
.fb-bt-selling i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.fb-bt-selling i .vx-ico { width: 13px; height: 13px; }
.fb-bt-selling b { font-weight: 700; color: #354F6A; }
.fb-bt-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 14px; }
.fb-bt-pills span { height: 34px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: #E3E7EC; color: var(--bn); }
.fb-bt-pills .is-on { background: var(--bn); color: #fff; }
.fb-bt-srch { display: flex; align-items: center; gap: 8px; height: 38px; margin: 12px 14px; padding: 0 12px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px #BCC4CD; font-size: 13px; color: #9197A1; }
.fb-bt-srch .vx-ico { width: 15px; height: 15px; }
.fb-bt-view--b .fb-bt-h { margin: 0 14px 8px; }
.fb-bt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 14px; }
.fb-bt-promo { border-radius: 4px; background: #fff; overflow: hidden; box-shadow: 0 1px 3px rgb(0 0 0 / 0.1); }
.fb-bt-promo__hd { display: flex; justify-content: space-between; padding: 8px 8px; color: #fff; font-size: 14px; background: radial-gradient(70px 70px at 10% 110%, rgb(255 255 255 / 0.2), transparent 70%), radial-gradient(110px 110px at 20% 120%, rgb(255 255 255 / 0.1), transparent 70%), linear-gradient(90deg, #1673E6, #0E6BE0); }
.fb-bt-promo__hd b { font-weight: 700; }
.fb-bt-promo__band { display: grid; padding: 6px 8px; background: #E2F1FF; color: #1739B3; }
.fb-bt-promo__band b { font-size: 13px; font-weight: 700; }
.fb-bt-promo__band small { font-size: 10px; }
.fb-bt-promo__ft { display: grid; gap: 6px; padding: 8px; }
.fb-bt-promo__ft span { display: flex; align-items: center; gap: 6px; }
.fb-bt-promo__ft .vx-ico { width: 12px; height: 12px; color: #9197A1; flex: none; }
.fb-bt-promo__ft .fb-sk { margin: 0; height: 6px; }
.fb-bt-dlg { position: absolute; left: 22px; right: 22px; top: 150px; z-index: 6; padding: 18px 16px 14px; border-radius: 6px; background: #fff; display: grid; gap: 8px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6); opacity: 0; }
.fb-bt-dlg__i { justify-self: center; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #E9F2FF; color: var(--bb); }
.fb-bt-dlg > b { text-align: center; font-size: 17px; font-weight: 700; color: var(--bn); margin-bottom: 4px; }
.fb-bt-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; }
.fb-bt-kv b { font-weight: 700; color: var(--bn); }
.fb-bt-kv b .vx-ico { width: 14px; height: 14px; color: var(--bb); }
.fb-bt-yes { display: grid; place-items: center; height: 40px; margin-top: 6px; border-radius: 4px; background: #2274E5; color: #fff; font-size: 14px; font-weight: 700; }
.fb-bt-chg { display: grid; place-items: center; height: 40px; border-radius: 4px; box-shadow: inset 0 0 0 1px #2274E5; color: #2274E5; font-size: 13px; font-weight: 700; }
.fb-bt-rcpt { position: absolute; left: 18px; right: 18px; top: 60px; z-index: 7; display: grid; gap: 4px; padding: 26px 18px 22px; background: #fff; text-align: center; opacity: 0; filter: drop-shadow(0 24px 30px rgb(0 0 0 / 0.35)); }
.fb-bt-rcpt__edge { position: absolute; left: 0; right: 0; top: -9px; height: 10px; background: radial-gradient(circle at 7px 0, transparent 6px, #fff 6.5px) 0 0 / 14px 10px repeat-x; }
.fb-bt-rcpt__edge.is-b { top: auto; bottom: -9px; transform: scaleY(-1); }
.fb-bt-rcpt__ok { justify-self: center; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #0A8535; color: #fff; margin-bottom: 6px; }
.fb-bt-rcpt__t { font-size: 18px; font-weight: 700; color: #1A458B; }
.fb-bt-rcpt small { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: #62768B; margin-top: 8px; }
.fb-bt-rcpt__p { font-size: 20px; font-weight: 700; color: #1A458B; margin-bottom: 8px; }
.fb-bt-rcpt .fb-bt-kv { text-align: left; border-top: 1px dashed #E3E7EC; padding-top: 8px; }
.fb-bt-home { display: grid; place-items: center; height: 40px; margin-top: 10px; border-radius: 4px; background: #2274E5; color: #fff; font-size: 14px; font-weight: 700; }

/* Flowise chatflow canvas (Flowise's own look: light dotted canvas, white node cards, purple #673AB7) */
.fb-fl { position: absolute; border-radius: 26px; overflow: hidden; opacity: 0; color: #2B2B33; font-family: Roboto, Inter, var(--vx-font);
  background: #F8F8FB radial-gradient(#D3D3DD 1.3px, transparent 1.5px) 0 0 / 22px 22px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.6), 0 0 0 8px rgb(255 255 255 / 0.06), 0 50px 90px -40px rgb(0 0 0 / 0.9); }
.fb-fl-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; background: #fff; box-shadow: 0 1px 0 #E8E8EF; }
.fb-fl-top__logo { width: 30px; height: 30px; border-radius: 8px; }
.fb-fl-top b { font-size: 18px; font-weight: 700; }
.fb-fl-top > i { width: 1px; height: 22px; background: #DDDDE6; margin: 0 4px; }
.fb-fl-top span { flex: 1; font-size: 16px; font-weight: 600; color: #4A4A57; }
.fb-fl-top em { font-style: normal; height: 28px; padding: 0 12px; border-radius: 999px; background: #EDE7F6; color: #5E35B1; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.fb-fl .fb-wires { z-index: 1; }
.fb-fl .fb-w { stroke: #B9B9C8; }
.fb-fl .fb-w__lit { stroke: #673AB7; }
.fb-fl-node { position: absolute; z-index: 2; padding: 12px 14px 14px; border-radius: 12px; background: #fff; opacity: 0;
  box-shadow: 0 0 0 1px #E0E0E8, 0 10px 22px -12px rgb(40 40 60 / 0.35); transition: box-shadow .3s; }
.fb-fl-node.is-on { box-shadow: 0 0 0 2px #673AB7, 0 0 0 7px rgb(103 58 183 / 0.14), 0 14px 28px -12px rgb(103 58 183 / 0.55); }
.fb-fl-node__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fb-fl-node__hd > i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #F3EFFA; color: #673AB7; overflow: hidden; }
.fb-fl-node__hd > i.is-tool { border-radius: 10px; background: linear-gradient(135deg, #7BC23E, #6954ED); color: #fff; }
.fb-fl-node__hd > i.is-logo { background: #fff; box-shadow: inset 0 0 0 1px #E6E6EE; }
.fb-fl-node__hd > i.is-logo img { width: 26px; height: 26px; border-radius: 50%; }
.fb-fl-node__hd > i.is-agent { background: #673AB7; color: #fff; }
.fb-fl-node__hd .vx-ico { width: 18px; height: 18px; }
.fb-fl-node__hd b { flex: 1; font-size: 16px; font-weight: 700; white-space: nowrap; }
.fb-fl-node__hd em { color: #673AB7; opacity: 0; }
.fb-fl-node__hd em .fb-spin { width: 16px; height: 16px; border-width: 2.5px; }
.fb-fl-row { display: flex; justify-content: space-between; margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: #F5F5FA; font-size: 14px; }
.fb-fl-row span { color: #6B6B7B; }
.fb-fl-row b { font-weight: 700; }
.fb-fl-row.is-out { margin-top: 12px; background: #F3EFFA; }
.fb-fl-tool { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 10px; border-radius: 8px; background: #F5F5FA; font: 600 14px/1.2 var(--vx-mono); }
.fb-fl-tool > i { flex: none; width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #7BC23E, #6954ED); }
.fb-fl-tool span { flex: 1; }
.fb-fl-tool img { width: 22px; height: 22px; }
.fb-fl-in { position: relative; display: flex; align-items: center; height: 34px; margin: 6px 0 0; padding: 0 12px; border-radius: 8px; background: #F5F5FA; font-size: 14px; font-weight: 600; }
.fb-fl-port { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #A9A9BC; }
.fb-fl-port.is-out { right: -7px; margin-top: -7px; }
.fb-fl-in .fb-fl-port.is-in { left: -21px; top: 50%; margin-top: -7px; }
.fb-fl-node.is-on .fb-fl-port { box-shadow: inset 0 0 0 3px #673AB7; }
.fb-fl .fb-pulse { background: #673AB7; box-shadow: 0 0 0 4px rgb(103 58 183 / 0.2), 0 0 14px 2px rgb(103 58 183 / 0.6); }
.fb-fl .fb-pulse.is-ok { background: #2E9E5B; box-shadow: 0 0 0 4px rgb(46 158 91 / 0.2), 0 0 14px 2px rgb(46 158 91 / 0.6); }
.fb-fl-chat { position: absolute; z-index: 4; left: 640px; top: 76px; width: 336px; height: 424px; border-radius: 16px; background: #fff; overflow: hidden; opacity: 0;
  display: flex; flex-direction: column; gap: 9px; box-shadow: 0 0 0 1px #E0E0E8, 0 28px 50px -22px rgb(40 40 60 / 0.55); }
.fb-fl-chat__hd { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; background: #673AB7; color: #fff; font-size: 16px; }
.fb-fl-chat__hd .vx-ico { width: 18px; height: 18px; }
.fb-fl-b { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.3; opacity: 0; }
.fb-fl-b.is-bot { align-self: flex-start; margin-left: 14px; background: #F0F0F5; }
.fb-fl-b.is-me { align-self: flex-end; margin-right: 14px; background: #2196F3; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.03em; }
.fb-fl-call { position: relative; align-self: flex-start; display: grid; margin-left: 14px; height: 30px; padding: 0 12px; border-radius: 999px; background: #EDE7F6; color: #5E35B1; font: 600 13px/30px var(--vx-mono); opacity: 0; }
.fb-fl-call > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; }
.fb-fl-call .fb-spin { width: 13px; height: 13px; border-width: 2px; }
.fb-fl-call .is-ok { color: #2E7D32; opacity: 0; font-family: Roboto, Inter, var(--vx-font); font-weight: 700; }
.fb-fl-call .vx-ico { width: 14px; height: 14px; }
.fb-fl-ans { margin: 0 14px; padding: 12px 14px; border-radius: 14px; background: #F0F0F5; display: grid; gap: 10px; opacity: 0; }
.fb-fl-ans p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; opacity: 0; }
.fb-fl-ans b { flex: none; font-weight: 800; }
.fb-fl-ans .fb-sk { flex: 1; margin: 0; background: #D6D6E0; height: 7px; }
.fb-fl-ans em { font-style: normal; font-weight: 700; font-size: 12px; padding: 3px 7px; border-radius: 5px; background: #E3F2FD; color: #1565C0; }

/* =========================================================
   3 · Fleetsmarts · #8227E3 · #501B89 · banner #5E1AA8→#3A1068 · #2DCE89 · #E95A40 · #F5F5F7
   ========================================================= */
.fb-fs { --fp: #8227E3; --fpd: #501B89; background: #F5F5F7; color: #212529; font-family: var(--vx-font); }
.fb-fs .fb-sk { background: #E6E6EA; }
.fb-fs-hero { position: relative; height: 196px; padding: 26px 20px 0; overflow: hidden; color: #fff; background: linear-gradient(135deg, #5E1AA8, #4A1585 55%, #3A1068); }
.fb-fs-hero small { display: block; font-size: 16px; font-weight: 500; }
.fb-fs-hero small.is-m { margin-top: 10px; font-size: 13px; opacity: 0.75; }
.fb-fs-hero .fb-sk--xl { margin-top: 8px; height: 22px; border-radius: 8px; }
.fb-fs-shim { position: absolute; left: 0; top: -40%; width: 60%; height: 180%; background: linear-gradient(90deg, transparent, rgb(130 39 227 / 0.55), transparent); transform: rotate(20deg); }
.fb-fs-bell { position: absolute; right: 18px; top: 22px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.15); }
.fb-fs-bell em, .fb-fs-fab em { position: absolute; right: -2px; top: -2px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; background: #E8453C; color: #fff; font-style: normal; font-size: 11px; font-weight: 800; box-shadow: 0 0 0 2px #4A1585; }
.fb-fs-stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: -52px 14px 0; }
.fb-fs-stats > span { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.15); text-align: center; opacity: 0; }
.fb-fs-stats i { color: var(--fp); margin-bottom: 2px; }
.fb-fs-stats i.is-r { color: #E95A40; }
.fb-fs-stats i .vx-ico { width: 22px; height: 22px; }
.fb-fs-stats small { font-size: 11px; color: #9AA0A8; font-weight: 600; }
.fb-fs-stats b { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.fb-fs-stats em { font-style: normal; font-size: 11px; color: #9AA0A8; }
.fb-fs-h { margin: 18px 16px 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.fb-fs-sub { margin: 2px 16px 10px; font-size: 12px; color: #9AA0A8; }
.fb-fs-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 14px; }
.fb-fs-qa > span { position: relative; display: grid; gap: 6px; padding: 12px; border-radius: 20px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.08); opacity: 0; }
.fb-fs-qa i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.fb-fs-qa i .vx-ico { width: 19px; height: 19px; }
.fb-fs-qa .is-g { background: #D1FAE5; color: #10B981; }
.fb-fs-qa .is-b { background: #DBEAFE; color: #3B82F6; }
.fb-fs-qa .is-p { background: #EDE9FE; color: #8B5CF6; }
.fb-fs-qa .is-a { background: #FEF3C7; color: #F59E0B; }
.fb-fs-qa b { font-size: 13px; font-weight: 800; }
.fb-fs-qa .fb-sk { margin: 0; height: 6px; }
.fb-fs-qa em { position: absolute; right: 10px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #F3EAFE; color: var(--fp); font-style: normal; }
.fb-fs-qa em .vx-ico { width: 13px; height: 13px; }
.fb-fs-fab { position: absolute; right: 16px; bottom: 80px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--fp); color: #fff; box-shadow: 0 10px 22px -8px rgb(130 39 227 / 0.8); }
.fb-fs-fab em { box-shadow: 0 0 0 2px #fff; }
.fb-fs-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(5, 1fr); height: 64px; padding-top: 6px; background: #fff; box-shadow: 0 -1px 0 #D9D9DE; }
.fb-fs-tabs > span { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #9AA0A8; font-size: 10px; font-weight: 500; }
.fb-fs-tabs .vx-ico { width: 20px; height: 20px; }
.fb-fs-tabs .is-on { color: var(--fp); font-weight: 700; }
.fb-fs-tabs .is-on .vx-ico { box-sizing: content-box; padding: 3px 14px; border-radius: 999px; background: #F3EAFE; margin-top: -3px; }
.fb-fs--map { background: #EAEFE4; }
.fb-fs-mapsvg { position: absolute; inset: 0; }
.fb-fs-mapsvg path { fill: none; stroke-linecap: round; }
.fb-fs-map__st { stroke: #fff; stroke-width: 6; }
.fb-fs-map__st.is-hwy { stroke: #F6D8A8; stroke-width: 10; }
.fb-fs-map__park { fill: #CFE5C4 !important; }
.fb-fs-map__water { fill: #BCD9EF !important; }
.fb-fs-radius { position: absolute; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; background: rgb(130 39 227 / 0.14); box-shadow: inset 0 0 0 2px rgb(130 39 227 / 0.5); opacity: 0; }
.fb-fs-me { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--fp); box-shadow: 0 0 0 4px #fff, 0 4px 10px rgb(0 0 0 / 0.3); }
.fb-fs-cl { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--fp); font-size: 15px; font-weight: 800; box-shadow: inset 0 0 0 2px #E0E0E0, 0 4px 10px rgb(0 0 0 / 0.2); opacity: 0; }
.fb-fs-mk { position: absolute; display: grid; justify-items: center; width: 0; opacity: 0; }
.fb-fs-mk > i { position: relative; width: 42px; height: 42px; margin-top: -58px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #E95A40; box-shadow: inset 0 0 0 1.5px #E0E0E0, 0 4px 10px rgb(0 0 0 / 0.2); transition: box-shadow .25s; }
.fb-fs-mk > i::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fff; }
.fb-fs-mk > i .vx-ico { width: 20px; height: 20px; }
.fb-fs-mk > b { margin-top: 6px; padding: 3px 8px; border-radius: 999px; background: #fff; color: #212529; font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: inset 0 0 0 1px #E0E0E0, 0 2px 6px rgb(0 0 0 / 0.15); transition: background .25s, color .25s; }
.fb-fs-mk.is-on > i { box-shadow: inset 0 0 0 3px var(--fp), 0 0 0 5px rgb(130 39 227 / 0.2), 0 6px 14px rgb(0 0 0 / 0.25); }
.fb-fs-mk.is-on > b { background: var(--fp); color: #fff; box-shadow: none; }
.fb-fs-mk.is-dest { opacity: 1; }
.fb-fs-sheet { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 2; padding: 10px 16px 16px; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -10px 30px -12px rgb(0 0 0 / 0.3); opacity: 0; }
.fb-fs-sheet__hd { display: flex; align-items: center; gap: 12px; justify-content: space-between; color: #9AA0A8; }
.fb-fs-sheet__hd .fb-sk { background: #3A3340; margin: 0; }
.fb-fs-pump { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: #F7F5FA; }
.fb-fs-pump__d { display: grid; justify-items: center; gap: 2px; font-size: 10px; font-weight: 800; color: var(--fp); letter-spacing: 0.06em; }
.fb-fs-pump__d i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #F3EAFE; }
.fb-fs-pump__s em { display: inline-flex; height: 24px; padding: 0 9px; border-radius: 999px; align-items: center; background: #E3F8EE; color: #13925C; font-style: normal; font-size: 12px; font-weight: 800; }
.fb-fs-pump__p { display: grid; justify-items: end; }
.fb-fs-pump__p b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #241D2B; }
.fb-fs-pump__p small { font-size: 11px; color: #706A78; }
.fb-fs-tax { margin: 8px 2px 0; font-size: 12px; color: #706A78; }
.fb-fs-acts { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.fb-fs-acts span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--fp); box-shadow: inset 0 0 0 1.5px var(--fp); }
.fb-fs-acts span .vx-ico { width: 16px; height: 16px; }
.fb-fs-acts .is-p { background: var(--fp); color: #fff; box-shadow: 0 8px 18px -8px rgb(130 39 227 / 0.8); }
.fb-fs-route { position: absolute; inset: 0; overflow: visible; }
.fb-fs-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fb-fs-route__glow { stroke: rgb(130 39 227 / 0.25); stroke-width: 16; }
.fb-fs-route__ln { stroke: var(--fp); stroke-width: 7; }
.fb-fs-puck { position: absolute; left: -20px; top: -20px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--fp); color: #fff; box-shadow: 0 0 0 4px #fff, 0 8px 18px rgb(0 0 0 / 0.35); opacity: 0; }
.fb-fs-puck .vx-ico { width: 22px; height: 22px; }
.fb-fs-clear { position: absolute; left: 50%; top: 150px; z-index: 2; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--fp); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; margin-left: -66px; opacity: 0; }
.fb-fs-clear .vx-ico { width: 14px; height: 14px; }
.fb-fs-man { position: absolute; left: 12px; right: 12px; top: 14px; z-index: 3; border-radius: 18px; overflow: hidden; background: var(--fp); color: #fff; box-shadow: 0 14px 30px -12px rgb(80 27 137 / 0.8); opacity: 0; }
.fb-fs-man__a { display: flex; align-items: center; gap: 12px; padding: 14px; }
.fb-fs-man__a i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgb(255 255 255 / 0.16); }
.fb-fs-man__a i .vx-ico { width: 26px; height: 26px; }
.fb-fs-man__a span { display: grid; }
.fb-fs-man__a b { font-size: 26px; font-weight: 800; line-height: 1; }
.fb-fs-man__a small { margin-top: 4px; font-size: 14px; font-weight: 600; opacity: 0.92; }
.fb-fs-man__b { padding: 8px 14px; background: var(--fpd); font-size: 13px; font-weight: 600; }
.fb-fs-faster { position: absolute; left: 12px; right: 12px; bottom: 94px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #E7F6EC; color: #13603B; box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.4); opacity: 0; }
.fb-fs-faster span { flex: 1; display: grid; }
.fb-fs-faster b { font-size: 14px; font-weight: 800; }
.fb-fs-faster small { font-size: 12px; }
.fb-fs-faster em { font-style: normal; height: 32px; padding: 0 14px; border-radius: 999px; display: grid; place-items: center; background: #2DCE89; color: #fff; font-size: 13px; font-weight: 800; }
.fb-fs-navbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px; height: 78px; padding: 0 16px 8px; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -8px 24px -12px rgb(0 0 0 / 0.3); opacity: 0; }
.fb-fs-navbar span { flex: 1; display: grid; }
.fb-fs-navbar b { font-size: 22px; font-weight: 800; color: #13925C; }
.fb-fs-navbar small { font-size: 13px; color: #706A78; }
.fb-fs-navbar > i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #F5F5F7; color: #706A78; }
.fb-fs-navbar em { font-style: normal; height: 40px; padding: 0 20px; border-radius: 999px; display: grid; place-items: center; background: #E95A40; color: #fff; font-size: 15px; font-weight: 800; }
.fb-fs-lh { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 14px 16px 0; }
.fb-fs-lh b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.fb-fs-lh span { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--fp); color: #fff; font-size: 13px; font-weight: 700; }
.fb-fs-lh span .vx-ico { width: 14px; height: 14px; }
.fb-fs-load { --st: 59 130 246; margin: 10px 14px 0; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.1); }
.fb-fs-load.is-ghost { opacity: 0.55; }
.fb-fs-load.is-ghost .fb-sk { margin-top: 8px; }
.fb-fs-load__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fb-fs-load__top .fb-sk { margin: 0; background: #3A3340; }
.fb-fs-load__top em { font-style: normal; height: 24px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center; background: rgb(var(--st) / 0.14); color: rgb(var(--st)); font-size: 12px; font-weight: 800; white-space: nowrap; transition: background .3s, color .3s; }
.fb-fs-od { display: grid; gap: 8px; margin-top: 12px; }
.fb-fs-od > span { display: flex; align-items: center; gap: 8px; }
.fb-fs-od .fb-sk { margin: 0; }
.fb-fs-od i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.fb-fs-od i.is-a { background: var(--fp); }
.fb-fs-od i.is-b { background: #2DCE89; }
.fb-fs-road { position: relative; height: 40px; margin: 12px -2px 0; }
.fb-fs-road svg { position: absolute; inset: 0; overflow: visible; }
.fb-fs-road path { fill: none; stroke-linecap: round; }
.fb-fs-road__base { stroke: #D6D6DC; stroke-width: 4; stroke-dasharray: 2 8; }
.fb-fs-road__fill { stroke: rgb(var(--st) / 0.35); stroke-width: 8; transition: stroke .3s; }
.fb-fs-road__a, .fb-fs-road__b { position: absolute; top: 14px; width: 12px; height: 12px; border-radius: 50%; }
.fb-fs-road__a { left: 8px; background: var(--fp); }
.fb-fs-road__b { right: 8px; background: #2DCE89; }
.fb-fs-road__truck { position: absolute; left: -1px; top: 2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--st)); color: #fff; box-shadow: 0 0 0 3px #fff, 0 6px 14px -4px rgb(var(--st)); transition: background .3s, box-shadow .3s; }
.fb-fs-road__truck .vx-ico { width: 19px; height: 19px; }
.fb-fs-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8px; font-size: 11px; font-weight: 700; color: #BEBEBE; }
.fb-fs-steps span:nth-child(2) { text-align: center; }
.fb-fs-steps span:nth-child(3) { text-align: right; }
.fb-fs-steps .is-on { color: #212529; }
.fb-fs-doc { display: flex; align-items: center; gap: 12px; margin: 10px 14px 0; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.1); opacity: 0; }
.fb-fs-doc > i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #F3EAFE; color: var(--fp); flex: none; }
.fb-fs-doc > span { flex: 1; display: grid; gap: 3px; }
.fb-fs-doc b { font-size: 14px; font-weight: 800; }
.fb-fs-doc small { font-size: 12px; color: #706A78; }
.fb-fs-doc.is-ok small { color: #13925C; font-weight: 700; }
.fb-fs-doc__bar { position: relative; display: block; height: 5px; border-radius: 3px; background: #EEE; overflow: hidden; }
.fb-fs-doc__bar i { position: absolute; inset: 0; background: var(--fp); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.fb-fs-doc.is-ok .fb-fs-doc__bar i { background: #2DCE89; }
.fb-fs-card { position: absolute; z-index: 9; width: 300px; height: 184px; padding: 16px 18px; border-radius: 20px; overflow: hidden; color: #fff; background: linear-gradient(135deg, #8F3BFF, #6C1FD1 50%, #38105E); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 30px 60px -24px rgb(56 16 94 / 0.95); opacity: 0; }
.fb-fs-card__orb { position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / 0.2), transparent); }
.fb-fs-card__orb.is-b { right: auto; left: -60px; top: auto; bottom: -90px; width: 220px; height: 220px; background: radial-gradient(closest-side, rgb(143 59 255 / 0.5), transparent); }
.fb-fs-card__top { position: relative; display: flex; align-items: center; gap: 8px; }
.fb-fs-card__top img { width: 26px; height: 26px; border-radius: 7px; }
.fb-fs-card__top b { flex: 1; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; }
.fb-fs-card__top em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; background: rgb(255 255 255 / 0.18); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; }
.fb-fs-card__top em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; }
.fb-fs-card__chip { position: relative; display: block; width: 38px; height: 28px; margin: 16px 0 12px; border-radius: 6px; background: linear-gradient(135deg, #F0D48A, #C9A24B); }
.fb-fs-card small { position: relative; display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; opacity: 0.7; }
.fb-fs-card .fb-sk { position: relative; margin-top: 6px; height: 12px; background: rgb(255 255 255 / 0.85); }
.fb-fs-card__num { position: absolute; right: 18px; bottom: 16px; font: 600 14px/1 var(--vx-mono); letter-spacing: 0.08em; }
.fb-cv__chips { position: absolute; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; opacity: 0; }
.fb-cv__chips span { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); font-size: 15px; font-weight: 600; color: var(--vx-label-1); white-space: nowrap; }
.fb-cv__chips .vx-ico { width: 17px; height: 17px; color: rgb(var(--fb-a) / 1); filter: brightness(1.6); }

/* =========================================================
   4 · CityGuide · #009FE3 · #8DC63F · #006B3F · green to blue gradient headers
   ========================================================= */
.fb-blueprint {
  position: absolute; left: 0; top: 0; width: 1640px; height: 720px; --rv: 0;
  background-image: linear-gradient(rgb(120 200 255 / 0.16) 1px, transparent 1px), linear-gradient(90deg, rgb(120 200 255 / 0.16) 1px, transparent 1px), linear-gradient(rgb(120 200 255 / 0.07) 1px, transparent 1px), linear-gradient(90deg, rgb(120 200 255 / 0.07) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px; background-position: 40px 0;
  clip-path: circle(calc(var(--rv) * 60%) at 36% 50%);
  -webkit-mask-image: radial-gradient(40% 60% at 36% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(40% 60% at 36% 50%, #000 40%, transparent 100%);
}
.fb-cg-sketch { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fb-cg-sketch rect { fill: none; stroke: rgb(140 210 255 / 0.9); stroke-width: 2.5; stroke-dasharray: 8 8; }
.fb-wire { fill: none; stroke: rgb(90 170 235 / 0.75); stroke-width: 2; }
.fb-wire-dot { fill: rgb(140 210 255 / 0.25); stroke: rgb(140 210 255 / 0.9); stroke-width: 2; }
.fb-cg-new { position: absolute; z-index: 10; display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px 0 5px; border-radius: 999px; background: rgb(30 34 44 / 0.9); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 10px 22px -10px rgb(0 0 0 / 0.6); font-size: 15px; font-weight: 600; white-space: nowrap; opacity: 0; }
.fb-cg-new img { width: 26px; height: 26px; border-radius: 50%; }
.fb-cg { --cb: #009FE3; --cg: #8DC63F; background: #fff; color: #1D2A33; font-family: var(--vx-font); }
.fb-cg .fb-sk { background: #E4E8EC; }
.fb-cg-mapv { position: absolute; inset: 0; background: #DDEBC8; }
.fb-cg-mapv svg { position: absolute; inset: 0; }
.fb-cg-mapv path { fill: none; stroke-linecap: round; }
.fb-cg__park { fill: #B9DB95 !important; }
.fb-cg__lake { fill: #9FD3F0 !important; }
.fb-cg__street { stroke: #fff; stroke-width: 8; }
.fb-cg__street.is-minor { stroke-width: 4; stroke: rgb(255 255 255 / 0.75); }
.fb-cg-halo { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; background: rgb(255 59 48 / 0.28); opacity: 0; }
.fb-cg-pin { position: absolute; width: 34px; height: 34px; margin: -34px 0 0 -17px; display: grid; place-items: center; color: #FF3B30; transform-origin: 50% 100%; opacity: 0; filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.3)); }
.fb-cg-pin .vx-ico { width: 34px; height: 34px; stroke-width: 2.4; }
.fb-cg-pin.is-on { color: #E0241A; }
.fb-cg-grad { position: absolute; left: 0; right: 0; top: 0; padding: 18px 14px 18px; background: linear-gradient(120deg, #8DC63F, #2BB3A0 55%, #009FE3); }
.fb-cg-back { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 0.04em; }
.fb-cg-back .vx-ico { width: 16px; height: 16px; }
.fb-cg-search { display: flex; align-items: center; gap: 10px; height: 46px; margin-top: 12px; padding: 0 14px; border-radius: 999px; background: #fff; color: #9AA3AB; font-size: 17px; font-weight: 500; box-shadow: 0 8px 20px -10px rgb(0 60 90 / 0.5); }
.fb-cg-search span { flex: 1; color: #1D2A33; }
.fb-cg-search .fb-caret { background: var(--cb); margin-left: -8px; flex: none; }
.fb-cg-cards { position: absolute; left: 14px; bottom: 22px; display: flex; gap: 10px; opacity: 0; }
.fb-cg-pc { display: flex; gap: 10px; width: 240px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.45); flex: none; }
.fb-cg-pc > span { flex: 1; display: grid; align-content: center; gap: 0; }
.fb-cg-pc em { display: flex; gap: 1px; margin-top: 8px; color: #F5B400; }
.fb-cg-pc em .vx-ico { width: 13px; height: 13px; }
.fb-cg-pc .fb-cg-photo { width: 76px; height: 76px; border-radius: 10px; flex: none; }
.fb-cg-photo { position: relative; overflow: hidden; background: #DDE6EC; }
.fb-cg-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-cg-hero { position: relative; height: 230px; }
.fb-cg-hero .fb-cg-photo.is-hero { position: absolute; inset: 0; }
.fb-cg-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.3), transparent 30%, transparent 50%, rgb(0 0 0 / 0.45)); }
.fb-cg-back.is-w { position: absolute; left: 14px; top: 18px; z-index: 1; }
.fb-cg-heart { position: absolute; right: 14px; top: 12px; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.fb-cg-heart .vx-ico { width: 24px; height: 24px; }
.fb-cg-heart.is-on { background: #fff; color: #FF3B30; }
.fb-cg-hero__t { position: absolute; left: 14px; right: 14px; bottom: 34px; z-index: 1; }
.fb-cg-tags { display: flex; gap: 6px; margin-top: 10px; }
.fb-cg-tags span { height: 22px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center; background: #fff; color: #0089C4; font-size: 11px; font-weight: 700; }
.fb-cg-links { display: flex; gap: 10px; margin-top: 8px; color: #fff; }
.fb-cg-links .vx-ico { width: 18px; height: 18px; }
.fb-cg-body { position: relative; z-index: 2; margin-top: -22px; padding: 14px 12px 0; border-radius: 24px 24px 0 0; background: #F2F4F6; min-height: 400px; }
.fb-cg-seg { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px; border-radius: 12px; background: #E3E7EB; }
.fb-cg-seg__pill { position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / 4); border-radius: 9px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 0.12); transform: translateX(calc(var(--x, 0) * 100%)); transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.fb-cg-seg span { position: relative; height: 34px; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #6DB7DD; }
.fb-cg-seg span.is-on { color: var(--cb); }
.fb-cg-sec { margin-top: 12px; padding: 12px; border-radius: 12px; background: #fff; opacity: 0; }
.fb-cg-sec p { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #0C6E7E; }
.fb-cg-gal { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 52px 52px; gap: 6px; }
.fb-cg-gal > .fb-cg-photo { border-radius: 4px; }
.fb-cg-gal > .g1 { grid-row: 1 / 3; }
.fb-cg-gal > .g2 { grid-column: 2 / 4; }
.fb-cg-more { position: relative; grid-column: 3; grid-row: 2; }
.fb-cg-more .fb-cg-photo { position: absolute; inset: 0; border-radius: 4px; }
.fb-cg-more b { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 0.4); color: #fff; font-size: 10px; font-weight: 700; border-radius: 4px; }
.fb-cg-gal > .g3 { grid-column: 2; grid-row: 2; }
.fb-chip-rel { position: absolute; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; background: rgb(var(--fb-a)); font-size: 16px; font-weight: 700; color: #fff; box-shadow: 0 10px 24px -10px rgb(var(--fb-a)); opacity: 0; white-space: nowrap; translate: -50% 0; }
.fb-chip-rel .vx-ico { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .fb-cap__main.is-in { animation: none; }
  .fb-spin { animation: none; }
}

/* =========================================================
   5 · Aspen · app: page #F1EEE7 · ink #131312 · accent #1FAA5D · sidebar #0C0C0B · Geist / Geist Mono
   case theme: green #1E7A4B · lime #B7E26B · Space Grotesk
   ========================================================= */
.fb--aspen { --fb-a: 30 122 75; }
.fb--aspen .fb-call__ico { background: #1E7A4B; color: #B7E26B; box-shadow: 0 6px 16px -6px rgb(30 122 75); }
.fb--aspen .fb-call__txt b { font-family: "Space Grotesk", var(--vx-font); letter-spacing: -0.015em; }
.fb-as { position: absolute; border-radius: 22px; overflow: hidden; background: #F1EEE7; color: #131312; font-family: 'Geist', var(--vx-font); font-size: 14px; line-height: 1.3;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.5), 0 0 0 8px rgb(255 255 255 / 0.06), 0 60px 110px -50px rgb(0 0 0 / 0.95), 0 20px 50px -24px rgb(0 0 0 / 0.6); }
.fb-as .vx-ico { width: 16px; height: 16px; }
.fb-as-chrome { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 16px; background: #E4E0D6; box-shadow: inset 0 -1px 0 #D6D1C4; }
.fb-as-dots { display: flex; gap: 8px; }
.fb-as-dots i { width: 12px; height: 12px; border-radius: 50%; background: #CFCABD; }
.fb-as-tab { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px 0 8px; border-radius: 9px; background: #F1EEE7; font-size: 13px; font-weight: 600; }
.fb-as-tab img { width: 18px; height: 18px; border-radius: 5px; }
.fb-as-app { position: absolute; top: 44px; left: 0; right: 0; bottom: 0; display: flex; }
.fb-as-side { position: relative; flex: none; width: 200px; margin: 10px 0 10px 10px; padding: 16px 12px; border-radius: 16px; background: #0C0C0B; color: #D9D6CE; display: flex; flex-direction: column; gap: 2px; }
.fb-as-brand { height: 34px; display: flex; align-items: center; padding: 0 8px; margin-bottom: 10px; }
.fb-as-word { height: 22px; width: auto; filter: invert(1); }
.fb-as-sec { margin: 14px 8px 6px; font: 600 10.5px/1 'Geist Mono', var(--vx-mono); letter-spacing: 0.1em; color: #77746C; }
.fb-as-nav { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: #B9B5AB; transition: color .3s; }
.fb-as-nav.is-on { color: #fff; }
.fb-as-nav__pill { position: absolute; left: 12px; right: 12px; top: 243px; height: 34px; border-radius: 9px; background: #232320; transform: translateY(calc(var(--y, 0) * 36px)); }
.fb-as-dark { margin-top: auto; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; font-size: 13px; color: #8E8A80; box-shadow: inset 0 1px 0 #22221F; }
.fb-as-main { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.fb-as-hd { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 20px; }
.fb-as-hd__t { flex: 1; display: grid; gap: 2px; }
.fb-as-hd__t b { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.fb-as-hd__t small { font-size: 12.5px; color: #7A776F; }
.fb-as-ask { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 7px; border-radius: 999px; background: #131312; color: #fff; font-size: 13.5px; font-weight: 600; }
.fb-as-bell { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px #E3DFD4; }
.fb-as-orb { flex: none; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, #CDE9F6 30%, #C7B7F2 55%, #7AA7C6 75%, #283340); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.12); }
.fb-as-orb.is-lg { width: 36px; height: 36px; }
.fb-as-page { position: absolute; left: 0; right: 0; top: 64px; bottom: 0; padding: 0 20px; display: flex; flex-direction: column; gap: 16px; }
.fb-as-today { flex: none; height: 92px; display: flex; align-items: center; gap: 14px; padding: 0 20px; border-radius: 16px; background: linear-gradient(100deg, #fff, #FBFAF6 60%, #EDEAE1); box-shadow: 0 0 0 1px #E6E2D7; }
.fb-as-today__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #1FAA5D; color: #fff; }
.fb-as-today__ic .vx-ico { width: 22px; height: 22px; }
.fb-as-today > div:first-of-type { flex: 1; display: grid; gap: 2px; }
.fb-as-today > div > small { font: 600 11px/1 'Geist Mono', var(--vx-mono); letter-spacing: 0.1em; color: #7A776F; }
.fb-as-today > div > b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.fb-as-today > div > em { font-style: normal; font-size: 13px; color: #56534C; }
.fb-as-today__btns { display: flex; align-items: center; gap: 8px; }
.fb-as-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #E0DCD1; font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: box-shadow .3s; }
.fb-as-btn.is-on { box-shadow: 0 0 0 2px #1FAA5D; }
.fb-as-btn.is-k { background: #131312; color: #fff; box-shadow: none; }
.fb-as-btn.is-g { background: #1FAA5D; color: #fff; box-shadow: none; display: inline-grid; min-width: 128px; }
.fb-as-btn.is-g b { grid-area: 1 / 1; font-weight: 600; }
.fb-as-btn.is-i { width: 38px; padding: 0; }
.fb-as-btn.is-wide { flex: 1; height: 42px; }
.fb-as-sign { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #E0DCD1; transition: background .3s, box-shadow .3s; }
.fb-as-sign > i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #EFECE4; color: #B1ADA3; transition: background .3s, color .3s; }
.fb-as-sign > i .vx-ico { width: 14px; height: 14px; }
.fb-as-sign > span { display: grid; gap: 1px; }
.fb-as-sign small { font: 600 9.5px/1 'Geist Mono', var(--vx-mono); letter-spacing: 0.1em; color: #8A867C; }
.fb-as-sign b { font-size: 12.5px; font-weight: 600; }
.fb-as-sign.is-on { background: #EAF6EF; box-shadow: 0 0 0 1px #BFE3CD; }
.fb-as-sign.is-on > i { background: #1FAA5D; color: #fff; }
.fb-as-tiles { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; height: 92px; }
.fb-as-tile { position: relative; overflow: hidden; display: grid; align-content: center; gap: 4px; padding: 0 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #E6E2D7; }
.fb-as-tile small { font: 600 10.5px/1 'Geist Mono', var(--vx-mono); letter-spacing: 0.1em; color: #7A776F; }
.fb-as-tile b { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.fb-as-tile em { font-style: normal; font-size: 12px; color: #8A867C; }
.fb-as-tile__orb { position: absolute; right: -34px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: #EAF4EE; }
.fb-as-tile__ic { position: absolute; right: 18px; top: 18px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: #1E7A4B; box-shadow: 0 4px 10px -4px rgb(30 122 75 / 0.5); }
.fb-as-card { flex: none; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #E6E2D7; overflow: hidden; }
.fb-as-card__hd { display: flex; align-items: baseline; gap: 12px; height: 50px; padding: 16px 18px 0; }
.fb-as-card__hd b { font-size: 16px; font-weight: 700; }
.fb-as-card__hd small { font-size: 12.5px; color: #7A776F; padding: 3px 8px; margin-left: -8px; border-radius: 999px; transition: background .3s, color .3s; }
.fb-as-card__hd small.is-on { background: #EDF6D9; color: #176B41; font-weight: 600; }
.fb-as-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #7A776F; }
.fb-as-legend i { width: 8px; height: 8px; border-radius: 50%; background: #C9C5BA; margin-left: 8px; }
.fb-as-legend i.is-in { background: #1FAA5D; } .fb-as-legend i.is-out { background: #D5452B; }
.fb-as-bar { display: flex; height: 8px; margin: 0 18px 12px; border-radius: 4px; overflow: hidden; background: #EFECE4; }
.fb-as-bar i { height: 100%; }
.fb-as-bar i:first-child { flex: 0 0 76%; background: #C9C5BA; }
.fb-as-bar i.is-in { flex: 0 0 calc(var(--w, 0) * 12%); background: #1FAA5D; }
.fb-as-bar i.is-out { flex: 0 0 calc(var(--w, 0) * 6%); background: #D5452B; }
.fb-as-th, .fb-as-tr { display: grid; grid-template-columns: 200px 110px 130px 100px 100px 130px 110px 1fr; align-items: center; padding: 0 18px; }
.fb-as-th--g, .fb-as-tr--g { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
.fb-as-th { height: 32px; font: 600 10.5px/1 'Geist Mono', var(--vx-mono); letter-spacing: 0.08em; color: #8A867C; box-shadow: inset 0 -1px 0 #EFECE4; }
.fb-as-th span:not(:first-child), .fb-as-tr > span:not(:first-child) { text-align: center; }
.fb-as-tr { height: 52px; font: 500 14px/1 'Geist Mono', var(--vx-mono); color: #3A3833; box-shadow: inset 0 -1px 0 #F2EFE8; transition: background .35s; }
.fb-as-tr--g { height: 36px; font-size: 13.5px; }
.fb-as-tr .is-b { font-weight: 700; color: #131312; }
.fb-as-tr .is-m { color: #7A776F; }
.fb-as-tr .is-in { color: #1FAA5D; font-weight: 700; }
.fb-as-tr .is-out { color: #D5452B; font-weight: 700; }
.fb-as-tr.is-hot { background: #FAF8F2; }
.fb-as-tr.is-flash { background: #EDF6D9; }
.fb-as-tr.is-tot { font-weight: 700; color: #131312; background: #FAF8F2; box-shadow: none; font-family: 'Geist', var(--vx-font); }
.fb-as-cur { display: flex; align-items: center; gap: 10px; font-family: 'Geist', var(--vx-font); }
.fb-as-cur > i { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #EAF4EE; color: #176B41; font: 700 11px/1 'Geist Mono', var(--vx-mono); font-style: normal; }
.fb-as-tr--g .fb-as-cur > i { width: 24px; height: 24px; border-radius: 6px; }
.fb-as-cur > span { display: grid; gap: 2px; }
.fb-as-cur b { font: 700 13.5px/1 'Geist Mono', var(--vx-mono); color: #131312; }
.fb-as-tr--g .fb-as-cur b { font-family: 'Geist', var(--vx-font); font-weight: 600; }
.fb-as-cur small { font-size: 11.5px; color: #8A867C; }
.fb-as-scrim { z-index: 6; }
.fb-as-modal { position: absolute; z-index: 7; left: 50%; top: 90px; width: 380px; margin-left: -190px; padding: 20px; border-radius: 20px; background: #fff; opacity: 0; box-shadow: 0 0 0 1px #E6E2D7, 0 40px 70px -30px rgb(0 0 0 / 0.45); }
.fb-as-modal__t { display: block; margin-bottom: 12px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.fb-as-lbl { margin: 10px 0 6px; font: 600 10.5px/1 'Geist Mono', var(--vx-mono); letter-spacing: 0.08em; color: #8A867C; text-transform: uppercase; }
.fb-as-field { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 12px; border-radius: 12px; background: #F7F5EF; box-shadow: inset 0 0 0 1px #E6E2D7; }
.fb-as-field.is-num { justify-content: flex-start; font: 600 16px/1 'Geist Mono', var(--vx-mono); }
.fb-as-field .fb-caret { background: #1FAA5D; }
.fb-as-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 12px; padding: 4px; border-radius: 12px; background: #F1EEE7; }
.fb-as-seg span { height: 34px; display: grid; place-items: center; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: #7A776F; }
.fb-as-seg .is-on { background: #fff; color: #1E7A4B; box-shadow: 0 2px 6px rgb(0 0 0 / 0.08); }
.fb-as-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fb-as-sum { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 14px; padding-top: 14px; box-shadow: inset 0 1px 0 #EFECE4; font-size: 14px; color: #56534C; }
.fb-as-sum b { font: 700 20px/1 'Geist Mono', var(--vx-mono); color: #131312; }
.fb-as-modal .fb-as-btn.is-wide { display: flex; }
.fb-as-lucid { position: absolute; z-index: 8; top: 0; right: 0; bottom: 0; width: 380px; display: flex; flex-direction: column; background: #FBFAF6; opacity: 0; box-shadow: -1px 0 0 #E6E2D7, -30px 0 60px -30px rgb(0 0 0 / 0.3); }
.fb-as-lucid__hd { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 18px; background: linear-gradient(180deg, #F3F0E8, #FBFAF6); box-shadow: inset 0 -1px 0 #ECE8DE; }
.fb-as-lucid__hd > span { flex: 1; display: grid; gap: 2px; }
.fb-as-lucid__hd b { font-size: 17px; font-weight: 700; }
.fb-as-lucid__hd small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #56534C; }
.fb-as-lucid__hd small i { width: 7px; height: 7px; border-radius: 50%; background: #1FAA5D; }
.fb-as-lucid__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 14px; overflow: hidden; }
.fb-as-msg { display: flex; align-items: flex-start; gap: 8px; opacity: 0; }
.fb-as-msg.is-me { flex-direction: row-reverse; }
.fb-as-msg p { margin: 0; max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.4; background: #EDEAE2; }
.fb-as-msg.is-me p { background: #131312; color: #fff; }
.fb-as-me { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #E1ECF4; color: #3E6A8A; font: 700 10px/1 var(--vx-font); font-style: normal; }
.fb-as-confirm { flex: 1; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #E6E2D7; overflow: hidden; }
.fb-as-confirm__hd { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; background: #F7F5EF; box-shadow: inset 0 -1px 0 #EFECE4; }
.fb-as-confirm__hd b { flex: 1; font-size: 15px; font-weight: 700; }
.fb-as-confirm__ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #EAF4EE; color: #1E7A4B; }
.fb-as-confirm__hd em { position: relative; display: grid; font-style: normal; }
.fb-as-confirm__hd em > span { grid-area: 1 / 1; justify-self: end; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; background: #FDEBD7; color: #B4530C; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.fb-as-confirm__hd em > span.is-ok { background: #E3F4EA; color: #17804A; opacity: 0; }
.fb-as-confirm__hd em .vx-ico { width: 12px; height: 12px; }
.fb-as-confirm p { display: flex; justify-content: space-between; margin: 0; padding: 7px 12px 0; font-size: 13px; }
.fb-as-confirm p span { color: #8A867C; }
.fb-as-confirm p b { font-weight: 600; font-variant-numeric: tabular-nums; }
.fb-as-confirm__btns { display: flex; gap: 8px; padding: 12px; }
.fb-as-lucid__in { display: flex; align-items: center; height: 44px; margin: 0 14px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px #E3DFD4; font-size: 13.5px; color: #9A968C; }
.fb-as-lucid__in span.is-typed { color: #131312; }
.fb-as-lucid__in .fb-caret { background: #131312; }
.fb-as-lucid__ft { margin: 8px 0 12px; text-align: center; font-size: 11px; color: #9A968C; }
.fb-as-toast { position: absolute; z-index: 9; left: 50%; top: 190px; width: 340px; margin-left: -170px; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: #131312; color: #fff; opacity: 0; box-shadow: 0 30px 50px -24px rgb(0 0 0 / 0.6); }
.fb-as-toast > i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #B7E26B; color: #0E3B22; }
.fb-as-toast > span { display: grid; gap: 2px; }
.fb-as-toast b { font-size: 14.5px; font-weight: 700; }
.fb-as-toast small { font-size: 12.5px; color: #BDBAB1; }

/* =========================================================
   6 · DEIO agent harness · Discord #1E1F22 / #2B2D31 / #313338 · blurple #5865F2 · pass #23A55A · merged #8957E5
   ========================================================= */
.fb--harness { --fb-a: 88 101 242; }
.fb--harness .fb-node__art .fb-logo[src$="openai.png"] { width: 100%; height: 100%; }
.fb-pulse.is-tag .fb-logo { width: 16px; height: 16px; border-radius: 4px; }
.fb-dc { position: absolute; z-index: 4; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; background: #313338; color: #DBDEE1; font-family: "gg sans", 'Geist', var(--vx-font); opacity: 0;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 0 0 8px rgb(255 255 255 / 0.04), 0 50px 90px -40px rgb(0 0 0 / 0.95); }
.fb-dc__hd { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; background: #313338; box-shadow: 0 1px 0 #1F2023, 0 2px 0 rgb(0 0 0 / 0.08); }
.fb-dc__hd .fb-logo { width: 22px; height: 22px; }
.fb-dc__hd b { font-size: 16px; font-weight: 700; color: #F2F3F5; }
.fb-dc__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 14px 16px; overflow: hidden; }
.fb-dc-msg { display: flex; gap: 12px; opacity: 0; }
.fb-dc-msg > div { min-width: 0; flex: 1; }
.fb-dc-av { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.fb-dc-av.is-bot { display: grid; place-items: center; background: #1E1F22; }
.fb-dc-av.is-bot img { width: 22px; height: 22px; object-fit: contain; } /* the DEIO mark is 125×136, never stretched */
.fb-dc-who { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.fb-dc-who b { font-size: 15px; font-weight: 600; color: #F2F3F5; }
.fb-dc-who em { font-style: normal; height: 16px; padding: 0 5px; border-radius: 4px; background: #5865F2; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; }
.fb-dc-who small { font-size: 11.5px; color: #949BA4; }
.fb-dc-msg p { margin: 0; font-size: 15px; line-height: 1.4; color: #DBDEE1; }
.fb-dc-typing { display: flex; align-items: center; gap: 4px; margin: -6px 0 0; font-size: 12.5px; color: #B5BAC1; opacity: 0; }
.fb-dc-typing i { width: 6px; height: 6px; border-radius: 50%; background: #B5BAC1; animation: fb-dc-dot 1s infinite ease-in-out; }
.fb-dc-typing i:nth-child(2) { animation-delay: .15s; } .fb-dc-typing i:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
.fb-dc-typing b { color: #F2F3F5; }
@keyframes fb-dc-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.fb-dc__in { display: flex; align-items: center; height: 46px; margin: 0 16px 16px; padding: 0 16px; border-radius: 10px; background: #383A40; font-size: 15px; color: #6D6F78; }
.fb-dc__in span.is-typed { color: #DBDEE1; }
.fb-dc__in .fb-caret { background: #DBDEE1; }
.fb-dc-embed { margin-top: 6px; padding: 12px 14px; border-radius: 6px; background: #2B2D31; box-shadow: inset 4px 0 0 #23A55A; display: grid; gap: 8px; }
.fb-dc-embed.is-merged { box-shadow: inset 4px 0 0 #8957E5; }
.fb-dc-embed > b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: #F2F3F5; }
.fb-dc-embed > b .fb-logo { width: 18px; height: 18px; }
.fb-dc-embed > small { font-size: 13px; color: #B5BAC1; }
.fb-dc-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fb-dc-shots span { height: 76px; border-radius: 6px; padding: 10px; display: grid; align-content: start; gap: 6px; background: #F4F4F6; }
.fb-dc-shots span.is-d { background: #17171C; }
.fb-dc-shots i { height: 7px; border-radius: 4px; background: #D6D6DE; }
.fb-dc-shots i:first-child { width: 60%; height: 10px; }
.fb-dc-shots i:last-child { width: 36%; justify-self: end; height: 14px; border-radius: 999px; background: #5865F2; }
.fb-dc-shots .is-d i { background: #35353F; }
.fb-dc-shots .is-d i:last-child { background: #5865F2; }
.fb-dc-note { margin: 8px 0 0 !important; font-size: 14px !important; color: #B5BAC1 !important; opacity: 0; }
.fb-hn-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.fb-hn-route { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #B5BAC1; }
.fb-hn-ok { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #3F4147; color: transparent; transition: background .3s, color .3s; font-style: normal; flex: none; }
.fb-hn-ok .vx-ico { width: 11px; height: 11px; stroke-width: 2.6; }
.fb-hn-route.is-ok .fb-hn-ok, .fb-hn-chk.is-ok .fb-hn-ok { background: #23A55A; color: #fff; }
.fb-hn-card { position: absolute; z-index: 5; width: 530px; border-radius: 20px; opacity: 0; overflow: hidden;
  background: linear-gradient(180deg, rgb(46 47 54 / 0.97), rgb(30 31 36 / 0.97)); color: #E6E7EA;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 40px 70px -30px rgb(0 0 0 / 0.9); }
.fb-hn-card__hd { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 16px; background: rgb(255 255 255 / 0.05); box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.06); }
.fb-hn-card__hd b { font: 500 13px/1 var(--vx-mono); color: #B5BAC1; }
.fb-hn-card .fb-as-dots i { background: #4E5058; }
.fb-hn-term { padding-bottom: 12px; }
.fb-hn-ln { display: flex; gap: 12px; margin: 0; padding: 7px 18px 0; font: 500 14px/1.35 var(--vx-mono); color: #DBDEE1; opacity: 0; }
.fb-hn-ln i { font-style: normal; color: #7C7F88; width: 12px; flex: none; }
.fb-hn-ln.is-ok { color: #8FD8A8; }
.fb-hn-ln.is-ok i { color: #23A55A; }
.fb-hn-pr { padding: 16px 18px 18px; display: grid; gap: 14px; }
.fb-hn-pr__hd { display: flex; align-items: center; gap: 12px; }
.fb-hn-pr__hd > .fb-logo { width: 28px; height: 28px; }
.fb-hn-pr__hd > span { flex: 1; display: grid; gap: 3px; }
.fb-hn-pr__hd b { font-size: 16.5px; font-weight: 650; color: #F2F3F5; }
.fb-hn-pr__hd small { font: 500 12.5px/1 var(--vx-mono); color: #949BA4; }
.fb-hn-pr__hd em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: #8957E5; color: #fff; font-size: 13px; font-weight: 700; opacity: 0; }
.fb-hn-pr__hd em .vx-ico { width: 15px; height: 15px; }
.fb-hn-chks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fb-hn-chk { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; background: rgb(255 255 255 / 0.05); font-size: 14px; font-weight: 600; }
.fb-hn-chk .fb-spin { position: absolute; left: 12px; width: 18px; height: 18px; border-width: 2.5px; color: #F0B232; }
.fb-hn-chk .fb-hn-ok { opacity: 0; }
.fb-hn-chk.is-ok .fb-spin { opacity: 0; }
.fb-hn-chk.is-ok .fb-hn-ok { opacity: 1; }
.fb-hn-rev { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; border-radius: 12px; background: rgb(255 255 255 / 0.05); }
.fb-hn-rev .fb-logo { width: 26px; height: 26px; border-radius: 7px; }
.fb-hn-rev b { flex: 1; font-size: 14.5px; font-weight: 600; }
.fb-hn-state { display: grid; justify-items: end; }
.fb-hn-state em { grid-area: 1 / 1; font-style: normal; height: 28px; padding: 0 11px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; background: rgb(255 255 255 / 0.08); color: #B5BAC1; opacity: 0; white-space: nowrap; }
.fb-hn-state em.is-warn { background: rgb(240 178 50 / 0.16); color: #F0B232; }
.fb-hn-state em.is-info { background: rgb(88 101 242 / 0.2); color: #A5ADFF; }
.fb-hn-state em.is-ok { background: rgb(35 165 90 / 0.18); color: #5BD08D; }