/* Bot 5 redesigned page (v2). Kept apart from ai-trading.css, which the mobile-fixes gate test
   pins rule by rule; loaded right after it by ai-trading.html, so the cascade is unchanged. */

/* ==========================================================================
   Bot 5 — THE REDESIGNED PAGE (v2), REQUEST-QUY-AI-BOT5-PAGE-REDESIGN-2026-10-09.
   Shown only to the viewers the server puts on `pageLayoutV2To` (the root gets
   `.ai-spot-v2`); every selector is under it, so the current page and Bots 1-4
   do not move. Colours are the brand tokens; the few the theme has no token
   for (up / down / the buying violet) are set here per theme: dark by default
   (Vestex, INFIN8TI), light for Ultimo, which are the mockup values.
   ========================================================================== */
body.ai-trading-page .ai-spot-v2 {
  --v2-up: #3ddc84; --v2-up-soft: rgba(61, 220, 132, 0.12); --v2-up-line: rgba(61, 220, 132, 0.35);
  --v2-down: #ff7b72; --v2-down-soft: rgba(255, 123, 114, 0.14);
  --v2-amber-soft: rgba(245, 181, 10, 0.14); --v2-amber-ink: #f5c451;
  --v2-buy: #8b7bf0; --v2-track: rgba(255, 255, 255, 0.14); --v2-dot-idle: rgba(255, 255, 255, 0.38);
  --v2-body: color-mix(in srgb, var(--app-text-1) 84%, transparent);
  --v2-quiet: var(--app-text-muted, color-mix(in srgb, var(--app-text-1) 62%, transparent));
}
html[data-brand="ultimo"] body.ai-trading-page .ai-spot-v2 {
  --v2-up: #16794a; --v2-up-soft: #e3f4ea; --v2-up-line: #9fd3b6;
  --v2-down: #b4372d; --v2-down-soft: #fbe7e5;
  --v2-amber-soft: #fff5d6; --v2-amber-ink: #7a5600;
  --v2-buy: #6c55d9; --v2-track: #dcdce2; --v2-dot-idle: #a9a9b3;
  --v2-body: #3f4451; --v2-quiet: #5b6170;
}

