/* 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; }
  /* 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). */
  .ws-app, .ws-layer {
    --rv-bg: var(--bg); --rv-side: var(--side); --rv-panel: var(--panel); --rv-panel2: var(--panel2); --rv-sunk: #14171b;
    --rv-bg-0: var(--bg); --rv-bg-1: var(--bg); --rv-bg-2: var(--panel); --rv-bg-3: var(--panel2); --rv-bg-4: #2b2e33;
    --rv-text: var(--text); --rv-muted: var(--muted); --rv-dim: #80868d; --rv-faint: #5c6168; --rv-ctl: #6a7078;
    --rv-line: var(--border); --rv-line2: #3a3d42; --rv-card-line: var(--border); --rv-btn2: #24262a; --rv-btn2-hover: #34363b;
    --rv-accent: var(--accent); --rv-accent-ink: #232529; --rv-accent-soft: rgba(226,229,233,.08); --rv-accent-line: rgba(226,229,233,.32);
    --rv-primary: var(--accent); --rv-primary-hover: #ffffff; --rv-primary-pressed: #cfd3d8; --rv-primary-ink: #232529;
    --rv-pos: var(--green); --rv-neg: var(--red); --rv-up: var(--green); --rv-down: var(--red);
    --rv-pos-soft: #26312c; --rv-neg-soft: #3c2425; --rv-up-soft: #26312c; --rv-down-soft: #3c2425; --rv-warn: var(--amber); --rv-warn-soft: #302d27;
    --rv-pop: var(--shadow); --rv-scrim: #050608c7; --rv-focus: var(--accent); --rv-grid: rgba(48,50,54,.7);
    --rv-font: var(--font); --rv-font-display: 'Manrope', var(--font); --rv-font-num: var(--font); --rv-font-mono-fig: var(--font);
    --rv-r-xs: 4px; --rv-r-sm: 6px; --rv-r-md: 7px; --rv-r-lg: 9px; --rv-r-xl: 14px;
    --rv-fs-body: 13px; --rv-fs-body-sm: 12px; --rv-fs-md: 13px; --rv-fs-sm: 11px; --rv-fs-xs: 11px; --rv-fs-micro: 10px; --rv-fs-lg: 14px; --rv-fs-title: 18px;
  }
  [data-theme="light"] :is(.ws-app, .ws-layer) {
    --rv-sunk: #f3f4f6; --rv-bg-4: #dfe2e6; --rv-dim: #6b7178; --rv-faint: #b9bec4; --rv-ctl: #8a9097; --rv-line2: #cfd3d8;
    --rv-btn2: #ffffff; --rv-btn2-hover: #f0f1f3; --rv-accent-ink: #ffffff; --rv-accent-soft: rgba(29,32,36,.06); --rv-accent-line: rgba(29,32,36,.3);
    --rv-primary-hover: #000000; --rv-primary-pressed: #000000; --rv-primary-ink: #ffffff;
    --rv-pos-soft: #e5f0ea; --rv-neg-soft: #f7e7e8; --rv-up-soft: #e5f0ea; --rv-down-soft: #f7e7e8; --rv-warn-soft: #f4eedf;
    --rv-scrim: rgba(22,24,27,.35); --rv-grid: rgba(22,24,27,.07);
  }
  .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; }
  :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: 'Manrope', 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: 'Manrope', 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; }
  @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); }