/* the tokens (colour, type, spacing, radii, heights) and the shared components come from /static/rv.css (radar/theme.py);
     this page only lays out the app. --app-top-h: the page title bar under the shared header. */
  :root { --app-top-h: 80px; }
  body { background: var(--rv-bg); color: var(--rv-text); font: var(--rv-fs-body)/20px var(--rv-font); -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  button, input, select { font: inherit; color: inherit; }
  .num { font-variant-numeric: tabular-nums; }
  .pos { color: var(--rv-pos); } .neg { color: var(--rv-neg); } .muted { color: var(--rv-muted); } .dim { color: var(--rv-dim); }
  [hidden] { display: none !important; }


  main { min-width: 0; }
  .top { display: flex; align-items: center; gap: var(--rv-sp-3); padding: var(--rv-sp-3) var(--rv-sp-8); min-height: var(--app-top-h); box-sizing: border-box; position: sticky; top: 0; z-index: 10;
         background: var(--rv-bg); }
  .top h1 { font-size:var(--rv-fs-h1); line-height:var(--rv-lh-h1); font-weight: 600; letter-spacing:-.01em; margin: 0; }
  /* the title bar keeps one height whatever the page's buttons: the subtitle gives way (its full text is its title) */
  @media (min-width: 861px) { .top > div:first-child { min-width: 0; } .top .sub { overflow-wrap: break-word; } }   /* a long subtitle wraps beside the buttons, never "...подключённой бирже…" (ru at 1000px) */
  @media (min-width: 1200px) { .top #actions { flex-shrink: 0; } }
  .top .sub { display: none; }
  .top .sp { flex: 1; }
  .banner { font-size: var(--rv-fs-sm); color: var(--rv-accent); background: var(--rv-accent-soft); padding: var(--rv-sp-2) var(--rv-sp-8); }
  .page { padding: var(--rv-sp-2) var(--rv-sp-8) 80px; display: grid; gap: var(--rv-sp-4); max-width: 1400px; }

  /* ---- controls ---- */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--rv-sp-2); background: var(--rv-primary); color: var(--rv-primary-ink); border: 0;
         border-radius: var(--rv-r-sm); min-height: var(--rv-h-md); padding: 10px var(--rv-sp-4); font-size: var(--rv-fs-md); line-height: 20px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s, opacity .15s; }
  .btn:hover { background: var(--rv-primary-hover); }.btn:active{background:var(--rv-primary-pressed)} .btn:disabled { opacity: .4; cursor: default; }
  .btn.ghost { background: var(--rv-btn2); color: var(--rv-text); border: 0; }
  .btn.ghost:hover { background: var(--rv-btn2-hover); }
  .btn.danger { background: var(--rv-neg-soft); color: var(--rv-neg); border: 0; }
  .btn.sm { min-height: var(--rv-h-sm); padding: 6px var(--rv-sp-3); font-size: var(--rv-fs-sm); border-radius: var(--rv-r-sm); }
  .seg { display: inline-flex; gap: 2px; background: var(--rv-sunk); border-radius: var(--rv-r-sm); padding: 2px; }
  .seg button { background: none; border: 0; color: var(--rv-muted); font-size: var(--rv-fs-sm); font-weight: 500; line-height: 20px; padding: 4px var(--rv-sp-3); border-radius: var(--rv-r-sm); cursor: pointer; white-space: nowrap; }
  .seg button:hover { color: var(--rv-text); }
  .rseg button { padding: 4px var(--rv-sp-2); }
  .seg button.on { background: var(--rv-btn2); color: var(--rv-text); }
  label.f { display: block; font-size: var(--rv-fs-sm); line-height: 16px; color: var(--rv-muted); margin: var(--rv-sp-4) 0 var(--rv-sp-2); }
  .field { width: 100%; background: var(--rv-sunk); border:1px solid transparent; border-radius: var(--rv-r-sm); padding: 9px var(--rv-sp-3); font-size: var(--rv-fs-md); line-height: 20px; outline: none; }
  .field:hover { border-color: var(--rv-faint); }
  .field:focus { border-color: var(--rv-accent); box-shadow: 0 0 0 3px var(--rv-accent-soft); }
  .row { display: flex; gap: var(--rv-sp-2); align-items: center; flex-wrap: wrap; }
  .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rv-sp-3); }
  .msg { font-size: var(--rv-fs-body-sm); margin-top: 10px; color: var(--rv-muted); min-height: 1px; } .msg.err { color: var(--rv-neg); } .msg.ok { color: var(--rv-pos); }
  code.ki { font: var(--rv-fs-xs) var(--rv-mono); background: var(--rv-sunk); border-radius: var(--rv-r-xs); padding: 1px var(--rv-sp-1); word-break: break-all; }
  code.k { display: block; background: var(--rv-sunk); border-radius: var(--rv-r-sm); padding: 10px var(--rv-sp-3); font: var(--rv-fs-xs) var(--rv-mono); word-break: break-all; }

  /* ---- cards ---- */
  .card { background: var(--rv-panel); border: 1px solid var(--rv-card-line); border-radius: var(--rv-r-lg); min-width: 0; }
  .hd { display: flex; align-items: center; gap: var(--rv-sp-3); min-height: 56px; padding: var(--rv-sp-4) var(--rv-sp-5) var(--rv-sp-2); }
  .hd h2 { font-size: var(--rv-fs-lg); line-height: 24px; font-weight: 500; margin: 0; } .hd .sp { flex: 1; } .hd a { color: var(--rv-muted); font-size: var(--rv-fs-sm); } .hd a:hover { color: var(--rv-accent); }
  .pad { padding: var(--rv-sp-5); }
  /* key figures: one strip with thin dividers (lighter than four cards), as an exchange's summary rows */
  .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--rv-panel); box-shadow: inset 0 0 0 1px var(--rv-card-line); border-radius: var(--rv-r-lg); }
  .kpis > .card.kpi { background: none; border: 0; border-radius: 0; } .kpis > .card.kpi + .card.kpi { border-left: 1px solid var(--rv-line); }
  .kpi { padding: var(--rv-sp-4) var(--rv-sp-5); }
  .kpi .k { color: var(--rv-muted); font-size: var(--rv-fs-xs); line-height: 16px; }
  .kpi .v { font-size: var(--rv-fs-figure); font-weight: 600; letter-spacing: -.01em; margin-top: var(--rv-sp-1); line-height: 32px; font-variant-numeric: tabular-nums; }
  .kpi .d { font-size: var(--rv-fs-sm); line-height: 20px; margin-top: var(--rv-sp-1); color: var(--rv-muted); }
  .g-main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--rv-sp-4); align-items: start; }
  .stack { display: grid; gap: var(--rv-sp-4); align-content: start; }
  svg.eq { width: 100%; height: 240px; display: block; }
  .empty { padding: var(--rv-sp-8) var(--rv-sp-5); text-align: center; color: var(--rv-muted); font-size: var(--rv-fs-body); }
  .empty b { display: block; color: var(--rv-text); font-weight: 500; margin-bottom: var(--rv-sp-1); }

  /* checklist */
  .steps { display: grid; gap: 0; padding: 0 var(--rv-sp-5) var(--rv-sp-2); }
  .step { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--rv-sp-3); align-items: center; padding: var(--rv-sp-3) 0; border-bottom: 1px solid var(--rv-line); }
  .step:last-child { border-bottom: 0; }
  /* the workspace stylesheet's own .step (its wizard dots, ws.css) must not reach the app's step rows (owner's screenshot,
     2026-10-06: the Hyperliquid access steps squeezed into a 23px column) */
  .ws:is(.ws-app, .ws-layer) .step { display: grid; flex: none; font-size: inherit; color: inherit; }
  .ws:is(.ws-app, .ws-layer) .step b { width: auto; height: auto; border: 0; border-radius: 0; display: inline; place-items: normal; }
  .step .n { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-size: var(--rv-fs-sm); font-weight: 500; background: var(--rv-sunk); color: var(--rv-muted); }
  .step.done .n { background: var(--rv-pos-soft); color: var(--rv-pos); } .step.now b { color: var(--rv-text); } .step.now .n { background:var(--rv-primary); color: var(--rv-primary-ink); }
  .step b { font-weight: 500; font-size: var(--rv-fs-body); } .step .s { color: var(--rv-muted); font-size: var(--rv-fs-sm); }
  .step .sb { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }

  /* bots */
  .bots { display: grid; gap: 0; padding: 0 var(--rv-sp-2) var(--rv-sp-2); }
  .bot { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--rv-sp-3); align-items: center; padding: var(--rv-sp-3); border-radius: var(--rv-r-sm); cursor: pointer; transition: background .15s; }
  .bot:hover { background: var(--rv-panel2); }
  .ic { width: 36px; height: 36px; border-radius: var(--rv-r-sm); display: grid; place-items: center; background: var(--rv-btn2); color: var(--rv-text); }
  .ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .bot b { font-weight: 500; font-size: var(--rv-fs-body); } .bot .s { color: var(--rv-muted); font-size: var(--rv-fs-xs); } .bot .r { text-align: right; font-size: var(--rv-fs-body-sm); }
  .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; background: var(--rv-dim); }
  .dot.run { background: var(--rv-pos); box-shadow: 0 0 0 3px var(--rv-pos-soft); } .dot.warn { background: var(--rv-warn); }
  .cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--rv-sp-4); }
  .sc { padding: var(--rv-sp-5); display: flex; flex-direction: column; gap: var(--rv-sp-3); }
  .sc h3 { font-size: var(--rv-fs-lg); font-weight: 500; margin: 0; } .sc p { margin: 0; color: var(--rv-muted); font-size: var(--rv-fs-body-sm); line-height: 1.5; min-height: 3em; }
  .sc dl { display: grid; grid-template-columns: 92px 1fr; gap: 9px var(--rv-sp-3); margin: 0; padding: 14px 0; border-top: 1px solid var(--rv-line); border-bottom: 1px solid var(--rv-line); font-size: var(--rv-fs-body-sm); align-items: center; }
  .sc dt { color: var(--rv-dim); } .sc dd { margin: 0; color: var(--rv-text); }
  .lvl { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: var(--rv-fs-xs); line-height: 20px; padding: 0 var(--rv-sp-2); border-radius: var(--rv-r-xs); }
  .lvl::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
  .lvl.low { color: var(--rv-pos); background: var(--rv-pos-soft); } .lvl.high { color: var(--rv-neg); background: var(--rv-neg-soft); } .lvl.yours { color: var(--rv-accent); background: var(--rv-accent-soft); }
  .sc .note { font-size: var(--rv-fs-sm); color: var(--rv-muted); line-height: 1.5; min-height: 3.75em; margin: 0; }
  .sc .foot { margin-top: auto; display: flex; align-items: center; gap: var(--rv-sp-3); min-height: 38px; }
  /* strategy groups: Rivemont's own strategies, then the standard trading tools */
  .gh h2 { font-size: var(--rv-fs-lg); font-weight: 500; margin: 0; } .gh p { margin: var(--rv-sp-1) 0 0; color: var(--rv-muted); font-size: var(--rv-fs-body-sm); } .gh.next { margin-top: var(--rv-sp-3); }
  
  /* Telegram channels (Signals page) */
  .tgh ol { margin: 0 0 var(--rv-sp-3); padding-left: 18px; display: grid; gap: var(--rv-sp-2); font-size: var(--rv-fs-body-sm); color: var(--rv-muted); line-height: 1.5; } .tgh ol b { color: var(--rv-text); font-weight: 500; }
  .tgh .pad > p, .tgp > p, .tgn > p { margin: 0 0 var(--rv-sp-3); font-size: var(--rv-fs-body-sm); line-height: 1.5; } .tgn > p { margin: 0; font-size: var(--rv-fs-sm); }
  .tgn { border-top: 1px solid var(--rv-line); padding-top: var(--rv-sp-3); padding-bottom: var(--rv-sp-4); }
  .tgadd { display: flex; gap: var(--rv-sp-2); padding: var(--rv-sp-4) var(--rv-sp-5); border-top: 1px solid var(--rv-line); } .tgadd .field { min-width: 0; flex: 1; } .tgadd .btn { flex: none; width: auto; margin: 0; }
  .tgi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--rv-sp-2) var(--rv-sp-4); align-items: center; padding: var(--rv-sp-3) var(--rv-sp-5); border-bottom: 1px solid var(--rv-line); font-size: var(--rv-fs-body-sm); line-height: 1.45; }
  .tgi:last-child, .tgc:last-child { border-bottom: 0; } .tgi .s { color: var(--rv-muted); font-size: var(--rv-fs-sm); margin-top: 2px; }
  .tgi .acts { display: flex; gap: var(--rv-sp-2); justify-content: flex-end; align-items: center; } .tgi.tr .acts { flex-direction: column; align-items: flex-end; gap: 2px; } .tgi .tgst { font-size: var(--rv-fs-sm); white-space: nowrap; } .tgi.tr .acts b { font-weight: 500; white-space: nowrap; }
  .tgc { padding: var(--rv-sp-4) var(--rv-sp-5); border-bottom: 1px solid var(--rv-line); } .tgc-h { display: flex; align-items: center; gap: var(--rv-sp-2); flex-wrap: wrap; } .tgc-h b { font-weight: 500; } .tgc-h .btn { margin-left: auto; }
  .tgm { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--rv-sp-3); margin: var(--rv-sp-3) 0 0; } .tgm dt { color: var(--rv-muted); font-size: var(--rv-fs-xs); } .tgm :is(dt, dd) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tgm dd { margin: 2px 0 0; font-size: var(--rv-fs-body-sm); }
  @media (max-width: 1180px) { .tgs > .stack { display: contents; } .tgs .tglink { order: -1; } }
  @media (max-width: 640px) { .tgm { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tgi.pend { grid-template-columns: 1fr; } .tgi.pend .acts { justify-content: flex-start; } .tgi, .tgc { padding-left: var(--rv-sp-4); padding-right: var(--rv-sp-4); } }
  .ntc .box.am .tgunf { width: auto; margin: var(--rv-sp-4) 0 0; }
  .sc.soon3 { background: transparent; border: 1px dashed var(--rv-line2); } .sc.soon3 .ic { background: var(--rv-sunk); color: var(--rv-muted); }
  .bots .bgl { font-size: var(--rv-fs-xs); color: var(--rv-dim); margin: var(--rv-sp-2) var(--rv-sp-3) 0; } .bots .bgl:first-child { margin-top: 0; }
  /* not running: polished empty state (tiles with a placeholder graphic, one friendly line, one button) */
  .ph { position: relative; height: 150px; padding: 6px 14px 14px; color: var(--rv-line2); } .ph svg { width: 100%; height: 100%; display: block; }
  .ph span { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--rv-fs-xs); color: var(--rv-muted); } .ph span i { font-style: normal; background: var(--rv-panel); border-radius: var(--rv-r-xs); padding: var(--rv-sp-1) 10px; }
  .tsum .tk .v.dim, .kpi .v.dim { color: var(--rv-dim); }
  @media (max-width: 900px) { .page > .cta { order: -1; } .page > .vianote { order: -2; } }
  .cta { padding: var(--rv-sp-10) var(--rv-sp-6); text-align: center; display: grid; justify-items: center; gap: var(--rv-sp-2); }
  .cta .ic { width: 40px; height: 40px; border-radius: var(--rv-r-sm); margin-bottom: var(--rv-sp-2); background: var(--rv-btn2); color: var(--rv-muted); } .cta .ic svg { width: 18px; height: 18px; stroke-width: 1.5; }
  .cta h2 { font-size: var(--rv-fs-title); font-weight: 600; margin: 0; letter-spacing: -.01em; } .cta p { margin: 0; color: var(--rv-muted); font-size: var(--rv-fs-body); max-width: 520px; }
  .cta .btn { margin-top: var(--rv-sp-3); min-width: 240px; min-height: var(--rv-h-lg); padding: 12px var(--rv-sp-6); font-size: var(--rv-fs-md); } .cta .sm { font-size: var(--rv-fs-sm); color: var(--rv-dim); margin-top: 2px; }
  /* setup view: tabbed form on the left, summary with the one primary button on the right */
  .sform .tabs { display: flex; gap: var(--rv-sp-6); padding: 0 var(--rv-sp-6); border-bottom: 1px solid var(--rv-line); overflow-x: auto; scrollbar-width: none; }
  .sform .tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 14px 0 12px; color: var(--rv-muted); font-size: var(--rv-fs-body); font-weight: 500; cursor: pointer; white-space: nowrap; }
  .sform .tabs button:hover { color: var(--rv-text); } .sform .tabs button.on { color: var(--rv-text); border-bottom-color: var(--rv-accent); }
  .sform .tp .tw { margin: 0 -24px -24px; } .sform .tp .tw :is(th, td):first-child { padding-left: var(--rv-sp-6); } .sform .tp .tw :is(th, td):last-child { padding-right: var(--rv-sp-6); }
  .sform .tp { padding: var(--rv-sp-5) var(--rv-sp-6) var(--rv-sp-6); } .sform .tp > label.f:first-child { margin-top: 0; } .sform .tp > p.lead { margin: 0 0 14px; font-size: var(--rv-fs-body-sm); color: var(--rv-muted); }
  .sform .vlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sform .vlist .vrow + .vrow { border-top: 0; }
  .sform .vlist .vrow { border-bottom: 1px solid var(--rv-line); } .sform .vlist .vrow:nth-child(odd) { border-right: 1px solid var(--rv-line); }
  .sform .vlist .vrow:last-child, .sform .vlist .vrow:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  :is(.ssum, .amsum, .sset) .rw { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: var(--rv-sp-2) 0; border-bottom: 1px solid var(--rv-line); font-size: var(--rv-fs-body-sm); }
  :is(.ssum, .amsum, .sset) .rw:first-child { padding-top: 0; } :is(.ssum, .amsum, .sset) .rw > span:first-child { color: var(--rv-muted); white-space: nowrap; } :is(.ssum, .amsum, .sset) .rw > b { font-weight: 500; text-align: right; }
  /* a running strategy: a read-only Settings card (Edit opens one sheet with one Save changes) and a ⋯ menu in the header for rare actions */
  .sset .pad > .rw:last-child, .sset .pad > details.rwd:last-child > summary.rw { border-bottom: 0; padding-bottom: 0; }
  .sset details.rwd > summary { list-style: none; cursor: pointer; } .sset details.rwd > summary::-webkit-details-marker { display: none; }
  .sset .rw .lnk { font-size: var(--rv-fs-xs); font-weight: 400; margin-left: var(--rv-sp-2); color: var(--rv-accent); } .sset details.rwd[open] > summary .lnk { visibility: hidden; }
  .sset details.rwd > .hint { margin-top: var(--rv-sp-2); } .sset details.rwd[open]:not(:last-child) > .hint { margin-bottom: var(--rv-sp-2); } .sset .rw .dot { margin-right: 6px; } .dot.bad { background: var(--rv-neg); }
  .sset .pad > .hint:first-child { margin-bottom: var(--rv-sp-3); } .sset .pad > .xtra { margin-top: var(--rv-sp-4); } .sset .xtra label.f:first-child { margin-top: 0; }
  .sset > .hd .btn.sm { margin: -6.25px 0; }   /* Edit keeps the header as tall as a plain card header */
  .wl { display: block; color: var(--rv-muted); font-size: var(--rv-fs-xs); line-height: 1.45; margin-top: 2px; font-weight: 400; }
  .btn.ico { padding: 6px var(--rv-sp-2); } .btn.ico svg { width: 16px; height: 16px; fill: currentColor; display: block; }
  .ovm { position: fixed; z-index: 60; width: 264px; max-width: calc(100vw - 32px); background: var(--rv-panel2); border: 1px solid var(--rv-card-line); border-radius: var(--rv-r-lg); box-shadow: var(--rv-pop); padding: var(--rv-sp-1); display: grid; gap: 2px; }
  .ovm button { display: grid; gap: 2px; text-align: left; background: none; border: 0; border-radius: var(--rv-r-sm); padding: var(--rv-sp-2) var(--rv-sp-3); font: inherit; font-size: var(--rv-fs-body-sm); font-weight: 500; color: var(--rv-text); cursor: pointer; }
  .ovm button:hover { background: var(--rv-btn2); } .ovm button span { font-size: var(--rv-fs-xs); font-weight: 400; color: var(--rv-muted); line-height: 1.45; } .ovm button.danger { color: var(--rv-neg); }
  .ovm button.danger + button, .ovm button + button.danger { margin-top: var(--rv-sp-1); position: relative; } .ovm button + button.danger::before { content: ""; position: absolute; left: var(--rv-sp-3); right: var(--rv-sp-3); top: -3px; border-top: 1px solid var(--rv-line); }
  .ntc .box.am { max-height: calc(100vh - 32px); overflow-y: auto; } .ntc .box.am .vlist { margin-top: var(--rv-sp-2); } .ntc .box.am .se-n { font-size: var(--rv-fs-sm); margin: var(--rv-sp-2) 0 0; }
  @media (max-width: 1180px) { .g-st > .stack { display: contents; } .g-st .sset { order: -1; } .g-st > .stack > .hint.warn { order: -2; } }   /* one column: the safety-stop notice, then Settings, first */
  .ssum .acts { display: grid; gap: var(--rv-sp-2); margin-top: var(--rv-sp-4); } .ssum .lnk { font-size: var(--rv-fs-xs); font-weight: 400; margin-left: 6px; } .ssum .acts .btn { width: 100%; padding: 11px var(--rv-sp-4); font-size: var(--rv-fs-md); } .ssum .acts .btn.ghost { padding: 10px var(--rv-sp-4); }
  details.edx { margin-top: 2px; } details.edx summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--rv-sp-2); padding: 0 0 var(--rv-sp-1); font-size: var(--rv-fs-body-sm); }
  details.edx summary::-webkit-details-marker { display: none; } details.edx summary .f { color: var(--rv-muted); font-size: var(--rv-fs-sm); white-space: nowrap; } details.edx summary b { font-weight: 500; flex: 1; min-width: 0; }
  details.edx summary .lnk { font-size: var(--rv-fs-sm); } details.edx[open] summary .lnk { visibility: hidden; } details.edx .seg { margin-top: var(--rv-sp-2); }
  .inline > details.edx:first-of-type + label.f { margin-top: var(--rv-sp-4); }
  .sinfo summary { list-style: none; cursor: pointer; display: flex; align-items: center; padding: 15px var(--rv-sp-5); } .sinfo summary::-webkit-details-marker { display: none; }
  .sinfo summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border: solid var(--rv-muted); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); margin-top: -3px; transition: transform .15s; }
  .sinfo[open] summary::after { transform: rotate(-135deg); margin-top: 3px; } .sinfo .sib { padding: 0 var(--rv-sp-5) var(--rv-sp-5); }
  .sinfo h3 { font-size: var(--rv-fs-body); font-weight: 500; margin: 0; }
  @media (min-width: 1181px) { .su > .stack:last-child { position: sticky; top: 103px; } } .sinfo ol { margin: 0 0 14px; padding-left: 18px; display: grid; gap: var(--rv-sp-2); font-size: var(--rv-fs-body-sm); color: var(--rv-muted); line-height: 1.5; } .sinfo ol b { color: var(--rv-text); font-weight: 500; }
  .vrow.ro { cursor: default; }
  table.needt { margin-top: var(--rv-sp-4); }
  table.needt th, table.needt td { padding: var(--rv-sp-2) var(--rv-sp-3); font-size: var(--rv-fs-sm); } table.needt th:first-child, table.needt td:first-child { padding-left: var(--rv-sp-3); } table.needt th:last-child, table.needt td:last-child { padding-right: var(--rv-sp-3); }
  .stt.bad { color: var(--rv-neg); } .stt.bad::before { background: var(--rv-neg); }
  .hbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .hfl { display: flex; flex-wrap: wrap; gap: var(--rv-sp-2); margin-left: auto; } .hfl .field { width: auto; min-width: 140px; padding: 7px 10px; font-size: var(--rv-fs-body-sm); }
  @media (max-width: 640px) { .hbar .seg { width: 100%; } .hbar .seg button { flex: 1; } .hfl { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; } .hfl .field { min-width: 0; width: 100%; } }
  .top h1 .pill { margin-left: 6px; vertical-align: 2px; font-weight: 500; letter-spacing: 0; }
  .amtb { display: inline-flex; gap: var(--rv-sp-2); } .amtb .btn:not(.ghost) { border: 1px solid transparent; }
  .ntc .box.am { width: min(440px, 100%); text-align: left; }
  textarea.field { resize: vertical; min-height: 88px; font: inherit; font-size: var(--rv-fs-body-sm); line-height: 1.5; display: block; }
  .shl { display: flex; gap: var(--rv-sp-2); } .shl .field { min-width: 0; font-size: var(--rv-fs-body-sm); } .ntc .box.am .shl .btn { flex: none; width: auto; margin: 0; }
  .ntc .box.am .shn { font-size: var(--rv-fs-xs); line-height: 1.5; margin: var(--rv-sp-3) 0 0; } .ntc .box.am .am-acts .sp { flex: 1; }
  .ntc .box.am .am-acts .btn.danger { min-width: 0; }
  .ntc .box.ask { width: min(440px, 100%); text-align: left; } .ntc .box.ask h3 { margin: 0 0 6px; } .ntc .box.ask .lead { margin: 0; font-size: var(--rv-fs-body-sm); color: var(--rv-muted); }
  .asl { margin: 10px 0 0; padding: 0 0 0 18px; font-size: var(--rv-fs-body-sm); line-height: 1.6; max-height: 180px; overflow-y: auto; }
  .aopts { display: grid; gap: var(--rv-sp-2); margin-top: 18px; } .aopts .btn { flex-direction: column; gap: 2px; padding: 10px 14px; } .aopts .btn span { font-size: var(--rv-fs-xs); font-weight: 400; opacity: .8; white-space: normal; } .ntc .box.am h3 { margin: 0 0 6px; } .ntc .box.am .lead { margin: 0 0 var(--rv-sp-1); font-size: var(--rv-fs-body-sm); color: var(--rv-muted); }
  .ntc .box.am .amsum { margin-top: var(--rv-sp-4); } .ntc .box.am .am-acts { margin-top: 18px; justify-content: flex-end; flex-wrap: nowrap; } .ntc .box.am .am-acts .btn { width: auto; min-width: 110px; margin: 0; }
  .ntc .box.am .hint .btn { width: auto; margin: 0; } .sform .tabs button:disabled { opacity: .45; cursor: default; }
  .sform .tp .hint.shb { margin: 0 0 var(--rv-sp-4); line-height: 1.5; } .ssum .shr { margin-top: var(--rv-sp-3); text-align: center; font-size: var(--rv-fs-sm); }
  .sform .tp .dfoot { margin-top: var(--rv-sp-5); } .ssum .sumbox { margin-top: 14px; } .ssum #bf-facts .rw:first-child { padding-top: 10px; }
  @media (max-width: 640px) { .sform .tp { padding: var(--rv-sp-4) var(--rv-sp-4) var(--rv-sp-5); } .sform .tabs { padding: 0 var(--rv-sp-2); } .sform .tp .tw { margin: 0 calc(-1 * var(--rv-sp-4)) calc(-1 * var(--rv-sp-5)); } .sform .tp .tw :is(th, td):first-child { padding-left: var(--rv-sp-4); } .sform .tp .tw :is(th, td):last-child { padding-right: var(--rv-sp-4); } .sform .vlist { grid-template-columns: 1fr; } .sform .vlist .vrow:nth-child(odd) { border-right: 0; }
    .sform .vlist .vrow:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--rv-line); } .cta .btn { min-width: 0; width: 100%; } }
  .pill { font-size: var(--rv-fs-xs); line-height: 20px; padding: 0 var(--rv-sp-2); border-radius: var(--rv-r-xs); background: var(--rv-btn2); color: var(--rv-muted); }
  .pill.run { background: var(--rv-pos-soft); color: var(--rv-pos); } .pill.warn { background: var(--rv-neg-soft); color: var(--rv-neg); } .pill.acc, .pill.avail { background: var(--rv-accent-soft); color: var(--rv-accent); }

  /* tables */
  .tw { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: var(--rv-fs-body-sm); }
  th { text-align: left; color: var(--rv-dim); font-weight: 400; font-size: var(--rv-fs-xs); line-height: 16px; padding: var(--rv-sp-3); border-bottom: 1px solid var(--rv-line); white-space: nowrap; }
  td { padding: var(--rv-sp-3); line-height: 20px; border-bottom: 1px solid var(--rv-line); white-space: nowrap; }
  tr:last-child td { border-bottom: 0; }
  th:first-child, td:first-child { padding-left: var(--rv-sp-5); } th:last-child, td:last-child { padding-right: var(--rv-sp-5); }
  .r { text-align: right; } .rvn-menu.r { text-align: left; }
  .tag { font-size: var(--rv-fs-xs); line-height: 20px; padding: 0 6px; border-radius: var(--rv-r-xs); background: var(--rv-accent-soft); color: var(--rv-accent); white-space: nowrap; }
  .tag.off { background: var(--rv-btn2); color: var(--rv-muted); }
  .vlist { display: grid; gap: 0; margin-top: var(--rv-sp-2); border-top: 1px solid var(--rv-line); border-bottom: 1px solid var(--rv-line); }
  .vlist .vrow { margin: 0; padding: var(--rv-sp-3) var(--rv-sp-1); align-items: center; } .vlist .vrow + .vrow { border-top: 1px solid var(--rv-line); }
  .vlist .vrow input { margin: 0; } .vlist .vrow.off { cursor: default; } .vlist .vrow.off b { color: var(--rv-muted); }
  tr.click { cursor: pointer; } tr.click:hover td { background: var(--rv-panel2); }
  .rl { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; line-height: inherit; vertical-align: baseline; }
  :is(a, button, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--rv-focus); outline-offset: 2px; box-shadow: none; } .rl:focus-visible { border-radius: var(--rv-r-xs); }
  .field:focus-visible { outline: none; }

  /* exchanges */
  .ven { padding: var(--rv-sp-4) var(--rv-sp-5); display: grid; gap: var(--rv-sp-4); }
  .vn .top2 { display: flex; justify-content: space-between; font-size: var(--rv-fs-body); }
  .bar { height: 4px; background: var(--rv-btn2); border-radius: var(--rv-r-xs); margin-top: var(--rv-sp-2); overflow: hidden; }
  .bar i { display: block; height: 100%; border-radius: var(--rv-r-xs); background: var(--rv-accent); }
  .hint { font-size: var(--rv-fs-sm); line-height: 18px; color: var(--rv-text); background: var(--rv-sunk); border: 0; border-radius: var(--rv-r-sm); padding: var(--rv-sp-3); }
  .feed { padding: var(--rv-sp-1) var(--rv-sp-5) 10px; }
  .ev { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rv-line); font-size: var(--rv-fs-body-sm); }
  .ev:last-child { border-bottom: 0; } .ev time { color: var(--rv-dim); font-size: var(--rv-fs-xs); }

  /* welcome: one card, as an exchange's sign-in page */
  /* the sign-in card, as Binance's Log in page: logo, a big title, the one button (Connect wallet), one line on what
     signing does, one line of terms */
  .hello { max-width: 425px; box-sizing: border-box; width: 100%; margin: var(--rv-sp-10) auto 0; padding: var(--rv-sp-10); display: grid; gap: var(--rv-sp-4); border: 1px solid var(--rv-line); background: none; }
  .hl-logo { display: flex; align-items: center; gap: var(--rv-sp-2); font-weight: 500; letter-spacing: .06em; font-size: var(--rv-fs-lg); line-height: 24px; }
  .hl-logo svg { width: 15px; height: 20px; }
  .hl-h { display: grid; gap: var(--rv-sp-2); margin: var(--rv-sp-4) 0 var(--rv-sp-2); }
  .hello h1 { font-size: var(--rv-fs-h1); line-height: var(--rv-lh-h1); letter-spacing: -.01em; margin: 0; font-weight: 600; }
  .hello p.l { color: var(--rv-muted); font-size: var(--rv-fs-body); margin: 0; }
  .hello .btn { min-height: var(--rv-h-lg); font-size: var(--rv-fs-lg); width: 100%; }
  .hello p.hl-note { color: var(--rv-muted); font-size: var(--rv-fs-sm); line-height: 18px; margin: calc(-1 * var(--rv-sp-1)) 0 var(--rv-sp-2); }
  .agree { display: flex; gap: var(--rv-sp-2); align-items: flex-start; font-size: var(--rv-fs-xs); line-height: 16px; color: var(--rv-muted); margin: 0; cursor: pointer; }
  .agree input { margin: 1px 0 0; accent-color: var(--rv-accent); flex: none; } .agree a { color: var(--rv-accent); }
  .inv { display: flex; align-items: center; gap: var(--rv-sp-3); font-size: var(--rv-fs-sm); } .inv .field { flex: 1; } .inv a { color: var(--rv-accent); white-space: nowrap; }
  .hello .msg { margin: 0; } .hello .msg:empty { display: none; } .top:has(#title:empty):has(#actions:empty) { display: none; }
  @media (max-width: 640px) { .hello { margin-top: var(--rv-sp-2); padding: var(--rv-sp-6) 0 0; border: 0; } }

  .drawer { position: fixed; inset: 0; background: var(--rv-scrim); z-index: 40; display: grid; justify-items: end; grid-template-rows: minmax(0, 1fr); }
  .drawer .in { width: min(520px, 100%); height: 100%; background: var(--rv-panel); overflow-y: auto; padding: var(--rv-sp-6) var(--rv-sp-6) var(--rv-sp-10); box-shadow: var(--rv-pop); }
  .drawer h2 { font-size: var(--rv-fs-title); margin: 0 0 var(--rv-sp-1); letter-spacing: -.01em; } .drawer .x { float: right; }

  .acch { display: flex; align-items: baseline; gap: var(--rv-sp-3); margin: var(--rv-sp-4) 0 0; } .page > .acch:first-child { margin-top: 0; } .acch h3 { font-size: var(--rv-fs-lg); margin: 0; font-weight: 500; } .acch span { font-size: var(--rv-fs-sm); }
  .accs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--rv-sp-4); }
  .acc { text-align: left; font: inherit; color: inherit; background: var(--rv-panel); border: 1px solid var(--rv-card-line); border-radius: var(--rv-r-lg); padding: var(--rv-sp-4) 18px; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; transition: border-color .15s, transform .15s; }
  .acc:hover { background: var(--rv-panel2); }
  .acc .a1 { display: flex; align-items: center; gap: 10px; font-size: var(--rv-fs-md); min-width: 0; } .acc .a1 b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc .a1 .stt { margin-left: auto; flex: none; }
  .acc .a2 { font-size: var(--rv-fs-page); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
  .acc .a3 { display: flex; justify-content: space-between; gap: 10px; font-size: var(--rv-fs-sm); color: var(--rv-muted); } .acc .a3 b { color: var(--rv-text); font-weight: 500; } .acc .a3 > span { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .acc .a4 { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: var(--rv-fs-sm); padding-top: 10px; border-top: 1px solid var(--rv-line); } .acc .a4 .mg { color: var(--rv-accent); font-weight: 500; white-space: nowrap; } .acc .a4 .stt { font-size: var(--rv-fs-sm); min-width: 0; white-space: normal; }
  .acc.add { border: 1px dashed var(--rv-line2); background: transparent; place-content: center; justify-items: center; text-align: center; gap: 6px; }
  .acc.add .pl { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-size: var(--rv-fs-title); background: var(--rv-btn2); color: var(--rv-text); }
  .acc.add b { font-size: var(--rv-fs-md); } .acc.add .muted { font-size: var(--rv-fs-xs); }
  .lg { width: 28px; height: 28px; border-radius: var(--rv-r-sm); flex: none; display: inline-grid; place-items: center; font-size: var(--rv-fs-body-sm); font-weight: 500; color: #fff; background: var(--c); }
  .lg.img { background: #101012; overflow: hidden; } .lg.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  img.vi { width: 14px; height: 14px; border-radius: var(--rv-r-xs); vertical-align: -2px; margin-right: var(--rv-sp-1); }
  .lg.big { width: 40px; height: 40px; border-radius: var(--rv-r-sm); font-size: var(--rv-fs-title); }
  .stt { font-size: var(--rv-fs-xs); color: var(--rv-dim); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .stt::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--rv-line2); }
  .stt.ok { color: var(--rv-pos); } i.stt { font-style: normal; font-size: inherit; } .stt.ok::before { background: var(--rv-pos); } .stt.wait { color: var(--rv-warn); } .stt.wait::before { background: var(--rv-warn); }
  .xlbl { font-size: var(--rv-fs-xs); color: var(--rv-dim); margin: 0 0 var(--rv-sp-2); font-weight: 400; }
  .xgrid { display: grid; grid-template-columns: repeat(var(--xc, 4), minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }     /* --xc: even rows (openConnect) */
  .xtile { font: inherit; color: inherit; background: var(--rv-sunk); border: 1px solid transparent; border-radius: var(--rv-r-sm); padding: 14px var(--rv-sp-2) var(--rv-sp-3); display: grid; justify-items: center; gap: 7px; cursor: pointer; transition: border-color .15s; }
  .xtile:hover { border-color: var(--rv-accent-line); } .xtile b { font-size: var(--rv-fs-body-sm); font-weight: 500; } .xtile span { font-size: var(--rv-fs-xs); }
  .xgrid .xtile b, .xgrid .xtile span { white-space: nowrap; } .xgrid.five .xtile { padding-left: var(--rv-sp-1); padding-right: var(--rv-sp-1); }     /* five across: one line each */
  .xtile.off { cursor: default; opacity: .55; } .xtile.off:hover { border-color: transparent; } .xtile .pos { color: var(--rv-pos); }
  .dhd { display: flex; align-items: center; gap: var(--rv-sp-3); margin-bottom: 18px; } .dhd h2 { margin: 0 0 2px; }
  /* a bot's panel on a phone: the name, its status line and Close on the first row, the other buttons on their own row
     from the left edge (at 390 / 360 they pushed Close off screen and broke the name over three lines) */
  @media (max-width: 860px) { .bdh { flex-wrap: wrap; row-gap: var(--rv-sp-3); } .bdh > * { order: 2; }
    .bdh > .ic, .bdh > div:nth-child(2) { order: 0; } .bdh > button:last-child { order: 1; }
    .bdh > div:nth-child(2) { flex: 1 1 calc(100% - 144px); min-width: 0; } .bdh > a.btn:first-of-type { margin-left: 0 !important; } }
  .dst { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rv-sp-2); }
  .dst > div { background: var(--rv-sunk); border-radius: var(--rv-r-sm); padding: var(--rv-sp-3); display: grid; gap: var(--rv-sp-1); } .dst > div > span { font-size: var(--rv-fs-xs); color: var(--rv-muted); } .dst b { font-size: var(--rv-fs-lg); font-weight: 500; }
  @media (max-width: 640px) { .accs { grid-template-columns: 1fr; } .xgrid { grid-template-columns: repeat(2, 1fr); } .xgrid.odd > :first-child { grid-column: 1 / -1; } .dst { grid-template-columns: 1fr 1fr; } .dst > div:last-child { grid-column: span 2; } }
  .drawer .in.wide { width: min(760px, 100%); }
  .pdk { grid-template-columns: repeat(4, 1fr); margin-bottom: var(--rv-sp-4); }
  .pdc { border-radius: var(--rv-r-sm); background: var(--rv-sunk); padding: var(--rv-sp-3) var(--rv-sp-3) var(--rv-sp-2); }
  .pdc svg { width: 100%; height: 300px; display: block; cursor: crosshair; } .pdc .empty { min-height: 300px; display: grid; place-items: center; }
  .pdo { font-size: var(--rv-fs-xs); min-height: 18px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdo b { font-weight: 500; }
  .pdb { display: grid; gap: 10px; font-size: var(--rv-fs-body-sm); } .pdb > div { display: grid; grid-template-columns: 170px 1fr 90px; gap: var(--rv-sp-3); align-items: center; }
  .pdb span { color: var(--rv-muted); } .pdb i { height: 8px; border-radius: var(--rv-r-xs); background: var(--rv-line); overflow: hidden; display: block; } .pdb i b { display: block; height: 100%; border-radius: var(--rv-r-xs); }
  .pdb .bp { background: var(--rv-pos); } .pdb .bn { background: var(--rv-neg); } .pdb em { font-style: normal; text-align: right; font-weight: 500; }
  .pdb .tot { border-top: 1px solid var(--rv-line); padding-top: 10px; } .pdb .tot i { background: none; } .pdb .tot span { color: var(--rv-text); font-weight: 600; }
  .pdd { display: grid; grid-template-columns: 1fr 1fr; gap: 14px var(--rv-sp-6); margin: 0; font-size: var(--rv-fs-body-sm); } .pdd dt { color: var(--rv-muted); font-size: var(--rv-fs-xs); margin-bottom: 3px; } .pdd dd { margin: 0; } .pdd .w2 { grid-column: span 2; }
  @media (max-width: 640px) { .pdk { grid-template-columns: 1fr 1fr; } .dst.pdk > div:last-child { grid-column: auto; } .pdc svg, .pdc .empty { height: 220px; min-height: 220px; } .pdb > div { grid-template-columns: 1fr 80px; } .pdb i { display: none; } .pdd { grid-template-columns: 1fr; } .pdd .w2 { grid-column: auto; } }
  .dsteps { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: var(--rv-fs-body-sm); }
  .dsteps li { display: flex; justify-content: space-between; gap: 10px; padding: var(--rv-sp-2) var(--rv-sp-3); background: var(--rv-sunk); border-radius: var(--rv-r-sm); color: var(--rv-muted); }
  .dsteps li.now { background: var(--rv-accent-soft); color: var(--rv-text); } .dsteps li.done { color: var(--rv-text); } .dsteps li.done span { color: var(--rv-pos); }
  /* a dYdX deposit crossing the bridge (about 19 minutes): where it is, under the form */
  .dyp { margin: 12px 0 0; padding: var(--rv-sp-3); background: var(--rv-accent-soft); border-radius: var(--rv-r-sm); font-size: var(--rv-fs-body-sm); }
  .dyp .row { gap: var(--rv-sp-2); } .dyp .row .muted { font-size: var(--rv-fs-xs); }
  .dyp .bar { height: 6px; border-radius: var(--rv-r-xs); background: var(--rv-line2); margin: 8px 0; overflow: hidden; } .dyp .bar i { display: block; height: 100%; background: var(--rv-accent); border-radius: var(--rv-r-xs); }
  .dyp p { margin: 0; font-size: var(--rv-fs-xs); }
  /* Transfer between the customer's own exchanges: the sheet's summary, its steps, and the chip while one runs */
  .xsum { border-radius: var(--rv-r-sm); background: var(--rv-sunk); padding: 0 var(--rv-sp-3); margin: var(--rv-sp-4) 0 var(--rv-sp-3); }
  .xsum > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rv-sp-3); padding: 10px 0; font-size: var(--rv-fs-body-sm); border-top: 1px solid var(--rv-line); }
  .xsum > div:first-child { border-top: 0; } .xsum span { color: var(--rv-muted); } .xsum b { font-weight: 500; text-align: right; }
  .xsum b small { display: block; color: var(--rv-muted); font-weight: 400; font-size: var(--rv-fs-xs); margin-top: 2px; }
  .xhd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rv-sp-1) var(--rv-sp-3); flex-wrap: wrap; font-size: var(--rv-fs-md); margin-top: var(--rv-sp-4); }
  .xhd .muted { font-size: var(--rv-fs-sm); }
  .xbar { height: 6px; border-radius: var(--rv-r-xs); background: var(--rv-line2); margin: 10px 0 var(--rv-sp-4); overflow: hidden; } .xbar i { display: block; height: 100%; background: var(--rv-accent); border-radius: var(--rv-r-xs); }
  .xsteps { display: grid; gap: var(--rv-sp-2); } .xsteps .step { grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; }
  .xsteps .step .n { margin-top: -4px; } .xsteps .step > .btn { margin-top: -4px; }
  .xsteps .step.next { background: transparent; } .xsteps .step.next b { color: var(--rv-muted); }
  .xsteps .step.stopped .n { background: var(--rv-neg-soft); color: var(--rv-neg); }
  .xsteps .step .s { margin-top: 2px; line-height: 1.45; } .xsteps .dsteps { margin-top: 10px; }
  .xacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-sp-2) var(--rv-sp-4); margin: 12px 0 0; }
  .xacts .btn { width: auto; margin: 0; }
  .xnote { font-size: var(--rv-fs-sm); margin: 14px 0 0; line-height: 1.5; }
  /* Convert (radar/auto/convert.py): Transfer's "Convert first" rows, the To label with Switch, a balance line */
  .xcv { margin: 18px 0 0; } .xcv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rv-sp-2); }
  .xcv li { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-3); padding: 10px var(--rv-sp-3); background: var(--rv-sunk); border-radius: var(--rv-r-sm); font-size: var(--rv-fs-body-sm); line-height: 1.45; }
  .xcv li .btn { width: auto; margin: 0; flex: none; } .xcv p { font-size: var(--rv-fs-sm); margin: 8px 0 0; }
  .cvl { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rv-sp-3); } .cvl .lnk { font-size: var(--rv-fs-sm); text-decoration: none; }
  .cvb { font-size: var(--rv-fs-xs); margin: 8px 0 0; } #cvt-sum span { white-space: nowrap; }
  /* the money buttons on a phone (Assets, Exchanges, an account: Deposit | Withdraw | Transfer | Convert or Manage), as in the
     Binance app: one row of equal buttons, however many, Deposit the primary one */
  @media (max-width: 860px) { .top #actions:has(> [data-money="in"]) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); column-gap: var(--rv-sp-2); align-items: stretch; }
    .top #actions:has(> [data-money="in"]) .btn { min-width: 0; height: 36px; min-height: 0; padding: 0 2px; font-size: var(--rv-fs-body-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
  /* equal quarters while every label fits; a longer one (ru "Пополнить", vi "Chuyển đổi") takes its own width instead of "Попол…" */
  @media (max-width: 374px) { .top #actions:has(> [data-money="in"]) .btn { font-size: var(--rv-fs-sm); } }
  /* History with a Converts tab on a phone: five tabs in two rows (three, then two), each row edge to edge */
  @media (max-width: 640px) { .hbar .seg:has(> :nth-child(5)) { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; box-sizing: border-box; }
    .hbar .seg:has(> :nth-child(5)) > * { grid-column: span 2; min-width: 0; } .hbar .seg:has(> :nth-child(5)) > :nth-child(n+4) { grid-column: span 3; } }
  .xchip { position: fixed; right: var(--rv-sp-6); bottom: var(--rv-sp-6); z-index: 25; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
           padding: 10px var(--rv-sp-4); border-radius: 999px; border: 1px solid var(--rv-accent-line); background: var(--rv-panel2); color: var(--rv-text);
           font: inherit; font-size: var(--rv-fs-sm); text-align: left; cursor: pointer; box-shadow: var(--rv-pop); }
  .xchip b { font-weight: 500; white-space: nowrap; } .xchip .xs { color: var(--rv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .xchip .xd { width: 8px; height: 8px; border-radius: 999px; background: var(--rv-accent); flex: none; animation: xpulse 1.6s ease-in-out infinite; }
  .xchip.you { border-color: var(--rv-accent); } .xchip.you .xs { color: var(--rv-accent); } .xchip.late { border-color: var(--rv-neg); } .xchip.late .xd { background: var(--rv-neg); }
  @keyframes xpulse { 50% { opacity: .3; } }
  body.has-xchip .page { padding-bottom: 96px; }
  table.tt tr[data-xid] { cursor: pointer; } table.tt tr[data-xid]:hover td { background: var(--rv-panel2); }
  table.xt tr.xk { cursor: pointer; } table.xt tr.xk:hover td { background: var(--rv-panel2); } table.xt tr.xk.open td { background: var(--rv-panel2); border-bottom-color: transparent; }
  .chev { display: inline-block; width: 7px; height: 7px; border-right: 1.6px solid var(--rv-dim); border-bottom: 1.6px solid var(--rv-dim); transform: rotate(-45deg); margin: 0 var(--rv-sp-3) 2px 2px; transition: transform .2s; }
  tr.xk.open .chev { transform: rotate(45deg); }
  table.xt tr.xr > td { padding: 0; background: var(--rv-panel2); white-space: normal; text-align: left; }
  .xp { padding: 6px var(--rv-sp-6) var(--rv-sp-6); overflow: hidden; } .xp.an { animation: xpIn .3s ease-out; } @keyframes xpIn { from { max-height: 0; opacity: 0; } to { max-height: 1200px; opacity: 1; } }
  .xp .mini { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--rv-sp-2); margin-bottom: var(--rv-sp-4); }
  .xp .mini > div { background: var(--rv-panel); border-radius: var(--rv-r-sm); padding: var(--rv-sp-3); } .xp .mini .k { font-size: var(--rv-fs-xs); color: var(--rv-muted); } .xp .mini .v { font-size: var(--rv-fs-lg); font-weight: 500; margin-top: 3px; } .xp .mini .s { font-size: var(--rv-fs-xs); color: var(--rv-dim); min-height: 1em; }
  .xp .xg { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--rv-sp-6); }
  .xp .sub { font-size: var(--rv-fs-xs); color: var(--rv-muted); margin-bottom: var(--rv-sp-2); }
  .xp svg.lch { display: block; width: 100%; height: 190px; }
  .xp table.sm td, .xp table.sm th { font-size: var(--rv-fs-sm); padding: 7px var(--rv-sp-2); } .xp table.sm tr.hl td { color: var(--rv-text); font-weight: 500; }
  .xp .tag { font-size: var(--rv-fs-xs); padding: 1px 6px; border-radius: var(--rv-r-xs); margin-left: 6px; } .xp .tag.pos { background: var(--rv-pos-soft); } .xp .tag.neg { background: var(--rv-neg-soft); }
  .xp dl.kv { display: grid; grid-template-columns: 1fr auto; margin: 0; font-size: var(--rv-fs-body-sm); } .xp dl.kv dt, .xp dl.kv dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--rv-line); } .xp dl.kv dt { color: var(--rv-muted); } .xp dl.kv dd { text-align: right; }
  @media (max-width: 900px) { .xp .mini { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xp .xg { grid-template-columns: 1fr; } }
  .inline > .x, .inline > .ic, .inline > h2, .inline > p.muted:first-of-type { display: none; }
  .inline > label.f:first-of-type { margin-top: 0; }
  table.po th:last-child, table.po td:last-child { width: 1%; white-space: nowrap; }
  .dot2 { width: 7px; height: 7px; border-radius: 999px; margin-left: auto; background: var(--rv-line2); } .dot2.run { background: var(--rv-pos); box-shadow: 0 0 0 3px var(--rv-pos-soft); }
  dl.kv2 { display: grid; grid-template-columns: 92px 1fr; gap: 9px var(--rv-sp-3); margin: 0; align-items: center; } dl.kv2 dt { color: var(--rv-dim); } dl.kv2 dd { margin: 0; }
  .ntc.sheet { place-items: end center; padding: 0; } .ntc.sheet .box { width: 100%; max-width: 560px; border-radius: var(--rv-r-xl) var(--rv-r-xl) 0 0; text-align: left; padding: 10px var(--rv-sp-4) calc(var(--rv-sp-4) + env(safe-area-inset-bottom)); max-height: 86vh; overflow-y: auto; }
  .ntc.sheet .grab { width: 36px; height: 4px; border-radius: var(--rv-r-xs); background: var(--rv-line2); margin: 0 auto var(--rv-sp-2); }
  .msec { font-size: var(--rv-fs-xs); color: var(--rv-dim); padding: 14px 10px 6px; }
  .mi { display: flex; align-items: center; gap: var(--rv-sp-3); padding: 11px 10px; border-radius: var(--rv-r-md); font-size: var(--rv-fs-body); color: var(--rv-text); }
  .mi svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; flex: none; color: var(--rv-muted); } .mi.on { background: var(--rv-accent-soft); color: var(--rv-accent); }
  .mi .dot2 { margin-left: auto; } .mi.danger { color: var(--rv-neg); } .mi.danger svg { color: var(--rv-neg); }
  .hint.warn { background: var(--rv-warn-soft); color: var(--rv-text); }
  .hint .hacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-sp-2) var(--rv-sp-4); margin-top: var(--rv-sp-3); } .hint .hacts .btn { width: auto; margin: 0; } .hint.shortn { margin: 0; }
  .pcts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--rv-sp-2); }
  .pcts button { font: inherit; font-size: var(--rv-fs-xs); padding: var(--rv-sp-1) 10px; border-radius: var(--rv-r-xs); border: 1px solid transparent; background: var(--rv-btn2); color: var(--rv-muted); cursor: pointer; }
  .pcts button:hover { color: var(--rv-text); } .pcts button.on { color: var(--rv-accent); border-color: var(--rv-accent-line); background: var(--rv-accent-soft); } .pcts span { font-size: var(--rv-fs-xs); margin-left: var(--rv-sp-1); }
  table.tt td { vertical-align: middle; } table.tt .rt { font-size: var(--rv-fs-xs); color: var(--rv-muted); margin-top: 3px; font-weight: 400; } table.tt th.c, table.tt td.c { text-align: center; }
  .so { display: none; }
  @media (max-width: 640px) { .so { display: block; } .hm { display: none !important; } table.pt td, table.pt th { padding-left: var(--rv-sp-2); padding-right: var(--rv-sp-2); } .card .hd { flex-wrap: wrap; row-gap: var(--rv-sp-2); } .card .hd h2 { white-space: nowrap; } }
  table.pt td { height: 58px; } table.pt th.r, table.pt td.r { padding-left: 10px; } table.pt td .rt { white-space: nowrap; }
  table.tt td.wy { white-space: normal; min-width: 110px; font-size: var(--rv-fs-sm); }
  .rdy { font-size: var(--rv-fs-xs); color: var(--rv-muted); margin-top: var(--rv-sp-1); white-space: normal; } .rdyp { margin-top: var(--rv-sp-2); }
  .dustn { font-size: var(--rv-fs-xs); color: var(--rv-muted); margin-top: var(--rv-sp-1); white-space: normal; }
  .pb { display: inline-block; padding: 3px 9px; border-radius: var(--rv-r-sm); font-weight: 500; font-size: var(--rv-fs-body-sm); } .pb.pos { background: var(--rv-pos-soft); color: var(--rv-pos); } .pb.neg { background: var(--rv-neg-soft); color: var(--rv-neg); }
  svg.ring { width: 48px; height: 48px; display: block; margin: 0 auto; } svg.ring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
  svg.ring text { font-size: 8.5px; font-weight: 500; text-anchor: middle; } svg.ring text.s { font-size: 7px; font-weight: 400; }   /* SVG units: the ring scales them */
  .tsum { display: grid; grid-template-columns: minmax(200px, .8fr) 1.5fr 1.5fr; gap: var(--rv-sp-4); } .tsum .card { margin: 0; }
  .tsum .tk { padding: var(--rv-sp-6); display: flex; flex-direction: column; justify-content: center; gap: var(--rv-sp-4); text-align: center; } .tsum .tk .k { font-size: var(--rv-fs-xs); color: var(--rv-muted); } .tsum .tk .v { font-size: var(--rv-fs-page); font-weight: 500; letter-spacing: -.02em; margin-top: var(--rv-sp-1); } .tsum .tk .d { font-size: var(--rv-fs-xs); color: var(--rv-dim); margin-top: var(--rv-sp-1); } .tsum .tk .sep { border-top: 1px solid var(--rv-line); }
  .empty.sm { padding: var(--rv-sp-10) 10px; font-size: var(--rv-fs-sm); }
  .tsum .card .hd { padding: var(--rv-sp-4) var(--rv-sp-4) 0; border: 0; } .tsum .card .hd h2 { font-size: var(--rv-fs-xs); color: var(--rv-muted); font-weight: 400; } svg.tch { display: block; width: 100%; height: 150px; padding: 0 var(--rv-sp-2) 6px; }
  .pager { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding: var(--rv-sp-3) var(--rv-sp-4); } .pager button { font: inherit; font-size: var(--rv-fs-sm); min-width: 30px; height: 30px; border-radius: var(--rv-r-sm); border: 1px solid var(--rv-line2); background: transparent; color: var(--rv-muted); cursor: pointer; }
  .pager button.on { color: var(--rv-accent); border-color: var(--rv-accent-line); background: var(--rv-accent-soft); } .pager span { font-size: var(--rv-fs-xs); margin-left: 6px; }
  .mny { display: grid; grid-template-columns: minmax(260px, .9fr) 1.6fr; gap: 28px; align-items: center; } .mny .dn { display: flex; gap: var(--rv-sp-5); align-items: center; } .mny .dn svg { width: 130px; height: 130px; flex: none; }
  .mny dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px var(--rv-sp-4); font-size: var(--rv-fs-body-sm); flex: 1; } .mny dt { color: var(--rv-muted); display: flex; align-items: center; gap: var(--rv-sp-2); white-space: nowrap; } .mny dt i { width: 9px; height: 9px; border-radius: var(--rv-r-xs); display: inline-block; }
  .mny dd { margin: 0; text-align: right; font-weight: 500; } .mny dd span { display: block; font-size: var(--rv-fs-xs); color: var(--rv-dim); font-weight: 400; }
  @media (max-width: 900px) { .mny { grid-template-columns: 1fr; } }
  @media (max-width: 480px) { .mny .dn { flex-direction: column; align-items: stretch; } .mny .dn svg { align-self: center; } .mny dl { width: 100%; } }   /* phones: the list gets the full width under the donut */
  .tnote { font-size: var(--rv-fs-xs); margin: 0; padding: 10px var(--rv-sp-5) var(--rv-sp-4); }
  /* traders marketplace */
  .how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rv-sp-4); margin-bottom: var(--rv-sp-3); }
  .how > div { background: var(--rv-panel); border-radius: var(--rv-r-lg); padding: var(--rv-sp-4) var(--rv-sp-5); display: flex; gap: var(--rv-sp-3); align-items: flex-start; font-size: var(--rv-fs-body-sm); color: var(--rv-muted); line-height: 1.5; }
  .how b { display: block; color: var(--rv-text); font-weight: 500; font-size: var(--rv-fs-body); margin-bottom: 2px; }
  .how .n { flex: none; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--rv-btn2); color: var(--rv-text); font-weight: 500; font-size: var(--rv-fs-sm); }
  /* Earn (#earn): the vault sheet's chart header, its risk line and the leader's words; the deposit sheet's terms */
  .evh { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-2); flex-wrap: wrap; margin-bottom: var(--rv-sp-2); font-size: var(--rv-fs-xs); }
  .evr { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--rv-sp-4); align-items: start; } .evr p { margin: 0; font-size: var(--rv-fs-sm); line-height: 1.5; }
  .evd { margin: 0; font-size: var(--rv-fs-sm); line-height: 1.5; overflow-wrap: anywhere; } dl.evt { margin-bottom: var(--rv-sp-4); }
  .kpi .evn { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table.evt td { height: 58px; } table.evt td:first-child { white-space: normal; }
  @media (max-width: 640px) { table.evt :is(th, td):not(:first-child):not(:last-child) { padding-left: var(--rv-sp-2); padding-right: var(--rv-sp-2); } table.evt td:last-child { width: 1%; } } .agree.evok { margin-bottom: var(--rv-sp-4); }
  .bars { display: grid; gap: var(--rv-sp-3); } .bars .bl { display: flex; justify-content: space-between; font-size: var(--rv-fs-sm); margin-bottom: 5px; } .bars .bl span { color: var(--rv-muted); }
  .bars .tr { height: 7px; border-radius: var(--rv-r-sm); background: var(--rv-sunk); overflow: hidden; } .bars .tr i { display: block; height: 100%; border-radius: var(--rv-r-sm); background: var(--rv-accent); }
  .wl { display: flex; align-items: center; gap: var(--rv-sp-4); } .wl svg { width: 92px; height: 92px; flex: none; } .wl dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 6px 14px; font-size: var(--rv-fs-sm); } .wl dt { color: var(--rv-muted); } .wl dd { margin: 0; text-align: right; }
  .xp .xg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rv-sp-6); margin-bottom: 18px; }
  @media (max-width: 900px) { .how, .xp .xg3 { grid-template-columns: 1fr; } }
  @media (max-width: 900px) { .tsum { grid-template-columns: 1fr; } }
  .ntc { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: var(--rv-scrim); padding: var(--rv-sp-4); animation: ntcIn .15s ease-out; }
  .ntc .box { background: var(--rv-panel); border: 1px solid var(--rv-card-line); border-radius: var(--rv-r-lg); padding: var(--rv-sp-6) var(--rv-sp-6) var(--rv-sp-5); width: min(380px, 100%); text-align: center; box-shadow: var(--rv-pop); }
  .ntc .ic2 { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; margin: 0 auto 14px; font-size: var(--rv-fs-page); font-weight: 600; }
  .ntc.ok .ic2 { background: var(--rv-pos-soft); color: var(--rv-pos); } .ntc.err .ic2 { background: var(--rv-neg-soft); color: var(--rv-neg); }
  .ntc.wait .ic2 { background: var(--rv-bg-3); color: var(--rv-text); }   /* sent, not confirmed yet: neutral, nothing failed */
  .ntc h3 { margin: 0 0 var(--rv-sp-2); font-size: var(--rv-fs-title); font-weight: 600; } .ntc p { margin: 0 0 18px; color: var(--rv-muted); font-size: var(--rv-fs-body); line-height: 1.55; }
  .ntc .btn { width: 100%; justify-content: center; }
  .ntc .box.gd { width: min(520px, 100%); text-align: left; padding: var(--rv-sp-6); max-height: calc(100vh - 32px); overflow-y: auto; }
  .gd .ic { margin-bottom: 14px; } .gd h3 { font-size: var(--rv-fs-title); } .gd .lead { color: var(--rv-muted); font-size: var(--rv-fs-md); line-height: 1.55; margin: 0 0 18px; }
  .gd ol { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: var(--rv-sp-3); counter-reset: g; } .gd li { display: flex; gap: var(--rv-sp-3); font-size: var(--rv-fs-body); line-height: 1.5; color: var(--rv-muted); counter-increment: g; }
  .gd li::before { content: counter(g); flex: none; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--rv-btn2); color: var(--rv-text); font-weight: 500; font-size: var(--rv-fs-xs); } .gd li b { color: var(--rv-text); font-weight: 500; }
  .gd .ex { background: var(--rv-sunk); border-radius: var(--rv-r-sm); padding: 14px var(--rv-sp-4); font-size: var(--rv-fs-body-sm); line-height: 1.55; margin-bottom: 14px; } .gd .ex .k { font-size: var(--rv-fs-xs);; color: var(--rv-dim); margin-bottom: 6px; }
  .gd .rk { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px var(--rv-sp-3); align-items: start; font-size: var(--rv-fs-sm); color: var(--rv-muted); line-height: 1.5; margin-bottom: 18px; } .gd .rk .lvl { justify-self: start; }
  .gd .rk .wk { font-size: var(--rv-fs-xs); color: var(--rv-dim); padding-left: 10px; line-height: 24px; } .gd .rk .wk + span { color: var(--rv-text); }
  @keyframes ntcIn { from { opacity: 0; } to { opacity: 1; } }
  .ntc.tst { inset: auto; top: calc(var(--rv-header-h) + var(--rv-sp-4)); left: 50%; transform: translateX(-50%); display: block; padding: 0; background: none; pointer-events: none; }
  .ntc.tst .box { display: flex; align-items: center; gap: var(--rv-sp-2); width: max-content; max-width: min(480px, calc(100vw - 32px)); padding: var(--rv-sp-3) var(--rv-sp-4); text-align: left; border-radius: var(--rv-r-sm); background: var(--rv-panel2); }
  .ntc.tst .ic2 { flex: none; width: 20px; height: 20px; margin: 0; font-size: var(--rv-fs-xs); }
  .ntc.tst p { margin: 0; color: var(--rv-text); font-size: var(--rv-fs-body); line-height: 20px; }
  /* Binance's empty state: a grey document with a magnifier over one short line */
  .empty:not(.sm)::before, .rv-empty:not(:has(> svg))::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto var(--rv-sp-3); background: var(--rv-faint);
    -webkit-mask: var(--rv-empty-ic) center / contain no-repeat; mask: var(--rv-empty-ic) center / contain no-repeat; }
  :root { --rv-empty-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 56H14V8h22l10 10v14'/%3E%3Cpath d='M36 8v10h10M21 26h16M21 34h10M21 42h6'/%3E%3Ccircle cx='44' cy='45' r='7'/%3E%3Cpath d='M49 50l6 6'/%3E%3C/svg%3E"); }
  .btn.busy { position: relative; color: transparent !important; pointer-events: none; }
  .btn.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid; border-color: var(--rv-primary-ink) transparent var(--rv-primary-ink) transparent; border-radius: 999px; animation: spin .8s linear infinite; }
  .btn.ghost.busy::after { border-color: var(--rv-text) transparent var(--rv-text) transparent; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .toast { position: fixed; bottom: var(--rv-sp-6); left: 50%; transform: translateX(-50%); background: var(--rv-btn2); color: var(--rv-text); padding: var(--rv-sp-3) var(--rv-sp-4); border-radius: var(--rv-r-sm); box-shadow: var(--rv-pop); font-size: var(--rv-fs-body); z-index: 60; }
  @media (max-width: 860px) { .toast { bottom: calc(var(--rv-tabs-h) + var(--rv-sp-4) + env(safe-area-inset-bottom)); } }

  /* bot builder */
  .wz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 18px; }
  .wz span { font-size: var(--rv-fs-xs); padding: 7px var(--rv-sp-2); border-radius: var(--rv-r-sm); background: var(--rv-sunk); color: var(--rv-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wz span.on { background: var(--rv-accent-soft); color: var(--rv-accent); font-weight: 500; } .wz span.done { color: var(--rv-text); }
  .bk { display: grid; gap: 10px; }
  .bk button { text-align: left; font: inherit; color: inherit; background: var(--rv-sunk); border: 1px solid transparent; border-radius: var(--rv-r-sm); padding: var(--rv-sp-4); cursor: pointer; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; transition: border-color .15s; }
  .bk button:hover, .bk button.on { border-color: var(--rv-accent-line); }
  .bk b { display: block; font-size: var(--rv-fs-body); font-weight: 500; margin-bottom: 3px; } .bk span.t { display: block; font-size: var(--rv-fs-body-sm); color: var(--rv-text); line-height: 1.45; } .bk em { display: block; font-style: normal; font-size: var(--rv-fs-xs); color: var(--rv-dim); margin-top: var(--rv-sp-1); }
  .bk .go { color: var(--rv-accent); font-size: var(--rv-fs-body-sm); font-weight: 500; white-space: nowrap; }
  .bk3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 var(--rv-sp-5) var(--rv-sp-5); }
  .bk3 button { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; }
  .bk3 button .go { margin-top: 2px; }
  .pre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rv-sp-2); }
  .pre button { position: relative; font: inherit; color: inherit; text-align: left; background: var(--rv-sunk); border: 1px solid transparent; border-radius: var(--rv-r-sm); padding: 9px 11px; cursor: pointer; display: grid; gap: 2px; min-width: 0; }
  .pre button b { font-size: var(--rv-fs-body-sm); font-weight: 500; } .pre button > span { font-size: var(--rv-fs-xs); color: var(--rv-muted); line-height: 1.35; }
  .pre button.on { border-color: var(--rv-accent); box-shadow: 0 0 0 3px var(--rv-accent-soft); }
  .pre .rec { position: absolute; top: -8px; right: 8px; background: var(--rv-panel); border: 1px solid color-mix(in srgb, var(--rv-pos) 45%, transparent); }
  .rec { font-size: var(--rv-fs-xs); font-weight: 500; color: var(--rv-pos); background: var(--rv-pos-soft); padding: 1px 6px; border-radius: var(--rv-r-xs); }
  .g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rv-sp-3); }
  .g2b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rv-sp-3); }
  .g3 label.f, .g2b label.f { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .seg.full { display: flex; width: 100%; } .seg.full button { flex: 1; padding: 6px var(--rv-sp-1); }
  /* a choice of many exchanges (money panel): equal cells, three per row, two on a phone; never wider than the panel */
  .seg.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; width: 100%; box-sizing: border-box; }
  .seg.grid button { padding: 6px var(--rv-sp-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  @media (max-width: 520px) { .seg.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  /* a choice of exchanges (money panel, bot builder): two columns at every width, so long names fit and 8 exchanges make
     4 even rows; with an odd count the first choice takes the whole first row, so no row is left half empty */
  .seg.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg.grid.two.odd > :first-child { grid-column: 1 / -1; }
  /* Pacifica, no Solana wallet here: the "Open in" buttons two by two (an odd first one on its own row) */
  .pcw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rv-sp-2); margin-top: 10px; }
  .pcw > * { justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
  .pcw > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  /* an action that reads as a link inside a sentence (Orderly's test-money faucet) */
  button.lnk, a.lnk { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--rv-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
  button.lnk:disabled { color: var(--rv-faint); cursor: default; text-decoration: none; }
  .lev { display: flex; align-items: center; gap: 14px; } .lev input { flex: 1; accent-color: var(--rv-accent); margin: 0; } .lev b { min-width: 40px; text-align: right; font-weight: 500; }
  .chk { display: flex; gap: 10px; align-items: flex-start; font-size: var(--rv-fs-body-sm); margin: 14px 0 0; cursor: pointer; line-height: 1.45; } .chk input { accent-color: var(--rv-accent); margin: 3px 0 0; flex: none; }
  .cond { border-radius: var(--rv-r-sm); padding: var(--rv-sp-3); background: var(--rv-sunk); margin-top: 10px; }
  .cond .ch { display: flex; gap: var(--rv-sp-2); align-items: center; } .cond .ch select { flex: 1; min-width: 0; }
  .cond label.f { margin-top: 10px; } .cond .and { font-size: var(--rv-fs-xs); color: var(--rv-dim); text-align: center; margin: var(--rv-sp-2) 0 -2px; }
  .sumbox { background: var(--rv-sunk); border-radius: var(--rv-r-sm); padding: 14px var(--rv-sp-4); margin-top: 18px; }
  .sumbox .k { font-size: var(--rv-fs-xs); color: var(--rv-dim); margin-bottom: var(--rv-sp-2); font-weight: 400; }
  .bsum { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: var(--rv-fs-body); line-height: 1.5; }
  .warns { display: grid; gap: var(--rv-sp-2); margin-top: 10px; } .warns .hint { margin: 0; }
  .dfoot { display: flex; gap: 10px; margin-top: 22px; align-items: center; } .dfoot .sp { flex: 1; }
  .bfacts { margin: var(--rv-sp-4) 0 0; }
  .btw { background: var(--rv-sunk); border-radius: var(--rv-r-sm); padding: var(--rv-sp-4); margin-top: var(--rv-sp-4); }
  .btw h3 { margin: 0 0 var(--rv-sp-1); font-size: var(--rv-fs-md); font-weight: 500; } .btw .row { margin-top: var(--rv-sp-3); }
  .btw .sim { font-size: var(--rv-fs-xs); color: var(--rv-muted); margin: var(--rv-sp-3) 0 0; line-height: 1.5; }
  .btw .pdc { margin-top: var(--rv-sp-3); } .btw svg.eq { height: 130px; } .btw ul { margin: 10px 0 0; padding-left: 18px; font-size: var(--rv-fs-xs); color: var(--rv-muted); display: grid; gap: 3px; }
  .btw .dst { margin-top: 14px; }
  .bname { display: flex; align-items: flex-start; gap: var(--rv-sp-3); min-width: 0; } .bname .ic { width: 30px; height: 30px; border-radius: var(--rv-r-sm); flex: none; margin-top: 1px; } .bname .ic svg { width: 15px; height: 15px; }
  table.bt td:first-child { white-space: normal; } table.bt td .rt { white-space: normal; max-width: 460px; } table.bt td { height: auto; padding-top: 13px; padding-bottom: 13px; }
  .stt.bad { color: var(--rv-neg); } .stt.bad::before { background: var(--rv-neg); }
  #drawer-in table.sm th:first-child, #drawer-in table.sm td:first-child { padding-left: 0; } #drawer-in table.sm th:last-child, #drawer-in table.sm td:last-child { padding-right: 0; }
  .bnote { font-size: var(--rv-fs-body-sm); color: var(--rv-muted); margin: 0 0 14px; }
  .bamt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rv-sp-2) var(--rv-sp-3); margin: 0 0 var(--rv-sp-4); font-size: var(--rv-fs-sm); }
  @media (max-width: 900px) { .bk3 { grid-template-columns: 1fr; } }
  @media (max-width: 640px) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pre button > span { display: none; } .bk button { grid-template-columns: 36px minmax(0, 1fr); } .bk button .go { display: none; } .bk3 { padding: 0 14px 14px; } table.bt th:first-child, table.bt td:first-child { padding-left: var(--rv-sp-5); } table.bt th:nth-child(2), table.bt td:nth-child(2) { padding-right: var(--rv-sp-5); } }


  @media (max-width: 1180px) { .kpis { grid-template-columns: repeat(2, 1fr); } .kpis > .card.kpi + .card.kpi:nth-child(3) { border-left: 0; } .kpis > .card.kpi:nth-child(n+3) { border-top: 1px solid var(--rv-line); } .g-main { grid-template-columns: 1fr; }
    .g-ov > .stack { display: contents; } .g-ov .o1 { order: 1; } .g-ov .o2 { order: 2; } .g-ov .o3 { order: 3; } .g-ov .o4 { order: 4; } .g-ov .o5 { order: 5; } }
  @media (max-width: 860px) {
    .top { padding: var(--rv-sp-3) var(--rv-sp-4); flex-wrap: wrap; row-gap: var(--rv-sp-2); } .top #actions { width: 100%; justify-content: space-between; flex-wrap: wrap; row-gap: var(--rv-sp-2); } .top #actions:empty { display: none; } .top .sub { display: none; } .page { padding: var(--rv-sp-4) var(--rv-sp-4) 96px; } .banner { padding: var(--rv-sp-2) var(--rv-sp-4); }
    .g2 { grid-template-columns: 1fr; }
    .xchip { left: var(--rv-sp-4); right: var(--rv-sp-4); bottom: calc(72px + env(safe-area-inset-bottom)); max-width: none; flex-wrap: wrap; row-gap: 2px; border-radius: var(--rv-r-lg); }
    .xchip b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .xchip .xs { flex-basis: 100%; padding-left: 18px; } body.has-xchip .page { padding-bottom: 160px; }
    .hbar .seg button { white-space: nowrap; padding-left: 6px; padding-right: 6px; }
  }
  /* ---- sheets (Deposit, Withdraw, Transfer, Convert, Earn): the title, the form, one primary button pinned at the bottom ---- */
  .drawer .in.sh { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
  .sh-hd { display: flex; align-items: center; gap: var(--rv-sp-3); padding: var(--rv-sp-5) var(--rv-sp-6) var(--rv-sp-2); }
  .sh-hd h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--rv-fs-title); line-height: 28px; }
  .sh-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--rv-r-sm); background: none; color: var(--rv-muted); cursor: pointer; }
  .sh-x:hover { background: var(--rv-panel2); color: var(--rv-text); } .sh-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .sh-bd { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--rv-sp-6) var(--rv-sp-6); }
  .sh-bd > label.f:first-child, .sh-bd > .amt-h:first-child, .sh-bd > .blk:first-child { margin-top: var(--rv-sp-2); }
  .sh-ft { flex: none; display: grid; gap: var(--rv-sp-2); padding: var(--rv-sp-4) var(--rv-sp-6) calc(var(--rv-sp-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--rv-line); background: var(--rv-panel); }
  .sh-ft .btn { width: 100%; min-width: 0; min-height: var(--rv-h-lg); font-size: var(--rv-fs-lg); white-space: normal; text-align: center; }   /* a long label (the demo's "in the real app" in ru) wraps inside the button */
  .sh-ft .risk { margin: 0; font-size: var(--rv-fs-xs); line-height: 16px; color: var(--rv-muted); text-align: center; }
  .sh-bd .note { margin: var(--rv-sp-3) 0 0; font-size: var(--rv-fs-sm); line-height: 20px; color: var(--rv-muted); }
  .pick { position: relative; }
  .pick > summary { list-style: none; display: flex; align-items: center; gap: var(--rv-sp-3); height: var(--rv-h-lg); padding: 0 var(--rv-sp-4) 0 var(--rv-sp-3); border: 1px solid var(--rv-line2); border-radius: var(--rv-r-sm); background: var(--rv-sunk); cursor: pointer; }
  .pick > summary::-webkit-details-marker { display: none; }
  .pick > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -4px 0 0 var(--rv-sp-1); border: solid var(--rv-muted); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
  .pick[open] > summary { border-color: var(--rv-accent); } .pick[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
  .pick .nm { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pick .bal { color: var(--rv-muted); font-size: var(--rv-fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pick .lg { width: 24px; height: 24px; }
  .pick-l { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); max-height: 336px; overflow-y: auto; padding: var(--rv-sp-1); border-radius: var(--rv-r-lg); background: var(--rv-panel2); box-shadow: var(--rv-pop); }
  .pick-l button { display: flex; align-items: center; gap: var(--rv-sp-3); width: 100%; height: 44px; padding: 0 var(--rv-sp-3); border: 0; border-radius: var(--rv-r-sm); background: none; color: var(--rv-text); font: inherit; text-align: left; cursor: pointer; }
  .pick-l button:hover, .pick-l button.on { background: var(--rv-btn2); }
  /* the list's last row: an action under a hairline (+ Connect another exchange), text in the body colour, the + in a quiet tile */
  .pick-l .pick-add { position: relative; margin-top: var(--rv-sp-2); }
  .pick-l .pick-add::before { content: ""; position: absolute; left: var(--rv-sp-3); right: var(--rv-sp-3); top: calc(-1 * var(--rv-sp-1) - 1px); height: 1px; background: var(--rv-line); }
  .pick-l .pick-add .nm { font-weight: 400; }
  .pick-l .pick-add .lg.pl { background: var(--rv-btn2); color: var(--rv-muted); font-size: var(--rv-fs-lg); font-weight: 400; }
  .ro { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-3); height: var(--rv-h-md); padding: 0 var(--rv-sp-3); border-radius: var(--rv-r-sm); background: var(--rv-sunk); font-weight: 500; font-variant-numeric: tabular-nums; }
  .ro .muted { font-weight: 400; font-size: var(--rv-fs-sm); white-space: nowrap; }
  .amt-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rv-sp-3); margin: var(--rv-sp-4) 0 var(--rv-sp-2); font-size: var(--rv-fs-sm); line-height: 16px; color: var(--rv-muted); }
  .amt-h b { color: var(--rv-text); font-weight: 500; font-variant-numeric: tabular-nums; }
  .amt { position: relative; display: flex; align-items: center; }
  .amt .field { height: var(--rv-h-lg); padding-right: 120px; font-size: var(--rv-fs-lg); font-variant-numeric: tabular-nums; }
  .amt .u { position: absolute; right: 64px; color: var(--rv-muted); font-size: var(--rv-fs-sm); pointer-events: none; } .amt .u:last-child { right: var(--rv-sp-4); }
  .amt .mx { position: absolute; right: var(--rv-sp-4); border: 0; background: none; padding: 0; color: var(--rv-accent); font: 500 var(--rv-fs-sm)/20px var(--rv-font); cursor: pointer; }
  .sum { display: grid; gap: var(--rv-sp-2); margin-top: var(--rv-sp-4); }
  .sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rv-sp-4); font-size: var(--rv-fs-body); line-height: 20px; }
  .sum > div > span { color: var(--rv-muted); white-space: nowrap; } .sum > div > b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
  .blk { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-sp-3); margin-top: var(--rv-sp-3); padding: var(--rv-sp-2) var(--rv-sp-3); border-radius: var(--rv-r-sm); background: var(--rv-warn-soft); font-size: var(--rv-fs-sm); line-height: 20px; }
  .blk > span { min-width: 0; } .blk .btn { flex: none; } .blk a.lnk, .blk button.lnk { flex: none; text-decoration: none; font-weight: 500; }
  .blk .rv-tip { vertical-align: -3px; }
  @media (max-width: 640px) { .sh-hd { padding: var(--rv-sp-4) var(--rv-sp-4) var(--rv-sp-2); } .sh-bd { padding: 0 var(--rv-sp-4) var(--rv-sp-5); }
    .sh-ft { padding-left: var(--rv-sp-4); padding-right: var(--rv-sp-4); } .blk { flex-wrap: wrap; } }
  /* on a computer a sheet is Binance's centred modal (the title, the form, the button under it); a phone keeps the whole screen */
  @media (min-width: 641px) {
    .drawer:has(> .in.sh) { justify-items: center; align-items: center; padding: var(--rv-sp-6); grid-template-rows: auto; }
    .drawer .in.sh { width: 480px; height: auto; max-height: calc(100vh - 48px); border-radius: var(--rv-r-lg); border: 1px solid var(--rv-card-line); }
    .drawer .in.sh .sh-hd { padding-top: var(--rv-sp-6); } .drawer .in.sh .sh-bd { padding-bottom: var(--rv-sp-2); }
    .drawer .in.sh .sh-ft { border-top: 0; padding-bottom: var(--rv-sp-6); }
  }
  /* Binance's numbered steps (Deposit, Withdraw): a circle per step, a thin line down to the next */
  .stps { counter-reset: stp; margin-top: var(--rv-sp-2); }
  .stp { position: relative; padding: 0 0 var(--rv-sp-6) var(--rv-sp-8); counter-increment: stp; }
  .stp:last-child { padding-bottom: 0; }
  .stp::before { content: counter(stp); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
    background: var(--rv-text); color: var(--rv-bg); font: 500 var(--rv-fs-xs)/20px var(--rv-font); }
  .stp:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 28px; bottom: var(--rv-sp-2); border-left: 1px solid var(--rv-line2); }
  .stp > label.f:first-child, .stp > .amt-h:first-child { margin: 0 0 var(--rv-sp-3); font-size: var(--rv-fs-body); line-height: 20px; color: var(--rv-text); font-weight: 500; }
  .stp > .amt-h:first-child > span:last-child:not(:first-child) { font-size: var(--rv-fs-sm); color: var(--rv-muted); font-weight: 400; }
  /* Binance's Transfer: From and To in one box, the swap button on its right */
  .xft { position: relative; margin-top: var(--rv-sp-2); padding: var(--rv-sp-1) 52px var(--rv-sp-1) 0; border: 1px solid var(--rv-line2); border-radius: var(--rv-r-sm); }
  .xft-r { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; } .xft-r + .xft-r { border-top: 1px solid var(--rv-line); }
  .xft-k { padding-left: var(--rv-sp-4); color: var(--rv-muted); font-size: var(--rv-fs-sm); }
  .xft .pick > summary { border: 0; background: none; padding-left: var(--rv-sp-2); }
  .xft .pick[open] > summary { border: 0; } .xft .pick-l { left: -56px; right: -52px; }
  @media (max-width: 380px) { .xft .pick > summary .bal { display: none; } }   /* narrow phones: the name whole (Available shows the balance) */
  .xft-sw, .cvx-sw { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--rv-line2); border-radius: 999px; background: var(--rv-panel); color: var(--rv-text); cursor: pointer; }
  .xft-sw { position: absolute; right: var(--rv-sp-2); top: 50%; margin-top: -18px; }
  .xft-sw:disabled { color: var(--rv-faint); cursor: default; } .xft-sw:not(:disabled):hover, .cvx-sw:hover { border-color: var(--rv-accent); color: var(--rv-accent); }
  .xft-sw svg, .cvx-sw svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ro.ro-coin { justify-content: flex-start; } .ro-coin .lg { width: 20px; height: 20px; border-radius: 999px; font-size: var(--rv-fs-xs); }
  /* Binance's Convert: a From box and a To box, the swap button between them */
  .cvx { padding: var(--rv-sp-4); border-radius: var(--rv-r-sm); background: var(--rv-sunk); margin-top: var(--rv-sp-2); }
  .cvx-h { display: flex; justify-content: space-between; gap: var(--rv-sp-3); font-size: var(--rv-fs-sm); line-height: 16px; color: var(--rv-muted); }
  .cvx-h b { color: var(--rv-text); font-weight: 500; font-variant-numeric: tabular-nums; }
  .cvx-r { display: flex; align-items: center; gap: var(--rv-sp-3); margin-top: var(--rv-sp-3); min-height: 40px; }
  .cvx-r .rv-seg { flex: none; background: var(--rv-panel); }
  .cvx .amt { flex: 1; min-width: 0; } .cvx .amt .field { height: 40px; padding: 0 56px 0 0; border: 0; background: none; box-shadow: none; text-align: right; font-size: var(--rv-fs-title); }
  .cvx .amt .mx { right: 0; } .cvx .amt .field::placeholder { color: var(--rv-faint); }
  .cvx-slc { margin-top: var(--rv-sp-2); max-width: 160px; }       /* Convert: the customer's own max slippage (Custom) */
  .cvx-o { flex: 1; min-width: 0; text-align: right; font-size: var(--rv-fs-title); font-weight: 500; color: var(--rv-muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
  .cvx-sw { margin: calc(-1 * var(--rv-sp-3)) auto; position: relative; z-index: 1; background: var(--rv-panel2); }
  .sh-bd > .cvx:first-child { margin-top: var(--rv-sp-2); }
  /* the skeleton rows of a page that is loading */
  .sk-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--rv-sp-6); align-items: center; height: 56px; padding: 0 var(--rv-sp-5); border-top: 1px solid var(--rv-line); }
  .sk-row .rv-skel:not(:first-child) { justify-self: end; }
  /* a figure or a line still loading inside the page's real skeleton (RVSKEL below): it sits in the line its text will
     take, so the line keeps its height and nothing moves when the text arrives */
  .rv-skel.rv-sk-i { display: inline-block; vertical-align: baseline; height: .7em; min-height: 0; max-width: 100%; }
  .sk-ph { visibility: hidden; }            /* a control's place, held until the page draws the real one */
  /* Settings: one list of rows (label, value, action), as an exchange's account page */
  .st { padding: 0 var(--rv-sp-5); }
  .st-r { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; align-items: center; gap: var(--rv-sp-4); min-height: 64px; border-top: 1px solid var(--rv-line); }
  .st-r:first-child { border-top: 0; }
  /* a status sentence wraps ("No wallet connected in this browser" at 1000px and on phones); a key stays one line, cut with … */
  .st-k { font-weight: 500; } .st-v { min-width: 0; overflow-wrap: anywhere; color: var(--rv-muted); }
  .st-v:has(> code.ki) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-v > code.ki { word-break: normal; }
  .st-v b { color: var(--rv-text); font-weight: 500; } .st-a { display: flex; gap: var(--rv-sp-2); justify-content: flex-end; }
  .st .msg:empty { display: none; } .st .msg { margin: 0 0 var(--rv-sp-4); }
  /* Settings, refined (RV_ACCOUNT_LAYOUT=1): the site's four-column grid, the section name in the first column */
  .ac { --ac-cg: 48px; display: flex; flex-direction: column; gap: 48px; }   /* under the title bar: the page 40px below its grey line, as every page */
  .ac-sec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--ac-cg); align-items: start; }
  .ac-sec h2 { margin: 0; padding-top: 18px; font-size: var(--rv-fs-lg); line-height: 24px; font-weight: 500; }
  .ac-rows { grid-column: span 3; min-width: 0; }
  .ac-r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ac-cg); align-items: start; padding: 20px 0; border-top: 1px solid var(--rv-line); }
  .ac-r:first-child { border-top: 0; }
  .ac-k { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ac-k b { font-weight: 500; line-height: 20px; }
  .ac-k span { color: var(--rv-dim); font-size: var(--rv-fs-xs); line-height: 16px; max-width: 360px; }
  .ac-v { min-width: 0; overflow-wrap: anywhere; color: var(--rv-muted); line-height: 20px; }     /* a status sentence wraps */
  .ac-v:has(> .ac-key) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }          /* a key: one line, cut with … */
  .ac-v b { color: var(--rv-text); font-weight: 500; }
  .ac-key { font: var(--rv-fs-body)/20px var(--rv-mono); color: var(--rv-text); letter-spacing: .02em; }
  .ac-a { display: flex; justify-content: flex-end; gap: var(--rv-sp-2); margin-top: -6px; }
  .ac-b { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 0; border-radius: var(--rv-r-sm); background: var(--rv-btn2); color: var(--rv-text);
    font: 500 var(--rv-fs-body)/20px var(--rv-font); text-decoration: none; cursor: pointer; white-space: nowrap; }
  .ac-b:hover { background: var(--rv-btn2-hover); text-decoration: none; } .ac-b[hidden] { display: none; } .ac-b:disabled { opacity: .4; cursor: default; }
  .ac-b.pri { background: var(--rv-primary); color: var(--rv-primary-ink); } .ac-b.neg { background: none; color: var(--rv-neg); padding: 0; } .ac-b.neg:hover { background: none; text-decoration: underline; }
  .ac-sec.end .ac-r { grid-template-columns: calc(200% / 3 - var(--ac-cg) / 3) minmax(0, 1fr); } .ac-sec.end .ac-v { display: none; }
  .ac .msg:empty { display: none; } .ac .msg { margin: 0 0 var(--rv-sp-4); }
  @media (max-width: 1100px) { .ac { --ac-cg: 32px; } }
  @media (max-width: 860px) { .ac { gap: 32px; } .ac-sec { grid-template-columns: minmax(0, 1fr); } .ac-rows { grid-column: auto; }
    .ac-sec h2 { padding: 0 0 4px; }
    .ac-r, .ac-sec.end .ac-r { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--rv-sp-4); row-gap: 4px; align-items: center; padding: 16px 0; }
    .ac-a { margin-top: 0; }
    .ac-r:first-child { border-top: 1px solid var(--rv-line); }
    .ac-k { grid-column: 1; } .ac-v { grid-column: 1; grid-row: 2; font-size: var(--rv-fs-xs); line-height: 16px; } .ac-a { grid-column: 2; grid-row: 1 / 3; } }
  /* phones: the Safety row's long danger action goes under its explanation, so the explanation keeps the full width */
  @media (max-width: 860px) { .ac-sec.end .ac-r, html.rv-flat .ac-sec.end .ac-r { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
    .ac-sec.end .ac-a, html.rv-flat .ac-sec.end .ac-a { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 0; } }
  @media (max-width: 640px) { .st { padding: 0 var(--rv-sp-4); } .st-r { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding: var(--rv-sp-3) 0; }
    .st-v { grid-column: 1; grid-row: 2; font-size: var(--rv-fs-sm); } .st-a { grid-column: 2; grid-row: 1 / 3; } }
  /* Earn: the vault list (APR first, as an exchange's Earn), the sheet's action row, the footnote */
  .ev-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 860px) { .ev-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ev-strip > div:nth-child(3) { border-left: 1px solid var(--rv-line); } .ev-strip > div:nth-child(n+3) { border-top: 0; } }
  @media (max-width: 480px) { .ev-strip > div { padding: var(--rv-sp-3); } .ev-strip .v { font-size: var(--rv-fs-lg); line-height: 24px; } }
  td.ev-apr { font-weight: 500; }
  .ev-hd { flex-wrap: wrap; row-gap: var(--rv-sp-2); }
  .ev-q { display: flex; align-items: center; gap: var(--rv-sp-2); width: 240px; height: var(--rv-h-sm); padding: 0 var(--rv-sp-3); border: 1px solid var(--rv-line2); border-radius: var(--rv-r-sm); color: var(--rv-muted); }
  .ev-q:focus-within { border-color: var(--rv-accent); } .ev-q svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .ev-q input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; padding: 0; font-size: var(--rv-fs-body); color: var(--rv-text); }
  @media (max-width: 640px) { .ev-q { order: 5; width: 100%; } }
  @media (min-width: 641px) { .drawer .in.sh.wide { width: 640px; } }
  .ev-foot { margin: 0; font-size: var(--rv-fs-sm); color: var(--rv-muted); }
  .ev-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--rv-sp-2); }
  /* a vault's two ways, side by side (owner, 2026-09-30): Deposit (the vault trades your money) | Copy in my account (your
     money stays with you), one short grey line under each */
  .ev-acts.ev-2 { gap: var(--rv-sp-4); align-items: start; }
  .ev-way { display: grid; gap: 6px; min-width: 0; } .ev-way .bb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--rv-sp-2); }
  .ev-way a.btn { text-decoration: none; } .ev-way small { color: var(--rv-dim); font-size: var(--rv-fs-xs); line-height: 16px; text-align: center; }
  .evx-hd p.ev-diff, .ev-hl p.ev-diff { color: var(--rv-dim); font-size: var(--rv-fs-body); line-height: 20px; }
  .ev-diff a, .evx-hd .ev-diff a { color: var(--rv-text); font-weight: 500; text-decoration: none; } .ev-diff a:hover { text-decoration: underline; }
  .ev-terms { margin-top: var(--rv-sp-5); }
  /* signed out, Binance Earn's top: the name, one line, the way in; the key figures in a card on the right */
  .ev-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--rv-sp-6); align-items: center; padding: var(--rv-sp-8) 0; }
  .ev-hl h1 { margin: 0; font-size: var(--rv-fs-hero); line-height: 48px; font-weight: 700; letter-spacing: -.01em; }
  .ev-hl p { margin: var(--rv-sp-2) 0 0; font-size: var(--rv-fs-lg); line-height: 24px; color: var(--rv-muted); }
  .ev-hl .ev-cta { margin-top: var(--rv-sp-8); min-width: 136px; min-height: var(--rv-h-md); }
  .ev-stat { display: grid; gap: var(--rv-sp-4); padding: var(--rv-sp-6); }
  .ev-stat > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rv-sp-4); }
  .ev-stat span { color: var(--rv-muted); font-size: var(--rv-fs-body); } .ev-stat b { font-size: var(--rv-fs-title); line-height: 28px; font-weight: 600; }
  .ev-more { display: flex; justify-content: center; } .ev-more:has(> [hidden]) { display: none; }
  .ev-more .lnk { padding: var(--rv-sp-4) 0; text-decoration: none; font-weight: 500; }
  @media (max-width: 860px) { .ev-hero { grid-template-columns: 1fr; gap: var(--rv-sp-5); padding: var(--rv-sp-5) 0 var(--rv-sp-1); }
    .ev-hl h1 { line-height: 40px; } .ev-hl .ev-cta { display: flex; width: 100%; margin-top: var(--rv-sp-5); } .ev-stat { padding: var(--rv-sp-4) var(--rv-sp-5); gap: var(--rv-sp-3); } }
  /* phones: the vault list fits the screen (never a sideways scroll): the name wraps, the APR and Subscribe keep their width */
  @media (max-width: 640px) { table.evl { table-layout: fixed; } table.evl th.ev-c1 { width: 96px; } table.evl th.ev-c3 { width: 112px; } table.evl td:last-child { padding-left: var(--rv-sp-2); } table.evl td:last-child .btn { max-width: 100%; }
    table.evl td:first-child .rl { overflow-wrap: anywhere; } table.evl td.ev-apr { white-space: nowrap; } }
  .ev-desc { margin-top: var(--rv-sp-4); } .ev-desc summary { cursor: pointer; color: var(--rv-muted); font-size: var(--rv-fs-sm); }
  .sh .rv-seg.full { display: flex; } .sh .rv-seg.full > * { flex: 1; }
  .sh .agree.evok { margin: var(--rv-sp-4) 0 0; }
  .sh .dst.pdk { margin-bottom: var(--rv-sp-4); }
  /* the one skeleton shape of a card while its data loads */
  .card[aria-busy] .hd { min-height: 56px; }
  /* Transfer's "Convert first" rows */
  .xcv { margin-top: var(--rv-sp-2); }
  /* ---- under the shared header (radar/nav.py, docs/strategy/cex-style-platform.md 4): no sidebar; the page sits in the
     site's content column (1280px, 24px gutters; 16px on phones) so its left edge is the logo's; the phone tabs are the
     header's five (Home | Markets | Trade | Strategies | Assets). The old sidebar stays in the page, hidden, for the
     scripts that still fill it. ---- */
  .shell { display: block; min-height: calc(100vh - var(--rv-header-h) - var(--rv-lb-h, 0px)); }
  main { max-width: var(--rv-max); margin: 0 auto; padding: 0 var(--rv-gutter); }
  /* the title bar: one on every app page (QA 2026-09-30: 96, 88 and 124px before), the public pages' title block (/bots,
     /copy, /markets, /setups: a 20px title 32px under the header, one grey line 4px under it, the page 40px below): 124px
     on desktop at every width, the buttons on the grey line's baseline; phones 24px under the header, the buttons on a row */
  .top { position: static; align-items: flex-end; padding: var(--rv-sp-8) 0 var(--rv-sp-10); min-height: 0; border-bottom: 0; background: none; }
  .top h1 { font-size: var(--rv-fs-title); line-height: 28px; letter-spacing: 0; margin: 0 0 var(--rv-sp-1); }
  .top .sub { display: block; min-height: 20px; color: var(--rv-muted); font-size: var(--rv-fs-body); line-height: 20px; }
  @media (min-width: 861px) { .top #actions { flex-shrink: 0; flex-wrap: nowrap; } }       /* the buttons on one line, on the right edge */
  .page { padding: 0 0 var(--rv-sp-14); max-width: none; }
  .banner { margin: var(--rv-sp-4) 0 0; border-radius: var(--rv-r-sm); padding: var(--rv-sp-2) var(--rv-sp-4); }
  .drawer { z-index: 55; }                         /* side panels over the header, like the account sheet */
  body:has(main.wsh) .rv-foot .fw { max-width: none; }   /* the wallet's full-width pages: the footer on the same edges */
  @media (min-width: 1181px) { .su > .stack:last-child { top: 80px; } }
  @media (max-width: 860px) {
    .top { padding: var(--rv-sp-6) 0 28px; row-gap: var(--rv-sp-4); } .top .sub { display: block; white-space: normal; }
    .top .sp { display: none; }                      /* the buttons' row 16px under the grey line, however long the line */ .page { padding: 0 0 var(--rv-sp-14); }
    .xchip { bottom: calc(72px + env(safe-area-inset-bottom)); }
  }
  /* ---- My bots and Signals (main.bm, app-core.js render): the Bots overview's language (radar/bots_hub.py .bl): the title
     at 20px over one grey line, figures without boxes on a four-column grid, sections on hairlines, no cards, no pop-up
     (owner's taste, 2026-09-28) ---- */
  main.bm .page { gap: 72px; }
  main.bm .card { background: none; border: 0; border-radius: 0; box-shadow: none; }
  main.bm .card > .hd, main.bm .gh { display: flex; align-items: center; gap: var(--rv-sp-4); min-height: 32px; padding: 0; margin: 0 0 var(--rv-sp-2); }
  main.bm .card > .hd h2, main.bm .gh h2 { font-size: var(--rv-fs-lg); line-height: 24px; font-weight: 500; white-space: nowrap; }
  main.bm .card > .pad { padding: 0; }
  main.bm .gh.next { margin-top: 0; }
  main.bm .page > .gh + .card, main.bm .page > .gh + .stack, main.bm .page > .gh + div { margin-top: calc(-72px + var(--rv-sp-2)); }   /* a heading keeps its list */
  main.bm .tw { border-top: 1px solid var(--rv-line); }
  main.bm th:first-child, main.bm td:first-child { padding-left: 0; } main.bm th:last-child, main.bm td:last-child { padding-right: 0; }
  main.bm tr:last-child td { border-bottom: 1px solid var(--rv-line); }
  main.bm tr.click:hover td { background: none; } main.bm tr.click:hover .bname b { color: var(--rv-accent); }
  main.bm .bname .ic { background: none; width: 24px; height: 24px; color: var(--rv-muted); }
  main.bm table .btn.ghost.sm { background: none; border: 0; padding: 0 0 0 var(--rv-sp-4); min-height: 0; height: auto; color: var(--rv-muted); font-weight: 500; }
  main.bm table .btn.ghost.sm:hover { color: var(--rv-accent); }
  main.bm .empty { text-align: left; padding: var(--rv-sp-6) 0 0; border-top: 1px solid var(--rv-line); }
  main.bm .empty::before { display: none; }
  main.bm .empty b { font-size: var(--rv-fs-lg); line-height: 24px; font-weight: 500; margin-bottom: var(--rv-sp-1); }
  main.bm .hint { margin: 0; }
  main.bm .tgl { border-top: 1px solid var(--rv-line); } main.bm .tgi, main.bm .tgc { padding-left: 0; padding-right: 0; }
  main.bm .tgi:last-child, main.bm .tgc:last-child { border-bottom: 1px solid var(--rv-line); }
  main.bm .tgadd { padding: var(--rv-sp-4) 0 0; border-top: 0; }
  main.bm .tgn { padding: var(--rv-sp-3) 0 0; } main.bm .tgn p { margin: 0; font-size: var(--rv-fs-xs); line-height: 16px; }
  main.bm .tgs { gap: 72px; }
  main.bm .g-main { gap: 72px; } main.bm .stack { gap: 72px; }
  .bm-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 48px; }
  .bm-figs .f { display: flex; flex-direction: column; gap: var(--rv-sp-1); min-width: 0; }
  .bm-figs .f > span { color: var(--rv-muted); font-size: var(--rv-fs-body); line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bm-figs .f > b { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bm-figs .f > b .of { color: var(--rv-dim); font-size: var(--rv-fs-lg); font-weight: 500; letter-spacing: 0; }
  .bm-figs .f > small { color: var(--rv-dim); font-size: var(--rv-fs-body); line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bm-sh { display: flex; align-items: center; gap: var(--rv-sp-4); min-height: 32px; margin: 0 0 var(--rv-sp-2); }
  .bm-sh h2 { margin: 0; font-size: var(--rv-fs-lg); line-height: 24px; font-weight: 500; white-space: nowrap; }
  .bm-sh .c { color: var(--rv-dim); font-size: var(--rv-fs-body); line-height: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bm-sh .r { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--rv-sp-4); }
  .bm-sh .r a { color: var(--rv-muted); font-size: var(--rv-fs-body); } .bm-sh .r a:hover { color: var(--rv-text); text-decoration: none; }
  .bm-none { margin: 0; padding: var(--rv-sp-6) 0; border-top: 1px solid var(--rv-line); border-bottom: 1px solid var(--rv-line); color: var(--rv-muted); font-size: var(--rv-fs-body); line-height: 20px; }
  .bm-none b { display: block; color: var(--rv-text); font-size: var(--rv-fs-lg); line-height: 24px; font-weight: 500; margin: 0 0 var(--rv-sp-1); }
  .bm-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 48px; margin: 0; padding: 0; list-style: none; }   /* the figures' four columns */
  .bm-how li { display: flex; flex-direction: column; gap: var(--rv-sp-1); min-width: 0; }
  .bm-how i { font-style: normal; color: var(--rv-dim); font-size: var(--rv-fs-body); line-height: 20px; font-variant-numeric: tabular-nums; margin: 0 0 var(--rv-sp-2); }
  .bm-how b { font-size: var(--rv-fs-lg); line-height: 24px; font-weight: 500; } .bm-how span { color: var(--rv-muted); font-size: var(--rv-fs-body); line-height: 20px; }
  .bm-how code.ki { display: inline-block; margin-top: var(--rv-sp-1); word-break: normal; overflow-wrap: anywhere; }
  .bm-foot { margin: calc(-72px + var(--rv-sp-6)) 0 0; color: var(--rv-dim); font-size: var(--rv-fs-xs); line-height: 16px; }
  .bm-foot a { color: var(--rv-muted); } .bm-foot a:hover { color: var(--rv-text); }
  /* copy trading (s/copy: copying, not copying, the setup) in the same language: Settings, About and Summary as rows on
     hairlines under their heading, the setup form and How it works without their boxes, the trader as plain text */
  main.bm .cpy-tr { display: inline-block; vertical-align: top; color: inherit; font-size: var(--rv-fs-page); line-height: inherit; } main.bm .cpy-tr:hover { color: var(--rv-accent); text-decoration: none; }   /* an address: a figure's line, whole at 1000px */
  @media (max-width: 860px) { main.bm .cpy-tr { font-size: var(--rv-fs-title); } }
  main.bm :is(.sset, .ssum) > .pad { border-top: 1px solid var(--rv-line); }
  main.bm :is(.sset, .ssum) .rw { padding: 10px 0; font-size: var(--rv-fs-body); line-height: 20px; }
  main.bm :is(.sset, .ssum) .rw:first-child { padding-top: 10px; }
  main.bm .sset .pad > .rw:last-child, main.bm .sset .pad > details.rwd:last-child > summary.rw { border-bottom: 1px solid var(--rv-line); padding-bottom: 10px; }
  main.bm .sset .pad > .hint:first-child { margin: var(--rv-sp-3) 0; }
  main.bm .sform .tabs { padding: 0; height: 40px; overflow: visible; }      /* the Summary heading's height: one hairline across */
  main.bm .sform .tabs button { height: 40px; padding: 0 0 var(--rv-sp-2); line-height: 32px; } main.bm .sform .tp { padding: var(--rv-sp-5) 0 0; }
  main.bm .sinfo summary { min-height: 32px; padding: 0; margin: 0 0 var(--rv-sp-2); }
  main.bm .sinfo h3 { font-size: var(--rv-fs-lg); line-height: 24px; font-weight: 500; }
  main.bm .sinfo .sib { padding: var(--rv-sp-4) 0 0; border-top: 1px solid var(--rv-line); } main.bm .sinfo ol { margin: 0; }
  main.bm .sset > .hd .btn.ghost.sm { margin: 0; padding: 0; min-height: 0; height: auto; border: 0; background: none; color: var(--rv-muted); font-weight: 500; }
  main.bm .sset > .hd .btn.ghost.sm:hover { color: var(--rv-accent); }
  main.bm table.cpt td { height: 56px; } main.bm .pcts span { margin-left: 0; }     /* "of $612 on Hyperliquid" keeps the left edge when it wraps */
  .bm-how > li > b:empty { display: none; } .bm-how span b { font-size: inherit; line-height: inherit; font-weight: 500; color: var(--rv-text); }   /* a step as one sentence */
  /* one grid: the two columns sit on the figures' four (two each), the setup's too */
  main.bm .cpy-g, main.bm .g-main.su { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  @media (max-width: 1180px) { main.bm .cpy-g, main.bm .g-main.su { column-gap: var(--rv-sp-8); } }
  @media (max-width: 860px) { main.bm .cpy-g, main.bm .g-main.su { grid-template-columns: minmax(0, 1fr); } main.bm :is(.cpy-g, .su) > .stack { display: contents; } main.bm .cpy-g .cab, main.bm .su .sinfo { order: 1; } }
  @media (max-width: 1180px) { .bm-figs { column-gap: var(--rv-sp-8); } .bm-how { column-gap: var(--rv-sp-8); } }
  @media (max-width: 860px) {
    main.bm .page, main.bm .tgs, main.bm .g-main, main.bm .stack { gap: 48px; }
    main.bm .page > .gh + .card, main.bm .page > .gh + .stack, main.bm .page > .gh + div { margin-top: calc(-48px + var(--rv-sp-2)); }
    .bm-foot { margin-top: calc(-48px + var(--rv-sp-6)); } .bm-figs .f > small { white-space: normal; }
    .bm-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rv-sp-6); row-gap: var(--rv-sp-5); }
    .bm-figs .f > span { font-size: var(--rv-fs-xs); line-height: 16px; } .bm-figs .f > b { font-size: var(--rv-fs-page); line-height: 32px; }
    .bm-how { grid-template-columns: minmax(0, 1fr); row-gap: var(--rv-sp-6); }
  }
  /* ---- the flat surface (html.rv-flat: My bots, Signals, Settings; radar/theme.py): the language of the landing and the
     guided bot setup (/bots/new, radar/web/bot-flow.css). One page colour, hairlines, no boxes; a 32px title over one
     16px grey line; 20px section heads; 13px muted labels; tabular figures, colour only on up / down numbers; secondary
     actions as quiet text, one white (dark) / black (light) primary. Side panels and sheets on the same surface with one
     hairline edge. Everything on the 4px scale, 16 / 12px between controls. ---- */
  html.rv-flat .top { padding: var(--rv-sp-10) 0 var(--rv-sp-10); align-items: flex-end; }
  html.rv-flat .top h1 { font: 600 var(--rv-fs-32)/40px var(--rv-font-display); letter-spacing: -.02em; margin: 0; }
  html.rv-flat .top .sub { margin-top: var(--rv-sp-2); font-size: var(--rv-fs-16); line-height: 24px; color: var(--rv-muted); }
  html.rv-flat .top #actions .btn { min-height: 40px; padding: 0 var(--rv-sp-5); font-size: var(--rv-fs-14); }
  /* phones: the four money buttons share the row in equal columns; long languages (Пополнить, Auszahlen) keep their
     words inside them (the 20px padding above is for the desktop row) */
  @media (max-width: 860px) { html.rv-flat .top #actions:has(> [data-money="in"]) .btn { padding: 0 2px; font-size: var(--rv-fs-body-sm); } }
  html.rv-flat .btn.ghost { background: none; box-shadow: inset 0 0 0 1px var(--rv-line2); }
  html.rv-flat .btn.ghost:hover { background: none; box-shadow: inset 0 0 0 1px var(--rv-muted); }
  html.rv-flat .btn.danger { background: none; color: var(--rv-neg); box-shadow: inset 0 0 0 1px var(--rv-line2); }
  html.rv-flat .hint { background: none; border-left: 2px solid var(--rv-line2); border-radius: 0; padding: 2px 0 2px var(--rv-sp-3); color: var(--rv-muted); font-size: var(--rv-fs-13); line-height: 20px; }
  html.rv-flat .hint.warn { background: none; border-left-color: var(--rv-warn); color: var(--rv-text); }
  html.rv-flat .banner { background: none; color: var(--rv-muted); border-left: 2px solid var(--rv-accent); border-radius: 0; padding: 2px 0 2px var(--rv-sp-3); }
  html.rv-flat main.bm .page { gap: 64px; }
  html.rv-flat main.bm .page > .gh + .card, html.rv-flat main.bm .page > .gh + .stack, html.rv-flat main.bm .page > .gh + div { margin-top: calc(-64px + var(--rv-sp-4)); }
  html.rv-flat main.bm .tgs, html.rv-flat main.bm .g-main, html.rv-flat main.bm .stack { gap: 64px; }
  html.rv-flat :is(.bm-sh, main.bm .card > .hd, main.bm .gh) { min-height: 28px; margin: 0 0 var(--rv-sp-4); }
  html.rv-flat :is(.bm-sh h2, main.bm .card > .hd h2, main.bm .gh h2) { font-size: var(--rv-fs-20); line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
  html.rv-flat .bm-sh .c { color: var(--rv-muted); }
  /* the four figures: 13px labels, 32px figures in the display cut, one grey line */
  html.rv-flat .bm-figs .f > span { font-size: var(--rv-fs-13); line-height: 16px; font-weight: 500; }
  html.rv-flat .bm-figs .f > b { margin-top: var(--rv-sp-1); font-family: var(--rv-font-display); letter-spacing: -.02em; }
  html.rv-flat .bm-figs .f > small { font-size: var(--rv-fs-13); line-height: 20px; color: var(--rv-muted); }
  html.rv-flat .bm-none { padding: var(--rv-sp-8) 0; border-bottom: 0; font-size: var(--rv-fs-14); }
  html.rv-flat .bm-none b { font-size: var(--rv-fs-16); margin-bottom: var(--rv-sp-1); }
  html.rv-flat .bm-how i { font-size: var(--rv-fs-13); color: var(--rv-muted); margin: 0 0 var(--rv-sp-3); }
  html.rv-flat .bm-how b { font-size: var(--rv-fs-16); }
  html.rv-flat .bm-foot { margin-top: calc(-64px + var(--rv-sp-8)); font-size: var(--rv-fs-13); line-height: 20px; color: var(--rv-muted); }
  html.rv-flat code.ki, html.rv-flat code.k { background: none; box-shadow: inset 0 0 0 1px var(--rv-line2); }
  /* the bots as rows: 64px, the name over one grey line, P&L as the one coloured figure, the actions as quiet words */
  html.rv-flat main.bm .tw { border-top: 1px solid var(--rv-line); }
  html.rv-flat main.bm table th { height: 40px; padding-top: 0; padding-bottom: 0; color: var(--rv-muted); font-size: var(--rv-fs-12); font-weight: 400; }
  html.rv-flat main.bm table td { height: 64px; padding-top: var(--rv-sp-3); padding-bottom: var(--rv-sp-3); font-size: var(--rv-fs-14); }
  html.rv-flat main.bm table.bt td:first-child { white-space: normal; }
  html.rv-flat main.bm .bname { align-items: center; gap: var(--rv-sp-4); }
  html.rv-flat main.bm .bname .ic { width: 20px; height: 20px; margin: 0; } html.rv-flat main.bm .bname .ic svg { width: 20px; height: 20px; }
  html.rv-flat main.bm .bname b { font-size: var(--rv-fs-14); font-weight: 500; }
  html.rv-flat main.bm table .rt { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; margin-top: 2px; font-size: var(--rv-fs-13); line-height: 20px; color: var(--rv-muted); }
  html.rv-flat main.bm table .stt { font-size: var(--rv-fs-13); color: var(--rv-muted); }   /* the dot carries the state; colour stays on P&L */
  html.rv-flat main.bm tr.click { cursor: pointer; }
  html.rv-flat main.bm tr.click:hover td { background: color-mix(in srgb, var(--rv-text) 3%, transparent); }
  html.rv-flat main.bm tr.click:hover .bname b { color: var(--rv-text); }
  html.rv-flat main.bm table .btn.ghost.sm { box-shadow: none; font-size: var(--rv-fs-14); }
  html.rv-flat main.bm table .btn.ghost.sm:hover { color: var(--rv-text); }
  /* the side panel (a bot's detail) and the sheets: the page colour, one hairline edge, figures without boxes */
  html.rv-flat .drawer .in { background: var(--rv-bg); box-shadow: none; border-left: 1px solid var(--rv-line); padding: var(--rv-sp-6) var(--rv-sp-8) var(--rv-sp-10); }
  html.rv-flat .drawer .dhd { flex-wrap: wrap; gap: var(--rv-sp-3); margin-bottom: var(--rv-sp-6); padding-bottom: var(--rv-sp-6); border-bottom: 1px solid var(--rv-line); }
  html.rv-flat .drawer .dhd h2 { font: 600 var(--rv-fs-20)/28px var(--rv-font-display); letter-spacing: -.01em; }
  html.rv-flat .drawer .dhd .ic { background: none !important; color: var(--rv-muted); width: 24px !important; height: 24px !important; }
  html.rv-flat .drawer .dhd .ic svg { width: 20px; height: 20px; }
  html.rv-flat .drawer .dhd .stt { color: var(--rv-muted); }
  html.rv-flat .dst > div { background: none; border-radius: 0; padding: 0; gap: var(--rv-sp-1); }
  html.rv-flat .dst { gap: var(--rv-sp-6); } html.rv-flat .dst > div > span { font-size: var(--rv-fs-13); color: var(--rv-muted); }
  html.rv-flat .dst b { font-size: var(--rv-fs-20); line-height: 28px; font-weight: 600; }
  html.rv-flat .pdc { background: none; border-radius: 0; padding: var(--rv-sp-3) 0 0; border-top: 1px solid var(--rv-line); }
  html.rv-flat .bamt { margin: var(--rv-sp-4) 0 var(--rv-sp-6); }
  html.rv-flat .xlbl { margin: 0 0 var(--rv-sp-3); font-size: var(--rv-fs-13); line-height: 16px; font-weight: 500; color: var(--rv-muted); }
  html.rv-flat .bsum { gap: var(--rv-sp-2); font-size: var(--rv-fs-14); line-height: 22px; }
  html.rv-flat .pdd { gap: 0 var(--rv-sp-6); } html.rv-flat .pdd > div { padding: var(--rv-sp-3) 0; border-top: 1px solid var(--rv-line); }
  html.rv-flat .pdd dt { font-size: var(--rv-fs-13); color: var(--rv-muted); } html.rv-flat .pdd dd { font-size: var(--rv-fs-14); }
  html.rv-flat .drawer table th:first-child, html.rv-flat .drawer table td:first-child { padding-left: 0; }
  html.rv-flat .drawer table th:last-child, html.rv-flat .drawer table td:last-child { padding-right: 0; }
  html.rv-flat .ntc .box { background: var(--rv-bg); box-shadow: 0 0 0 1px var(--rv-line2), var(--rv-pop); }
  html.rv-flat .ntc .box.ask h3 { font-size: var(--rv-fs-20); line-height: 28px; margin: 0 0 var(--rv-sp-2); }
  html.rv-flat .aopts { gap: 0; margin-top: var(--rv-sp-4); border-top: 1px solid var(--rv-line); }
  html.rv-flat .aopts .btn { align-items: flex-start; min-height: 0; padding: var(--rv-sp-3) 0; border-radius: 0; background: none; box-shadow: none; color: var(--rv-text); border-bottom: 1px solid var(--rv-line); text-align: left; }
  html.rv-flat .aopts .btn:hover { background: color-mix(in srgb, var(--rv-text) 3%, transparent); }
  html.rv-flat .aopts .btn.danger { color: var(--rv-neg); }
  html.rv-flat .aopts .btn span { color: var(--rv-muted); opacity: 1; font-size: var(--rv-fs-13); line-height: 20px; }
  /* Settings: the section's name in the first column, its rows on hairlines, actions as quiet outlined buttons */
  html.rv-flat .ac { gap: 48px; }
  html.rv-flat .ac-sec h2 { padding-top: 16px; font-size: var(--rv-fs-20); line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
  html.rv-flat .ac-rows { border-top: 1px solid var(--rv-line); }
  html.rv-flat .ac-r:first-child { border-top: 0; }
  html.rv-flat .ac-r { padding: 20px 0; }
  html.rv-flat .ac-k b { font-size: var(--rv-fs-14); }
  html.rv-flat .ac-k span { font-size: var(--rv-fs-13); line-height: 20px; color: var(--rv-muted); }
  html.rv-flat .ac-v { font-size: var(--rv-fs-14); }
  html.rv-flat .ac-b { background: none; box-shadow: inset 0 0 0 1px var(--rv-line2); font-weight: 500; }
  html.rv-flat .ac-b:hover { background: none; box-shadow: inset 0 0 0 1px var(--rv-muted); }
  html.rv-flat .ac-b.pri { background: var(--rv-primary); color: var(--rv-primary-ink); box-shadow: none; }
  html.rv-flat .ac-b.neg { box-shadow: none; }
  html.rv-flat .ac-a { margin-top: -6px; }
  /* the theme and language controls: bot setup's segmented control and a quiet select */
  .ac-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--rv-r-sm); box-shadow: inset 0 0 0 1px var(--rv-line2); }
  .ac-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: var(--rv-r-sm); background: none; color: var(--rv-muted); font: 500 var(--rv-fs-13)/20px var(--rv-font); cursor: pointer; }
  .ac-seg button:hover { color: var(--rv-text); } .ac-seg button.on { background: var(--rv-bg-2); color: var(--rv-text); }
  html[data-theme="light"] .ac-seg button.on { background: var(--rv-bg-3); }
  .ac-sel { position: relative; display: inline-flex; align-items: center; }
  .ac-sel select { appearance: none; -webkit-appearance: none; height: 32px; padding: 0 32px 0 12px; border: 0; border-radius: var(--rv-r-sm); background: none; box-shadow: inset 0 0 0 1px var(--rv-line2);
    color: var(--rv-text); font: 500 var(--rv-fs-13)/20px var(--rv-font); cursor: pointer; }
  .ac-sel select:hover { box-shadow: inset 0 0 0 1px var(--rv-muted); } .ac-sel select option { background: var(--rv-panel); color: var(--rv-text); }
  .ac-sel svg { position: absolute; right: 10px; width: 14px; height: 14px; fill: none; stroke: var(--rv-muted); stroke-width: 1.8; pointer-events: none; }
  @media (max-width: 860px) {
    html.rv-flat .top { padding: var(--rv-sp-6) 0 var(--rv-sp-8); }
    html.rv-flat .top h1 { font-size: var(--rv-fs-24); line-height: 32px; }
    html.rv-flat .top .sub { font-size: var(--rv-fs-14); line-height: 20px; }
    html.rv-flat main.bm .page, html.rv-flat main.bm .tgs, html.rv-flat main.bm .g-main, html.rv-flat main.bm .stack { gap: 48px; }
    html.rv-flat main.bm .page > .gh + .card, html.rv-flat main.bm .page > .gh + .stack, html.rv-flat main.bm .page > .gh + div { margin-top: calc(-48px + var(--rv-sp-4)); }
    html.rv-flat .bm-foot { margin-top: calc(-48px + var(--rv-sp-6)); }
    html.rv-flat .bm-figs .f > b { font-size: var(--rv-fs-24); line-height: 32px; }
    html.rv-flat main.bm table td { height: 64px; }
    html.rv-flat .drawer .in { padding: var(--rv-sp-5) var(--rv-sp-4) var(--rv-sp-10); border-left: 0; }
    html.rv-flat .ac { gap: 40px; } html.rv-flat .ac-sec h2 { padding: 0 0 var(--rv-sp-3); }
    html.rv-flat .ac-rows { border-top: 1px solid var(--rv-line); } html.rv-flat .ac-r:first-child { border-top: 0; }
    html.rv-flat .ac-r { padding: 16px 0; }
  }
  /* ---- one flat surface (html.rv-flat, with body.rv-fv on Assets, Earn and Copy: app-core.js render; radar/theme.py FLAT): the
     landing's and /bots/new's language. The title 32px over one 16px line, 40px above and below; sections on the page
     colour without boxes, divided by hairlines, a 20px heading each; table heads in 12px caps; colour only on figures,
     monochrome badges and lines; the sheets stay raised. ---- */
  body.rv-fv .top { padding: var(--rv-sp-10) 0; }
  body.rv-fv .top h1 { font: 600 var(--rv-fs-32)/40px var(--rv-font-display); letter-spacing: var(--rv-ls-32); margin: 0; }
  body.rv-fv .top .sub { min-height: 24px; margin-top: var(--rv-sp-2); font-size: var(--rv-fs-16); line-height: 24px; }
  body.rv-fv main:not(.bm) .page { gap: var(--rv-sp-8); }
  body.rv-fv main .card { background: none; border: 0; border-radius: 0; box-shadow: none; }
  body.rv-fv main .card > .hd { min-height: 28px; padding: 0; margin: 0 0 var(--rv-sp-4); }
  body.rv-fv main .card > .hd h2 { font-size: var(--rv-fs-20); line-height: 28px; font-weight: 600; letter-spacing: var(--rv-ls-20); }
  html.rv-flat .drawer .in.sh { padding: 0; } html.rv-flat .drawer .sh-ft { background: var(--rv-bg); }   /* the money sheets pad their own header, body and foot */
  body.rv-fv main .card > .pad { padding: 0; } body.rv-fv main .card.as-hero { padding: 0; }   /* the loading shape keeps its place when app-assets.js styles arrive */
  body.rv-fv main .kpis { background: none; box-shadow: none; border-radius: 0; border-top: 1px solid var(--rv-line); border-bottom: 1px solid var(--rv-line); }
  body.rv-fv main .kpis > .card.kpi { padding: var(--rv-sp-5) var(--rv-sp-6); } body.rv-fv main .kpis > .card.kpi:first-child { padding-left: 0; }
  body.rv-fv main .kpi .k { font-size: var(--rv-fs-13); } body.rv-fv main .kpi .v { font-family: var(--rv-font-display); }
  body.rv-fv main th { height: 44px; padding-top: 0; padding-bottom: 0; color: var(--rv-muted); font-size: var(--rv-fs-12); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-feature-settings: "case" 1; }
  body.rv-fv main th :is(button, a) { text-transform: inherit; letter-spacing: inherit; font-weight: inherit; }
  body.rv-fv main :is(th, td):first-child { padding-left: 0; } body.rv-fv main :is(th, td):last-child { padding-right: 0; }
  /* a phone hides columns (.hm): the last one still shown ends on the hairline's end too (History's P&L sat 12px in) */
  @media (max-width: 640px) { body.rv-fv main :is(th, td):not(.hm):not(:has(~ :is(th, td):not(.hm))) { padding-right: 0; } }
  body.rv-fv main td { height: 56px; padding-top: var(--rv-sp-2); padding-bottom: var(--rv-sp-2); }
  body.rv-fv main tr:last-child td { border-bottom: 1px solid var(--rv-line); }
  body.rv-fv main tr.click:hover td { background: none; } body.rv-fv main tr.click:hover td:first-child b { color: var(--rv-accent); }
  body.rv-fv main .tag { background: var(--rv-btn2); color: var(--rv-muted); }
  body.rv-fv main .empty { text-align: left; padding: var(--rv-sp-6) 0; border-top: 1px solid var(--rv-line); border-bottom: 1px solid var(--rv-line); }
  body.rv-fv main .empty::before { display: none; }
  body.rv-fv main .empty b { font-size: var(--rv-fs-16); line-height: 24px; }
  /* lines in the text colour, no tinted areas (Earn's record, the analysis curve; the vault sheet's chart too, which sits in
     the drawer, outside #page: audit ui-pages-16) */
  body.rv-fv :is(#page svg, #drawer svg#ev-ch) path[fill^="url("] { display: none; }
  body.rv-fv :is(#page svg:is(#evb-ch, .eq), #drawer svg#ev-ch) path[fill="none"] { stroke: var(--rv-text); stroke-width: 1.6; }
  /* the wallet's tabs: the bot setup's 2px ink; on phones 13px and History short, so the six fit 358px */
  .bw-tabs .ts { display: none; }
  #ws.bw-tabs:empty { display: none; }   /* the wallet's tabs hold their place (app-assets.js .bw-tabs) until they fill in */
  body.rv-wal #ws.bw-tabs:empty { display: block; height: 40px; margin: 0 0 var(--rv-sp-10); border-bottom: 1px solid var(--rv-line); }
  @media (max-width: 860px) { body.rv-wal #ws.bw-tabs:empty { margin: 0 calc(-1 * var(--rv-gutter)) var(--rv-sp-6); } }
  @media (max-width: 860px) {
    body.rv-fv .top { padding: var(--rv-sp-6) 0; }
    body.rv-fv .top h1 { font-size: var(--rv-fs-24); line-height: 32px; letter-spacing: var(--rv-ls-24); }
    body.rv-fv .top .sub { font-size: var(--rv-fs-14); line-height: 20px; }
    body.rv-fv .bw-tabs { gap: var(--rv-sp-2); justify-content: space-between; } body.rv-fv .bw-tabs a { font-size: var(--rv-fs-13); }
    .bw-tabs .tl { display: none; } .bw-tabs .ts { display: inline; }
    body.rv-fv main .kpis > .card.kpi { padding: var(--rv-sp-4) var(--rv-sp-4) var(--rv-sp-4) 0; }
    body.rv-fv main .kpis > .card.kpi:nth-child(odd) { padding-left: 0; }
  }
  /* ==== the workspace design (owner, 2026-10-06: the GPT-built workspace, radar/web/ws.css under .ws) ====================
     The app's content (main#rv-main, the shell draws the sidebar and top bar around it) and its pop-ups (#ws-layer) carry
     class ws. My bots, Portfolio, Activity and Settings are written in the prototype's own markup (.ws-view: page-heading,
     metrics, panels, filter-tabs, table-wrap, setting-row, pills); every other view and sheet keeps its markup and takes the
     same look from the app's tokens mapped onto the workspace palette below, plus the few rules that keep its controls whole
     under the workspace's element rules (.ws button / input / label). */
  /* the colours, lines and type families are rv-tokens.css's alone (owner, 2026-10-10 final check: mapping them here onto
     ws.css's names, which ws.css maps back onto these, made a cycle that left them empty in the app) */
  .ws-app, .ws-layer {
    --rv-r-xs: 4px; --rv-r-sm: 6px; --rv-r-md: 7px; --rv-r-lg: 9px; --rv-r-xl: 14px;
  }
  .ws.ws-app { background: none; min-height: 0; }
  .ws.ws-layer { display: contents; }
  .ws-app #rv-main { display: block; }
  /* the view's heading (setTop): the prototype's page-heading; hidden while a view has none (Log in) */
  .ws-app #top { position: static; min-height: 0; padding: 0; background: none; }
  .ws-app #top h1:empty + p:empty { display: none; }
  .ws-app #top > div:first-child { min-width: 0; }
  .ws-app #top p:empty { display: none; }
  .ws-app p, :is(.ws-app, .ws-layer) :is(h2, h3) { line-height: 1.5; }
  .ws-app #actions { flex-wrap: wrap; justify-content: flex-end; }
  .ws-app .page { padding: 0; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ws-app .page > .ws-view { display: block; min-width: 0; }
  /* the demo's and testnet's strip, full width under the top bar as the prototype's (the content's own padding pulled back) */
  .ws-app #banner { margin: -30px -34px 30px; }
  .ws-app #banner a { color: var(--accent); font-weight: 550; }
  .ws-app #banner .pill { text-transform: uppercase; letter-spacing: .02em; }
  @media (min-width: 1600px) { .ws-app #banner { margin-top: -36px; margin-bottom: 36px; } }
  @media (max-width: 1180px) { .ws-app #banner { margin: -25px -25px 25px; } }
  @media (max-width: 980px) { .ws-app #banner { margin: -25px -20px 25px; } }
  @media (max-width: 760px) { .ws-app #banner { margin: -24px -17px 24px; } }
  /* the wallet tabs strip of the older Assets layout is not used: Portfolio draws its own filter tabs */
  .ws-app #ws.bw-tabs:empty { display: none !important; }
  .ws-app #ws.bw-tabs { display: flex; gap: 6px; height: auto; margin: 0 0 22px; border: 0; overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ws-app #ws.bw-tabs a { height: auto; padding: 8px 13px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
  .ws-app #ws.bw-tabs a:hover, .ws-app #ws.bw-tabs a.on { background: #343941; border-color: #656e7b; color: var(--accent); }
  .ws-app #ws.bw-tabs a.on::after { display: none; }
  [data-theme="light"] .ws-app #ws.bw-tabs a:is(:hover, .on) { background: #eef0f2; border-color: #c4c9cf; }
  @media (max-width: 760px) { .ws-app #ws.bw-tabs { margin-bottom: 17px; } .ws-app #ws.bw-tabs a { font-size: 10px; padding: 7px 10px; } }

  /* ---- older views and sheets under the workspace's element rules ---- */
  :is(.ws-app, .ws-layer) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--rv-primary); border-radius: 7px;
    background: var(--rv-primary); color: var(--rv-primary-ink); min-height: 36px; padding: 8px 15px; font-size: 12px; line-height: 18px; font-weight: 650; }
  :is(.ws-app, .ws-layer) .btn:hover { background: var(--rv-primary-hover); }
  :is(.ws-app, .ws-layer) .btn.ghost { background: transparent; color: var(--text); border-color: var(--border); font-weight: 550; }
  :is(.ws-app, .ws-layer) .btn.ghost:hover { background: var(--panel2); }
  :is(.ws-app, .ws-layer) .btn.danger { color: var(--red); background: var(--rv-neg-soft); border-color: #593435; }
  [data-theme="light"] :is(.ws-app, .ws-layer) .btn.danger { border-color: #e8c9cb; }
  :is(.ws-app, .ws-layer) .btn.sm { min-height: 30px; padding: 6px 11px; font-size: 11px; }
  :is(.ws-app, .ws-layer) .btn:disabled { opacity: .45; }
  :is(.ws-app, .ws-layer) .card { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; box-shadow: none; }
  /* the Log in card on a phone: open on the page, as its own rule above says (no frame round content that has no inset) */
  @media (max-width: 640px) { :is(.ws-app, .ws-layer) .hello.card { background: none; border: 0; border-radius: 0; } }
  :is(.ws-app, .ws-layer) .card > .hd { padding: 18px 21px 8px; }
  :is(.ws-app, .ws-layer) .card > .hd h2, :is(.ws-app, .ws-layer) h2 { font-family: var(--font); font-weight: 650; letter-spacing: -.2px; }
  :is(.ws-app, .ws-layer) .seg { background: #141619; border: 1px solid var(--border); border-radius: 6px; padding: 3px; }
  :is(.ws-app, .ws-layer) .seg button { border-radius: 4px; font-size: 11px; }
  :is(.ws-app, .ws-layer) .seg button.on { background: #353a42; color: var(--text); }
  [data-theme="light"] :is(.ws-app, .ws-layer) .seg { background: #f3f4f6; } [data-theme="light"] :is(.ws-app, .ws-layer) .seg button.on { background: #ffffff; box-shadow: 0 0 0 1px var(--border); }
  /* fields keep their own sizes (an amount's Max button sits inside its padding) */
  :is(.ws-app, .ws-layer) .amt input.field:not([type=checkbox]):not([type=range]) { height: 48px; padding-right: 120px; font-size: 16px; }
  :is(.ws-app, .ws-layer) .cvx .amt input.field:not([type=checkbox]):not([type=range]) { height: 40px; padding: 0 56px 0 0; border: 0; background: none; }
  :is(.ws-app, .ws-layer) .hfl :is(input, select).field:not([type=checkbox]):not([type=range]) { width: auto; min-width: 140px; padding: 8px 10px; font-size: 12px; }
  :is(.ws-app, .ws-layer) :is(.vrow, .agree, .tgl label, .rv-sw) { margin-bottom: 0; font-size: inherit; color: inherit; }
  :is(.ws-app, .ws-layer) label.vrow, :is(.ws-app, .ws-layer) label.agree { display: flex; }
  :is(.ws-app, .ws-layer) a.lnk, :is(.ws-app, .ws-layer) .hint a, :is(.ws-app, .ws-layer) .agree a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
  :is(.ws-app, .ws-layer) a.btn:not(.ghost) { color: var(--rv-primary-ink); }
  :is(.ws-app, .ws-layer) th { text-transform: none; letter-spacing: 0; }
  :is(.ws-app, .ws-layer) table.num td, :is(.ws-app, .ws-layer) .num { font-variant-numeric: tabular-nums; }
  /* pop-ups: the prototype's modal (backdrop blur, 14px corners, a header line, a footer line) */
  .ws-layer .drawer { background: var(--rv-scrim); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
  .ws-layer .drawer .in { background: #1b1f25; border-left: 1px solid #464e5b; box-shadow: var(--shadow); }
  .ws-layer .drawer .in.sh { border: 1px solid #464e5b; }
  .ws-layer .sh-hd { padding: 21px 25px 17px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
  .ws-layer .sh-hd h2 { font-size: 18px; letter-spacing: -.3px; }
  .ws-layer .sh-bd { padding: 0 25px 25px; }
  .ws-layer .sh-ft { padding: 17px 25px calc(17px + env(safe-area-inset-bottom)); background: #1b1f25; }
  @media (min-width: 641px) { .ws-layer .drawer:has(> .in.sh) .in { border-radius: 14px; } }
  .ws-layer .ntc { background: var(--rv-scrim); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
  .ws-layer .ntc .box { background: #1b1f25; border: 1px solid #464e5b; border-radius: 14px; box-shadow: var(--shadow); }
  .ws-layer .ntc.tst { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ws-layer .ntc.tst .box { background: #343e4b; border-color: #69798e; border-radius: 8px; }
  .ws-layer .ntc h3 { font-family: var(--font); font-size: 18px; letter-spacing: -.3px; }
  .ws-layer .ovm { background: #1b1f25; border: 1px solid #464e5b; border-radius: 9px; box-shadow: var(--shadow); padding: 5px; }
  .ws-layer .ovm button { font-size: 12px; border-radius: 6px; }
  .ws-layer .ovm button:hover { background: var(--panel2); }
  [data-theme="light"] .ws-layer :is(.drawer .in, .sh-ft, .ntc .box, .ovm) { background: #ffffff; border-color: var(--border); }
  [data-theme="light"] .ws-layer .ntc.tst .box { background: #16181b; border-color: #16181b; } [data-theme="light"] .ws-layer .ntc.tst p { color: #ffffff; }

  /* ---- the prototype's components as these views use them (light theme values are ours) ---- */
  .ws-view .metric .label .icon { color: var(--muted); }
  .ws-view .metric-value.positive, .ws-view .metric-value .positive { color: var(--green); }
  .ws-view .metric-value.negative, .ws-view .metric-value .negative { color: var(--red); }
  .ws-view .metric-value .of { font-size: 16px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
  .ws-view .metric-foot { min-height: 15px; }
  .ws-view .metric-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ws-view .eye { width: 18px; height: 16px; display: inline-grid; place-items: center; border-radius: 5px; color: var(--muted); margin-left: auto; }
  .ws-view .eye:hover { color: var(--text); background: var(--panel2); }
  .ws-view .eye svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
  .ws-view .metric .label .as-eye { width: 16px; height: 16px; }
  .ws-view .metric .label .as-eye svg { width: 15px; height: 15px; stroke-width: 1.65; }
  .ws-view .toolbar .filter-tabs { margin: 0; }
  .ws-view .filter-tabs button .n { color: var(--muted); margin-left: 4px; font-size: 10px; }
  .ws-view .filter-tabs a { padding: 8px 13px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 11px; }
  .ws-view .filter-tabs a:hover, .ws-view .filter-tabs a.active { background: #343941; border-color: #656e7b; color: var(--accent); }
  .ws-view .filter-tabs a .n { color: var(--muted); margin-left: 4px; font-size: 10px; }
  .ws-view .panel + .panel, .ws-view .panel + .catalog-note, .ws-view .equal-cols + .panel, .ws-view .metrics + .panel { margin-top: 0; }
  .ws-view .panel.spacer, .ws-view .catalog-note.spacer { margin-top: 22px; }
  .ws-view .panel-head h2 { display: flex; align-items: center; gap: 8px; }
  .ws-view .panel-head .flex .button { white-space: nowrap; }
  .ws-view table td, .ws-view table th { vertical-align: middle; line-height: 1.5; }
  .ws-view table .r { text-align: right; }
  .ws-view tr[data-botid], .ws-view tr[data-asacc], .ws-view tr[data-shared], .ws-view tr[data-go] { cursor: pointer; }
  .ws-view tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .ws-view .bot-cell { display: flex; align-items: center; gap: 10px; text-align: left; padding: 0; }
  .ws-view .mini-bot-icon .icon { width: 16px; height: 16px; }
  .ws-view .pair .muted { font-weight: 400; }
  .ws-view .pnl small, .ws-view td small.sub { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
  .ws-view .status-note { display: block; font-size: 10px; color: var(--muted); margin-top: 5px; max-width: 220px; white-space: normal; }
  .ws-view .table-spark { display: block; }
  .ws-view .table-wrap { position: relative; }
  .ws-view .spark-none { font-size: 10px; color: var(--muted); }
  .ws-view td.menu { width: 52px; text-align: right; }
  .ws-view .catalog-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .ws-view .catalog-note { margin-bottom: 0; }
  .ws-view .empty-state .button { margin: 0 auto; }
  .ws-view .warn-stack:empty { display: none; }
  .ws-view .warn-stack { display: grid; gap: 12px; margin-bottom: 20px; }
  .ws-view .summary-line .positive { color: var(--green); } .ws-view .summary-line .negative { color: var(--red); }
  .ws-view .summary-line > span:last-child { font-variant-numeric: tabular-nums; }
  .ws-view .expo { padding: 11px 0; }
  .ws-view .expo .flex.between { margin-bottom: 10px; }
  .ws-view .expo .asset-name small { font-size: 10px; }
  .ws-view .asset-icon { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: #2a2e34; color: var(--soft); font-size: 12px; font-weight: 600; flex: none; }
  .ws-view .side-long { color: var(--green); } .ws-view .side-short { color: var(--red); }
  .ws-view .setting-row > div:first-child { min-width: 0; }
  .ws-view .setting-row .acts { display: flex; gap: 8px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
  .ws-view .setting-row code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--soft); word-break: break-all; }
  .ws-view .setting-row .val { font-size: 11px; color: var(--soft); margin-top: 6px; display: block; }
  .ws-view .setting-row .val b { color: var(--text); font-weight: 550; }
  .ws-view .setting-row select { width: auto; min-width: 150px; padding: 8px 10px; font-size: 11px; }
  .ws-view .settings-danger .flex.between { gap: 20px; }
  .ws-view .msg { font-size: 11px; margin: 0; } .ws-view .msg:empty { display: none; }
  .ws-view .timeline-item .icon-circle .icon { width: 15px; height: 15px; }
  .ws-view .hist-filters { display: flex; gap: 8px; flex-wrap: wrap; }
  .ws-view .hist-filters select { width: auto; min-width: 132px; padding: 8px 10px; font-size: 11px; }
  .ws-view table.tt td { padding-top: 13px; padding-bottom: 13px; }
  .ws-view table.tt b { font-weight: 550; }
  .ws-view .ws-tag { display: inline-block; font-size: 10px; color: var(--soft); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
  .ws-view .ob-body > * + * { margin-top: 20px; }
  /* My bots -> Reports (radar/web/app-trade.js reportsPanel; Rivemont Fleet stage 3): one panel, mostly tables; at 1360 and
     1000 the page never scrolls, the report does inside the panel (rpFit); hairlines, colour only on the figures */
  .ws-view .filter-tabs .rp-sep { width: 1px; align-self: stretch; margin: 5px 3px; background: var(--border); }
  .ws-view .filter-tabs a.rp-tab { display: inline-flex; align-items: center; gap: 6px; }
  .ws-view .filter-tabs a.rp-tab .icon { width: 13px; height: 13px; }
  @media (min-width: 761px) { .shell:has(.rp-view) .rv-foot-wrap { display: none; } }
  .ws-view .rp { display: flex; flex-direction: column; }
  .ws-view .rp-head { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
  .ws-view .rp-per button { font-size: 11px; padding: 5px 12px; }
  .ws-view .rp-title { font-size: 13px; font-weight: 600; margin: 0 auto 0 0; line-height: 30px; }
  .ws-view .rp-nav { display: flex; align-items: center; gap: 6px; margin-right: auto; min-width: 0; }
  .ws-view .rp-nav .icon-button { width: 28px; height: 28px; font-size: 16px; line-height: 1; }
  .ws-view .rp-nav .icon-button:disabled { opacity: .35; cursor: default; }
  .ws-view .rp-when { font-size: 12px; font-weight: 600; white-space: nowrap; }
  .ws-view .rp-when small { color: var(--muted); font-weight: 400; font-size: 10px; margin-left: 2px; }
  .ws-view .rp-when .pill { margin-left: 6px; font-size: 10px; }
  .ws-view .rp-setbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
  .ws-view .rp-setbtn:hover { color: var(--text); }
  .ws-view .rp-setbtn .icon { width: 14px; height: 14px; }
  .ws-view .rp-scroll { overflow: auto; padding: 0 18px 16px; min-height: 0; }
  .ws-view .rp-wait { padding: 40px 0; text-align: center; color: var(--muted); font-size: 12px; }
  .ws-view .rp-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .ws-view .rp-figs > div { min-width: 0; display: grid; gap: 3px; }
  .ws-view .rp-figs > div > span { font-size: 10px; color: var(--muted); }
  .ws-view .rp-figs b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
  .ws-view .rp-figs small { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ws-view .rp-table { margin: 0 -18px; }
  .ws-view .rp-table th, .ws-view .rp-table td { padding-top: 10px; padding-bottom: 10px; }
  .ws-view .rp-table th { background: none; }
  .ws-view .rp-table .asset-name small { font-size: 10px; color: var(--muted); }
  .ws-view .rp-table tfoot td { font-weight: 600; border-bottom: 0; }
  .ws-view .rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 28px; }
  .ws-view .rp-sec h3 { font-size: 11px; font-weight: 500; color: var(--muted); margin: 16px 0 4px; }
  .ws-view .rp-sec ul { list-style: none; margin: 0; padding: 0; }
  .ws-view .rp-sec li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 11px; }
  .ws-view .rp-sec li b { font-weight: 550; white-space: nowrap; }
  .ws-view .rp-sec p { font-size: 11px; margin: 6px 0 0; }
  .ws-view .rp-note { margin-top: 14px; font-size: 10px; color: var(--muted); }
  .ws-view .rp-note p { margin: 3px 0 0; }
  .ws-view .rp-note b { color: var(--soft); font-weight: 550; }
  .ws-view .rp-set { max-width: 660px; }
  .ws-view .rp-set .setting-row { padding: 13px 0; }
  .ws-view .rp-when-set { display: flex; gap: 8px; flex: none; }
  .ws-view .rp-when-set select { width: auto; min-width: 0; padding: 8px 10px; font-size: 11px; }
  .ws-view .rp-when-set #rp-tz { max-width: 210px; }
  .ws-view .rp-tg { font-size: 11px; margin: 12px 0 0; }
  .ws-view .rp-tg a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .ws-view .rp-save { display: flex; justify-content: flex-end; padding-top: 14px; }
  @media (max-width: 760px) {
    .ws-view .rp-head { padding: 12px 14px; gap: 10px; }
    .ws-view .rp-nav { order: 3; width: 100%; margin-right: 0; justify-content: space-between; }
    .ws-view .rp-setbtn { margin-left: auto; }
    .ws-view .rp-scroll { padding: 0 14px 14px; }
    .ws-view .rp-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
    .ws-view .rp-figs small { white-space: normal; }
    .ws-view .rp-table { margin: 0 -14px; }
    .ws-view .rp-table th, .ws-view .rp-table td { padding-left: 8px; padding-right: 8px; }
    .ws-view .rp-table td:first-child { white-space: normal; min-width: 110px; }
    .ws-view .rp-table :is(th, td):first-child { padding-left: 14px; } .ws-view .rp-table :is(th, td):nth-child(5) { padding-right: 14px; }
    .ws-view .rp-x, .ws-view .filter-tabs .rp-sep { display: none; }
    .ws-view .rp-when-set { width: 100%; }
    .ws-view .rp-when-set select { flex: 1; }
    .ws-view .rp-when-set #rp-tz { max-width: none; }
  }
  @media (max-width: 760px) {
    .ws-view .filter-tabs a { font-size: 10px; padding: 7px 10px; }
    .ws-view .toolbar > .flex { width: 100%; }
    .ws-view .hist-filters { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .ws-view .hist-filters select { min-width: 0; width: 100%; }
    .ws-view .setting-row { flex-wrap: wrap; }
    .ws-view .setting-row .acts { justify-content: flex-start; }
    .ws-view .settings-danger .flex.between { flex-wrap: wrap; }
  }
  /* light theme: the prototype's fixed dark colours, ours in light */
  [data-theme="light"] :is(.ws-app, .ws-layer) th { background: #f6f7f8; }
  [data-theme="light"] :is(.ws-app, .ws-layer) td { border-bottom-color: #e8eaed; }
  [data-theme="light"] :is(.ws-app, .ws-layer) tbody tr:hover { background: #f6f7f8; }
  [data-theme="light"] :is(.ws-app, .ws-layer) input:not([type=checkbox]):not([type=range]), [data-theme="light"] :is(.ws-app, .ws-layer) :is(select, textarea) { background: #ffffff; color-scheme: light; }
  [data-theme="light"] :is(.ws-app, .ws-layer) .pill.green { background: #e5f0ea; border-color: #c9ddd1; }
  [data-theme="light"] :is(.ws-app, .ws-layer) .pill.amber { background: #f4eedf; border-color: #e3d6b8; }
  [data-theme="light"] :is(.ws-app, .ws-layer) .pill.blue { background: #eaeef3; color: #3d4a5a; border-color: #d3dae3; }
  [data-theme="light"] .ws-view :is(.mini-bot-icon, .mini-bot-icon.blue, .mini-bot-icon.purple, .asset-icon) { background: #eef0f2; color: #3d4248; }
  [data-theme="light"] .ws-view .filter-tabs :is(button, a):is(:hover, .active) { background: #eef0f2; border-color: #c4c9cf; }
  [data-theme="light"] .ws-view .catalog-note { background: #f3f5f7; border-color: #dfe2e6; color: #3d4248; }
  [data-theme="light"] .ws-view .callout { background: #faf6ec; border-color: #eadfc4; color: #6b5a33; }
  [data-theme="light"] .ws-view .callout.info { background: #f3f5f7; border-color: #dfe2e6; color: #3d4248; }
  [data-theme="light"] .ws-view .switch { background: #d5d9de; } [data-theme="light"] .ws-view .switch:after { background: #ffffff; }
  [data-theme="light"] .ws-view .progress-track { background: #e6e9ec; } [data-theme="light"] .ws-view .progress-track span { background: #3d4248; }
  [data-theme="light"] .ws-view .button.danger { background: #f7e7e8; border-color: #e8c9cb; }
  [data-theme="light"] :is(.ws-app, .ws-layer) .button.primary { background: var(--accent); border-color: var(--accent); color: #ffffff; }
  [data-theme="light"] :is(.ws-app, .ws-layer) .button.primary:hover { background: #000000; }
  [data-theme="light"] :is(.ws-app, .ws-layer) .button.ghost { background: transparent; }
  [data-theme="light"] .ws-app #banner { background: #f0f1f3; border-bottom-color: var(--border); color: var(--muted); }
  .bnote.bd-demo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rv-sp-2); font-size: var(--rv-fs-xs); color: var(--rv-muted); }   /* the demo's bot panel: sample data */
  /* the Signal bot's guide and alert builder (app-trade.js sigGuide) */
  .sgp { margin-top: var(--rv-sp-6); } .sgp > .stack { min-width: 0; }
  @media (max-width: 1180px) { .g-main.sgp { grid-template-columns: minmax(0, 1fr); } }
  .sgp .pad { padding-top: var(--rv-sp-2); }
  .sgp-f { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 var(--rv-sp-4); align-items: end; }
  .sgp-f label.f { margin-top: 0; } .sgp-f .seg { display: flex; } .sgp-f .seg button { flex: 1; padding: 8px var(--rv-sp-3); }
  .sgp-ck { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rv-sp-2); margin-top: var(--rv-sp-3); font-size: var(--rv-fs-sm); color: var(--rv-muted); cursor: pointer; }
  .sgp-o { display: flex; align-items: flex-start; gap: var(--rv-sp-2); } .sgp-o code.k { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }
  .sgp-cp { flex: none; }
  .sgp-w { margin: var(--rv-sp-3) 0; font-size: var(--rv-fs-body-sm); line-height: 1.5; }
  .sgp-xs { display: grid; gap: var(--rv-sp-5); } .sgp-x > b { display: block; font-weight: 500; margin-bottom: var(--rv-sp-2); } .sgp-x p { margin: var(--rv-sp-2) 0 0; font-size: var(--rv-fs-sm); line-height: 1.5; }
  .sgp-t { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--rv-fs-sm); line-height: 1.5; }
  .sgp-t td { padding: var(--rv-sp-3) var(--rv-sp-5); border-top: 1px solid var(--rv-line); vertical-align: top; white-space: normal; overflow-wrap: anywhere; } .sgp-t td:first-child { width: 112px; padding-right: 0; } .sgp-t code.ki { word-break: normal; }
  .sgp-l { margin: 0; padding-left: 18px; display: grid; gap: var(--rv-sp-2); font-size: var(--rv-fs-sm); line-height: 1.5; }
  .sgp-p { margin: var(--rv-sp-3) 0 0; font-size: var(--rv-fs-sm); line-height: 1.5; } .sgp-p0 { margin: 0 0 var(--rv-sp-3); font-size: var(--rv-fs-sm); line-height: 1.5; }
  .sgp .card > .pad > .muted:last-child { margin-bottom: 0; }
  @media (max-width: 700px) { .sgp-f { grid-template-columns: minmax(0, 1fr); gap: var(--rv-sp-3); } .sgp-t td { padding: var(--rv-sp-3) var(--rv-sp-4); } .sgp-t td:first-child { width: 96px; } }