/* Volume Bot v2 — UI styles (iter-N+25).
Builds on the existing demo design system (gn-* tokens, demo-shared,
demo-design-system) and adds a vbot-* namespace for the bot-specific
widgets: hero, profile cards, pool diagram, wizard rail, run dashboard.
*/
/* ── canvas ───────────────────────────────────────────────────── */
.vbot-body { background: var(--gn-canvas-0, #0e1014); color: #f4f7fb; }
.vbot-shell { max-width: 1200px; margin: 0 auto; padding: 16px 20px 80px; }
.vbot-main { max-width: 1200px; margin: 0 auto; padding: 28px 20px 80px; }
.vbot-footer { color: #8a8f9b; font-size: 12px; padding: 24px 20px 28px; text-align: center; }
/* ── page head bar (iter-N+34, replaces standalone gn-demo-topbar) ──
Sits inside the global Gopnik chrome (base.html) and provides:
• a "← Trading Bot" back link to the landing page
• the ELITE pill + page subbrand label
• room for page-scoped actions on the right
*/
.vbot-pagehead {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin: 4px 0 22px; padding: 8px 14px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
}
.vbot-pagehead-back {
display: inline-flex; align-items: center; gap: 8px;
font: 600 13px/1 system-ui, sans-serif;
color: rgba(255,255,255,0.78); text-decoration: none;
padding: 6px 8px; border-radius: 8px;
}
.vbot-pagehead-back:hover { background: rgba(255,255,255,0.06); color: #fff; }
.vbot-pagehead-meta {
display: inline-flex; align-items: center; gap: 10px; flex: 1;
min-width: 0;
}
.vbot-pagehead-pill {
font: 700 10px/1 'JetBrains Mono', monospace;
letter-spacing: 1.6px; text-transform: uppercase;
padding: 4px 8px; border-radius: 999px;
background: rgba(255,216,107,0.16); color: #ffd86b;
border: 1px solid rgba(255,216,107,0.36);
}
.vbot-pagehead-subbrand {
font: 600 13px/1.2 system-ui, sans-serif;
color: rgba(255,255,255,0.85);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vbot-pagehead-actions {
display: inline-flex; align-items: center; gap: 8px;
margin-left: auto;
}
.vbot-flashes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.vbot-flash { padding: 10px 14px; border-radius: 10px; font-size: 13px;
background: rgba(95,179,255,0.10); color: #c8e2ff;
border: 1px solid rgba(95,179,255,0.30); }
.vbot-flash--success { background: rgba(141,208,122,0.10); color: #cfeec0;
border-color: rgba(141,208,122,0.30); }
.vbot-flash--danger,
.vbot-flash--error { background: rgba(255,118,118,0.10); color: #ffd9d9;
border-color: rgba(255,118,118,0.35); }
.vbot-flash--warning { background: rgba(255,216,107,0.10); color: #ffe9a8;
border-color: rgba(255,216,107,0.35); }
.vbot-flash--info { background: rgba(184,155,255,0.10); color: #e5dcff;
border-color: rgba(184,155,255,0.30); }
/* ── hero ─────────────────────────────────────────────────────── */
.vbot-hero { margin: 0 0 32px; }
.vbot-hero-card {
display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px;
padding: 40px 42px; border-radius: 24px;
position: relative; overflow: hidden;
background:
/* Soft gold halo top-right (catches the eye) */
radial-gradient(60% 60% at 100% 0%, rgba(255,216,107,0.10), transparent 60%),
/* Soft blue glow bottom-left */
radial-gradient(50% 70% at 0% 100%, rgba(95,179,255,0.10), transparent 70%),
linear-gradient(135deg, #1a1d24 0%, #1c2029 35%, #15181f 100%);
border: 1px solid rgba(255,216,107,0.32);
box-shadow:
0 36px 80px -32px rgba(255,216,107,0.20),
0 12px 24px -8px rgba(0,0,0,0.45);
}
/* Subtle animated rim along the top edge — same trick as the popular
marketplace card but at hero scale. */
.vbot-hero-card::before {
content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 1px;
background: linear-gradient(90deg, transparent 0%,
rgba(255,216,107,0.55) 30%,
rgba(95,179,255,0.55) 70%,
transparent 100%);
opacity: 0.85;
}
.vbot-hero-card > * { position: relative; z-index: 1; }
.vbot-hero-eyebrow {
font-family: 'JetBrains Mono', monospace; font-size: 11px;
letter-spacing: 2.4px; color: #ffd86b;
text-transform: uppercase;
}
.vbot-hero-title { font-family: 'Newsreader', Georgia, serif; font-size: 50px;
font-weight: 700; margin: 16px 0 16px;
line-height: 1.03; letter-spacing: -0.02em;
/* Gradient text — subtle warm-to-cool. */
background: linear-gradient(135deg, #ffffff 0%, #ffd86b 70%, #ff7ac0 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; }
.vbot-hero-lede { font-size: 15px; line-height: 1.6; color: #c8ccd4; max-width: 60ch; }
.vbot-hero-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
/* Hero bullet row mirroring the marketplace badges so users get
the same "what you get" cues on landing + marketplace. */
.vbot-hero-bullet-row { list-style: none; padding: 0; margin: 16px 0 0;
display: flex; flex-wrap: wrap; gap: 6px; }
.vbot-hero-bullet-row li { background: rgba(255,216,107,0.10);
color: #ffe9a8;
border: 1px solid rgba(255,216,107,0.30);
font: 600 11px/1.4 'JetBrains Mono', monospace;
padding: 4px 10px; border-radius: 999px; }
.vbot-hero-illust svg { width: 100%; height: auto; max-width: 460px; }
/* ── buttons ──────────────────────────────────────────────────── */
.vbot-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px; border-radius: 10px; font-size: 13px;
font-weight: 600; text-decoration: none; cursor: pointer;
transition: filter .15s ease, transform .15s ease;
border: 1px solid transparent;
}
.vbot-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.vbot-btn--primary { background: #5fb3ff; color: #0e1014; }
.vbot-btn--ghost { background: transparent; color: #c8ccd4;
border-color: rgba(244,245,247,0.18); }
.vbot-btn--danger { background: #ff7676; color: #15181f; }
.vbot-btn--large { padding: 14px 22px; font-size: 14px; }
/* ── section ──────────────────────────────────────────────────── */
.vbot-section { margin: 36px 0; }
.vbot-section-title { font-family: 'Newsreader', Georgia, serif; font-size: 24px;
font-weight: 700; margin: 0 0 6px; }
.vbot-section-lede { color: #8a8f9b; font-size: 14px; margin: 0 0 18px; }
.vbot-section-empty { color: #8a8f9b; font-style: italic; padding: 18px;
background: rgba(244,245,247,0.04);
border-radius: 12px; }
/* ── profile cards (iter-N+37 cinematic redesign) ─────────────── */
.vbot-profile-grid { display: grid; gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.vbot-profile-card {
position: relative; overflow: hidden;
background:
radial-gradient(120% 60% at 50% -10%,
color-mix(in srgb, var(--profile-accent, #5fb3ff) 14%, transparent),
transparent 65%),
linear-gradient(180deg, #1a1d24 0%, #15181f 70%, #11141a 100%);
border: 1px solid color-mix(in srgb, var(--profile-accent, #5fb3ff) 28%, rgba(244,245,247,0.10));
border-radius: 18px; padding: 22px 22px 20px;
transition: transform .18s cubic-bezier(.2,.7,.2,1),
border-color .18s ease,
box-shadow .18s ease;
display: flex; flex-direction: column; gap: 10px;
--profile-accent: #5fb3ff;
}
.vbot-profile-card::before {
content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px;
background: linear-gradient(90deg, transparent 0%,
color-mix(in srgb, var(--profile-accent) 65%, transparent) 50%,
transparent 100%);
}
.vbot-profile-card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--profile-accent) 55%, rgba(244,245,247,0.10));
box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--profile-accent) 40%, transparent);
}
/* Per-profile accent — nth-child fallback so the unique chips read
distinct without the template needing to set --profile-accent. */
.vbot-profile-card:nth-child(1) { --profile-accent: #5fb3ff; }
.vbot-profile-card:nth-child(2) { --profile-accent: #8dd07a; }
.vbot-profile-card:nth-child(3) { --profile-accent: #ff7ac0; }
.vbot-profile-card:nth-child(4) { --profile-accent: #ffd86b; } /* Strategy */
.vbot-profile-card:nth-child(5) { --profile-accent: #b89bff; }
.vbot-profile-avatar {
width: 44px; height: 44px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-family: 'Newsreader', Georgia, serif;
font-size: 24px; font-weight: 700;
background: color-mix(in srgb, var(--profile-accent) 12%, transparent);
color: var(--profile-accent);
border: 1px solid color-mix(in srgb, var(--profile-accent) 32%, transparent);
}
.vbot-profile-label {
margin: 4px 0 4px; font-size: 19px;
font-family: 'Newsreader', Georgia, serif; font-weight: 700;
letter-spacing: -0.01em; color: #fff;
}
.vbot-profile-tagline {
font-size: 13px; color: #c8ccd4; line-height: 1.6; margin: 0;
}
.vbot-profile-meta {
display: grid; grid-template-columns: max-content 1fr;
gap: 6px 14px; margin: 10px 0 4px;
padding: 10px 0;
border-top: 1px solid rgba(244,245,247,0.06);
border-bottom: 1px solid rgba(244,245,247,0.06);
font-size: 12px;
}
.vbot-profile-meta dt { color: #8a8f9b;
font: 700 10px/1.4 'JetBrains Mono', monospace;
letter-spacing: 1.5px; text-transform: uppercase; }
.vbot-profile-meta dd { color: #f4f5f7;
font: 600 12.5px/1.4 'JetBrains Mono', monospace;
margin: 0; }
.vbot-profile-hint {
color: color-mix(in srgb, var(--profile-accent) 85%, white);
font-size: 11.5px; font-style: italic; line-height: 1.5;
opacity: 0.85;
}
/* ── pool diagram ─────────────────────────────────────────────── */
.vbot-pool-diagram {
display: flex; gap: 8px; flex-wrap: wrap;
background: linear-gradient(180deg, rgba(95,179,255,0.06), rgba(184,155,255,0.04));
padding: 14px; border-radius: 14px;
border: 1px solid rgba(95,179,255,0.15);
}
.vbot-pool-step {
flex: 1 1 160px; min-width: 160px;
background: #15181f; padding: 12px 14px; border-radius: 10px;
border: 1px solid rgba(244,245,247,0.08);
}
.vbot-pool-step-cat { display: block; font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 2px; }
.vbot-pool-step-blurb { display: block; font-size: 12px; color: #c8ccd4;
margin-top: 6px; line-height: 1.45; }
.vbot-pool-step--foundation .vbot-pool-step-cat { color: #ffd86b; }
.vbot-pool-step--maker .vbot-pool-step-cat { color: #5fb3ff; }
.vbot-pool-step--taker .vbot-pool-step-cat { color: #ff7ac0; }
.vbot-pool-step--scout .vbot-pool-step-cat { color: #8dd07a; }
.vbot-pool-step--recycle .vbot-pool-step-cat { color: #b89bff; }
/* ── bot cards ────────────────────────────────────────────────── */
.vbot-bot-grid { display: grid; gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vbot-bot-card {
background: #15181f; border: 1px solid rgba(244,245,247,0.10);
border-radius: 14px; padding: 18px; display: flex; flex-direction: column;
gap: 8px; text-decoration: none; color: #f4f7fb;
}
.vbot-bot-card--public { border-color: rgba(184,155,255,0.30); }
.vbot-bot-label { margin: 0; font-size: 16px; }
.vbot-bot-pair { font-family: 'JetBrains Mono', monospace; font-size: 11px;
color: #5fb3ff; }
.vbot-bot-meta, .vbot-bot-blurb { font-size: 12px; color: #c8ccd4; line-height: 1.5; }
.vbot-bot-empty { color: #8a8f9b; font-size: 12px; }
.vbot-bot-badge { align-self: flex-start; padding: 2px 8px; border-radius: 6px;
background: rgba(141,208,122,0.18); color: #8dd07a;
font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: 2px; }
/* ── wizard ───────────────────────────────────────────────────── */
/* Iter-N+74 — Wizard layout overhaul. The pre-N+74 grid used a
fixed 260px rail + 1fr canvas + a 1fr 1fr illustration/form split
inside the canvas. At common viewports (1280–1440 px laptops with
the Gopnik wallet shell consuming ~280 px of left chrome) that
collapsed the form to ~340 px wide — number inputs stacked one per
row, "Rotate after N trades" overflowed its label, and the rail's
long step blurbs ("Compliance · KYC + ToS acknowledgement", etc.)
wrapped over 4 lines each. The new layout:
- rail clamps between 220 px (cramped) and 280 px (luxe).
- illustration/form split tightens to 0.9fr 1.1fr so the form
gets the larger pane.
- a new ``.vbot-wizard-grid`` row lets templates lay out 2–3
numeric inputs side-by-side. ``wizard_pool.html`` uses it
for the Foundation/Maker/Taker counts. */
.vbot-wizard {
display: grid; grid-template-columns: clamp(220px, 22vw, 280px) 1fr;
gap: clamp(18px, 2vw, 32px);
margin-top: 12px;
}
.vbot-wizard-rail {
background: #15181f; border-radius: 16px; padding: 18px;
border: 1px solid rgba(244,245,247,0.08);
position: sticky; top: 100px; align-self: start;
min-width: 0; /* let flex children shrink instead of overflowing */
}
/* Iter-N+36 — wizard rail header (step counter + progress bar). */
.vbot-wizard-rail-head {
padding: 4px 4px 14px; margin-bottom: 12px;
border-bottom: 1px solid rgba(244,245,247,0.08);
}
.vbot-wizard-rail-eyebrow {
display: block;
font: 700 10px/1 'JetBrains Mono', monospace;
letter-spacing: 2.4px; text-transform: uppercase;
color: #ffd86b;
}
.vbot-wizard-rail-counter {
display: block; margin: 6px 0 10px;
font: 700 22px/1.1 'Newsreader', Georgia, serif;
color: #f4f5f7; letter-spacing: -0.01em;
}
.vbot-wizard-rail-counter span {
font: 600 14px/1 'JetBrains Mono', monospace;
color: rgba(255,255,255,0.45); margin-left: 4px;
}
.vbot-wizard-rail-progress {
height: 4px; border-radius: 4px;
background: rgba(255,255,255,0.06);
overflow: hidden;
}
.vbot-wizard-rail-progress-fill {
height: 100%; border-radius: 4px;
background: linear-gradient(90deg, #5fb3ff 0%, #ffd86b 50%, #ff7ac0 100%);
transition: width 0.3s ease;
}
.vbot-wizard-steps { list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 4px; }
.vbot-wizard-step {
/* Iter-N+83 — Layout-stable step row.
Pre-fix, the LI used `display: grid` + `padding: 10px 8px` while
the reachable variant zeroed the LI padding and pushed it into
the inner `` link. When a user edited a step and revisited
the wizard, every step transitioned from "no link wrapper" to
"link wrapper", shifting the row's box-model by 1 px border +
2 px effective row offset. The visible result was the rail
"twitching" after the first edit. We now pin padding to ZERO
on the LI and put it on the content layer in EVERY variant,
so the geometry never changes. Border is reserved as a 1 px
transparent line so the active state can fill it in without
adding a new pixel and bumping the row height. */
display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px;
padding: 0; border-radius: 10px;
border: 1px solid transparent;
min-width: 0; /* prevents horizontal overflow */
}
/* Non-reachable (read-only) rows still need their padding —
when there's no wrapper, the spans are the LI's direct
grid items. Match the padding exactly to the reachable
variant so revisited rows don't jump. */
.vbot-wizard-step > .vbot-wizard-step-num,
.vbot-wizard-step > .vbot-wizard-step-body {
padding-block: 10px;
}
.vbot-wizard-step > .vbot-wizard-step-num { padding-left: 8px; }
.vbot-wizard-step > .vbot-wizard-step-body { padding-right: 8px; }
.vbot-wizard-step.is-active { background: rgba(95,179,255,0.10);
border-color: rgba(95,179,255,0.30); }
.vbot-wizard-step.is-done { opacity: 0.7; }
.vbot-wizard-step-num { width: 28px; height: 28px; border-radius: 50%;
background: rgba(95,179,255,0.18); color: #5fb3ff;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; text-align: center; line-height: 28px;
font-weight: 800; }
.vbot-wizard-step-body { display: flex; flex-direction: column; gap: 2px;
min-width: 0; /* shrink instead of overflow */ }
.vbot-wizard-step-label { font-size: 13px; color: #f4f5f7; font-weight: 600;
overflow-wrap: anywhere; }
.vbot-wizard-step-blurb { font-size: 11px; color: #8a8f9b; line-height: 1.4;
overflow-wrap: anywhere;
/* Iter-N+74 — clamp blurb to 2 lines so 10
tightly-stacked steps don't push the rail
height past the canvas. */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden; }
/* Iter-N+64 — Clickable rail. Every step is wrapped in when
reachable; the link sits flush inside the existing row layout so
the visual hierarchy is unchanged. Hover lifts the row, edit
pip appears on completed steps.
Iter-N+83 fix — `grid-column: 1 / -1` is REQUIRED.
The parent `` is itself
`display: grid; grid-template-columns: 28px minmax(0,1fr)`.
Without explicit column spanning, the `` (which is the ONLY
child of the LI in the reachable case) auto-places into grid
column 1 — a 28-px-wide cell — so its inner content gets squeezed
into 28 px width and the step label renders one letter per line
("C / o / m / p / l / i / a / n / c / e"). Forcing the link to
span all columns of the parent grid restores the full-width row. */
.vbot-wizard-step-link {
grid-column: 1 / -1;
display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px;
text-decoration: none; color: inherit; width: 100%;
padding: 10px 8px; border-radius: 8px;
transition: background .15s ease, transform .12s ease;
min-width: 0;
}
/* Iter-N+83 — the reachable-row padding now lives entirely on the
link (above), so this rule is redundant. Left here as a no-op
guard in case a child template overrides the parent padding. */
.vbot-wizard-step.is-reachable { padding: 0; }
.vbot-wizard-step.is-reachable:hover {
background: rgba(255,216,107,0.08);
}
.vbot-wizard-step.is-reachable:hover .vbot-wizard-step-num {
background: rgba(255,216,107,0.22); color: #ffd86b;
}
.vbot-wizard-step.is-done .vbot-wizard-step-num {
background: rgba(141,208,122,0.18); color: #a8e08c;
}
.vbot-wizard-step.is-done .vbot-wizard-step-num::after {
content: '✓'; display: inline-block; font-size: 11px;
}
.vbot-wizard-step-edit {
font-family: 'JetBrains Mono', monospace; font-size: 9px;
color: #ffd86b; letter-spacing: 1.5px; text-transform: uppercase;
opacity: 0; transition: opacity .15s ease; margin-top: 2px;
}
.vbot-wizard-step.is-reachable:hover .vbot-wizard-step-edit { opacity: 1; }
.vbot-wizard-step-link:focus-visible {
outline: 2px solid #ffd86b; outline-offset: 2px;
}
.vbot-wizard-canvas {
background: #15181f; border-radius: 16px; padding: 28px;
border: 1px solid rgba(244,245,247,0.08);
}
.vbot-wizard-title { font-family: 'Newsreader', Georgia, serif;
font-size: 26px; margin: 0; }
.vbot-wizard-subtitle { color: #c8ccd4; line-height: 1.6; margin: 8px 0 24px;
font-size: 14px; }
/* Iter-N+74 — give the form pane the larger share (45/55 → 0.9fr 1.1fr).
Number inputs and pool-strategy radios now have room to breathe. */
.vbot-wizard-split { display: grid; grid-template-columns: 0.9fr 1.1fr;
gap: clamp(20px, 2vw, 32px); }
.vbot-wizard-illust { margin: 0; min-width: 0; }
.vbot-wizard-illust svg { width: 100%; height: auto; border-radius: 12px; }
.vbot-wizard-form { display: flex; flex-direction: column; gap: 14px;
min-width: 0; }
/* Iter-N+74 — Multi-input row used by wizard_pool to lay the three
per-category pool size inputs side-by-side instead of stacking. */
.vbot-wizard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
.vbot-wizard-grid > .vbot-field { margin: 0; }
/* Iter-N+74 — Subtle section header used inside long forms to group
"Pool sourcing" vs "Category sizes" vs "Rotation policy". */
.vbot-wizard-section-head {
font: 700 11px/1 'JetBrains Mono', monospace;
letter-spacing: 2px; text-transform: uppercase;
color: #ffd86b;
margin: 18px 0 -2px;
}
.vbot-wizard-section-head:first-child { margin-top: 0; }
.vbot-field { display: flex; flex-direction: column; gap: 6px; }
.vbot-field-label { font-size: 12px; color: #c8ccd4; font-weight: 600; }
.vbot-field-help { font-size: 11px; color: #8a8f9b; line-height: 1.45; }
.vbot-field--check { flex-direction: row; align-items: flex-start; gap: 10px; }
.vbot-field--check input { margin-top: 3px; }
.vbot-input {
background: #0e1014; color: #f4f5f7;
border: 1px solid rgba(244,245,247,0.18); border-radius: 10px;
padding: 10px 12px; font-size: 13px; font-family: inherit;
}
.vbot-input:focus { outline: 2px solid #5fb3ff; outline-offset: 1px; }
.vbot-input--small { max-width: 100px; }
.vbot-range { -webkit-appearance: none; appearance: none; background: transparent; }
.vbot-range::-webkit-slider-runnable-track { height: 4px; background: #3e4452;
border-radius: 4px; }
.vbot-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
width: 16px; height: 16px; border-radius: 50%;
background: #5fb3ff; margin-top: -6px; cursor: pointer; }
.vbot-wizard-actions { margin-top: 18px; display: flex; gap: 12px; }
.vbot-wizard-help { color: #8a8f9b; margin-top: 18px; font-size: 12px; }
.vbot-tos { background: #0e1014; border-radius: 10px;
border: 1px solid rgba(244,245,247,0.12); padding: 10px 14px; }
.vbot-tos summary { cursor: pointer; color: #c8ccd4; font-size: 13px; }
.vbot-tos-text { font-size: 11px; line-height: 1.55; color: #8a8f9b;
white-space: pre-wrap; max-height: 220px; overflow: auto;
margin: 10px 0 0; }
.vbot-callout { background: rgba(95,179,255,0.08);
border: 1px solid rgba(95,179,255,0.25);
border-radius: 10px; padding: 12px 14px;
font-size: 12px; color: #c8e2ff; line-height: 1.55; }
.vbot-profile-picker { display: flex; flex-direction: column; gap: 10px; border: 0;
padding: 0; margin: 0; }
.vbot-profile-radio input { display: none; }
.vbot-profile-radio-card {
display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center;
padding: 12px; background: #0e1014; border: 1px solid rgba(244,245,247,0.12);
border-radius: 12px; cursor: pointer;
}
.vbot-profile-radio input:checked + .vbot-profile-radio-card {
border-color: #5fb3ff; background: rgba(95,179,255,0.10);
}
.vbot-profile-radio-avatar { font-size: 28px; text-align: center; }
.vbot-profile-radio-body { display: flex; flex-direction: column; gap: 2px; }
.vbot-profile-radio-body strong { font-size: 14px; }
.vbot-profile-radio-body em { font-style: normal; font-size: 11px; color: #5fb3ff;
font-family: 'JetBrains Mono', monospace; }
.vbot-profile-radio-body small { font-size: 11px; color: #8a8f9b; line-height: 1.5; }
/* Iter-N+33 — Strategy profile chip + TA-knob panel ------------------ */
.vbot-profile-radio--strategy .vbot-profile-radio-card {
border-color: rgba(255, 216, 107, 0.32);
background: linear-gradient(180deg,
rgba(255,216,107,0.04) 0%,
rgba(255,216,107,0.00) 100%);
}
.vbot-profile-radio--strategy input:checked + .vbot-profile-radio-card {
border-color: #ffd86b;
background: rgba(255, 216, 107, 0.10);
}
.vbot-profile-radio--strategy .vbot-profile-radio-avatar { color: #ffd86b; }
.vbot-profile-tag {
display: inline-block; vertical-align: middle;
margin-left: 6px;
font: 700 9px/1.5 'JetBrains Mono', monospace;
letter-spacing: 1.4px; text-transform: uppercase;
padding: 2px 6px; border-radius: 999px;
background: rgba(255, 216, 107, 0.14); color: #ffd86b;
border: 1px solid rgba(255, 216, 107, 0.36);
}
.vbot-strategy-knobs {
border: 1px solid rgba(255, 216, 107, 0.28);
background: rgba(255, 216, 107, 0.04);
border-radius: 14px;
padding: 14px 16px 12px;
margin: 16px 0 0;
}
.vbot-strategy-knobs[hidden] { display: none; }
.vbot-strategy-knobs legend {
font: 700 11px/1 'JetBrains Mono', monospace;
letter-spacing: 2px; text-transform: uppercase; color: #ffd86b;
padding: 0 6px;
}
.vbot-knobs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.vbot-knob { display: flex; flex-direction: column; gap: 4px; }
.vbot-knob > span {
font: 600 11px/1.3 system-ui, sans-serif;
color: #f4f5f7; letter-spacing: 0.02em;
}
.vbot-knob > input {
width: 100%; padding: 7px 10px;
background: #0e1014; color: #f4f5f7;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
font: 500 13px/1.2 'JetBrains Mono', monospace;
}
.vbot-knob > input:focus { outline: 2px solid #ffd86b; border-color: transparent; }
.vbot-knob > small {
font-size: 10.5px; color: #8a8f9b; line-height: 1.4;
}
.vbot-review { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px;
font-size: 13px; }
.vbot-review dt { color: #8a8f9b; }
.vbot-review dd { color: #f4f5f7; margin: 0; }
.vbot-launch-form { display: flex; gap: 12px; margin-top: 18px; }
.vbot-restricted { display: grid; place-items: center; padding: 60px 20px; }
.vbot-restricted-card { background: #15181f;
border: 1px solid rgba(255,118,118,0.30);
border-radius: 16px; padding: 32px; max-width: 520px;
text-align: center; }
.vbot-restricted-title { color: #ff7676; margin: 0 0 12px; }
.vbot-restricted-blurb { color: #c8ccd4; line-height: 1.6; margin-bottom: 18px; }
/* ── run dashboard ────────────────────────────────────────────── */
.vbot-runhero { margin: 0 0 28px; }
.vbot-runhero-card {
background: linear-gradient(135deg, #15181f 0%, #1c2029 100%);
border: 1px solid rgba(95,179,255,0.30);
border-radius: 18px; padding: 28px;
}
.vbot-runhero-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px;
letter-spacing: 2px; color: #5fb3ff; }
.vbot-runhero-title { font-family: 'Newsreader', Georgia, serif; font-size: 32px;
margin: 8px 0 16px; }
.vbot-runhero-blurb { color: #c8ccd4; font-size: 14px; margin: 0 0 16px; }
.vbot-runhero-stats { display: grid; grid-template-columns: repeat(4, 1fr);
gap: 16px; }
.vbot-runhero-stat { background: #0e1014; padding: 12px 14px; border-radius: 10px;
border: 1px solid rgba(244,245,247,0.08); }
.vbot-runhero-k { display: block; font-family: 'JetBrains Mono', monospace;
font-size: 22px; color: #f4f5f7; font-weight: 800; }
.vbot-runhero-l { display: block; color: #8a8f9b; font-size: 11px;
letter-spacing: 1px; margin-top: 2px; }
.vbot-runhero--watch { border-color: rgba(184,155,255,0.35); }
.vbot-pool-grid { display: grid; gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.vbot-wallet-tile {
background: #15181f; border: 1px solid rgba(244,245,247,0.10);
border-radius: 12px; padding: 14px;
}
.vbot-wallet-tile[data-state="active"] { border-color: rgba(141,208,122,0.40); }
.vbot-wallet-tile[data-state="activating"]{ border-color: rgba(255,216,107,0.40); }
.vbot-wallet-tile[data-state="sweeping"] { border-color: rgba(255,122,192,0.40); }
.vbot-wallet-tile[data-state="recycled"] { border-color: rgba(184,155,255,0.30);
opacity: 0.7; }
.vbot-wallet-cat { display: inline-block; font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 2px; color: #5fb3ff; }
.vbot-wallet-tile--foundation .vbot-wallet-cat { color: #ffd86b; }
.vbot-wallet-tile--maker .vbot-wallet-cat { color: #5fb3ff; }
.vbot-wallet-tile--taker .vbot-wallet-cat { color: #ff7ac0; }
.vbot-wallet-tile--scout .vbot-wallet-cat { color: #8dd07a; }
.vbot-wallet-tile--recycle .vbot-wallet-cat { color: #b89bff; }
.vbot-wallet-addr { display: block; font-family: 'JetBrains Mono', monospace;
font-size: 11px; color: #c8ccd4; margin: 6px 0 8px; }
.vbot-wallet-meta { display: grid; grid-template-columns: max-content 1fr;
gap: 2px 10px; font-size: 11px; margin: 0; }
.vbot-wallet-meta dt { color: #8a8f9b; }
.vbot-wallet-meta dd { margin: 0; font-family: 'JetBrains Mono', monospace;
color: #f4f5f7; }
/* Iter-N+84 — Funding chip on each wallet tile. Three states:
"ok" (green dot), "warn" (amber, ≤50% of activation), "low" (red,
below the trade floor and effectively unable to trade). Hover-only
detail tooltip from the JS poller carries the operator-facing
explanation. */
.vbot-wallet-fund-chip {
position: absolute; top: 14px; right: 38px;
width: 10px; height: 10px; border-radius: 50%;
font-size: 0; line-height: 0;
background: rgba(141,208,122,0.55);
box-shadow: 0 0 6px rgba(141,208,122,0.45);
cursor: help;
}
.vbot-wallet-fund-chip[data-state="warn"] {
background: rgba(255,216,107,0.85);
box-shadow: 0 0 6px rgba(255,216,107,0.60);
}
.vbot-wallet-fund-chip[data-state="low"] {
background: rgba(255,90,90,0.95);
box-shadow: 0 0 8px rgba(255,90,90,0.70);
animation: vbotPulse 1.8s ease-in-out infinite;
}
@keyframes vbotPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.75; }
}
.vbot-wallet-tile { position: relative; } /* anchor for fund-chip */
.vbot-trades { width: 100%; border-collapse: collapse; font-size: 12px; }
.vbot-trades th, .vbot-trades td { text-align: left; padding: 8px 10px;
border-bottom: 1px solid rgba(244,245,247,0.06); }
.vbot-trades th { color: #8a8f9b; font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 2px; }
.vbot-trade-side--buy { color: #8dd07a; }
.vbot-trade-side--sell { color: #ff7676; }
.vbot-trade--error td { opacity: 0.6; }
.vbot-feed { background: #0e1014; border: 1px solid rgba(95,179,255,0.20);
border-radius: 10px; padding: 12px;
font-family: 'JetBrains Mono', monospace; font-size: 11px;
color: #c8ccd4; max-height: 240px; overflow: auto;
white-space: pre-wrap; }
/* ── Iter-N+47 — Live DEX rate pill ───────────────────────────
Renders on /volume-bot/marketplace + /admin/volume-bot/settings.
Self-contained: no Chart.js, no JS, no animations. The dot has
a steady pulse to signal "live"; respects `prefers-reduced-motion`. */
.vbot-rate-strip { padding-top: 0; padding-bottom: 0; }
.vbot-rate-pill {
display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 16px;
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(95,179,255,0.08) 0%,
rgba(141,208,122,0.10) 50%,
rgba(255,216,107,0.08) 100%);
border: 1px solid rgba(141,208,122,0.32);
color: #e6e8ec;
font: 500 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.vbot-rate-pill--admin {
/* Inside an admin gn-vbs-card — use a darker chip on the dark card. */
background: rgba(141,208,122,0.06);
border-color: rgba(141,208,122,0.28);
}
.vbot-rate-pill-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #8dd07a;
box-shadow: 0 0 0 0 rgba(141,208,122,0.6);
animation: vbot-rate-pulse 2.2s ease-in-out infinite;
}
@keyframes vbot-rate-pulse {
0% { box-shadow: 0 0 0 0 rgba(141,208,122,0.55); }
60% { box-shadow: 0 0 0 8px rgba(141,208,122,0); }
100% { box-shadow: 0 0 0 0 rgba(141,208,122,0); }
}
@media (prefers-reduced-motion: reduce) {
.vbot-rate-pill-dot { animation: none; }
}
.vbot-rate-pill-eyebrow {
font: 700 10px/1 "JetBrains Mono", monospace;
letter-spacing: 1.8px; text-transform: uppercase;
color: #8dd07a;
}
.vbot-rate-pill-main { color: #fff; }
.vbot-rate-pill-main b { color: #8dd07a; font-weight: 700;
font-family: "JetBrains Mono", monospace; }
.vbot-rate-pill-sep { opacity: 0.4; }
.vbot-rate-pill-aux { color: rgba(255,255,255,0.78); }
.vbot-rate-pill-aux b { color: #5fb3ff; font-weight: 700;
font-family: "JetBrains Mono", monospace; }
.vbot-rate-pill-issuer {
font: 600 10px/1 "JetBrains Mono", monospace;
letter-spacing: 1px; text-transform: uppercase;
color: rgba(255,255,255,0.55);
padding: 4px 8px; border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
}
@media (max-width: 640px) {
.vbot-rate-pill { gap: 6px; padding: 9px 12px; font-size: 12px; }
.vbot-rate-pill-issuer { display: none; } /* save space on mobile */
}
/* ── charts (iter-N+26, height-locked in iter-N+46) ────────────
The card and canvas form a flex column with a FIXED card height.
Without this, Chart.js's `responsive: true` + `maintainAspectRatio:
false` creates a feedback loop: canvas reads parent height → grows
to fill it → bumps parent height (because min-height alone doesn't
cap growth) → canvas re-reads, grows again, and on every resize
tick the chart silently expands until the page is unreadable.
`height: 240px` (not min-height) breaks the loop. */
.vbot-charts { display: grid; gap: 14px;
grid-template-columns: 1.4fr 1.4fr 1fr; }
.vbot-chart-card { background: #15181f; border: 1px solid var(--border, rgba(244,245,247,0.10));
border-radius: 14px; padding: 14px 18px;
height: 240px; /* iter-N+46: fixed */
display: flex; flex-direction: column;
overflow: hidden; }
.vbot-chart-title { font-size: 13px; margin: 0 0 8px; color: #c8ccd4;
display: flex; justify-content: space-between; align-items: baseline;
flex: 0 0 auto; }
.vbot-chart-unit { font-family: 'JetBrains Mono', monospace; font-size: 10px;
color: #8a8f9b; letter-spacing: 1px; }
.vbot-chart-card canvas { width: 100% !important;
flex: 1 1 0;
min-height: 0; /* allow flex shrink */
max-height: 100%; }
/* ── dry-run preview (iter-N+26) ────────────────────────────── */
.vbot-preview { margin: 0 0 18px; padding: 16px;
background: rgba(95,179,255,0.06);
border: 1px solid rgba(95,179,255,0.25);
border-radius: 14px; }
.vbot-preview-head { display: flex; align-items: baseline;
justify-content: space-between; gap: 12px;
margin-bottom: 10px; }
.vbot-preview-title { margin: 0; font-size: 14px; color: #c8e2ff; }
.vbot-preview-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px;
color: #8a8f9b; letter-spacing: 1px; }
.vbot-preview canvas { width: 100% !important; max-height: 180px; }
/* ── mobile reflow ───────────────────────────────────────────── */
/* ── marketplace (iter-N+27) ─────────────────────────────────── */
.vbot-mkt-hero { margin: 0 0 36px; }
.vbot-mkt-hero-card {
display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px;
padding: 36px; border-radius: 22px;
background: linear-gradient(135deg, #15181f 0%, #1c2029 100%);
border: 1px solid rgba(95,179,255,0.25);
}
.vbot-mkt-bullet-row { list-style: none; padding: 0; margin: 18px 0 0;
display: flex; flex-wrap: wrap; gap: 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; color: #c8ccd4; letter-spacing: 1px; }
.vbot-mkt-bullet-row li { background: rgba(95,179,255,0.10);
padding: 4px 10px; border-radius: 999px;
border: 1px solid rgba(95,179,255,0.25); }
.vbot-mkt-hero-illust svg { width: 100%; height: auto; }
/* Iter-N+40 — 4-step rental flow strip above the marketplace plans. */
.vbot-flow-strip { padding-top: 0; }
.vbot-flow-row {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.vbot-flow-step {
position: relative; overflow: hidden;
padding: 18px 20px 16px;
border-radius: 16px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--step-accent, #5fb3ff) 10%, #1a1d24) 0%,
#15181f 100%);
border: 1px solid color-mix(in srgb, var(--step-accent, #5fb3ff) 28%, rgba(244,245,247,0.10));
--step-accent: #5fb3ff;
}
.vbot-flow-step::before {
content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px;
background: linear-gradient(90deg, transparent 0%,
color-mix(in srgb, var(--step-accent) 70%, transparent) 50%,
transparent 100%);
}
.vbot-flow-num {
font: 700 11px/1 'JetBrains Mono', monospace;
letter-spacing: 2.2px; text-transform: uppercase;
color: var(--step-accent); display: block; margin-bottom: 8px;
}
.vbot-flow-step strong {
display: block;
font: 700 16px/1.2 'Newsreader', Georgia, serif;
color: #fff; letter-spacing: -0.01em; margin-bottom: 4px;
}
.vbot-flow-step small {
display: block; color: #c8ccd4; font-size: 12.5px; line-height: 1.55;
}
.vbot-mkt-grid { display: grid; gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Iter-N+37 — Award-worthy plan cards (deeper redesign).
- Layered glow: top halo + bottom rim, both tinted by --card-accent
- Larger, framed shape-of-volume preview
- Animated shine on the popular tier
- Dramatic hover with parallax lift
- Premium price typography (big serif + mono unit) */
.vbot-mkt-grid {
/* Slightly wider cards so the new layout breathes. */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
}
.vbot-mkt-card {
display: flex; flex-direction: column; gap: 16px;
/* Iter-N+39 perf: collapsed two gradient layers + the ::before rim
glow into a single multi-stop linear-gradient. Repaints are now
a single GPU upload per card instead of 3 layered gradient
compositions every hover frame. Visually near-identical. */
background:
linear-gradient(180deg,
color-mix(in srgb, var(--card-accent) 14%, #1c2029) 0%,
#15181f 55%,
#11141a 100%);
border: 1px solid rgba(244,245,247,0.10);
border-radius: 22px; padding: 22px 22px 24px;
position: relative; overflow: hidden;
transition: transform .22s cubic-bezier(.2,.7,.2,1),
border-color .22s ease,
box-shadow .22s ease;
--card-accent: #5fb3ff;
isolation: isolate;
/* Promote each card to its own compositor layer so hover transforms
never invalidate the whole page's paint. */
contain: layout paint;
}
/* Glowing top edge line — subtle but always present. */
.vbot-mkt-card::after {
content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px;
background: linear-gradient(90deg, transparent 0%,
color-mix(in srgb, var(--card-accent) 60%, transparent) 30%,
color-mix(in srgb, var(--card-accent) 60%, transparent) 70%,
transparent 100%);
opacity: 0.6;
}
.vbot-mkt-card > * { position: relative; z-index: 1; }
.vbot-mkt-card:hover {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--card-accent) 60%, rgba(244,245,247,0.10));
box-shadow:
0 24px 60px -20px color-mix(in srgb, var(--card-accent) 40%, transparent),
0 4px 12px -4px rgba(0,0,0,0.4);
}
.vbot-mkt-card:hover::after {
opacity: 1;
left: 8px; right: 8px;
transition: left .22s, right .22s, opacity .22s;
}
.vbot-mkt-card--starter { border-color: rgba(95,179,255,0.32); }
.vbot-mkt-card--pro { border-color: rgba(255,216,107,0.42); }
.vbot-mkt-card--elite { border-color: rgba(255,122,192,0.40); }
.vbot-mkt-card--custom { border-color: rgba(184,155,255,0.32); }
.vbot-mkt-card--popular {
box-shadow:
0 20px 60px -22px color-mix(in srgb, var(--card-accent) 55%, transparent),
inset 0 0 0 1px color-mix(in srgb, var(--card-accent) 35%, transparent);
}
/* Animated traveller — gentle shine moving across the top edge.
Iter-N+39: composited-only — uses ``transform: translateX()`` on
``will-change: transform`` instead of animating ``left``, so the
browser stays on the GPU compositor and never re-runs layout.
This was the #1 source of "the app heats my laptop". */
.vbot-mkt-card--popular .vbot-mkt-shine {
position: absolute; top: 0; left: 0; right: 0; height: 3px;
z-index: 2; pointer-events: none; overflow: hidden;
/* Promote to its own compositor layer so the animation runs entirely
on the GPU — no main-thread paint/layout work per frame. */
contain: layout paint;
}
.vbot-mkt-card--popular .vbot-mkt-shine::before {
content: ""; position: absolute; top: 0; bottom: 0; width: 30%;
/* Pre-position so translateX(0) starts off-canvas to the left. */
left: -30%;
background: linear-gradient(90deg, transparent 0%,
var(--card-accent) 50%,
transparent 100%);
will-change: transform;
animation: vbot-mkt-shine 3.2s linear infinite;
/* Pause when the document is hidden (set by the body class hook). */
}
@keyframes vbot-mkt-shine {
0% { transform: translateX(0); }
100% { transform: translateX(433%); /* spans 30% strip + 100% card */ }
}
@media (prefers-reduced-motion: reduce) {
.vbot-mkt-card--popular .vbot-mkt-shine::before { animation: none; }
}
/* Iter-N+39 — visibility-paused animations.
The body gets ``data-tab-hidden`` via JS when the tab is hidden,
so every infinite animation in the Trading Bot pages stops cold
the moment you alt-tab away. No CPU heat for background tabs. */
body[data-tab-hidden="1"] .vbot-mkt-card--popular .vbot-mkt-shine::before,
body[data-tab-hidden="1"] .vbot-blink {
animation-play-state: paused !important;
}
.vbot-mkt-ribbon {
position: absolute; top: 18px; right: -42px;
z-index: 4;
transform: rotate(32deg);
background: linear-gradient(135deg,
var(--card-accent) 0%,
color-mix(in srgb, var(--card-accent) 75%, #ffffff) 100%);
color: #0e1014;
font: 700 10px/1 'JetBrains Mono', monospace;
letter-spacing: 1.6px; text-transform: uppercase;
padding: 6px 42px;
box-shadow:
0 10px 22px -6px color-mix(in srgb, var(--card-accent) 75%, transparent),
inset 0 0 0 1px rgba(255,255,255,0.18);
}
.vbot-mkt-shape {
margin: 0 -4px; padding: 0;
border-radius: 14px; overflow: hidden;
background: #0a0c10;
border: 1px solid color-mix(in srgb, var(--card-accent) 18%, rgba(244,245,247,0.06));
position: relative;
}
.vbot-mkt-shape svg { display: block; width: 100%; height: auto; }
/* Tiny "shape" label so users know what the preview is. */
.vbot-mkt-shape::after {
content: "VOLUME SHAPE";
position: absolute; left: 10px; bottom: 6px;
font: 700 8.5px/1 'JetBrains Mono', monospace;
letter-spacing: 1.8px; text-transform: uppercase;
color: color-mix(in srgb, var(--card-accent) 85%, white);
opacity: 0.7;
}
.vbot-mkt-card-tier { font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 3px;
color: var(--card-accent); }
.vbot-mkt-card-label { font-family: 'Newsreader', Georgia, serif;
font-size: 22px; margin: 6px 0 2px; line-height: 1.15; }
.vbot-mkt-card-desc { font-size: 13px; color: #c8ccd4; line-height: 1.55; margin: 4px 0 0; }
.vbot-mkt-card-caps {
list-style: none; padding: 12px 0 8px; margin: 0;
border-top: 1px solid rgba(244,245,247,0.08);
border-bottom: 1px solid rgba(244,245,247,0.08);
display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
}
.vbot-mkt-card-caps li { display: flex; justify-content: space-between;
font-size: 12px; }
.vbot-mkt-card-caps li span { color: #8a8f9b; }
.vbot-mkt-card-caps li b { font-family: 'JetBrains Mono', monospace;
color: #f4f5f7; font-weight: 700; }
.vbot-mkt-card-features { list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 4px; }
.vbot-mkt-card-features li { font-size: 12px; color: #c8ccd4;
padding-left: 18px; position: relative; }
.vbot-mkt-card-features li::before { content: "✓"; position: absolute;
left: 0; color: #8dd07a; }
.vbot-mkt-card-foot { display: flex; flex-direction: column; gap: 14px;
margin-top: auto; padding-top: 4px;
border-top: 1px solid rgba(244,245,247,0.06); }
.vbot-mkt-card-prices {
display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
gap: 6px;
}
.vbot-mkt-price {
display: flex; flex-direction: column; min-width: 0;
background:
linear-gradient(180deg, #0e1014 0%, #0b0d12 100%);
border: 1px solid color-mix(in srgb, var(--card-accent) 24%, rgba(244,245,247,0.10));
border-radius: 10px; padding: 8px 10px;
color: #f4f5f7;
transition: border-color .18s ease, transform .18s ease;
}
.vbot-mkt-price-num {
/* Auto-scaling so 199 and 5M both fit; clamp keeps it from getting
too small on tiny cards. */
font-family: 'Newsreader', Georgia, serif;
font-weight: 700; font-size: clamp(15px, 4.5cqi, 20px);
line-height: 1.05; letter-spacing: -0.01em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vbot-mkt-card:hover .vbot-mkt-price {
border-color: color-mix(in srgb, var(--card-accent) 50%, rgba(244,245,247,0.10));
}
.vbot-mkt-price em {
font-style: normal; font-size: 9.5px;
font-family: 'JetBrains Mono', monospace; font-weight: 700;
color: color-mix(in srgb, var(--card-accent) 85%, white);
margin-top: 3px; letter-spacing: 1.6px; text-transform: uppercase;
}
.vbot-mkt-price sup { font-size: 11px; color: #8a8f9b; }
.vbot-mkt-price--poa { color: #b89bff; font-size: 15px;
justify-content: center; align-items: center;
text-align: center; }
/* container-query units fallback for browsers without container-type. */
.vbot-mkt-card-prices { container-type: inline-size; }
.vbot-mkt-steps { list-style: decimal; color: #c8ccd4; font-size: 13px;
line-height: 1.7; padding-left: 22px; }
.vbot-mkt-steps b { color: #f4f5f7; }
/* ── checkout (iter-N+27) ────────────────────────────────────── */
.vbot-checkout-head { margin-bottom: 24px; }
.vbot-checkout-title { font-family: 'Newsreader', Georgia, serif;
font-size: 28px; margin: 12px 0 6px; }
.vbot-checkout-blurb { color: #c8ccd4; font-size: 14px; line-height: 1.6; }
.vbot-checkout-split { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; }
.vbot-checkout-form { display: flex; flex-direction: column; gap: 14px;
background: #15181f; padding: 24px; border-radius: 14px;
border: 1px solid rgba(244,245,247,0.10); }
.vbot-checkout-step-title { font-size: 14px; margin: 14px 0 4px;
color: #5fb3ff; font-family: 'JetBrains Mono', monospace;
letter-spacing: 2px; }
/* Iter-N+40 — Express profile summary (collapsed picker). */
.vbot-checkout-profile-picker {
margin: 4px 0 12px;
}
.vbot-checkout-profile-picker[open] > .vbot-checkout-profile-summary
.vbot-checkout-profile-change { display: none; }
.vbot-checkout-profile-summary {
display: flex; align-items: center; gap: 14px;
padding: 12px 14px; border-radius: 12px;
background: rgba(255,216,107,0.05);
border: 1px solid rgba(255,216,107,0.30);
cursor: pointer; list-style: none;
transition: border-color .15s ease, background .15s ease;
}
.vbot-checkout-profile-summary::-webkit-details-marker { display: none; }
.vbot-checkout-profile-summary:hover {
background: rgba(255,216,107,0.10);
border-color: rgba(255,216,107,0.50);
}
.vbot-checkout-profile-avatar {
width: 40px; height: 40px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
font: 700 22px/1 'Newsreader', Georgia, serif;
background: rgba(255,216,107,0.12);
border: 1px solid rgba(255,216,107,0.36);
color: #ffd86b;
}
.vbot-checkout-profile-text { display: flex; flex-direction: column; gap: 2px;
min-width: 0; flex: 1; }
.vbot-checkout-profile-text strong { color: #fff; font-size: 14px; }
.vbot-checkout-profile-text small { color: #c8ccd4; font-size: 12px;
line-height: 1.5; }
.vbot-checkout-profile-text small b { color: #ffd86b; font-weight: 700; }
.vbot-checkout-profile-change {
display: inline-block; margin-left: 8px;
font: 600 10.5px/1 'JetBrains Mono', monospace;
letter-spacing: 1px; text-transform: uppercase;
color: #ffd86b; opacity: 0.75;
}
.vbot-checkout-profile-picker[open] .vbot-profile-picker { margin-top: 12px; }
.vbot-currency-picker { display: flex; gap: 10px; flex-wrap: wrap; border: 0;
padding: 0; margin: 0; }
.vbot-currency-chip input { display: none; }
.vbot-currency-chip span {
display: inline-flex; align-items: center; gap: 12px;
background: #0e1014; border: 1px solid rgba(244,245,247,0.18);
border-radius: 12px; padding: 12px 18px; cursor: pointer;
}
.vbot-currency-chip strong { font-family: 'JetBrains Mono', monospace;
font-size: 12px; color: #5fb3ff; letter-spacing: 2px; }
.vbot-currency-chip em { font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-weight: 800; color: #f4f5f7; }
.vbot-currency-chip input:checked + span {
border-color: #5fb3ff; background: rgba(95,179,255,0.10);
}
.vbot-checkout-summary { background: #15181f; padding: 22px;
border-radius: 14px; align-self: start;
border: 1px solid rgba(141,208,122,0.20); }
.vbot-checkout-summary-title { font-size: 13px; margin: 0 0 12px;
color: #8dd07a; font-family: 'JetBrains Mono', monospace;
letter-spacing: 2px; }
.vbot-checkout-summary-list { display: grid;
grid-template-columns: 1fr 1fr; gap: 6px 12px;
font-size: 13px; margin: 0 0 14px; }
.vbot-checkout-summary-list dt { color: #8a8f9b; }
.vbot-checkout-summary-list dd { margin: 0; color: #f4f5f7;
font-family: 'JetBrains Mono', monospace; }
.vbot-checkout-summary-note { font-size: 12px; color: #c8ccd4; line-height: 1.55;
margin: 0; }
/* ── payment page (iter-N+27) ────────────────────────────────── */
.vbot-pay-head { margin-bottom: 24px; }
.vbot-pay-title { font-family: 'Newsreader', Georgia, serif;
font-size: 28px; margin: 10px 0 6px; }
.vbot-pay-blurb { color: #c8ccd4; font-size: 14px; line-height: 1.6; }
.vbot-pay-blurb b { color: #ffd86b; font-family: 'JetBrains Mono', monospace; }
.vbot-pay-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
.vbot-pay-card, .vbot-pay-qr {
background: #15181f; padding: 24px; border-radius: 14px;
border: 1px solid rgba(244,245,247,0.10);
}
.vbot-pay-card-title, .vbot-pay-qr-title {
margin: 0 0 14px; font-size: 13px; letter-spacing: 2px; color: #5fb3ff;
font-family: 'JetBrains Mono', monospace;
}
.vbot-pay-card-list { display: grid; grid-template-columns: max-content 1fr;
gap: 8px 14px; font-size: 13px; margin: 0; }
.vbot-pay-card-list dt { color: #8a8f9b; align-self: center; }
.vbot-pay-card-list dd { margin: 0; color: #f4f5f7;
display: flex; gap: 8px; align-items: center;
flex-wrap: wrap; }
.vbot-pay-card-big { font-family: 'JetBrains Mono', monospace;
font-size: 26px; font-weight: 800; color: #ffd86b; }
.vbot-pay-card-cur { font-size: 13px; color: #8a8f9b; margin-left: 4px;
letter-spacing: 2px; }
.vbot-pay-addr { background: #0e1014; padding: 4px 8px; border-radius: 6px;
font-family: 'JetBrains Mono', monospace; font-size: 12px;
word-break: break-all; }
.vbot-copy { background: transparent; color: #5fb3ff; border: 1px solid rgba(95,179,255,0.30);
border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
.vbot-copy:hover { background: rgba(95,179,255,0.10); }
.vbot-pay-qr-frame { background: #f4f5f7; padding: 14px; border-radius: 10px;
display: grid; place-items: center; }
.vbot-pay-qr-frame img { display: block; max-width: 100%; height: auto; }
.vbot-pay-qr-blurb { font-size: 12px; color: #8a8f9b; margin: 12px 0 0;
line-height: 1.55; }
.vbot-pay-help { margin-top: 18px; color: #8a8f9b; font-size: 12px; }
.vbot-pay-help summary { color: #c8ccd4; cursor: pointer; }
.vbot-pay-help ol { padding-left: 20px; line-height: 1.7; }
.vbot-pay-help em { color: #ffd86b; font-style: normal; font-weight: 600; }
/* iter-N+63.25 — destination tag is optional, no-tag fuzzy match works */
.vbot-pay-pill-optional {
display: inline-block; margin-left: 6px; padding: 1px 7px;
border-radius: 999px; font-size: 9.5px; letter-spacing: 0.5px;
text-transform: uppercase; font-weight: 700;
background: rgba(95, 179, 255, 0.16); color: #5fb3ff;
border: 1px solid rgba(95, 179, 255, 0.32);
}
.vbot-pay-tag-hint {
flex-basis: 100%; margin: 4px 0 0; padding: 0;
font-size: 11px; line-height: 1.5; color: #8a8f9b; font-style: italic;
}
.vbot-pay-status { margin-top: 22px;
background: linear-gradient(135deg,
rgba(95,179,255,0.10), rgba(184,155,255,0.06));
border: 1px solid rgba(95,179,255,0.30);
border-radius: 14px; padding: 22px;
display: flex; align-items: center; gap: 18px; }
.vbot-pay-status-pill { display: inline-flex; align-items: center; gap: 8px;
background: #0e1014; padding: 8px 14px; border-radius: 999px;
border: 1px solid rgba(244,245,247,0.18); }
.vbot-pay-status-pill[data-state="paid"],
.vbot-pay-status-pill[data-state="running"] { border-color: rgba(141,208,122,0.45); }
.vbot-pay-status-pill[data-state="expired"],
.vbot-pay-status-pill[data-state="cancelled"] { border-color: rgba(255,118,118,0.45); }
.vbot-pay-status-dot { width: 9px; height: 9px; border-radius: 50%;
background: #ffd86b;
animation: vbot-blink 1.4s infinite; }
.vbot-pay-status-pill[data-state="paid"] .vbot-pay-status-dot,
.vbot-pay-status-pill[data-state="running"] .vbot-pay-status-dot {
background: #8dd07a; animation: none;
}
@keyframes vbot-blink { 50% { opacity: 0.35; } }
.vbot-pay-status-label { font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 2px;
color: #f4f5f7; text-transform: uppercase; }
.vbot-pay-status-detail { color: #c8ccd4; font-size: 13px; flex: 1; }
/* ── api keys (iter-N+27) ────────────────────────────────────── */
.vbot-keys-head { margin-bottom: 18px; }
.vbot-keys-fresh { background: rgba(141,208,122,0.10);
border: 1px solid rgba(141,208,122,0.40);
padding: 18px 22px; border-radius: 14px; margin-bottom: 18px; }
.vbot-keys-fresh h3 { margin: 0 0 10px; font-size: 14px; color: #8dd07a; }
.vbot-keys-fresh-key { display: inline-block; background: #0e1014;
padding: 8px 12px; border-radius: 8px;
font-family: 'JetBrains Mono', monospace; font-size: 14px;
word-break: break-all; color: #f4f5f7; margin-right: 8px; }
.vbot-keys-fresh p { color: #c8ccd4; font-size: 12px; margin: 10px 0 0; }
.vbot-keys-form { display: grid; grid-template-columns: 1fr auto;
gap: 12px; align-items: end; margin-bottom: 22px; }
.vbot-keys-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vbot-keys-table th, .vbot-keys-table td { padding: 10px 12px; text-align: left;
border-bottom: 1px solid rgba(244,245,247,0.06); }
.vbot-keys-table th { color: #8a8f9b; font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 2px; }
.vbot-keys-state { font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: 2px; padding: 2px 8px; border-radius: 6px; }
.vbot-keys-state--live { background: rgba(141,208,122,0.18); color: #8dd07a; }
.vbot-keys-state--revoked { background: rgba(255,118,118,0.18); color: #ff7676; }
/* ── token picker (iter-N+30) ────────────────────────────────── */
.vb-tp { position: relative; }
.vb-tp-input-wrap { position: relative; }
.vb-tp-input { width: 100%; background: #0e1014; color: #f4f5f7;
border: 1px solid rgba(244,245,247,0.18); border-radius: 10px;
padding: 10px 36px 10px 12px; font-size: 13px;
font-family: inherit; }
.vb-tp-input:focus { outline: 2px solid #5fb3ff; outline-offset: 1px; }
.vb-tp-clear { position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
background: transparent; border: 0; color: #8a8f9b;
font-size: 18px; cursor: pointer; padding: 0 6px; line-height: 1; }
.vb-tp-clear:hover { color: #ff7676; }
.vb-tp-results { margin-top: 8px;
background: #15181f; border: 1px solid rgba(244,245,247,0.10);
border-radius: 12px; padding: 6px;
max-height: 320px; overflow-y: auto;
display: flex; flex-direction: column; gap: 2px; }
.vb-tp-row {
display: grid; grid-template-columns: 36px 1fr; gap: 12px;
background: transparent; border: 0; border-radius: 8px;
padding: 8px 10px; cursor: pointer; text-align: left;
color: #f4f5f7; font-family: inherit; width: 100%;
}
.vb-tp-row:hover, .vb-tp-row:focus {
background: rgba(95,179,255,0.10); outline: none;
}
.vb-tp-logo { width: 36px; height: 36px; border-radius: 50%;
object-fit: cover; background: #0e1014;
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace; font-size: 11px;
font-weight: 800; color: #5fb3ff;
border: 1px solid rgba(244,245,247,0.10); }
.vb-tp-logo--blank { color: #5fb3ff; }
.vb-tp-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vb-tp-row-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vb-tp-row-head b { font-size: 14px; }
.vb-tp-name { font-size: 12px; color: #c8ccd4;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-tp-wrap { font-family: 'JetBrains Mono', monospace; font-size: 9px;
letter-spacing: 2px; color: #b89bff;
background: rgba(184,155,255,0.10); padding: 1px 6px;
border-radius: 4px; }
.vb-tp-row-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px;
color: #8a8f9b; }
.vb-tp-row-meta code { font-family: 'JetBrains Mono', monospace;
background: #0e1014; padding: 1px 6px; border-radius: 4px; }
.vb-tp-stat { color: #c8ccd4; }
.vb-tp-empty { color: #8a8f9b; font-size: 12px; padding: 14px; font-style: italic; }
.vb-tp-selected {
display: grid; grid-template-columns: 36px 1fr auto; gap: 12px;
background: rgba(141,208,122,0.08); border: 1px solid rgba(141,208,122,0.30);
border-radius: 10px; padding: 10px 14px; align-items: center;
}
.vb-tp-unselect { background: transparent; color: #5fb3ff; border: 0;
font-size: 11px; cursor: pointer; padding: 4px 10px;
text-decoration: underline; }
.vb-tp-fallback { margin-top: 10px; }
.vb-tp-fallback summary { color: #8a8f9b; font-size: 12px; cursor: pointer;
padding: 4px 0; }
.vb-tp-fallback summary:hover { color: #c8ccd4; }
.vb-tp-fallback-field { display: block; font-size: 12px; color: #c8ccd4;
margin: 8px 0; }
.vb-tp-fallback-field input { width: 100%; margin-top: 4px;
background: #0e1014; color: #f4f5f7;
border: 1px solid rgba(244,245,247,0.15);
border-radius: 8px; padding: 6px 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; }
.vb-tp-manual-apply { background: #5fb3ff; color: #0e1014; border: 0;
padding: 8px 14px; border-radius: 8px; font-size: 12px;
font-weight: 600; cursor: pointer; margin-top: 6px; }
/* ── treasury gauge (iter-N+28) ──────────────────────────────── */
.vbot-treasury {
margin: 0 0 22px;
padding: 14px 18px;
background: #15181f; border-radius: 14px;
border: 1px solid rgba(95,179,255,0.20);
}
.vbot-treasury-head { display: flex; justify-content: space-between;
align-items: baseline; margin-bottom: 8px; }
.vbot-treasury-eyebrow { font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 2px; color: #5fb3ff; }
.vbot-treasury-state { font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 2px; color: #8a8f9b;
text-transform: uppercase; }
.vbot-treasury-bar { width: 100%; height: 8px; background: #0e1014;
border-radius: 999px; overflow: hidden;
border: 1px solid rgba(244,245,247,0.08); }
.vbot-treasury-fill { height: 100%;
background: linear-gradient(90deg, #5fb3ff, #8dd07a);
border-radius: 999px;
transition: width .4s ease; }
.vbot-treasury-numbers { display: flex; gap: 10px; flex-wrap: wrap;
font-size: 11px; color: #c8ccd4; margin-top: 8px; }
.vbot-treasury-numbers b { color: #f4f5f7;
font-family: 'JetBrains Mono', monospace; }
.vbot-treasury-sep { color: #3e4452; }
/* ── documentation portal (iter-N+27) ──────────────────────── */
.vbot-docs { display: grid; grid-template-columns: 240px 1fr; gap: 28px; margin-top: 12px; }
.vbot-docs-rail { background: #15181f; padding: 14px; border-radius: 14px;
border: 1px solid rgba(244,245,247,0.10);
position: sticky; top: 100px; align-self: start;
display: flex; flex-direction: column; gap: 4px; }
.vbot-docs-rail-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px;
padding: 10px 12px; border-radius: 10px;
color: #c8ccd4; text-decoration: none; font-size: 13px; }
.vbot-docs-rail-item:hover { background: rgba(244,245,247,0.04); }
.vbot-docs-rail-item.is-active { background: rgba(95,179,255,0.10);
border: 1px solid rgba(95,179,255,0.30);
color: #f4f5f7; }
.vbot-docs-rail-icon { font-size: 16px; }
.vbot-docs-rail-title { font-weight: 600; }
.vbot-docs-canvas { background: #15181f; border-radius: 16px; padding: 32px;
border: 1px solid rgba(244,245,247,0.08); }
.vbot-docs-head { margin-bottom: 22px; }
.vbot-docs-title { font-family: 'Newsreader', Georgia, serif; font-size: 28px;
margin: 0; line-height: 1.15; }
.vbot-docs-subtitle { color: #c8ccd4; font-size: 14px; line-height: 1.6;
margin: 10px 0 0; }
.vbot-docs-illust { margin: 0 0 24px; }
.vbot-docs-illust svg { width: 100%; height: auto; border-radius: 12px; }
.vbot-docs-content h2 { font-family: 'Newsreader', Georgia, serif; font-size: 22px;
margin: 30px 0 10px; }
.vbot-docs-content h3 { font-size: 16px; margin: 22px 0 8px; color: #5fb3ff; }
.vbot-docs-content p, .vbot-docs-content li { color: #c8ccd4; font-size: 14px;
line-height: 1.7; }
.vbot-docs-content code { background: #0e1014; padding: 1px 6px; border-radius: 4px;
font-family: 'JetBrains Mono', monospace; font-size: 12px;
color: #5fb3ff; }
.vbot-docs-content pre { background: #0e1014; padding: 14px 18px; border-radius: 10px;
border: 1px solid rgba(95,179,255,0.20); overflow-x: auto;
font-size: 12px; line-height: 1.5; color: #c8ccd4; }
.vbot-docs-content pre code { background: transparent; color: inherit;
padding: 0; font-size: 12px; }
.vbot-docs-grid { display: grid; gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
margin-bottom: 24px; }
.vbot-docs-card { background: #0e1014; padding: 18px;
border-radius: 14px; border: 1px solid rgba(244,245,247,0.10);
display: grid; grid-template-columns: 36px 1fr 16px;
gap: 14px; align-items: center; text-decoration: none;
color: #f4f5f7; transition: border-color .15s, transform .15s; }
.vbot-docs-card:hover { border-color: rgba(95,179,255,0.45); transform: translateY(-2px); }
.vbot-docs-card-icon { font-size: 24px; }
.vbot-docs-card h3 { margin: 0; font-size: 15px; color: #f4f5f7; }
.vbot-docs-card p { margin: 4px 0 0; font-size: 12px; color: #8a8f9b; line-height: 1.5; }
.vbot-docs-card-arrow { color: #5fb3ff; }
.vbot-docs-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 14px 0; }
.vbot-docs-table th, .vbot-docs-table td { padding: 8px 10px; text-align: left;
border-bottom: 1px solid rgba(244,245,247,0.06); }
.vbot-docs-table th { color: #8a8f9b; font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 2px; }
.vbot-docs-deflist dt { font-weight: 700; color: #5fb3ff; margin-top: 10px; }
.vbot-docs-deflist dd { margin: 4px 0 0; color: #c8ccd4; }
.vbot-docs-walk { list-style: none; padding: 0; }
.vbot-docs-walk li { margin: 22px 0; padding: 16px 18px;
border-left: 3px solid #5fb3ff;
background: rgba(95,179,255,0.05); border-radius: 0 12px 12px 0; }
.vbot-docs-walk li h3 { color: #5fb3ff; margin-top: 0; }
.vbot-docs-q { padding: 12px 16px; background: #0e1014; border-radius: 10px;
border: 1px solid rgba(244,245,247,0.10); margin: 10px 0; }
.vbot-docs-q summary { cursor: pointer; font-weight: 600; color: #f4f5f7; }
.vbot-docs-q p, .vbot-docs-q li, .vbot-docs-q ul { margin: 8px 0 0; }
/* Iter-N+74 — Intermediate breakpoint. When the canvas drops below
~1140 px (laptop + Gopnik wallet shell), the 1fr-illustration is
pushed below the form so the form gets full width. The illustration
shrinks to a max-width 360 px so it remains a useful visual hint
without dominating the page. */
@media (max-width: 1140px) {
.vbot-wizard-split { grid-template-columns: 1fr; }
.vbot-wizard-illust { order: 2; max-width: 360px; }
}
@media (max-width: 840px) {
.vbot-docs { grid-template-columns: 1fr; }
.vbot-docs-rail { position: static; flex-direction: row; flex-wrap: wrap;
overflow-x: auto; }
.vbot-docs-rail-item { flex: 0 0 auto; }
.vbot-hero-card { grid-template-columns: 1fr; }
.vbot-hero-illust { display: none; }
.vbot-wizard { grid-template-columns: 1fr; }
.vbot-wizard-rail { position: static; }
.vbot-wizard-split { grid-template-columns: 1fr; }
.vbot-wizard-illust { order: -1; max-width: none; }
.vbot-runhero-stats { grid-template-columns: repeat(2, 1fr); }
.vbot-charts { grid-template-columns: 1fr; }
.vbot-mkt-hero-card{ grid-template-columns: 1fr; }
.vbot-checkout-split { grid-template-columns: 1fr; }
.vbot-pay-split { grid-template-columns: 1fr; }
.vbot-keys-form { grid-template-columns: 1fr; }
}
/* ── Iter-N+41 — cinematic post-payment launch page ───────────────
Renders the 4-stage ignition timeline that pays off the
"Rent in 60 seconds" promise from the marketplace. Every stage
has three visible states: pending (dim), active (accent ring +
subtle pulse), done (filled + check mark). Designed to read at
a glance and animate smoothly even on a laptop on battery.
───────────────────────────────────────────────────────────── */
.vbot-launching{
display: grid;
gap: clamp(16px, 2vw, 28px);
padding-block: clamp(16px, 3vw, 32px);
--ign-accent: var(--vbot-accent, #9d6cff);
}
.vbot-launching-head{ text-align: center; }
.vbot-launching-eyebrow{
display: inline-block;
letter-spacing: .18em;
text-transform: uppercase;
font-size: 11px;
color: var(--vbot-muted, #8a92b2);
padding: 4px 10px;
border: 1px solid color-mix(in srgb, var(--ign-accent) 30%, transparent);
border-radius: 999px;
margin-bottom: 12px;
}
.vbot-launching-title{
font-size: clamp(28px, 5vw, 48px);
font-weight: 800;
letter-spacing: -.02em;
margin: 0 0 8px;
line-height: 1.05;
}
.vbot-launching-title-grad{
background: linear-gradient(95deg,
color-mix(in srgb, var(--ign-accent) 80%, white),
color-mix(in srgb, var(--ign-accent) 45%, #6fc8ff));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.vbot-launching-blurb{
max-width: 56ch;
margin: 0 auto;
color: var(--vbot-muted, #8a92b2);
font-size: 15px;
}
/* Timeline — vertical row of step cards */
.vbot-ignition{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
max-width: 640px;
margin-inline: auto;
width: 100%;
}
.vbot-ignition-step{
display: grid;
grid-template-columns: 44px 1fr 32px;
gap: 14px;
align-items: start;
padding: 16px 18px;
border-radius: 14px;
border: 1px solid var(--vbot-border, #232943);
background: linear-gradient(180deg,
color-mix(in srgb, var(--vbot-surface, #0f132a) 96%, transparent),
color-mix(in srgb, var(--vbot-surface, #0f132a) 88%, transparent));
transition: border-color .22s ease, transform .22s ease,
box-shadow .22s ease;
contain: layout paint;
}
.vbot-ignition-step-num{
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: color-mix(in srgb, var(--vbot-surface, #0f132a) 70%,
var(--ign-accent) 12%);
color: var(--vbot-muted, #8a92b2);
font-weight: 700;
font-variant-numeric: tabular-nums;
border: 1px solid color-mix(in srgb, var(--ign-accent) 25%, transparent);
transition: background .22s ease, color .22s ease,
transform .22s ease;
}
.vbot-ignition-step-body{ min-width: 0; }
.vbot-ignition-step-title{
margin: 0 0 4px;
font-size: 16px;
font-weight: 600;
color: var(--vbot-text, #e8ecff);
}
.vbot-ignition-step-text{
margin: 0;
color: var(--vbot-muted, #8a92b2);
font-size: 13.5px;
line-height: 1.45;
}
.vbot-ignition-step-detail{
display: block;
margin-top: 6px;
color: color-mix(in srgb, var(--vbot-muted, #8a92b2) 75%, white);
font-size: 12px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.vbot-ignition-step-check{
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: transparent;
color: transparent;
font-weight: 700;
font-size: 15px;
align-self: center;
transition: color .25s ease, background .25s ease,
transform .25s ease;
}
/* States */
.vbot-ignition-step[data-state="active"]{
border-color: color-mix(in srgb, var(--ign-accent) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ign-accent) 12%, transparent);
}
.vbot-ignition-step[data-state="active"] .vbot-ignition-step-num{
background: var(--ign-accent);
color: white;
animation: vbot-ignition-pulse 1.8s ease-in-out infinite;
}
.vbot-ignition-step[data-state="done"]{
border-color: color-mix(in srgb, var(--ign-accent) 35%, transparent);
}
.vbot-ignition-step[data-state="done"] .vbot-ignition-step-num{
background: color-mix(in srgb, var(--ign-accent) 80%, #1abf66);
color: white;
border-color: color-mix(in srgb, var(--ign-accent) 50%, transparent);
}
.vbot-ignition-step[data-state="done"] .vbot-ignition-step-check{
background: color-mix(in srgb, #1abf66 80%, var(--ign-accent));
color: white;
transform: scale(1);
}
@keyframes vbot-ignition-pulse{
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb,
var(--ign-accent) 45%, transparent); }
50% { box-shadow: 0 0 0 8px transparent; }
}
/* Tab-hidden / reduced-motion — kill the pulse so the laptop fan
stays quiet on background tabs (iter-N+39 perf hook). */
body[data-tab-hidden="1"] .vbot-ignition-step-num,
@media (prefers-reduced-motion: reduce){
.vbot-ignition-step[data-state="active"] .vbot-ignition-step-num{
animation: none;
}
}
/* Progress bar under the timeline. */
.vbot-ignition-bar{
height: 6px;
border-radius: 999px;
background: color-mix(in srgb, var(--vbot-border, #232943) 60%, transparent);
overflow: hidden;
max-width: 640px;
margin-inline: auto;
width: 100%;
}
.vbot-ignition-bar-fill{
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg,
color-mix(in srgb, var(--ign-accent) 70%, #6fc8ff),
color-mix(in srgb, var(--ign-accent) 90%, white));
transition: width .55s cubic-bezier(.22,.61,.36,1);
}
.vbot-ignition-status{
text-align: center;
font-size: 13px;
color: var(--vbot-muted, #8a92b2);
margin: 0;
}
.vbot-ignition-escape{ text-align: center; }
/* Mobile: tighten paddings + drop the trailing check column to free
horizontal space for the title. */
@media (max-width: 560px){
.vbot-ignition-step{
grid-template-columns: 36px 1fr;
padding: 14px 14px;
}
.vbot-ignition-step-check{ display: none; }
.vbot-launching-title{ font-size: clamp(26px, 8vw, 36px); }
}
/* ── Iter-N+42 — wallet picker (treasury step) ──────────────────── */
.vbot-wallet-picker{
border: 0; padding: 0; margin: 0 0 12px;
display: grid; gap: 8px;
}
.vbot-wallet-picker > legend{ padding: 0; margin-bottom: 8px; }
.vbot-wallet-radio{ display: block; cursor: pointer; }
.vbot-wallet-radio > input{
position: absolute; opacity: 0; pointer-events: none;
}
.vbot-wallet-radio-card{
display: grid;
grid-template-columns: 1fr;
gap: 4px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--vbot-border, #232943);
background: color-mix(in srgb, var(--vbot-surface, #0f132a) 88%, transparent);
transition: border-color .18s ease, transform .18s ease,
box-shadow .18s ease;
}
.vbot-wallet-radio:hover .vbot-wallet-radio-card{
border-color: color-mix(in srgb, var(--vbot-accent, #9d6cff) 60%, transparent);
}
.vbot-wallet-radio > input:checked + .vbot-wallet-radio-card{
border-color: color-mix(in srgb, var(--vbot-accent, #9d6cff) 85%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--vbot-accent, #9d6cff) 15%, transparent);
}
.vbot-wallet-radio-top{
display: flex; align-items: center; gap: 8px;
}
.vbot-wallet-radio-alias{
font-size: 14.5px; color: var(--vbot-text, #e8ecff);
}
.vbot-wallet-radio-pill{
font-size: 10px; letter-spacing: .12em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 999px;
background: color-mix(in srgb, #ffd86b 22%, transparent);
color: #ffd86b;
border: 1px solid color-mix(in srgb, #ffd86b 35%, transparent);
}
.vbot-wallet-radio-addr{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
color: var(--vbot-muted, #8a92b2);
word-break: break-all;
}
/* Inline link helper used inside callouts. */
.vbot-inline-link{
color: color-mix(in srgb, var(--vbot-accent, #9d6cff) 80%, white);
text-decoration: underline;
text-underline-offset: 2px;
}
.vbot-callout--warn{
border-color: color-mix(in srgb, #ff7a59 50%, transparent);
background: color-mix(in srgb, #ff7a59 8%, transparent);
}
/* ── Iter-N+42 — "not configured" page ──────────────────────────── */
.vbot-notready{
display: grid;
place-items: center;
min-height: 60vh;
padding-block: clamp(24px, 4vw, 48px);
}
.vbot-notready-card{
max-width: 640px;
width: 100%;
text-align: center;
padding: clamp(20px, 4vw, 40px);
border-radius: 18px;
border: 1px solid var(--vbot-border, #232943);
background: color-mix(in srgb, var(--vbot-surface, #0f132a) 92%, transparent);
}
.vbot-notready-icon{
display: grid; place-items: center;
width: 80px; height: 80px;
margin: 0 auto 16px;
border-radius: 50%;
background: color-mix(in srgb, var(--vbot-accent, #9d6cff) 14%, transparent);
}
.vbot-notready-title{
margin: 0 0 12px; font-size: clamp(22px, 4vw, 30px);
font-weight: 700; letter-spacing: -.01em;
}
.vbot-notready-blurb{
color: var(--vbot-muted, #8a92b2);
font-size: 14.5px; line-height: 1.5;
max-width: 56ch; margin: 0 auto 20px;
}
.vbot-notready-detail{
text-align: left;
display: grid;
grid-template-columns: max-content 1fr;
gap: 6px 14px;
margin: 16px 0 24px;
padding: 14px 16px;
border-radius: 12px;
background: color-mix(in srgb, var(--vbot-surface, #0f132a) 70%, transparent);
border: 1px solid color-mix(in srgb, var(--vbot-border, #232943) 75%, transparent);
font-size: 13.5px;
}
.vbot-notready-detail dt{
color: var(--vbot-muted, #8a92b2);
font-size: 12px; letter-spacing: .08em;
text-transform: uppercase;
padding-top: 2px;
}
.vbot-notready-detail dd{ margin: 0; color: var(--vbot-text, #e8ecff); }
.vbot-notready-cta{
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
margin-bottom: 14px;
}
.vbot-notready-help{
text-align: left;
margin-top: 14px;
font-size: 13px;
color: var(--vbot-muted, #8a92b2);
}
.vbot-notready-help summary{
cursor: pointer;
padding: 6px 0;
}
/* ── Iter-N+42 — admin readiness banner on the landing/marketplace ── */
.vbot-admin-banner{
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 16px;
border-radius: 12px;
margin: 0 0 18px;
border: 1px solid color-mix(in srgb, #ff7a59 60%, transparent);
background: color-mix(in srgb, #ff7a59 10%, transparent);
color: var(--vbot-text, #e8ecff);
font-size: 13.5px;
}
.vbot-admin-banner--ok{
border-color: color-mix(in srgb, #1abf66 60%, transparent);
background: color-mix(in srgb, #1abf66 10%, transparent);
}
.vbot-admin-banner-icon{
display: inline-grid; place-items: center;
width: 28px; height: 28px;
border-radius: 50%;
background: color-mix(in srgb, #ff7a59 35%, transparent);
color: #fff; font-weight: 700;
}
.vbot-admin-banner--ok .vbot-admin-banner-icon{
background: color-mix(in srgb, #1abf66 50%, transparent);
}
.vbot-admin-banner b{ color: white; }
.vbot-admin-banner a{
color: color-mix(in srgb, var(--vbot-accent, #9d6cff) 80%, white);
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
/* ── Iter-N+43 — "My rentals" page ──────────────────────────────── */
.vbot-rentals{
display: grid;
gap: clamp(18px, 2.5vw, 28px);
padding-block: clamp(16px, 3vw, 28px);
}
.vbot-rentals-head{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.vbot-rentals-title{
margin: 0 0 6px;
font-size: clamp(24px, 3.6vw, 34px);
font-weight: 700;
letter-spacing: -.012em;
}
.vbot-rentals-blurb{
margin: 0; color: var(--vbot-muted, #8a92b2);
max-width: 56ch; font-size: 14px;
}
/* Filter chips */
.vbot-rentals-filters{
display: flex; flex-wrap: wrap; gap: 8px;
}
.vbot-rentals-chip{
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--vbot-border, #232943);
background: color-mix(in srgb, var(--vbot-surface, #0f132a) 80%, transparent);
color: var(--vbot-text, #e8ecff);
font-size: 13px;
text-decoration: none;
transition: border-color .18s ease, background .18s ease,
transform .18s ease;
}
.vbot-rentals-chip:hover{
border-color: color-mix(in srgb, var(--vbot-accent, #9d6cff) 60%, transparent);
transform: translateY(-1px);
}
.vbot-rentals-chip em{
font-style: normal;
padding: 1px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--vbot-border, #232943) 60%, transparent);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11.5px;
color: var(--vbot-muted, #8a92b2);
}
.vbot-rentals-chip--on{
border-color: color-mix(in srgb, var(--vbot-accent, #9d6cff) 90%, transparent);
background: color-mix(in srgb, var(--vbot-accent, #9d6cff) 14%, transparent);
}
.vbot-rentals-chip--on em{
background: color-mix(in srgb, var(--vbot-accent, #9d6cff) 35%, transparent);
color: var(--vbot-text, #e8ecff);
}
/* Empty state */
.vbot-rentals-empty{
display: grid; place-items: center; gap: 10px;
padding: clamp(28px, 6vw, 64px) 24px;
text-align: center;
border-radius: 18px;
border: 1px dashed color-mix(in srgb, var(--vbot-border, #232943) 80%, transparent);
background: color-mix(in srgb, var(--vbot-surface, #0f132a) 60%, transparent);
}
.vbot-rentals-empty h2{
margin: 0;
font-size: clamp(20px, 2.6vw, 26px);
font-weight: 600;
}
.vbot-rentals-empty p{
margin: 0;
color: var(--vbot-muted, #8a92b2);
max-width: 46ch;
}
/* Card grid */
.vbot-rentals-grid{
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 14px;
}
.vbot-rentals-card{
display: grid;
gap: 12px;
padding: 16px 18px;
border-radius: 14px;
border: 1px solid var(--vbot-border, #232943);
background: linear-gradient(180deg,
color-mix(in srgb, var(--vbot-surface, #0f132a) 96%, transparent),
color-mix(in srgb, var(--vbot-surface, #0f132a) 86%, transparent));
transition: border-color .2s ease, transform .2s ease,
box-shadow .2s ease;
contain: layout paint;
}
.vbot-rentals-card:hover{
border-color: color-mix(in srgb, var(--vbot-accent, #9d6cff) 45%, transparent);
transform: translateY(-1px);
}
.vbot-rentals-card[data-state="running"]{
border-color: color-mix(in srgb, #1abf66 50%, transparent);
}
.vbot-rentals-card-top{
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px;
}
.vbot-rentals-card-title{
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.vbot-rentals-card-title strong{
font-size: 15.5px; color: var(--vbot-text, #e8ecff);
}
.vbot-rentals-tier{
font-size: 10px; letter-spacing: .14em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 999px;
color: var(--vbot-text, #e8ecff);
border: 1px solid color-mix(in srgb, var(--vbot-accent, #9d6cff) 40%, transparent);
background: color-mix(in srgb, var(--vbot-accent, #9d6cff) 14%, transparent);
font-weight: 600;
}
.vbot-rentals-tier--starter{
border-color: color-mix(in srgb, #6fc8ff 50%, transparent);
background: color-mix(in srgb, #6fc8ff 15%, transparent);
}
.vbot-rentals-tier--pro{
border-color: color-mix(in srgb, #9d6cff 55%, transparent);
background: color-mix(in srgb, #9d6cff 16%, transparent);
}
.vbot-rentals-tier--elite{
border-color: color-mix(in srgb, #ffd86b 60%, transparent);
background: color-mix(in srgb, #ffd86b 12%, transparent);
color: #ffe9a8;
}
.vbot-rentals-tier--custom{
border-color: color-mix(in srgb, #ff7a59 55%, transparent);
background: color-mix(in srgb, #ff7a59 14%, transparent);
}
/* State pill */
.vbot-rentals-pill{
font-size: 10.5px; letter-spacing: .12em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 999px;
font-weight: 600;
white-space: nowrap;
border: 1px solid transparent;
}
.vbot-rentals-pill--warn{
background: color-mix(in srgb, #ff7a59 18%, transparent);
color: #ffba9a;
border-color: color-mix(in srgb, #ff7a59 45%, transparent);
}
.vbot-rentals-pill--info{
background: color-mix(in srgb, #6fc8ff 18%, transparent);
color: #c4e7ff;
border-color: color-mix(in srgb, #6fc8ff 45%, transparent);
}
.vbot-rentals-pill--ok{
background: color-mix(in srgb, #1abf66 22%, transparent);
color: #b9f1d0;
border-color: color-mix(in srgb, #1abf66 55%, transparent);
}
.vbot-rentals-pill--done{
background: color-mix(in srgb, #9d6cff 22%, transparent);
color: #d6c5ff;
border-color: color-mix(in srgb, #9d6cff 50%, transparent);
}
.vbot-rentals-pill--mute{
background: color-mix(in srgb, var(--vbot-border,#232943) 60%, transparent);
color: var(--vbot-muted, #8a92b2);
border-color: var(--vbot-border, #232943);
}
/* Meta dl */
.vbot-rentals-card-meta{
margin: 0;
display: grid;
grid-template-columns: max-content 1fr;
gap: 4px 14px;
font-size: 13px;
}
.vbot-rentals-card-meta dt{
color: var(--vbot-muted, #8a92b2);
font-size: 11.5px; letter-spacing: .08em;
text-transform: uppercase;
padding-top: 2px;
}
.vbot-rentals-card-meta dd{ margin: 0; color: var(--vbot-text, #e8ecff); }
/* Progress bar */
.vbot-rentals-bar{
height: 5px;
border-radius: 999px;
background: color-mix(in srgb, var(--vbot-border, #232943) 65%, transparent);
overflow: hidden;
}
.vbot-rentals-bar-fill{
display: block; height: 100%;
background: linear-gradient(90deg,
color-mix(in srgb, var(--vbot-accent, #9d6cff) 80%, #6fc8ff),
color-mix(in srgb, var(--vbot-accent, #9d6cff) 95%, white));
transition: width .5s cubic-bezier(.22,.61,.36,1);
}
/* Action row */
.vbot-rentals-card-actions{
display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
}
.vbot-rentals-card-actions .vbot-btn{ flex: 1 1 auto; min-width: 0; }
.vbot-rentals-card-link{
font-size: 12px;
color: var(--vbot-muted, #8a92b2);
text-decoration: underline;
text-underline-offset: 2px;
flex: 0 0 auto;
}
.vbot-rentals-card-link:hover{
color: color-mix(in srgb, var(--vbot-accent, #9d6cff) 80%, white);
}
.vbot-rentals-card-reason{
font-size: 12.5px;
color: var(--vbot-muted, #8a92b2);
font-style: italic;
}
@media (max-width: 560px){
.vbot-rentals-head{ flex-direction: column; align-items: flex-start; }
.vbot-rentals-card-meta{ grid-template-columns: 1fr; gap: 2px; }
.vbot-rentals-card-meta dt{ margin-top: 6px; }
}
/* ── Iter-N+43 — pagehead "My rentals" shortcut ─────────────────── */
.vbot-pagehead-link{
color: var(--vbot-muted, #8a92b2);
text-decoration: none;
font-size: 13px;
padding: 6px 12px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--vbot-border, #232943) 70%, transparent);
background: color-mix(in srgb, var(--vbot-surface, #0f132a) 70%, transparent);
transition: color .18s ease, border-color .18s ease;
}
.vbot-pagehead-link:hover{
color: var(--vbot-text, #e8ecff);
border-color: color-mix(in srgb, var(--vbot-accent, #9d6cff) 55%, transparent);
}
/* ── Iter-N+44 — accessibility polish ───────────────────────────── */
/* Focus rings — keyboard users need a visible target everywhere. */
.vbot-rentals-chip:focus-visible,
.vbot-pagehead-link:focus-visible,
.vbot-wallet-radio:focus-within .vbot-wallet-radio-card,
.vbot-rentals-card-link:focus-visible{
outline: 2px solid color-mix(in srgb, var(--vbot-accent, #9d6cff) 80%, white);
outline-offset: 2px;
}
/* Re-run button — visually identical to primary but reads "↻ Re-run …" */
.vbot-rentals-card-actions form{ display: inline-flex; }
.vbot-rentals-card-actions form .vbot-btn{ width: 100%; }
/* ───────────────────────────────────────────────────────────────────
Iter-N+53 — Animated live process overview
Renders the SVG flowchart in run_dashboard.html with cosmic
gradients, pulses on event, and KPI tiles below.
────────────────────────────────────────────────────────────────── */
.vbot-process{
position: relative;
padding: 24px;
border-radius: 16px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--vbot-surface, #0f132a) 92%, transparent) 0%,
color-mix(in srgb, #1a1f3d 92%, transparent) 100%);
border: 1px solid color-mix(in srgb, var(--vbot-border, #232943) 80%, transparent);
overflow: hidden;
}
.vbot-process::before{
/* subtle starfield backdrop */
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(2px 2px at 12% 20%, rgba(125,211,252,0.18), transparent 60%),
radial-gradient(1px 1px at 70% 60%, rgba(244,114,182,0.20), transparent 60%),
radial-gradient(1.5px 1.5px at 45% 85%, rgba(167,139,250,0.16), transparent 60%);
pointer-events: none;
opacity: 0.7;
}
.vbot-process-head{
position: relative;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.vbot-process-title{
margin: 0;
display: flex;
align-items: baseline;
gap: 12px;
}
.vbot-process-eyebrow{
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: color-mix(in srgb, #7dd3fc 80%, white);
font-weight: 500;
}
.vbot-process-legend{
display: flex;
gap: 14px;
font-size: 12px;
color: var(--vbot-muted, #8a92b2);
}
.vbot-legend-item{
display: inline-flex; align-items: center; gap: 6px;
}
.vbot-legend-dot{
width: 8px; height: 8px; border-radius: 50%;
background: rgba(125, 211, 252, 0.4);
display: inline-block;
}
.vbot-legend-dot--active{ background: #34d399; box-shadow: 0 0 8px #34d39988; }
.vbot-legend-dot--pulse { background: #fde68a; box-shadow: 0 0 10px #fbbf24aa;
animation: vbot-legend-pulse 1.6s ease-in-out infinite; }
.vbot-legend-dot--idle { background: rgba(125, 211, 252, 0.3); }
@keyframes vbot-legend-pulse{
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.6; }
}
.vbot-process-wrap{
position: relative;
width: 100%;
background: rgba(8, 11, 26, 0.55);
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--vbot-border, #232943) 60%, transparent);
overflow: hidden;
}
.vbot-process-svg{
display: block;
width: 100%;
height: auto;
max-height: 480px;
}
/* Station base styling */
.vbot-station{
cursor: default;
}
.vbot-station-core{
transition: filter 0.4s ease, transform 0.4s ease;
transform-origin: center;
}
.vbot-station-icon{
font-size: 36px;
fill: white;
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
user-select: none;
}
.vbot-station-label{
fill: rgba(232, 236, 255, 0.92);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.2px;
font-family: var(--vbot-mono, ui-monospace, 'SF Mono', monospace);
}
.vbot-station-label-inline{
fill: rgba(15, 23, 42, 0.95);
font-size: 13px;
font-weight: 700;
letter-spacing: 1.0px;
font-family: var(--vbot-mono, ui-monospace, monospace);
}
.vbot-station-sub{
fill: rgba(232, 236, 255, 0.6);
font-size: 11px;
font-family: var(--vbot-mono, ui-monospace, monospace);
}
/* Active / pulse / reap states */
.vbot-station.is-active .vbot-station-core{
filter: drop-shadow(0 0 12px currentColor);
animation: vbot-station-pop 0.9s ease-out;
}
.vbot-station.is-pulse .vbot-station-core{
filter: drop-shadow(0 0 22px white) drop-shadow(0 0 36px rgba(125,211,252,0.7));
animation: vbot-station-flare 1.3s cubic-bezier(.34,1.56,.64,1);
}
.vbot-station.is-reap .vbot-station-core{
filter: drop-shadow(0 0 18px #34d399) drop-shadow(0 0 30px #34d39988);
animation: vbot-station-reap 1.1s ease-out;
}
@keyframes vbot-station-pop{
0% { transform: scale(1); }
50% { transform: scale(1.06); }
100% { transform: scale(1); }
}
@keyframes vbot-station-flare{
0% { transform: scale(1); }
35% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@keyframes vbot-station-reap{
0%, 100% { transform: scale(1); }
35% { transform: scale(1.08) rotate(6deg); }
65% { transform: scale(1.05) rotate(-4deg); }
}
/* Overlay text */
.vbot-overlay-eyebrow{
fill: rgba(125, 211, 252, 0.85);
font-size: 10.5px;
letter-spacing: 1.6px;
text-transform: uppercase;
font-family: var(--vbot-mono, ui-monospace, monospace);
font-weight: 700;
}
.vbot-overlay-main{
fill: rgba(232, 236, 255, 0.95);
font-size: 14px;
font-family: var(--vbot-mono, ui-monospace, monospace);
}
.vbot-overlay-num{
font-weight: 700;
fill: #fde68a;
}
/* KPI strip below the canvas */
.vbot-process-kpis{
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-top: 18px;
}
.vbot-process-kpi{
background: color-mix(in srgb, var(--vbot-surface, #0f132a) 85%, transparent);
border: 1px solid color-mix(in srgb, var(--vbot-border, #232943) 80%, transparent);
border-radius: 12px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
overflow: hidden;
}
.vbot-process-kpi::before{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg,
rgba(125, 211, 252, 0.08) 0%,
transparent 50%,
rgba(167, 139, 250, 0.06) 100%);
pointer-events: none;
}
.vbot-process-kpi-k{
font-size: 22px;
font-weight: 700;
font-family: var(--vbot-mono, ui-monospace, monospace);
color: var(--vbot-text, #e8ecff);
letter-spacing: -0.5px;
position: relative;
}
.vbot-process-kpi-l{
font-size: 11px;
color: var(--vbot-muted, #8a92b2);
text-transform: uppercase;
letter-spacing: 1.1px;
position: relative;
}
/* Particle layer — JS-injected circles with animateMotion */
.vbot-process-particles circle{
pointer-events: none;
}
/* Reduced motion: kill animations + particles */
@media (prefers-reduced-motion: reduce){
.vbot-station-core,
.vbot-station.is-active .vbot-station-core,
.vbot-station.is-pulse .vbot-station-core,
.vbot-station.is-reap .vbot-station-core{
animation: none;
filter: none;
}
.vbot-process::before,
.vbot-legend-dot--pulse{ animation: none; }
}
/* Mobile shrink */
@media (max-width: 720px){
.vbot-process{ padding: 16px; }
.vbot-process-kpis{ grid-template-columns: repeat(2, 1fr); }
.vbot-process-svg{ max-height: 320px; }
}
/* ───────────────────────────────────────────────────────────────────
Iter-N+54 — Wallet pool management page
────────────────────────────────────────────────────────────────── */
.vbot-pool-cleanup{ margin: 18px 0; }
.vbot-pool-cleanup-card{
background: linear-gradient(135deg,
color-mix(in srgb, #1a1f3d 92%, transparent),
color-mix(in srgb, #0f132a 92%, transparent));
border: 1px solid color-mix(in srgb, #f87171 35%, transparent);
border-radius: 14px;
padding: 18px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
flex-wrap: wrap;
}
.vbot-pool-cleanup-title{
margin: 0 0 4px 0;
font-size: 17px;
color: #fde68a;
}
.vbot-pool-cleanup-sub{
margin: 0;
font-size: 13px;
color: var(--vbot-muted, #8a92b2);
max-width: 60ch;
}
.vbot-pool-cleanup-actions{
display: flex; gap: 10px; flex-wrap: wrap;
}
.vbot-btn--danger-ghost{
background: transparent;
color: #fca5a5;
border: 1px solid color-mix(in srgb, #f87171 50%, transparent);
}
.vbot-btn--danger-ghost:hover{
background: color-mix(in srgb, #f87171 12%, transparent);
color: #fff;
}
.vbot-pool-filters{ margin: 16px 0 10px; display: flex; flex-direction: column; gap: 10px; }
.vbot-pool-filter-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vbot-pool-filter-label{
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.4px;
color: var(--vbot-muted, #8a92b2);
min-width: 76px;
}
.vbot-pool-chip{
display: inline-flex;
align-items: center; gap: 6px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--vbot-border, #232943) 80%, transparent);
background: color-mix(in srgb, var(--vbot-surface, #0f132a) 80%, transparent);
font-size: 12px; color: var(--vbot-muted, #8a92b2);
text-decoration: none;
transition: all .15s ease;
}
.vbot-pool-chip:hover{ color: var(--vbot-text, #e8ecff); border-color: color-mix(in srgb, var(--vbot-accent, #9d6cff) 55%, transparent); }
.vbot-pool-chip.is-active{
color: #fff;
background: linear-gradient(120deg, #5b21b6, #2563eb);
border-color: transparent;
}
.vbot-pool-chip-n{
background: color-mix(in srgb, #fff 14%, transparent);
border-radius: 999px;
padding: 1px 7px;
font-variant-numeric: tabular-nums;
font-size: 11px;
}
.vbot-pool-chip--idle.is-active{ background: linear-gradient(120deg, #0891b2, #0e7490); }
.vbot-pool-chip--active.is-active{ background: linear-gradient(120deg, #059669, #047857); }
.vbot-pool-chip--recycled.is-active{ background: linear-gradient(120deg, #d97706, #b45309); }
.vbot-pool-chip--burned.is-active{ background: linear-gradient(120deg, #dc2626, #991b1b); }
.vbot-pool-chip--activating.is-active{ background: linear-gradient(120deg, #7c3aed, #5b21b6); }
.vbot-pool-form{ margin-top: 8px; }
.vbot-pool-formbar{
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
background: color-mix(in srgb, var(--vbot-surface, #0f132a) 90%, transparent);
border: 1px solid color-mix(in srgb, var(--vbot-border, #232943) 80%, transparent);
border-bottom: none;
border-radius: 12px 12px 0 0;
font-size: 13px;
flex-wrap: wrap;
}
.vbot-pool-formbar-sep{ color: var(--vbot-muted, #8a92b2); }
.vbot-pool-formbar-count{ color: var(--vbot-text, #e8ecff); }
.vbot-pool-formbar .vbot-btn{ margin-left: auto; }
.vbot-pool-selectall{ display: flex; align-items: center; gap: 8px; cursor: pointer; }
.vbot-pool-table{
width: 100%;
border-collapse: collapse;
background: color-mix(in srgb, var(--vbot-surface, #0f132a) 75%, transparent);
border: 1px solid color-mix(in srgb, var(--vbot-border, #232943) 80%, transparent);
border-top: none;
border-radius: 0 0 12px 12px;
overflow: hidden;
font-size: 13px;
}
.vbot-pool-table thead th{
background: color-mix(in srgb, #1a1f3d 80%, transparent);
color: var(--vbot-muted, #8a92b2);
font-size: 11px;
letter-spacing: 1.3px;
text-transform: uppercase;
font-weight: 600;
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid color-mix(in srgb, var(--vbot-border, #232943) 70%, transparent);
}
.vbot-pool-table tbody td{
padding: 12px 14px;
border-bottom: 1px solid color-mix(in srgb, var(--vbot-border, #232943) 40%, transparent);
vertical-align: middle;
}
.vbot-pool-row:hover td{ background: color-mix(in srgb, var(--vbot-accent, #9d6cff) 5%, transparent); }
.vbot-pool-td-check{ width: 32px; }
.vbot-pool-td-addr code{
font-family: var(--vbot-mono, ui-monospace, monospace);
color: #c4b5fd;
font-size: 12px;
}
.vbot-pool-td-time{ color: var(--vbot-muted, #8a92b2); font-size: 12px; white-space: nowrap; }
.vbot-pool-locked{ color: #6b7280; font-size: 14px; }
.vbot-pool-cat,
.vbot-pool-state{
display: inline-block;
padding: 2px 9px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 1.0px;
text-transform: uppercase;
}
.vbot-pool-cat--foundation{ background: rgba(125,211,252,0.18); color: #7dd3fc; }
.vbot-pool-cat--maker{ background: rgba(167,139,250,0.18); color: #a78bfa; }
.vbot-pool-cat--taker{ background: rgba(244,114,182,0.18); color: #f472b6; }
.vbot-pool-cat--scout{ background: rgba(52,211,153,0.18); color: #34d399; }
.vbot-pool-cat--recycle{ background: rgba(251,191,36,0.18); color: #fbbf24; }
.vbot-pool-state--idle{ background: rgba(125,211,252,0.18); color: #7dd3fc; }
.vbot-pool-state--active{ background: rgba(52,211,153,0.22); color: #34d399; }
.vbot-pool-state--recycled{ background: rgba(251,191,36,0.18); color: #fbbf24; }
.vbot-pool-state--burned{ background: rgba(248,113,113,0.18); color: #fca5a5; text-decoration: line-through; }
.vbot-pool-state--activating{ background: rgba(167,139,250,0.18); color: #a78bfa; }
.vbot-pool-state--sweeping{ background: rgba(103,232,249,0.18); color: #67e8f9; }
.vbot-pool-empty{
text-align: center;
padding: 36px 18px;
color: var(--vbot-muted, #8a92b2);
font-style: italic;
}
@media (max-width: 720px){
.vbot-pool-cleanup-card{ flex-direction: column; align-items: flex-start; }
.vbot-pool-table{ font-size: 12px; }
.vbot-pool-table thead{ display: none; }
.vbot-pool-row{ display: block; padding: 12px; border-bottom: 1px solid #232943; }
.vbot-pool-row td{ display: block; padding: 4px 0; border: none; }
.vbot-pool-row td::before{ content: attr(data-label); color: var(--vbot-muted, #8a92b2); margin-right: 6px; }
}
/* ───────────────────────────────────────────────────────────────────
Iter-N+54 — Flow chart redesign overrides
Cleaner spacing, no overlapping labels, overlays moved out of SVG.
────────────────────────────────────────────────────────────────── */
/* Overlay strip ABOVE the SVG (moved out of canvas to avoid clipping) */
.vbot-process-overlays{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 16px;
}
.vbot-process-overlay{
background: rgba(15, 23, 42, 0.7);
border: 1px solid color-mix(in srgb, var(--vbot-border, #232943) 80%, transparent);
border-radius: 12px;
padding: 10px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.vbot-process-overlay--price{ border-color: color-mix(in srgb, #7dd3fc 35%, transparent); }
.vbot-process-overlay--pace { border-color: color-mix(in srgb, #f472b6 35%, transparent); }
.vbot-process-overlay-eyebrow{
font-size: 10.5px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--vbot-muted, #8a92b2);
font-weight: 600;
}
.vbot-process-overlay-main{
font-family: var(--vbot-mono, ui-monospace, monospace);
font-size: 15px;
color: var(--vbot-text, #e8ecff);
}
.vbot-process-overlay-main b{
color: #fde68a;
font-weight: 700;
}
.vbot-process-overlay-sep{
color: var(--vbot-muted, #8a92b2);
margin: 0 6px;
}
/* Station overrides — slightly smaller circles + new label sizes */
.vbot-station-icon{
font-size: 30px;
}
.vbot-station-label{
fill: rgba(232, 236, 255, 0.94);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 1.4px;
font-family: var(--vbot-mono, ui-monospace, 'SF Mono', monospace);
}
.vbot-station-sub{
fill: rgba(232, 236, 255, 0.55);
font-size: 10.5px;
font-family: var(--vbot-mono, ui-monospace, monospace);
letter-spacing: 0.3px;
}
/* Recycle arc label — distinct color so it pops above the dashed path */
.vbot-process-arclabel{
fill: rgba(103, 232, 249, 0.85);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
font-family: var(--vbot-mono, ui-monospace, monospace);
text-transform: uppercase;
}
.vbot-process-svg{
max-height: 360px;
}
@media (max-width: 720px){
.vbot-process-overlays{ grid-template-columns: 1fr; }
.vbot-process-svg{ max-height: 260px; }
}
/* ──────────────────────────────────────────────────────────────────
Iter-N+55 — Trade Theater & Live/SIM mode badge
────────────────────────────────────────────────────────────────── */
/* ── MODE badge (in pagehead top-right) ──────────────────────────── */
.vbot-mode-badge{
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 12px; border-radius: 9999px;
font: 700 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
letter-spacing: .12em; text-transform: uppercase;
border: 1px solid transparent;
vertical-align: middle;
}
.vbot-mode-badge--sim{
background: rgba(245, 158, 11, .12);
color: #fbbf24;
border-color: rgba(251, 191, 36, .35);
}
.vbot-mode-badge--live{
background: rgba(16, 185, 129, .14);
color: #34d399;
border-color: rgba(52, 211, 153, .45);
box-shadow: 0 0 0 0 rgba(52, 211, 153, .45);
animation: vbot-mode-live-pulse 2.2s ease-in-out infinite;
}
.vbot-mode-badge-dot{
width: 7px; height: 7px; border-radius: 9999px;
background: currentColor;
box-shadow: 0 0 8px currentColor;
}
@keyframes vbot-mode-live-pulse{
0%, 100%{ box-shadow: 0 0 0 0 rgba(52, 211, 153, .45); }
50% { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}
/* "Go LIVE" CTA — primary button with an explicit rocket vibe. */
.vbot-btn--golive{
background: linear-gradient(135deg, #10b981, #059669);
color: #fff !important;
border: 1px solid rgba(255, 255, 255, .18);
box-shadow: 0 6px 18px -8px rgba(16, 185, 129, .65);
}
.vbot-btn--golive:hover{
filter: brightness(1.08);
transform: translateY(-1px);
}
/* Process flow chart KPI tile — coloured per MODE so the strip and
the badge agree at a glance. */
.vbot-process-kpi--mode-sim .vbot-process-kpi-k{
color: #fbbf24;
}
.vbot-process-kpi--mode-live .vbot-process-kpi-k{
color: #34d399;
text-shadow: 0 0 12px rgba(52, 211, 153, .35);
}
/* ── Trade Theater section ──────────────────────────────────────── */
.vbot-theater{
background: linear-gradient(180deg,
rgba(15, 17, 21, .92),
rgba(20, 22, 28, .82));
border: 1px solid rgba(167, 139, 250, .14);
border-radius: 18px;
padding: 22px;
box-shadow: 0 16px 50px -22px rgba(124, 58, 237, .35);
position: relative;
overflow: hidden;
}
.vbot-theater::before{
/* Subtle aurora wash behind the panel. */
content: "";
position: absolute; inset: -40% -10% auto auto;
width: 60%; height: 80%;
background:
radial-gradient(closest-side, rgba(125, 211, 252, .12), transparent 70%),
radial-gradient(closest-side, rgba(167, 139, 250, .14), transparent 70%);
pointer-events: none;
filter: blur(20px);
}
.vbot-theater > *{ position: relative; z-index: 1; }
.vbot-theater-head{
display: flex; justify-content: space-between; align-items: flex-start;
flex-wrap: wrap; gap: 16px; margin-bottom: 14px;
}
.vbot-theater-title{
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
margin: 0;
}
.vbot-theater-eyebrow{
font: 600 11px/1 ui-monospace, monospace;
letter-spacing: .14em; text-transform: uppercase;
color: rgba(167, 139, 250, .75);
}
.vbot-theater-ticker-wrap{
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 14px;
border-radius: 9999px;
background: rgba(0, 0, 0, .35);
border: 1px solid rgba(167, 139, 250, .18);
font: 600 12px/1 ui-monospace, monospace;
max-width: 60%;
}
.vbot-theater-ticker-label{
color: rgba(244, 245, 247, .55);
letter-spacing: .12em;
}
.vbot-latest-ticker{
color: #f4f5f7;
letter-spacing: .04em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: color .25s ease;
}
.vbot-latest-ticker--buy{ color: #34d399; }
.vbot-latest-ticker--sell{ color: #f472b6; }
.vbot-latest-ticker--pulse{
animation: vbot-ticker-pulse .8s ease-out;
}
@keyframes vbot-ticker-pulse{
0% { transform: scale(1); filter: brightness(1.0); }
35% { transform: scale(1.06); filter: brightness(1.4); }
100% { transform: scale(1); filter: brightness(1.0); }
}
/* Grid layout — feed left, trades right. Collapses on narrow. */
.vbot-theater-grid{
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.6fr);
gap: 18px;
}
@media (max-width: 960px){
.vbot-theater-grid{ grid-template-columns: 1fr; }
}
.vbot-theater-pane-head{
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 8px;
gap: 12px; flex-wrap: wrap;
}
.vbot-theater-pane-eyebrow{
font: 700 11px/1 ui-monospace, monospace;
letter-spacing: .14em; text-transform: uppercase;
color: rgba(244, 245, 247, .72);
}
.vbot-theater-pane-aux{
font: 500 11px/1.4 ui-monospace, monospace;
color: rgba(244, 245, 247, .45);
}
/* Feed pane — taller, more presence than the old aside. */
.vbot-theater-feed{
display: flex; flex-direction: column; min-height: 380px;
}
.vbot-feed--theater{
flex: 1; min-height: 360px; max-height: 480px;
margin: 0; padding: 12px 14px;
background: rgba(0, 0, 0, .55);
border: 1px solid rgba(167, 139, 250, .18);
border-radius: 12px;
font: 12px/1.6 ui-monospace, "SF Mono", Menlo, monospace;
color: #c8ccd4;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
}
/* Trade rows pane. */
.vbot-theater-trades{
display: flex; flex-direction: column; min-height: 380px;
}
.vbot-theater-tablewrap{
flex: 1;
background: rgba(0, 0, 0, .35);
border: 1px solid rgba(167, 139, 250, .18);
border-radius: 12px;
overflow: hidden;
position: relative;
display: flex; flex-direction: column;
}
.vbot-trades--theater{
width: 100%; border-collapse: collapse;
font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
}
.vbot-trades--theater thead{
position: sticky; top: 0; z-index: 2;
background: linear-gradient(180deg, rgba(20, 22, 28, .98), rgba(20, 22, 28, .9));
backdrop-filter: blur(6px);
}
.vbot-trades--theater th{
text-align: left; padding: 10px 12px;
font: 700 10.5px/1 ui-monospace, monospace;
letter-spacing: .12em; text-transform: uppercase;
color: rgba(244, 245, 247, .55);
border-bottom: 1px solid rgba(167, 139, 250, .18);
}
.vbot-trades--theater td{
padding: 9px 12px;
border-bottom: 1px solid rgba(255, 255, 255, .03);
vertical-align: middle;
}
.vbot-trades--theater tbody tr{
transition: background-color .35s ease;
}
.vbot-trades--theater tbody tr:hover{
background-color: rgba(167, 139, 250, .05);
}
.vbot-trade-side--buy{ color: #34d399; font-weight: 700; }
.vbot-trade-side--sell{ color: #f472b6; font-weight: 700; }
.vbot-trade--error{ color: #ff7676; }
.vbot-trade--error td:last-child{ color: #ff7676; font-weight: 600; }
.vbot-trade--simulated td:last-child{ color: rgba(251, 191, 36, .85); }
.vbot-trade--tesSUCCESS td:last-child{ color: #34d399; font-weight: 600; }
/* Fresh-row entry animation: slide in + flash. */
.vbot-trade--fresh{
animation: vbot-trade-row-in .55s cubic-bezier(.22, 1, .36, 1);
background: rgba(167, 139, 250, .14) !important;
}
@keyframes vbot-trade-row-in{
0% { transform: translateY(-10px); opacity: 0; background: rgba(167, 139, 250, .25); }
60% { transform: translateY(0); opacity: 1; }
100% { background: rgba(167, 139, 250, .14); }
}
/* Counter pulse on every new trade. */
.vbot-counter--pulse{
animation: vbot-counter-pulse .65s ease-out;
}
@keyframes vbot-counter-pulse{
0% { transform: scale(1.0); color: #f4f5f7; }
40% { transform: scale(1.18); color: #34d399; text-shadow: 0 0 18px rgba(52, 211, 153, .6); }
100% { transform: scale(1.0); }
}
/* Empty state for the trades table — much friendlier than the old
"iter-N+26" placeholder. */
.vbot-theater-empty{
display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 30px 24px;
color: rgba(244, 245, 247, .65);
}
.vbot-theater-empty-icon{
font-size: 28px; margin-bottom: 6px;
opacity: .85;
animation: vbot-theater-empty-spin 4s linear infinite;
}
@keyframes vbot-theater-empty-spin{
0%, 100%{ transform: rotate(0deg); }
50% { transform: rotate(180deg); }
}
.vbot-theater-empty-title{
margin: 4px 0 2px; font-weight: 700; color: #f4f5f7;
}
.vbot-theater-empty-sub{
margin: 0 0 8px; max-width: 480px; font-size: 13px; line-height: 1.5;
}
.vbot-theater-empty-mode{
margin-top: 6px; font-size: 12px; color: rgba(251, 191, 36, .9);
}
/* ──────────────────────────────────────────────────────────────────
Iter-N+56 — Mission Control wrapper + collapsible Wallet pool
────────────────────────────────────────────────────────────────── */
/* Mission Control card — the parent that visually unites the process
flow chart and the trade theater so they read as ONE component
instead of two stacked panels. Subtle outer card with a shared
aurora wash; inner sections lose their own card chrome. */
.vbot-mission{
position: relative;
background: linear-gradient(180deg,
rgba(15, 17, 21, .94),
rgba(20, 22, 28, .78));
border: 1px solid rgba(167, 139, 250, .18);
border-radius: 22px;
padding: 22px 22px 8px;
margin: 18px 0 24px;
box-shadow: 0 24px 60px -28px rgba(124, 58, 237, .45);
overflow: hidden;
}
.vbot-mission::before{
content: ""; position: absolute; inset: -30% -15% auto auto;
width: 70%; height: 90%;
background:
radial-gradient(closest-side, rgba(125, 211, 252, .14), transparent 70%),
radial-gradient(closest-side, rgba(167, 139, 250, .16), transparent 70%);
filter: blur(28px); pointer-events: none;
}
.vbot-mission > *{ position: relative; z-index: 1; }
.vbot-mission-head{
display: flex; justify-content: space-between; align-items: flex-end;
flex-wrap: wrap; gap: 16px; margin-bottom: 6px;
}
.vbot-mission-title{
margin: 0;
font: 700 22px/1.15 ui-sans-serif, system-ui, -apple-system, sans-serif;
color: #f4f5f7;
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.vbot-mission-eyebrow{
font: 600 11px/1 ui-monospace, monospace;
letter-spacing: .14em; text-transform: uppercase;
color: rgba(167, 139, 250, .8);
}
.vbot-mission-legend{
display: inline-flex; gap: 14px;
font: 500 11px/1 ui-monospace, monospace;
color: rgba(244, 245, 247, .6);
}
/* Stage number badges (①, ②) — visually mark the two halves so
users read process → theater as a single 2-step story. */
.vbot-mission-stage-num{
display: inline-block; min-width: 22px;
text-align: center; font-weight: 700;
color: rgba(167, 139, 250, .85);
filter: drop-shadow(0 0 6px rgba(167, 139, 250, .25));
margin-right: 4px;
}
/* When the process + theater sections live INSIDE the mission card,
strip their own card chrome so we don't get nested boxes. */
.vbot-process--in-mission,
.vbot-theater--in-mission{
background: transparent;
border: none;
box-shadow: none;
padding: 8px 0;
margin: 0;
}
.vbot-process--in-mission::before,
.vbot-theater--in-mission::before{ display: none; }
/* ── Iter-N+58: Mission Control KPI strip ─────────────────────
Six tiles in a responsive grid sitting between the mission
header and the process/theater panels. On wide screens it's
one row; on narrow it wraps to two rows of three. Tiles use
a subtle frosted-glass treatment so they sit on top of the
mission aurora without competing with the chart. */
.vbot-mission-kpi{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
padding: 12px 16px 4px;
margin: 0 0 12px;
background: linear-gradient(180deg,
rgba(15, 16, 48, 0.55) 0%,
rgba(15, 16, 48, 0.20) 100%);
border-radius: 14px;
}
.vbot-kpi-tile{
position: relative;
display: flex; flex-direction: column; gap: 4px;
padding: 10px 14px;
background: rgba(15, 16, 48, 0.55);
border: 1px solid rgba(167, 139, 250, 0.18);
border-radius: 12px;
backdrop-filter: blur(6px);
transition: border-color 180ms ease, transform 180ms ease;
}
.vbot-kpi-tile:hover{
border-color: rgba(167, 139, 250, 0.45);
}
.vbot-kpi-tile[data-kpi-live]{
animation: vbotKpiPulse 1.1s ease-out 1;
}
@keyframes vbotKpiPulse{
0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); }
60% { box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.00); }
100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.00); }
}
.vbot-kpi-label{
font: 600 10px/1 ui-monospace, monospace;
text-transform: uppercase; letter-spacing: 0.08em;
color: rgba(199, 202, 247, 0.65);
}
.vbot-kpi-value{
font: 700 18px/1.1 system-ui, sans-serif;
color: #f0f1ff;
display: flex; align-items: baseline; gap: 6px;
flex-wrap: wrap;
}
.vbot-kpi-units{
font: 500 10px/1 ui-monospace, monospace;
color: rgba(199, 202, 247, 0.55);
letter-spacing: 0.04em;
}
.vbot-kpi-mode-chip{
display: inline-block; padding: 2px 10px;
border-radius: 999px;
font: 700 11px/1.4 ui-monospace, monospace;
letter-spacing: 0.06em;
}
.vbot-kpi-mode-chip--live{
background: linear-gradient(135deg, #10b981 0%, #22d3ee 100%);
color: #061a14;
box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}
.vbot-kpi-mode-chip--sim{
background: rgba(167, 139, 250, 0.18);
color: #a78bfa;
border: 1px solid rgba(167, 139, 250, 0.5);
}
.vbot-kpi-mode-sub{
font: 500 10px/1 ui-monospace, monospace;
color: rgba(34, 211, 238, 0.78);
background: rgba(34, 211, 238, 0.08);
border: 1px solid rgba(34, 211, 238, 0.2);
padding: 2px 6px; border-radius: 6px;
cursor: help;
}
/* ── Iter-N+59: Per-station live info strip ─────────────────────
Seven cards in a responsive grid sitting BELOW the flow-chart
SVG. Each card binds to the SSE feed via ``data-station=``
and surfaces the address currently transiting the station,
the relative timestamp of the last event, and a status pill.
Cards stay narrow so the whole strip fits in one row on
desktop and wraps gracefully on tablet/mobile. */
.vbot-station-strip{
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
margin: 14px 0 4px;
padding: 0 4px;
}
@media (max-width: 1100px){
.vbot-station-strip{
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
}
.vbot-station-card{
position: relative;
display: flex; flex-direction: column; gap: 4px;
padding: 8px 10px;
background: rgba(15, 16, 48, 0.55);
border: 1px solid rgba(167, 139, 250, 0.18);
border-radius: 10px;
transition: border-color 180ms ease, transform 180ms ease,
box-shadow 200ms ease;
cursor: default;
}
.vbot-station-card:hover{
border-color: rgba(34, 211, 238, 0.45);
transform: translateY(-1px);
}
/* Cross-highlight — when a feed row is hovered the matching
station gets ``vbot-cross-active``; ditto vice-versa. Kept
identical to the hover treatment so users can't tell whether
the highlight came from the station or the feed. */
.vbot-station-card.vbot-cross-active,
.vbot-feed-row.vbot-cross-active{
border-color: rgba(34, 211, 238, 0.75);
box-shadow: 0 0 18px rgba(34, 211, 238, 0.25);
}
.vbot-station-card-head{
display: flex; align-items: center; justify-content: space-between;
gap: 6px;
}
.vbot-station-card-name{
font: 700 11px/1 ui-monospace, monospace;
text-transform: uppercase; letter-spacing: 0.08em;
color: rgba(199, 202, 247, 0.85);
}
.vbot-station-card-addr{
font: 600 12px/1.2 ui-monospace, monospace;
color: #f0f1ff;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
cursor: copy;
}
.vbot-station-card-addr:hover{
color: #22d3ee;
}
.vbot-station-card-meta{
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
font: 500 10px/1 ui-monospace, monospace;
color: rgba(199, 202, 247, 0.55);
}
.vbot-station-card-explorer{
color: rgba(34, 211, 238, 0.85);
text-decoration: none;
}
.vbot-station-card-explorer:hover{ color: #22d3ee; }
/* ── Status pills ─────────────────────────────────────────────
Four states per station; the JS swaps the modifier class on
incoming SSE events. ``vbotStationPulse`` animates the pulse
state continuously; ``done`` and ``failed`` are static colors
that fade through a transition. */
.vbot-station-pill{
display: inline-flex; align-items: center;
padding: 1px 7px; border-radius: 999px;
font: 700 9px/1.4 ui-monospace, monospace;
letter-spacing: 0.08em; text-transform: uppercase;
border: 1px solid transparent;
transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.vbot-station-pill--idle{
background: rgba(199, 202, 247, 0.08);
color: rgba(199, 202, 247, 0.6);
border-color: rgba(199, 202, 247, 0.15);
}
.vbot-station-pill--pulse{
background: rgba(34, 211, 238, 0.18);
color: #22d3ee;
border-color: rgba(34, 211, 238, 0.5);
animation: vbotStationPulse 1.4s ease-in-out infinite;
}
.vbot-station-pill--done{
background: rgba(16, 185, 129, 0.18);
color: #10b981;
border-color: rgba(16, 185, 129, 0.5);
}
.vbot-station-pill--failed{
background: rgba(239, 68, 68, 0.18);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.6);
}
@keyframes vbotStationPulse{
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.35); }
50% { box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.00); }
}
/* Compact heading for inner sections — the outer Mission title is
the loud one; inner ones are h3-style. */
.vbot-process-head--compact{
margin-bottom: 6px;
}
/* Vertical stage line between process and theater — visually links
them so the eye reads them as one flow. */
.vbot-theater--in-mission{
position: relative;
margin-top: 18px !important;
padding-top: 22px !important;
border-top: 1px dashed rgba(167, 139, 250, .25) !important;
}
.vbot-theater--in-mission::before{
/* Tiny dot at the top centre of the dashed divider as a "connector". */
content: ""; display: block !important;
position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
width: 10px; height: 10px; border-radius: 9999px;
background: radial-gradient(circle, #a78bfa 0%, rgba(167, 139, 250, 0) 70%);
filter: drop-shadow(0 0 6px rgba(167, 139, 250, .65));
pointer-events: none;
}
/* ── Collapsible wallet pool ────────────────────────────────────── */
.vbot-pool-collapsible{
background: linear-gradient(180deg,
rgba(15, 17, 21, .82),
rgba(20, 22, 28, .62));
border: 1px solid rgba(167, 139, 250, .14);
border-radius: 16px;
margin: 18px 0 24px;
overflow: hidden;
transition: border-color .25s ease;
}
.vbot-pool-collapsible[open]{
border-color: rgba(167, 139, 250, .28);
}
.vbot-pool-summary{
list-style: none;
cursor: pointer;
user-select: none;
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
font: 700 14px/1 ui-sans-serif, system-ui, sans-serif;
color: #f4f5f7;
outline-offset: -2px;
}
.vbot-pool-summary::-webkit-details-marker{ display: none; }
.vbot-pool-summary:hover{
background: rgba(167, 139, 250, .04);
}
.vbot-pool-summary:focus-visible{
outline: 2px solid rgba(167, 139, 250, .55);
}
.vbot-pool-summary-chevron{
display: inline-block; width: 16px; text-align: center;
font-size: 14px; color: rgba(167, 139, 250, .9);
transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.vbot-pool-collapsible:not([open]) .vbot-pool-summary-chevron{
transform: rotate(-90deg);
}
.vbot-pool-summary-title{
font-weight: 700; letter-spacing: .01em;
}
.vbot-pool-summary-count{
font: 600 12px/1 ui-monospace, monospace;
color: rgba(244, 245, 247, .55);
padding: 4px 10px; border-radius: 9999px;
background: rgba(167, 139, 250, .12);
border: 1px solid rgba(167, 139, 250, .22);
margin-left: 2px;
}
.vbot-pool-summary-hint{
margin-left: auto;
font: 500 11px/1 ui-monospace, monospace;
color: rgba(244, 245, 247, .35);
letter-spacing: .08em; text-transform: uppercase;
}
.vbot-pool-collapsible .vbot-pool-grid{
padding: 12px 18px 18px;
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
animation: vbot-pool-expand .35s ease;
}
@keyframes vbot-pool-expand{
from{ opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px){
.vbot-mission{ padding: 14px; border-radius: 16px; }
.vbot-pool-summary-hint{ display: none; }
}
/* ── Iter-N+63.14 — Manage wallets slide-over panel ──────────────
Uses native :target so the panel opens when /run//#vbot-
transfer-panel is in the URL hash and closes on any other anchor
click. No JS required for the open/close logic; the form just
posts to /run//transfer. */
.vbot-transfer-panel{
position: fixed; inset: 0; z-index: 80;
background: transparent; pointer-events: none;
opacity: 0; transition: opacity .18s ease;
}
.vbot-transfer-panel:target{
opacity: 1; pointer-events: auto;
}
.vbot-transfer-panel-bg{
position: absolute; inset: 0;
background: rgba(2, 6, 23, .72);
display: flex; justify-content: flex-end;
}
.vbot-transfer-panel-dismiss{
position: absolute; top: 18px; right: 502px;
width: 38px; height: 38px; border-radius: 9999px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .14);
display: flex; align-items: center; justify-content: center;
color: #f4f5f7; font-size: 22px; line-height: 1;
text-decoration: none; transition: background .15s ease;
}
.vbot-transfer-panel-dismiss:hover{ background: rgba(255, 255, 255, .14); }
.vbot-transfer-card{
position: relative; width: 480px; max-width: 92vw; height: 100%;
background: linear-gradient(180deg, #0d1117, #131a25);
border-left: 1px solid rgba(95, 179, 255, .22);
padding: 32px 28px 28px;
overflow-y: auto;
transform: translateX(40px);
transition: transform .26s cubic-bezier(.22, 1, .36, 1);
box-shadow: -28px 0 48px rgba(0, 0, 0, .45);
}
.vbot-transfer-panel:target .vbot-transfer-card{
transform: translateX(0);
}
.vbot-transfer-head{ margin-bottom: 24px; }
.vbot-transfer-eyebrow{
display: inline-block;
font: 600 11px/1 ui-monospace, monospace;
color: #5fb3ff; letter-spacing: 2px;
padding: 4px 9px;
border-radius: 6px;
background: rgba(95, 179, 255, .12);
border: 1px solid rgba(95, 179, 255, .28);
}
.vbot-transfer-title{
margin: 12px 0 8px;
font: 600 22px/1.2 "Source Serif 4", Georgia, serif;
color: #e6edf3;
}
.vbot-transfer-blurb{
margin: 0;
font-size: 13px; line-height: 1.55;
color: rgba(244, 245, 247, .60);
}
.vbot-transfer-form{
display: flex; flex-direction: column; gap: 18px;
}
.vbot-transfer-row{
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.vbot-transfer-field{ display: flex; flex-direction: column; gap: 6px; }
.vbot-transfer-label{
font: 600 11px/1 ui-monospace, monospace;
color: rgba(244, 245, 247, .65);
letter-spacing: 1.6px; text-transform: uppercase;
}
.vbot-transfer-help{
font-size: 12px; color: rgba(244, 245, 247, .45);
}
.vbot-transfer-actions{
margin-top: 12px;
display: flex; gap: 10px; justify-content: flex-end;
}
@media (max-width: 600px){
.vbot-transfer-card{ width: 100%; border-left: none; }
.vbot-transfer-panel-dismiss{ right: 14px; }
.vbot-transfer-row{ grid-template-columns: 1fr; }
}
/* ── Iter-N+63.15 — per-wallet pause button + paused tile state */
.vbot-wallet-pause-form{
margin: 8px 0 0;
display: flex; justify-content: flex-end;
}
.vbot-wallet-pause-btn{
font: 600 10px/1 ui-monospace, monospace;
letter-spacing: 1.4px; text-transform: uppercase;
padding: 4px 9px;
border-radius: 6px;
background: rgba(95, 179, 255, .08);
border: 1px solid rgba(95, 179, 255, .22);
color: rgba(244, 245, 247, .80);
cursor: pointer;
transition: background .14s ease, border-color .14s ease;
}
.vbot-wallet-pause-btn:hover{
background: rgba(95, 179, 255, .18);
border-color: rgba(95, 179, 255, .42);
}
.vbot-wallet-tile--paused{
opacity: 0.62;
border-color: rgba(255, 184, 108, .36);
background:
repeating-linear-gradient(135deg,
rgba(255, 184, 108, .04) 0 8px,
transparent 8px 16px),
rgba(15, 17, 21, .55);
}
.vbot-wallet-tile--paused .vbot-wallet-cat::after{
content: " · paused";
color: rgba(255, 184, 108, .85);
font-weight: 600;
}
.vbot-wallet-tile--paused .vbot-wallet-pause-btn{
background: rgba(255, 184, 108, .14);
border-color: rgba(255, 184, 108, .36);
color: rgba(255, 184, 108, .92);
}