/* header + hero */
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-name { font-size: 15px; font-weight: 600; color: var(--v2-quiet); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-pill-plain { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; background: var(--app-surface-1); color: var(--v2-quiet); border: 1px solid var(--app-border); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-h1 { font-size: 40px; line-height: 1.12; font-weight: 800; letter-spacing: -0.022em; margin: 14px 0 12px; max-width: 22ch; text-wrap: balance; color: var(--app-text-1); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-mark { background: linear-gradient(transparent 60%, color-mix(in srgb, var(--app-primary) 55%, transparent) 60%); padding: 0 2px; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-lead { font-size: 17px; line-height: 1.55; color: var(--v2-body); max-width: 58ch; margin: 0; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-tile { background: var(--app-surface-1); border: 1px solid var(--app-border); border-radius: 12px; padding: 16px 18px; min-width: 0; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-tile.is-up { background: var(--v2-up-soft); border-color: var(--v2-up-line); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-tile-num { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--app-text-1); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-tile.is-up .ai-spot-v2-tile-num { color: var(--v2-up); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-tile-cap { margin-top: 6px; font-size: 14px; color: var(--v2-body); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-note { margin: 10px 0 0; font-size: 12.5px; color: var(--v2-quiet); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-chip { background: var(--app-surface-1); border: 1px solid var(--app-border); border-radius: 20px; padding: 6px 13px; font-size: 13.5px; font-weight: 600; color: var(--app-text-1); }

/* status card: the buttons sit right on desktop, full width on a phone */
body.ai-trading-page .ai-spot-v2 .ai-spot-status .ai-spot-status-row { flex-wrap: wrap; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-status-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; align-items: center; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-status-actions .ai-cta-row,
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-status-actions .ai-cta-controls { margin: 0; padding: 0; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-status-actions button,
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-final button { min-height: 46px; padding: 0 22px; font-size: 14.5px; font-weight: 700; }
body.ai-trading-page .ai-spot-v2 .ai-spot-status .ai-spot-next { color: var(--v2-body); font-size: 14.5px; }

/* section cards */
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-card { background: var(--app-surface-1); border: 1px solid var(--app-border); border-radius: 12px; padding: 22px 22px 24px; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--v2-quiet); margin: 0 0 6px; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-h2 { font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--app-text-1); text-wrap: balance; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-sub { margin: 0 0 20px; color: var(--v2-body); font-size: 15px; max-width: 64ch; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-foot { font-size: 13px; color: var(--v2-quiet); margin: 18px 0 0; max-width: 72ch; }

/* timeline */
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
/* The track is drawn PER STEP, from each dot to the next (Gemini r1, High): a percentage gradient on the whole
   list cannot follow steps whose height depends on their text. The buying step's segment is violet. */
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-step { position: relative; padding: 34px 14px 0 0; min-width: 0; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-step:not(:last-child)::after { content: ""; position: absolute; left: 22px; right: 0; top: 10px; height: 4px; background: var(--v2-track); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-step.is-buy::after { background: var(--v2-buy) !important; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-step .ai-spot-v2-dot { z-index: 1; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-dot { position: absolute; left: 2px; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--app-surface-1); border: 4px solid var(--v2-dot-idle); box-sizing: border-box; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-step.is-buy .ai-spot-v2-dot { border-color: var(--v2-buy); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-step.is-halving .ai-spot-v2-dot { border-color: var(--app-primary); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-step.is-sell .ai-spot-v2-dot { border-color: var(--v2-up); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-step-label { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; color: var(--v2-quiet); text-transform: uppercase; font-variant-numeric: tabular-nums; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-step-title { font-size: 17px; font-weight: 700; margin: 3px 0 4px; color: var(--app-text-1); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-step-text { margin: 0; font-size: 14px; color: var(--v2-body); }

/* why */
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-whytiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-why { background: var(--app-surface-2); border-radius: 8px; padding: 16px; min-width: 0; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-why-num { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--app-text-1); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-why-num small { font-size: 15px; font-weight: 600; color: var(--v2-quiet); letter-spacing: 0; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-why p { margin: 6px 0 0; font-size: 14px; color: var(--v2-body); }

/* worked example (text only) */
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-exhead { font-size: 17px; font-weight: 700; color: var(--app-text-1); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-summary { margin: 14px 0 0; font-size: 15px; color: var(--v2-body); max-width: 68ch; }

/* results */
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-legend { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 10px; margin: 0 0 18px; padding: 14px 16px; background: var(--app-surface-2); border-radius: 8px; font-size: 14px; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-legend dt { font-weight: 700; color: var(--app-text-1); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-legend dd { margin: 0; color: var(--v2-body); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-results-wrap { overflow-x: auto; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-results { min-width: 480px; table-layout: auto; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-results th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; background: var(--app-surface-2); white-space: nowrap; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-results td { font-size: 15px; padding: 13px 12px; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-results td.is-date { font-weight: 600; white-space: nowrap; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-results td.is-early,
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-results td.is-late { font-size: 16px; font-weight: 700; white-space: nowrap; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-results td.is-early { font-weight: 800; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-results td.is-low { color: var(--v2-down); font-weight: 700; }

/* three things */
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-thinglist { display: grid; gap: 16px; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-thing { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-thing-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; font-weight: 800; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-thing.is-down .ai-spot-v2-thing-icon { background: var(--v2-down-soft); color: var(--v2-down); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-thing.is-amber .ai-spot-v2-thing-icon { background: var(--v2-amber-soft); color: var(--v2-amber-ink); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-thing.is-up .ai-spot-v2-thing-icon { background: var(--v2-up-soft); color: var(--v2-up); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-thing-title { font-size: 16px; font-weight: 700; color: var(--app-text-1); }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-thing p { margin: 3px 0 0; font-size: 14.5px; color: var(--v2-body); max-width: 68ch; }

/* closing call to action */
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-final { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 8px 0; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-final button { min-width: 260px; }
body.ai-trading-page .ai-spot-v2 .ai-spot-v2-final-line { margin: 0; color: var(--v2-quiet); font-size: 13px; }

/* phones */
@media (max-width: 680px) {
  body.ai-trading-page .ai-spot-v2 .ai-spot-v2-h1 { font-size: 28px; }
  body.ai-trading-page .ai-spot-v2 .ai-spot-v2-tiles,
  body.ai-trading-page .ai-spot-v2 .ai-spot-v2-whytiles { grid-template-columns: 1fr; }
  body.ai-trading-page .ai-spot-v2 .ai-spot-v2-steps { grid-template-columns: 1fr; gap: 20px; }
  body.ai-trading-page .ai-spot-v2 .ai-spot-v2-step { padding: 0 0 0 40px; }
  body.ai-trading-page .ai-spot-v2 .ai-spot-v2-step:not(:last-child)::after { left: 11px; right: auto; top: 22px; bottom: -20px; width: 4px; height: auto; }
  body.ai-trading-page .ai-spot-v2 .ai-spot-v2-status-actions { margin-left: 0; width: 100%; }
  body.ai-trading-page .ai-spot-v2 .ai-spot-v2-status-actions > *,
  body.ai-trading-page .ai-spot-v2 .ai-spot-v2-status-actions button { flex: 1 1 100%; width: 100%; }
}
/* The results on a phone: one small card per cycle, the column name beside each value (request 6: "a 5-field card"). */
@media (max-width: 680px) {
  body.ai-trading-page .ai-spot-v2 .ai-spot-v2-results-wrap { overflow-x: visible; }
  body.ai-trading-page .ai-spot-v2 table.ai-spot-v2-results { min-width: 0 !important; width: 100%; }
  /* visually hidden, NOT display:none — the headers stay in the accessibility tree (Codex/Gemini r1, Medium) */
  body.ai-trading-page .ai-spot-v2 table.ai-spot-v2-results thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  body.ai-trading-page .ai-spot-v2 table.ai-spot-v2-results tbody tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--app-border); }
  body.ai-trading-page .ai-spot-v2 table.ai-spot-v2-results tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0 !important; border: 0; white-space: normal; text-align: right; overflow-wrap: anywhere; }
  body.ai-trading-page .ai-spot-v2 table.ai-spot-v2-results tbody td::before { content: attr(data-label); flex: 0 1 auto; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--v2-quiet); text-align: left; }
  body.ai-trading-page .ai-spot-v2 .ai-spot-v2-final button { min-width: 0; width: 100%; }
}
@media (max-width: 480px) {
  body.ai-trading-page .ai-spot-v2 .ai-spot-v2-legend { grid-template-columns: 1fr; gap: 0; }
  body.ai-trading-page .ai-spot-v2 .ai-spot-v2-legend dd { margin-bottom: 8px; }
}