/* ============================================================
   11 — ROUTES
   Everything the six-route scope needed that the ten earlier
   layers did not have.

   The core idea this layer is built around: a Route is the only
   object in the product that causes a trade. Channel → parser →
   account → sizing. So a Route has to be readable at a glance,
   in one line, without opening anything.
   ============================================================ */

/* ---------- SOURCE BADGE -------------------------------------
   One glyph per source, the same everywhere it appears. A feed of
   mixed sources is unreadable if Telegram looks different on the
   signals page than it does in the route card.

   The tint is an identifier, not a status. Status is never a
   colour on its own anywhere in this product, so the badge always
   carries its letter as well.
   ------------------------------------------------------------ */
.src{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:3px 9px 3px 4px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;
}
.src i{
  width:15px;height:15px;border-radius:5px;display:grid;place-items:center;
  font:700 8.5px/1 var(--display);font-style:normal;color:var(--void);flex:0 0 auto;
}
.src.tv       i{background:linear-gradient(140deg,#FF4FD8,#A855F7)}
.src.telegram i{background:linear-gradient(140deg,#38BDF8,#6D3BF5)}
.src.whatsapp i{background:linear-gradient(140deg,#31E5A4,#38BDF8)}
.src.discord  i{background:linear-gradient(140deg,#818CF8,#6D3BF5)}
.src.mt       i,
.src.mt5      i{background:linear-gradient(140deg,#FFC93C,#FF8A3D)}
.src.quotex   i{background:linear-gradient(140deg,#FF4FD8,#FF8A3D)}
.src.po       i{background:linear-gradient(140deg,#FF6B5A,#A855F7)}

/* ---------- ROUTE CARD ---------------------------------------
   channel → parser → account, with the sizing underneath. The
   arrow is a real element rather than a character so it can carry
   the state colour when a route is paused.
   ------------------------------------------------------------ */
.route{
  display:grid;grid-template-columns:1fr auto 1fr auto;gap:16px;align-items:center;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
  transition:border-color .25s,box-shadow .25s,transform .25s cubic-bezier(.2,.7,.3,1);
}
.route:hover{transform:translateY(-2px);border-color:rgba(168,85,247,.4);
  box-shadow:0 18px 44px -30px rgba(168,85,247,.8)}
.route.off{opacity:.55}
.route.off .flow i{background:var(--faint)}

.route .end{min-width:0}
.route .end b{display:block;font:600 14px/1.25 var(--display);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.route .end span{display:block;margin-top:3px;font-size:12px;color:var(--faint)}

.route .flow{display:flex;align-items:center;gap:6px}
.route .flow i{display:block;width:22px;height:2px;border-radius:2px;background:var(--spectrum)}
.route .flow b{
  font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);padding:3px 7px;border:1px solid var(--line);border-radius:999px;
}

.route .sizing{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;
  padding-top:14px;margin-top:2px;border-top:1px solid var(--line-2);
}
.route .sizing span{
  font:400 11.5px/1 var(--mono);color:var(--dim);
  padding:5px 9px;border-radius:var(--r-sm);background:rgba(255,255,255,.04);
}
.route .sizing span b{color:var(--text);font-weight:500}

@media(max-width:760px){
  /*  Rotating the flow to point downward sounded right and reads badly: the
      parser label ends up sideways and collides with the rows either side.
      Keep it horizontal and let it sit between the two ends as a divider. */
  .route{grid-template-columns:1fr auto;gap:10px 12px}
  .route .flow{grid-column:1 / -1;justify-content:center;padding:2px 0}
  .route .flow i{width:34px}
  .route .end{grid-column:1}
  .route > .toggle{grid-column:2;grid-row:1;align-self:start}
}

/* ---------- SESSION HEALTH -----------------------------------
   A state plus a SENTENCE. "amber" on its own tells a customer
   nothing they can act on; "expires in 6 days, re-link from here"
   does. The status code lives in the tooltip, not the headline.
   ------------------------------------------------------------ */
.sess{display:flex;align-items:flex-start;gap:11px;padding:14px 0}
.sess + .sess{border-top:1px solid var(--line-2)}
.sess .dot{
  width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 auto;
  background:var(--faint);position:relative;
}
.sess.ok   .dot{background:var(--mint)}
.sess.warn .dot{background:var(--gold)}
.sess.bad  .dot{background:var(--rose)}
.sess.ok .dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--mint);opacity:.4;animation:sesspulse 2.6s ease-out infinite;
}
@keyframes sesspulse{0%{transform:scale(.7);opacity:.5}100%{transform:scale(1.5);opacity:0}}
.sess .body{min-width:0;flex:1}
.sess .body b{display:block;font:600 13.5px/1.3 var(--display)}
.sess .body p{margin:4px 0 0;font-size:12.5px;color:var(--dim);line-height:1.5}
.sess .body .state{
  font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  margin-left:8px;color:var(--faint);
}
.sess .act{flex:0 0 auto}

/* ---------- CHANNEL LIST -------------------------------------
   Hundreds of rooms, so the row has to stay 36px and still carry
   a source, a name, a last-seen and a switch.
   ------------------------------------------------------------ */
.chan{
  display:flex;align-items:center;gap:12px;height:var(--row);
  padding:0 12px;border-radius:var(--r-sm);
}
.chan:hover{background:rgba(255,255,255,.035)}
.chan + .chan{margin-top:2px}
.chan .name{
  flex:1;min-width:0;font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chan .seen{font:400 11px/1 var(--mono);color:var(--faint);flex:0 0 auto}
.chan .star{
  width:26px;height:26px;display:grid;place-items:center;cursor:pointer;
  color:var(--faint);background:none;border:0;border-radius:var(--r-sm);flex:0 0 auto;
}
.chan .star:hover{color:var(--gold);background:rgba(255,255,255,.05)}
.chan .star.on{color:var(--gold)}

/* ---------- LADDER PREVIEW -----------------------------------
   The martingale progression in cash, with the cycle total in
   bold. Six doubling steps from 100 needs 12,700 to complete, and
   almost nobody has done that arithmetic before switching it on.
   Showing it is the whole point of this component.
   ------------------------------------------------------------ */
.ladder{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.ladder .step{
  font:500 12px/1 var(--mono);padding:7px 10px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--dim);
}
.ladder .step:first-child{color:var(--text);border-color:rgba(168,85,247,.4)}
.ladder .step.over{color:var(--rose);border-color:rgba(255,107,90,.45)}
.ladder .arrow{color:var(--faint);font-size:11px}
.ladder-total{
  margin-top:12px;padding:12px 14px;border-radius:var(--r);
  border:1px solid rgba(255,201,60,.3);background:rgba(255,201,60,.07);
  font-size:13px;color:var(--dim);
}
.ladder-total b{color:var(--gold);font:600 16px/1 var(--mono)}

/* ---------- ROUTE BUILDER ------------------------------------ */
.rb{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rb .col{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:rgba(255,255,255,.025);display:flex;flex-direction:column;
}
.rb .col > header{
  padding:11px 14px;border-bottom:1px solid var(--line);
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  display:flex;align-items:center;gap:8px;
}
.rb .col > header b{
  width:17px;height:17px;border-radius:5px;background:var(--spectrum);color:var(--void);
  display:grid;place-items:center;font:700 9px/1 var(--display);
}
.rb .col .list{padding:8px;flex:1;min-height:150px;overflow:auto;max-height:280px}
.rb .pick{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-sm);
  cursor:pointer;font-size:13px;
}
.rb .pick:hover{background:rgba(255,255,255,.05)}
.rb .pick.on{background:rgba(168,85,247,.14);color:var(--text)}
.rb .pick .tick{width:14px;height:14px;flex:0 0 auto;color:var(--cyan);opacity:0}
.rb .pick.on .tick{opacity:1}
@media(max-width:1000px){.rb{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.rb{grid-template-columns:1fr}}

/*  the sentence: what this route will actually do, in words,
    before anything is saved */
.rb-say{
  margin-top:16px;padding:16px 18px;border-radius:var(--r);
  border:1px solid rgba(168,85,247,.32);background:rgba(168,85,247,.08);
  font-size:14px;line-height:1.65;color:var(--dim);
}
.rb-say b{color:var(--text);font-weight:600}
.rb-say .lbl{display:block;margin-bottom:8px}

/* ---------- PARSER TEST BOX ---------------------------------- */
.ptest{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ptest textarea{
  width:100%;min-height:170px;resize:vertical;
  font:400 13px/1.7 var(--mono);
}
.ptest .out{
  border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  background:rgba(0,0,0,.28);font:400 12.5px/1.75 var(--mono);
  white-space:pre-wrap;word-break:break-word;min-height:170px;color:var(--dim);
}
.ptest .out .k{color:var(--faint)}
.ptest .out .v{color:var(--cyan)}
.ptest .out .n{color:var(--mint)}
@media(max-width:840px){.ptest{grid-template-columns:1fr}}

/* ---------- ROUTE MATRIX (marketing) ------------------------- */
.matrix2{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.matrix2 th,.matrix2 td{padding:14px 16px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--line-2)}
.matrix2 thead th{
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);background:rgba(255,255,255,.03);
}
.matrix2 tbody tr:last-child td{border-bottom:0}
.matrix2 tbody tr:hover td{background:rgba(255,255,255,.028)}
.matrix2 .way{font:400 12px/1 var(--mono);color:var(--dim)}
@media(max-width:760px){
  .matrix2 thead{display:none}
  .matrix2 tr{display:grid;gap:6px;padding:14px 16px;border-bottom:1px solid var(--line-2)}
  .matrix2 td{border:0;padding:0}
  .matrix2 td::before{content:attr(data-l);display:block;
    font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
    color:var(--faint);margin-bottom:3px}
}

/* ---------- SMALL PIECES THE NEW PAGES NEEDED ----------------
   A key/value row, a status dot and a compact input. All three
   existed as ad-hoc markup on the older pages; they are components
   now so the six new pages do not each invent their own.
   ------------------------------------------------------------ */
/*  A label and a value. The value used to be flex:0 0 auto — it could not
    shrink at all — which was fine while every value was a short figure. The
    moment a value became a full sentence (the fan-out modes, the guards) it
    forced the whole page wider than the phone it was on: 1090px of layout in
    a 390px viewport, with the reader scrolling sideways to read a paragraph.

    min-width:0 lets it shrink, and on a phone the pair stacks, because a
    sentence squeezed into the right-hand half of a 390px screen is four words
    per line. */
.kv{
  display:flex;align-items:baseline;gap:12px;padding:9px 0;font-size:13px;
  min-width:0;
}
.kv + .kv{border-top:1px solid var(--line-2)}
.kv span{color:var(--dim);flex:1 1 auto;min-width:0}
.kv b{font-weight:600;text-align:right;flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
@media(max-width:620px){
  .kv{flex-direction:column;align-items:stretch;gap:4px}
  .kv b{text-align:left}
}

.dot-mint,.dot-gold,.dot-rose,.dot-faint{
  display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:1px;margin-right:4px;
}
.dot-mint{background:var(--mint)}
.dot-gold{background:var(--gold)}
.dot-rose{background:var(--rose)}
.dot-faint{background:var(--faint)}

input.mini,select.mini{
  height:30px;padding:0 10px;font-size:12.5px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);
  min-width:200px;
}
input.mini:focus,select.mini:focus{outline:none;border-color:rgba(168,85,247,.6);box-shadow:var(--ring)}
@media(max-width:560px){input.mini,select.mini{min-width:0;width:100%}}

/* ---------- KILL SWITCH -------------------------------------- */
.kill{
  border:1px solid rgba(255,107,90,.35);border-radius:var(--r);
  background:rgba(255,107,90,.07);padding:18px 20px;
}
.kill h3{margin:0 0 6px;color:var(--rose)}
.kill p{margin:0 0 14px;font-size:13px;color:var(--dim);line-height:1.6}
.kill .why{margin-bottom:12px}
.btn-danger{
  background:var(--rose);border-color:var(--rose);color:#0A0410;font-weight:600;
}
.btn-danger:hover{filter:brightness(1.08)}

@media(prefers-reduced-motion:reduce){
  .route,.sess.ok .dot::after{transition:none;animation:none}
  .route:hover{transform:none}
}

/* ============================================================
   BRIDGE CHOOSER
   The first decision a visitor makes, so it gets its own layout
   rather than being a row of feature cards.

   The pair — source, arrow, destination — is the whole proposition,
   so it is the largest thing in the card and everything else sits
   under it.
   ============================================================ */
.bridgegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.bridgegrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.bridgegrid{grid-template-columns:1fr}}

.bridgecard{
  position:relative;display:flex;flex-direction:column;gap:14px;
  padding:22px 22px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  color:inherit;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s,box-shadow .28s;
}
.bridgecard::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--spectrum);opacity:.9;
}
/*  The two binary bridges get a gold edge, not a red one. They are a
    different KIND of product, not a worse one — the warning that your
    credentials live with us belongs in words on the page, not in a colour
    that reads as "broken". */
.bridgecard.binary::before{background:linear-gradient(180deg,var(--gold),var(--rose))}
.bridgecard:hover{
  transform:translateY(-3px);border-color:rgba(168,85,247,.45);
  box-shadow:0 24px 56px -34px rgba(168,85,247,.9);
}
.bridgecard .tag{
  font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.bridgecard.binary .tag{color:var(--gold)}
.bridgecard .pair{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bridgecard .arrow{
  display:block;width:20px;height:2px;border-radius:2px;background:var(--spectrum);flex:0 0 auto;
}
.bridgecard p{margin:0;font-size:13.5px;line-height:1.65;color:var(--dim);flex:1}
.bridgecard .foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:14px;border-top:1px solid var(--line-2);
}
.bridgecard .go{font-size:13px;font-weight:600;color:var(--cyan)}
.bridgecard:hover .go{color:var(--text)}

.bridgegrid.mini{grid-template-columns:repeat(3,1fr);gap:12px}
.bridgecard.mini{padding:16px 18px;gap:10px}
.bridgecard.mini b{font:600 13.5px/1.35 var(--display)}
@media(max-width:760px){.bridgegrid.mini{grid-template-columns:1fr}}

.crumb-back{
  display:inline-block;margin-bottom:18px;font:500 12.5px/1 var(--mono);
  color:var(--faint);letter-spacing:.04em;
}
.crumb-back:hover{color:var(--cyan)}
.kicker .arrow{display:block;width:18px;height:2px;border-radius:2px;background:var(--spectrum)}

/* ---------- BRIDGE SWITCHER (dashboard) ----------------------
   A workspace switcher, at the top of the sidebar, the way every
   professional tool does it. It answers "which product am I
   looking at" before any number on the page can confuse you.
   ------------------------------------------------------------ */
.bridgepick{
  position:relative;margin:0 0 14px;padding:11px 12px;
  border:1px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.05);cursor:pointer;width:100%;text-align:left;color:inherit;
  display:flex;align-items:center;gap:10px;
}
.bridgepick:hover{border-color:rgba(168,85,247,.5)}
.bridgepick .who{min-width:0;flex:1}
.bridgepick .who span{
  display:block;font:500 9.5px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:4px;
}
.bridgepick .who b{
  display:block;font:600 12.5px/1.25 var(--display);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bridgepick .chev{color:var(--faint);flex:0 0 auto;transition:transform .2s}
.bridgepick[aria-expanded="true"] .chev{transform:rotate(180deg)}

.bridgemenu{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
  border:1px solid var(--line);border-radius:var(--r);background:var(--lift);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.95);padding:6px;display:none;
}
.bridgemenu.open{display:block}
.bridgemenu a{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-sm);
  font-size:12.5px;color:var(--dim);
}
.bridgemenu a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.bridgemenu a.on{background:rgba(168,85,247,.16);color:var(--text)}
.bridgemenu .sep{
  margin:6px 4px;border-top:1px solid var(--line-2);
  padding-top:8px;font:500 9.5px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}

/* the scoped-settings notice */
.scoped{
  display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:var(--r);
  background:rgba(168,85,247,.07);font-size:12.5px;color:var(--dim);
}
.scoped b{color:var(--text);font-weight:600}

/* ============================================================
   THE MATRIX
   "Any source, any destination" is a claim you have to SHOW. A
   grid where every cell is a link proves it at a glance; a
   paragraph saying so does not.
   ============================================================ */
.matrix3{width:100%;border-collapse:separate;border-spacing:0;min-width:820px}
.matrix3 th,.matrix3 td{padding:0;text-align:left;vertical-align:top}
.matrix3 thead th{
  padding:14px 12px;border-bottom:1px solid var(--line);
  font:600 12.5px/1.3 var(--display);
}
.matrix3 thead th span{
  display:block;margin-top:5px;font:500 10px/1 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.matrix3 thead th.corner{
  font:500 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);width:150px;
}
.matrix3 tbody th{
  padding:14px 12px;border-bottom:1px solid var(--line-2);
  border-right:1px solid var(--line);width:150px;
  font:600 12.5px/1.3 var(--display);
}
.matrix3 tbody th span{
  display:block;margin-top:5px;font-size:11.5px;color:var(--dim);font-weight:400;
}
.matrix3 tbody td{border-bottom:1px solid var(--line-2);padding:6px}

.matrix3 .cell{
  display:block;padding:11px 12px;border-radius:var(--r-sm);
  border:1px solid transparent;color:inherit;
  transition:border-color .2s,background .2s,transform .2s;
}
.matrix3 .cell b{display:block;font:600 12.5px/1.2 var(--display)}
.matrix3 .cell span{
  display:block;margin-top:4px;font:400 11px/1 var(--mono);color:var(--faint);
}
.matrix3 .cell:hover{
  background:rgba(255,255,255,.05);border-color:rgba(168,85,247,.45);
  transform:translateY(-1px);
}
/*  The left edge carries the sanction level. Four levels, and none of them is
    red-for-broken: an unofficial interface is a different KIND of product, and
    the warning belongs in words on the page. Red is reserved for the one case
    where the platform itself is restricted somewhere. */
.matrix3 .cell{border-left-width:2px}
.cell.r0,.bridgecard.r0::before{border-left-color:var(--mint)}
.cell.r1,.bridgecard.r1::before{border-left-color:var(--cyan)}
.cell.r2,.bridgecard.r2::before{border-left-color:var(--gold)}
.cell.r3,.bridgecard.r3::before{border-left-color:var(--rose)}
.bridgecard.r0::before{background:var(--mint)}
.bridgecard.r1::before{background:var(--spectrum)}
.bridgecard.r2::before{background:var(--gold)}
.bridgecard.r3::before{background:var(--rose)}

.riskchip{
  display:inline-block;padding:3px 8px;border-radius:999px;
  font:500 9.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid currentColor;
}
.riskchip.mint{color:var(--mint)} .riskchip.cyan{color:var(--cyan)}
.riskchip.gold{color:var(--gold)} .riskchip.rose{color:var(--rose)}

.risklegend{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px;
}
.riskkey{
  display:flex;flex-direction:column;gap:7px;padding:12px 14px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-size:12px;line-height:1.55;color:var(--dim);
}
@media(max-width:900px){.risklegend{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.risklegend{grid-template-columns:1fr}}

/* ---------- TWO-STEP PICKER (dashboard) --------------------- */
.picker{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pickcol{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:rgba(255,255,255,.025)}
.pickcol > header{
  padding:11px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.pickcol > header b{
  width:17px;height:17px;border-radius:5px;background:var(--spectrum);color:var(--void);
  display:grid;place-items:center;font:700 9px/1 var(--display);
}
.pickcol .opts{padding:8px;display:grid;gap:4px}
.pickopt{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:11px 12px;border-radius:var(--r-sm);border:1px solid transparent;
  background:none;color:inherit;text-align:left;cursor:pointer;width:100%;
}
.pickopt b{font:600 13px/1.2 var(--display);grid-column:2}
.pickopt span{grid-column:2;font-size:11.5px;color:var(--faint);margin-top:2px}
.pickopt .src{grid-row:span 2}
.pickopt .riskchip{grid-row:span 2}
.pickopt:hover{background:rgba(255,255,255,.05)}
.pickopt.on{background:rgba(168,85,247,.15);border-color:rgba(168,85,247,.45)}
@media(max-width:700px){.picker{grid-template-columns:1fr}}

/* the two new badge tints */
.src.binance i{background:linear-gradient(140deg,#FFC93C,#F0B90B)}
.src.binomo  i{background:linear-gradient(140deg,#31E5A4,#A855F7)}
.src.iq      i{background:linear-gradient(140deg,#FF8A3D,#FF4FD8)}

/* ---------- the bridge picker's panel and badge --------------
   `.bridgepick` was styled; the dropdown it opens and the little
   platform badge in front of it were not. The panel had no
   position, no background and no border, so opening it pushed the
   sidebar apart instead of floating over it.
   ------------------------------------------------------------ */
.bridgepick .bp-badge{
  width:30px;height:30px;flex:0 0 auto;border-radius:9px;
  display:grid;place-items:center;
  background:var(--lift);border:1px solid var(--line);
  font:600 10.5px/1 var(--mono);color:var(--text);
}

.bplist{
  position:absolute;left:4px;right:4px;top:calc(100% - 8px);z-index:40;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--deep);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.92);
  padding:6px;max-height:52vh;overflow:auto;
}
.bplist.hide{display:none}

.bplist a{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:9px;
  color:inherit;text-decoration:none;
  font:500 12.5px/1.25 var(--ui);
}
.bplist a:hover{background:var(--lift)}
.bplist a small{
  margin-left:auto;font:400 10px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
}

/*  Always last, always distinct: it is the only item here that does
    not switch you to something you already have.  */
.bp-add{
  display:block;margin-top:6px;padding:10px;border-radius:9px;
  border:1px dashed var(--line);text-align:center;
  color:var(--cyan);text-decoration:none;
  font:500 12px/1 var(--ui);
}
.bp-add:hover{background:var(--spectrum-soft);border-style:solid}