/* THE DESK v2 — Module E: PREDICT. Owns predict.js + predict.css.
   Same flat, dense navy as the rest of the terminal. The one place this page
   spends light is where the money is: the live head on the chart, the card that
   is currently LIVE, and the burst when a round pays you. Everything else is a
   hairline. No neon on a button that takes a bet. */

.pd-view{background:var(--s0)}
.pd{max-width:100vw;min-height:100%;padding-bottom:26px;color:var(--ink0)}
.pd .mono{font-family:var(--mono);font-variant-numeric:tabular-nums slashed-zero}
.pd .k{font:600 9.5px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.pd .up{color:var(--up)}.pd .down{color:var(--down)}.pd .flat{color:var(--ink3)}.pd .dim{color:var(--ink3)}
.pd .hot{color:var(--gold)}

/* ══ HERO ═══════════════════════════════════════════════════════════════ */
.pd-hero{position:relative;background:var(--s1);border-bottom:1px solid var(--line);overflow:hidden}
.pd-hero::before{content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,124,246,.55),rgba(232,79,224,.4),transparent)}
/* two rows on the left, the clock on the right: at 390 the price and the
   round clock were fighting over the same 100px and both lost. */
.pd-hh{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sym act" "px act";
  align-items:center;gap:7px 10px;padding:10px 14px 8px;min-width:0}
.pd-sym{grid-area:sym;display:flex;align-items:center;gap:9px;min-width:0}
.pd-sym .btc{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(150deg,#F7931A,#B96A05);color:#1B1000;font:700 16px/1 var(--display);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.pd-sym b{display:block;font:600 13px/1.1 var(--display);letter-spacing:.02em}
.pd-sym small{display:flex;align-items:center;gap:5px;font:500 10px/1.3 var(--mono);color:var(--ink3);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:help}
.pd-sym small span{overflow:hidden;text-overflow:ellipsis}
/* green while the exchange socket is printing, amber the moment it is not */
.fd{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--ink4)}
.fd.ok{background:var(--up);animation:pdpulse3 2.4s ease-out infinite}
.fd.warn{background:var(--v-caution)}
@keyframes pdpulse3{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 4px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.pd-hpx{grid-area:px;min-width:0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pd-hpx b{font:600 24px/1.05 var(--mono);letter-spacing:-.025em;white-space:nowrap}
.pd-hpx span{font:500 11px/1.2 var(--mono);white-space:nowrap}
.pd-orc{font:700 8.5px/1 var(--display);letter-spacing:.08em;padding:4px 6px;cursor:help;border-radius:var(--pill);
  border:1px solid rgba(251,191,36,.42);color:var(--v-caution);background:var(--v-caution-bg);white-space:nowrap}
.pd-orc.bad{border-color:rgba(248,113,113,.5);color:var(--down);background:var(--down-bg)}
.pd-hact{grid-area:act;align-self:center;display:flex;align-items:center;gap:6px;flex:0 0 auto}
.pd-ico{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r2);border:1px solid var(--line);
  background:var(--s0);color:var(--ink3);transition:color var(--t1),border-color var(--t1)}
.pd-ico:hover{color:var(--ink1);border-color:var(--line-hot)}
.pd-ico.on{color:var(--acc-t);border-color:var(--acc-line)}
.pd-ico svg.i{width:16px;height:16px}
.pd-ring{position:relative;width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center}
.pd-ring svg{position:absolute;inset:0;width:44px;height:44px;transform:rotate(-90deg)}
.pd-ring circle{fill:none;stroke-width:2.6;stroke-linecap:round}
.pd-ring .bg{stroke:var(--line)}
.pd-ring .fg{stroke:var(--neron);transition:stroke 300ms linear}
.pd-ring em{font:600 11px/1 var(--mono);font-style:normal;color:var(--ink1);letter-spacing:-.02em}

.pd-cv{position:relative;height:206px;width:100%;overflow:hidden}
.pd-cv canvas{display:block;width:100%;height:100%}
.pd-leg{display:flex;align-items:center;gap:12px;padding:7px 14px 9px;border-top:1px solid var(--line-soft);
  overflow-x:auto;scrollbar-width:none}
.pd-leg::-webkit-scrollbar{display:none}
.pd-leg .lg{display:inline-flex;align-items:center;gap:5px;font:600 9px/1 var(--display);letter-spacing:.1em;
  color:var(--ink3);white-space:nowrap}
.pd-leg .lg b{font:600 9.5px/1 var(--mono);color:var(--ink2);letter-spacing:0}
.pd-leg .lg i{width:8px;height:2px;border-radius:2px;background:currentColor}
.pd-leg .live{color:var(--acc-t)}.pd-leg .live i{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:pdpulse 1.9s ease-out infinite}
.pd-leg .up{color:var(--up)}.pd-leg .down{color:var(--down)}
.pd-leg .len{color:var(--ink4)}.pd-leg .len i{display:none}
.pd-leg .lock i{background:none;border-top:2px dashed var(--neron);height:0;width:10px}
.pd-leg .void{color:var(--ink4)}
@keyframes pdpulse{0%{box-shadow:0 0 0 0 rgba(139,124,246,.5)}70%{box-shadow:0 0 0 6px rgba(139,124,246,0)}100%{box-shadow:0 0 0 0 rgba(139,124,246,0)}}

.pd-view.paused .pd-hero::after{content:'PAUSED';position:absolute;top:10px;left:50%;transform:translateX(-50%);
  font:700 9px/1 var(--display);letter-spacing:.16em;color:var(--v-caution);background:var(--v-caution-bg);
  padding:5px 9px;border-radius:var(--pill);border:1px solid rgba(251,191,36,.4)}

/* ══ CAROUSEL ═══════════════════════════════════════════════════════════ */
.pd-car{--cw:286px;--ch:320px;position:relative;padding:12px 0 4px}
.pd-cards{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding:2px calc(50% - var(--cw)/2) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain}
.pd-cards::-webkit-scrollbar{display:none}
.pd-card{position:relative;flex:0 0 var(--cw);width:var(--cw);height:var(--ch);scroll-snap-align:center;
  perspective:1300px;transition:opacity 200ms var(--ease1),transform 200ms var(--ease1)}
.pd-card.fresh{opacity:0;transform:scale(.94)}
.pd-card.gone{opacity:0;transform:scale(.94)}
.pd-face{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:transform 460ms var(--ease1),border-color var(--t1)}
.pd-face.back{transform:rotateY(180deg)}
.pd-card.flip .pd-face.front{transform:rotateY(-180deg)}
.pd-card.flip .pd-face.back{transform:rotateY(0deg)}
.pd-card.turn .pd-face{animation:pdturn 520ms var(--ease1)}
@keyframes pdturn{0%{transform:translateY(10px) scale(.97);opacity:.4}100%{transform:none;opacity:1}}

/* card head */
.pd-ch{display:flex;align-items:center;gap:8px;padding:9px 12px 8px;min-height:38px}
.pd-badge{display:inline-flex;align-items:center;gap:5px;font:700 9px/1 var(--display);letter-spacing:.14em;
  color:var(--ink3);padding:4px 7px;border-radius:var(--pill);border:1px solid var(--line-hot);background:var(--s0)}
.pd-badge .dot{width:5px;height:5px;border-radius:50%;background:var(--acc);animation:pdpulse 1.9s ease-out infinite}
.pd-ep{margin-left:auto;font:500 10.5px/1 var(--mono);color:var(--ink3)}
.pd-ep b{color:var(--ink2);font-weight:600}
.pd-cd{font:600 12px/1 var(--mono);color:var(--ink1);letter-spacing:-.02em;min-width:38px;text-align:right}
.pd-out{font:700 9px/1 var(--display);letter-spacing:.12em;padding:4px 7px;border-radius:var(--pill);
  background:var(--s3);color:var(--ink3)}
.pd-out.up{color:var(--up);background:var(--up-bg)}.pd-out.down{color:var(--down);background:var(--down-bg)}
.pd-prog{height:3px;background:var(--s3);overflow:hidden;flex:0 0 3px}
.pd-prog.off{background:transparent}
.pd-prog i{display:block;height:100%;width:0;background:var(--brand-grad);transition:width 120ms linear}
.pd-card.closing .pd-prog i{background:var(--down)}
.pd-card.closing .pd-cd{color:var(--down)}

/* card kinds */
.k-live .pd-face{border-color:var(--acc-line);background:linear-gradient(168deg,#111739,var(--s1) 62%)}
.k-live .pd-badge{color:var(--acc-t);border-color:var(--acc-line)}
.k-next .pd-face{border-color:var(--line-hot)}
.k-next .pd-badge{color:var(--ink1)}
.k-expired .pd-face{background:var(--s1);opacity:.94}
.k-expired .pd-face,.k-later .pd-face{border-color:var(--line)}
.k-later .pd-face{opacity:.72}
.pd-card.winning-up .pd-face{border-color:rgba(74,222,128,.45)}
.pd-card.winning-down .pd-face{border-color:rgba(248,113,113,.45)}
.pd-card.won-up .pd-face{border-color:rgba(74,222,128,.28)}
.pd-card.won-down .pd-face{border-color:rgba(248,113,113,.28)}

/* card body */
.pd-cb{flex:1;min-height:0;display:flex;flex-direction:column;gap:7px;padding:10px 12px 12px}
.pd-cb.next{gap:8px}
.pd-cb.next .pd-side{flex:1 1 0;min-height:56px}
.pd-cb.next .pd-meta.big{flex:0 0 auto}
.pd-mul{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:var(--r1);
  background:var(--s0);border:1px solid var(--line)}
.pd-mul .s{font:700 9.5px/1 var(--display);letter-spacing:.14em}
.pd-mul b{font:600 13px/1 var(--mono)}
.pd-mul.up{color:var(--up);border-color:rgba(74,222,128,.24);background:rgba(74,222,128,.06)}
.pd-mul.down{color:var(--down);border-color:rgba(248,113,113,.24);background:rgba(248,113,113,.06)}
/* nothing has been staked yet: the multiplier is not a number, it is a blank */
.empty-pool .pd-mul{color:var(--ink3);border-color:var(--line);background:var(--s0)}
.pd-close{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:4px 0}
.pd-close b{font:600 24px/1.05 var(--mono);letter-spacing:-.03em}
.pd-close.live b{font-size:26px}
.pd-delta{font:600 11.5px/1 var(--mono)}
.pd-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pd-meta b{font:500 12px/1.2 var(--mono);color:var(--ink1)}
.pd-meta.big{padding:6px 10px;border-radius:var(--r1);background:var(--s0);border:1px solid var(--line);
  flex-direction:column;align-items:center;gap:2px}
.pd-meta.big b{font:600 16px/1.1 var(--mono);color:var(--ink0)}
.pd-meta.big small{font:500 10px/1 var(--mono);color:var(--ink3)}

/* UP / DOWN buttons on the NEXT card */
.pd-side{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 12px;
  border-radius:var(--r2);border:1px solid;font-family:var(--display);
  transition:transform var(--t1),filter var(--t1),box-shadow var(--t1)}
.pd-side .lab{font:800 15px/1 var(--display);letter-spacing:.1em}
.pd-side svg.i{width:20px;height:20px;stroke-width:2.2}
.pd-side .mul{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-left:auto}
.pd-side.down .mul{margin-left:0;margin-right:auto;align-items:flex-start}
.pd-side .mul b{font:600 15px/1 var(--mono);letter-spacing:-.02em}
.pd-side .mul small{font:600 8px/1 var(--display);letter-spacing:.12em;opacity:.7}
.pd-side.up{color:var(--up);border-color:rgba(74,222,128,.34);background:linear-gradient(180deg,rgba(74,222,128,.16),rgba(74,222,128,.06))}
.pd-side.down{color:var(--down);border-color:rgba(248,113,113,.34);background:linear-gradient(180deg,rgba(248,113,113,.06),rgba(248,113,113,.16))}
.pd-side:active{transform:scale(.985);filter:brightness(1.1)}
.pd-side:disabled{opacity:.5;filter:grayscale(.35)}
.pd-side.taken{opacity:.28}
.pd-side.up:hover{box-shadow:inset 0 0 0 1px rgba(74,222,128,.4)}
.pd-side.down:hover{box-shadow:inset 0 0 0 1px rgba(248,113,113,.4)}

/* your position on a card */
.pd-pos{display:flex;align-items:center;gap:8px;min-height:0}
.pd-pos.on{min-height:30px;padding:6px 9px;border-radius:var(--r1);background:var(--s0);border:1px solid var(--line-hot)}
.pd-pos .s{font:600 9px/1 var(--display);letter-spacing:.12em;color:var(--ink3)}
.pd-pos .r{margin-left:auto;font:600 11.5px/1 var(--mono)}
.pd-pos.up .r{color:var(--up)}.pd-pos.down .r{color:var(--down)}
.pd-pos .r.no{color:var(--ink3)}.pd-pos .r.ok{color:var(--ink2)}
.pd-pos .pd-pend{font:500 9.5px/1 var(--mono);color:var(--ink3);font-style:normal;margin-left:6px}
.pd-hint{font:500 10.5px/1.3 var(--mono);color:var(--ink4);text-align:center;width:100%}
.pd-claim{margin-left:auto;min-height:32px;padding:0 12px;border-radius:var(--r1);background:var(--brand-grad);
  color:#fff;font:700 10.5px/1 var(--display);letter-spacing:.1em;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.pd-claim:active{filter:brightness(.94)}
.pd-claim:disabled{opacity:.5}
.pd-claim.sm{min-height:28px;padding:0 9px;font-size:9.5px;margin:0}

.pd-lt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--ink3)}
.pd-lt svg.i{width:22px;height:22px;color:var(--ink4)}
.pd-lt b{font:500 11.5px/1.4 var(--sans);color:var(--ink2);max-width:190px}
.pd-lt small{font:600 12px/1 var(--mono);color:var(--ink3)}

/* the ticket (back face) */
.pd-bh{display:flex;align-items:center;gap:8px;padding:2px 10px;border-bottom:1px solid var(--line);min-height:46px}
.pd-bh .bk{width:38px;height:44px;display:grid;place-items:center;border-radius:var(--r1);color:var(--ink2);border:1px solid var(--line)}
.pd-bh .bk svg.i{width:15px;height:15px}
.pd-bb{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px}
.pd-amt{display:flex;align-items:center;gap:8px;height:46px;padding:0 12px;border-radius:var(--r2);
  background:var(--s0);border:1px solid var(--line-hot)}
.pd-amt input{flex:1;min-width:0;background:none;border:0;outline:0;font:600 19px var(--mono);color:var(--ink0)}
.pd-amt .u{font:600 11px var(--display);letter-spacing:.1em;color:var(--ink3)}
.pd-usd{font:500 10px/1 var(--mono);color:var(--ink3);text-align:right;min-height:10px}
.pd-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.pd-chips button{min-height:32px;border-radius:var(--r1);border:1px solid var(--line);background:var(--s0);
  color:var(--ink2);font:500 10.5px/1 var(--mono)}
.pd-chips button[aria-pressed="true"]{border-color:var(--acc-line);background:var(--acc-bg);color:var(--ink0)}
.pd-win{flex:1 1 auto;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:var(--r1);background:var(--s0);border:1px solid var(--line);padding:6px}
.pd-win span{font:600 9px/1.2 var(--display);letter-spacing:.11em;color:var(--ink3)}
.pd-win b{font:600 17px/1.1 var(--mono);letter-spacing:-.02em}
.pd-win small{font:500 9.5px/1.2 var(--mono);color:var(--ink3);text-align:center}
.pd-go{width:100%;min-height:44px;font:800 12px/1 var(--display);letter-spacing:.1em;border-radius:var(--r2)}
.pd-fine{font:500 9px/1.3 var(--sans);color:var(--ink4);text-align:center;flex:0 0 auto}

.pd-burst{position:absolute;inset:0;z-index:4;pointer-events:none}

/* arrows + dots */
.pd-arw{display:none;position:absolute;top:calc(50% - 8px);transform:translateY(-50%);z-index:3;
  width:36px;height:36px;place-items:center;border-radius:50%;background:var(--s2);border:1px solid var(--line-hot);
  color:var(--ink2);box-shadow:var(--sh2);transition:color var(--t1),border-color var(--t1)}
.pd-arw:hover{color:var(--ink0);border-color:var(--acc-line)}
.pd-arw.l{left:10px}
.pd-arw.r{right:10px}
.pd-arw.r svg{transform:rotate(180deg)}
.pd-dots{display:flex;align-items:center;justify-content:center;gap:5px;height:12px}
.pd-dots i{width:5px;height:5px;border-radius:50%;background:var(--line-hot);transition:width var(--t1),background var(--t1)}
.pd-dots i.on{width:16px;border-radius:3px;background:var(--ink3)}
.pd-dots i.on.live{background:var(--acc)}
.pd-dots i.on.next{background:var(--brand-grad);background:linear-gradient(90deg,var(--neron),var(--lyra))}

/* ══ STATS ══════════════════════════════════════════════════════════════ */
.pd-strip{display:flex;gap:8px;overflow-x:auto;padding:10px 14px 2px;scrollbar-width:none}
.pd-strip::-webkit-scrollbar{display:none}
.pd-tile{flex:0 0 auto;min-width:104px;padding:9px 11px;border-radius:var(--r2);background:var(--s1);
  border:1px solid var(--line)}
.pd-tile b{display:block;font:600 15px/1.1 var(--mono);margin-top:5px;letter-spacing:-.01em}
.pd-tile small{display:block;font:500 9.5px/1 var(--mono);color:var(--ink3);margin-top:3px;min-height:9px}

.pd-you{margin:12px 14px 0;padding:11px 13px;border-radius:var(--r3);border:1px solid var(--line-hot);
  background:linear-gradient(160deg,#11173A,#0B0F20 70%);position:relative;overflow:hidden}
.pd-you::after{content:'';position:absolute;right:-50px;top:-70px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(rgba(232,79,224,.20),transparent 65%);pointer-events:none}
.pd-yh{display:flex;align-items:center;gap:8px;min-height:26px}
.pd-yh .sub{margin-left:auto;font:500 10px var(--mono);color:var(--ink3)}
.pd-claimall{margin-left:auto;min-height:30px;padding:0 11px;border-radius:var(--pill);background:var(--brand-grad);
  color:#fff;font:700 10px/1 var(--display);letter-spacing:.1em;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.pd-ygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:9px;position:relative;z-index:1}
.pd-ygrid b{display:block;font:600 17px/1.1 var(--mono);margin-top:4px;letter-spacing:-.02em}
.pd-ygrid small{display:block;font:500 9.5px/1 var(--mono);color:var(--ink3);margin-top:3px}
.pd-refbar{margin-top:10px;width:100%;min-height:40px;border-radius:var(--r2);border:1px solid var(--acc-line);
  background:var(--acc-bg);color:var(--acc-t);font:700 10px/1 var(--display);letter-spacing:.1em}
.pd-refbar:disabled{opacity:.5}
.pd-sign{margin-top:10px;width:100%;min-height:36px;border-radius:var(--r2);border:1px dashed var(--line-hot);
  background:var(--s0);color:var(--ink2);font:500 11px var(--sans)}
.pd-conn{display:flex;align-items:center;gap:11px}
.pd-conn .ic{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:50%;
  background:var(--acc-bg);color:var(--acc-t)}
.pd-conn .tx{flex:1;min-width:0}
.pd-conn b{display:block;font:600 12.5px/1.2 var(--display)}
.pd-conn p{font:500 10.5px/1.35 var(--sans);color:var(--ink3);margin-top:3px}
.pd-conn .btn{min-height:38px;padding:0 14px;font-size:11.5px;letter-spacing:.09em;flex:0 0 auto}

/* ══ TABS + PANES ═══════════════════════════════════════════════════════ */
.pd-tabs{display:flex;gap:4px;margin:14px 14px 0;padding:3px;border-radius:var(--pill);background:var(--s0);
  border:1px solid var(--line)}
.pd-tabs button{flex:1;min-height:36px;border-radius:var(--pill);color:var(--ink3);
  font:600 11px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;transition:color var(--t1),background var(--t1)}
.pd-tabs button[aria-selected="true"]{background:var(--s3);color:var(--ink0)}
.pd-pane{margin:10px 14px 0}
.pd-lbh{display:flex;gap:8px;margin-bottom:9px}
.pd-lbh .seg{flex:1}
.seg.sm button{padding:7px 0;font-size:11px}
.pd-rows{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:var(--s1)}
.pd-rows+.pd-rows,.pd-rows+.pd-empty{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}
/* at 390 the ETH column had 52px and the RESULT column started inside it —
   two free columns share what the fixed ones leave, and nothing may spill. */
.pd-row{display:grid;grid-template-columns:48px 40px minmax(0,1fr) minmax(0,1fr) 64px 56px;align-items:center;gap:6px;
  padding:9px 11px;border-bottom:1px solid var(--line-soft);min-height:42px}
.pd-row>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-row:last-child{border-bottom:0}
.pd-row.hd{background:var(--s0);min-height:30px;padding:7px 11px}
.pd-row.hd span{font:600 8.5px/1 var(--display);letter-spacing:.12em;color:var(--ink4)}
.pd-row .ep{font:500 11px var(--mono);color:var(--ink3)}
.pd-row .sd{font:700 9.5px/1 var(--display);letter-spacing:.1em;color:var(--ink3)}
.pd-row .sd.up{color:var(--up)}.pd-row .sd.down{color:var(--down)}
.pd-row .am{font:500 11.5px var(--mono);color:var(--ink1)}
.pd-row .rs{font:500 10.5px var(--sans);color:var(--ink3);text-transform:capitalize}
.pd-row .pl{font:600 11.5px var(--mono);text-align:right}
.pd-row .sp{display:block}
.pd-row.win .rs{color:var(--up)}.pd-row.lose .rs{color:var(--ink4)}
.pd-row.lb{grid-template-columns:24px minmax(0,1fr) 40px 42px 44px 76px}
.pd-row.lb .nm{font:500 12px var(--sans);color:var(--ink1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-row.lb .rk{font:600 11px var(--mono);color:var(--ink4)}
.pd-row.lb .rk.top{color:var(--ink1)}
.pd-row.lb .rk.t1{color:var(--gold)}.pd-row.lb .rk.t2{color:#C9D3E4}.pd-row.lb .rk.t3{color:#C08457}
.pd-row.lb .rd,.pd-row.lb .wr,.pd-row.lb .st{font:500 11px var(--mono);color:var(--ink2);text-align:right}
.pd-row.lb .st.hot{color:var(--gold)}
.pd-row.lb.me{background:var(--acc-bg)}
.pd-claimbar{display:block;width:100%;min-height:44px;margin-bottom:9px;border-radius:var(--r2);
  background:var(--brand-grad);color:#fff;font:700 11.5px/1 var(--display);letter-spacing:.1em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.pd-claimbar:disabled{opacity:.55}

.pd-empty,.pd-off{padding:26px 18px;text-align:center;border:1px solid var(--line);border-radius:var(--r2);background:var(--s1)}
.pd-empty .ic,.pd-off .ic{width:40px;height:40px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%;
  background:var(--s3);color:var(--ink3)}
.pd-empty .ic svg,.pd-off .ic svg{width:20px;height:20px}
.pd-empty h3,.pd-off h3{font:600 14px/1.2 var(--display)}
.pd-empty p,.pd-off p{font:500 11.5px/1.45 var(--sans);color:var(--ink3);margin-top:6px;max-width:340px;margin-left:auto;margin-right:auto}
.pd-empty .btn{margin-top:12px}
.pd-empty.sm{padding:20px 14px;border-radius:0;border-top:0}
.pd-off{margin:14px}

/* ══ SHEET ══════════════════════════════════════════════════════════════ */
.pd-sheet h3.sub{margin-top:4px;font-size:13px;color:var(--ink2)}
.pd-how{display:flex;flex-direction:column;gap:9px;padding-left:18px}
.pd-how li{font:500 12px/1.5 var(--sans);color:var(--ink2)}
.pd-how li b{color:var(--ink0);font-weight:600}
.pd-how li em{font-style:normal;font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.08em;color:var(--acc-t)}
.pd-how.risk li{color:var(--ink3)}
.pd-note{font:500 11.5px/1.5 var(--sans);color:var(--ink3);padding:10px 12px;border-radius:var(--r2);
  background:var(--s0);border:1px solid var(--line)}
.pd-note b{color:var(--ink1);font-weight:600}
.pd-cta{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:var(--r2);
  border:1px solid var(--line-hot);background:var(--s0);color:var(--ink2);
  font:600 11px/1 var(--mono);letter-spacing:.06em}

/* ══ NAV ════════════════════════════════════════════════════════════════
   Six tabs at 390px: the labels lose two tenths of a pixel each and the
   PREDICT tab carries a live dot so the round clock is visible from anywhere. */
@media(max-width:860px){
  #nav a{font-size:8.6px;letter-spacing:.05em;gap:3px;padding:0 1px}
  #nav a svg.i{width:19px;height:19px}
}
@media(max-width:400px){#nav a{font-size:8px;letter-spacing:.02em}}
.lvd{position:absolute;top:8px;left:calc(50% + 7px);width:5px;height:5px;border-radius:50%;background:var(--up);
  animation:pdpulse2 2s ease-out infinite}
@keyframes pdpulse2{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 5px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
#toppredict{display:none;align-items:center;gap:6px;position:relative;min-height:34px;padding:0 12px;
  border-radius:var(--r2);border:1px solid var(--line);font:600 11px var(--display);letter-spacing:.12em;
  color:var(--ink2);white-space:nowrap;background:var(--s0);transition:color var(--t1),border-color var(--t1)}
#toppredict svg.i{width:16px;height:16px}
#toppredict:hover,#toppredict[aria-current="page"]{color:var(--ink0);border-color:var(--acc-line)}
#toppredict .lvd{position:static;margin-left:2px}
@media(min-width:861px){#toppredict{display:inline-flex}}

/* ══ DESKTOP ════════════════════════════════════════════════════════════ */
@media(min-width:861px){
  .pd-arw{display:grid}
  .pd-cv{height:300px}
  .pd-hpx b{font-size:28px}
  .pd-hh{padding:12px 16px 10px}
}
@media(min-width:961px){
  .pd{display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:14px;padding:14px 20px 26px;align-items:start}
  .pd-main{min-width:0;display:flex;flex-direction:column;gap:12px}
  .pd-rail{min-width:0}
  .pd-hero{border:1px solid var(--line);border-radius:var(--r3)}
  .pd-car{--cw:270px;--ch:322px;padding:0}
  .pd-cards{padding:2px 8px 10px;scroll-snap-type:x proximity}
  .pd-arw.l{left:-2px}.pd-arw.r{right:-2px}
  .pd-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;overflow:visible}
  .pd-tile{min-width:0}
  .pd-you{margin:12px 0 0}
  .pd-tabs{margin:12px 0 0}
  .pd-pane{margin:10px 0 0}
  .pd-cv{height:340px}
}
@media(min-width:1280px){
  .pd{grid-template-columns:minmax(0,1fr) 420px}
  .pd-cv{height:392px}
  .pd-car{--cw:286px}
}
/* the side column is a rail: it scrolls with the page, it does not own a scrollbar */
@media(min-width:961px){.pd-rail{position:sticky;top:0}}

/* ══ REDUCED MOTION ═════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .pd-face{transition:none}
  .pd-card.flip .pd-face.front{transform:none;opacity:0;pointer-events:none}
  .pd-card.flip .pd-face.back{transform:none}
  .pd-face.back{transform:none;opacity:0;pointer-events:none}
  .pd-card.flip .pd-face.back{opacity:1;pointer-events:auto}
  .pd-badge .dot,.pd-leg .live i,.lvd{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE POLYMARKET POOL
   The second surface on PREDICT. It borrows the card chrome from the on-chain
   pool on purpose — same instrument, same shapes — and marks the difference in
   one place only: the pool selector, and the LYRA tint on a Polymarket card.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── pool selector ── */
.pd-pool{display:flex;align-items:stretch;gap:6px;padding:10px 14px 0}
.pd-pool button[data-pool]{flex:1 1 0;min-height:46px;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:2px;padding:7px 11px;text-align:left;
  border-radius:var(--r2);border:1px solid var(--line);background:var(--s1);
  transition:border-color var(--t1),background var(--t1),color var(--t1)}
.pd-pool button[data-pool] b{font:700 11.5px/1.1 var(--display);letter-spacing:.02em;color:var(--ink2)}
.pd-pool button[data-pool] small{font:500 9.5px/1.1 var(--mono);color:var(--ink3);letter-spacing:-.01em}
.pd-pool button[data-pool]:hover{border-color:var(--line-hot)}
.pd-pool button[data-pool][aria-selected="true"]{background:var(--s2);border-color:var(--acc-line)}
.pd-pool button[data-pool][aria-selected="true"] b{color:var(--ink0)}
.pd-pool button[data-pool="poly"][aria-selected="true"]{border-color:rgba(232,79,224,.46);
  background:linear-gradient(168deg,rgba(232,79,224,.12),var(--s1) 70%)}
.pd-pool button[data-pool="poly"][aria-selected="true"] b{color:var(--lyra,#E84FE0)}
.pd-pool button[data-pool="poly"][aria-selected="true"] small{color:var(--ink2)}
.pd-poolwhy{display:flex;align-items:center}
.pd-poolwhy button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--s0);
  color:var(--ink3);font:700 12px/1 var(--display);transition:color var(--t1),border-color var(--t1)}
.pd-poolwhy button:hover{color:var(--ink1);border-color:var(--line-hot)}

/* ── the Polymarket carousel ── */
.pd-pcar{--cw:286px;--ch:320px;position:relative;padding:12px 0 4px}
.pd-pcards{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding:2px calc(50% - var(--cw)/2) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pd-pcards::-webkit-scrollbar{display:none}
.pd-pcard{position:relative;flex:0 0 var(--cw);width:var(--cw);height:var(--ch);scroll-snap-align:center;
  perspective:1300px}
.pd-pface{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r3);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;
  transition:transform 460ms var(--ease1),border-color var(--t1)}
.pd-pface.back{transform:rotateY(180deg)}
.pd-pcard.flip .pd-pface.front{transform:rotateY(-180deg)}
.pd-pcard.flip .pd-pface.back{transform:rotateY(0deg)}
.pd-pcard.closing .pd-prog i{background:var(--down)}
.pd-pcard.closing .pd-cd{color:var(--down)}
.pd-pcard.closed{opacity:.5}
.pd-pcard.closed .pd-side{pointer-events:none;opacity:.4}

/* the current window carries the LYRA edge; the ones after it stay quiet */
.pd-pcard:first-child .pd-pface{border-color:rgba(232,79,224,.4);
  background:linear-gradient(168deg,rgba(232,79,224,.07),var(--s1) 60%)}
.pd-badge.poly{color:var(--lyra,#E84FE0);border-color:rgba(232,79,224,.42);background:rgba(232,79,224,.08)}
.pd-badge.poly.now::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--lyra,#E84FE0);animation:pdpulse 1.9s ease-out infinite}

/* prices are cents here, not multipliers, so they want room */
.pd-pcard .pd-side .mul b{font:600 17px/1 var(--mono)}
.pd-pcard .pd-side .mul small{font:600 8px/1 var(--display);letter-spacing:.08em;opacity:.75;text-transform:none}
.pd-pcard .pd-pos{flex-wrap:wrap;gap:5px}
.pd-pcard .pd-pos .tick{font:600 9.5px/1 var(--mono);padding:4px 7px;border-radius:var(--pill);
  border:1px solid var(--line-hot);background:var(--s0);color:var(--ink2)}
.pd-pcard .pd-pos .tick.up{color:var(--up);border-color:rgba(74,222,128,.3)}
.pd-pcard .pd-pos .tick.down{color:var(--down);border-color:rgba(248,113,113,.3)}

/* ── the honesty block under the cards ── */
.pd-pnote{padding:2px 16px 12px;max-width:660px;margin:0 auto}
.pd-route{font:600 10.5px/1.5 var(--mono);color:var(--ink2);letter-spacing:-.01em;
  padding:8px 11px;border-radius:var(--r1);border:1px solid rgba(232,79,224,.28);
  background:rgba(232,79,224,.06);margin:0 0 8px}
.pd-route b{color:var(--lyra,#E84FE0)}
.pd-pnote .pd-fine{font:500 10px/1.6 var(--sans,var(--mono));color:var(--ink3);margin:0}
.pd-pnote .pd-fine b{color:var(--ink2)}
.pd-note{margin:8px 0 0;font:600 10.5px/1.5 var(--mono);color:var(--v-caution);
  padding:8px 11px;border-radius:var(--r1);border:1px solid rgba(251,191,36,.4);background:var(--v-caution-bg)}

/* ── the "before your first order" sheet ── */
.pd-prep{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.pd-prep .row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--r2);
  border:1px solid var(--line);background:var(--s1)}
.pd-prep .row.ok{border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.05)}
.pd-prep .n{flex:0 0 20px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font:700 10px/1 var(--mono);color:var(--ink3);border:1px solid var(--line-hot);background:var(--s0)}
.pd-prep .row.ok .n{color:var(--up);border-color:rgba(74,222,128,.4)}
.pd-prep .row b{display:block;font:700 12px/1.2 var(--display);color:var(--ink1)}
.pd-prep .row small{display:block;margin-top:3px;font:500 10.5px/1.5 var(--mono);color:var(--ink3)}
.pd-addr{margin:12px 0 6px;font:600 9.5px/1.5 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.pd-addr code{display:block;margin-top:5px;font:500 11px/1.4 var(--mono);color:var(--ink1);
  letter-spacing:-.02em;word-break:break-all;text-transform:none}
.pd-links{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.pd-cta.ghost{background:var(--s1);border:1px solid var(--line-hot);color:var(--ink2)}

/* ── the two-pool comparison ── */
.pd-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.pd-cmp>div{padding:12px;border-radius:var(--r2);border:1px solid var(--line);background:var(--s1)}
.pd-cmp>div:last-child{border-color:rgba(232,79,224,.3);background:linear-gradient(168deg,rgba(232,79,224,.06),var(--s1) 70%)}
.pd-cmp h3{margin:0 0 8px;font:700 11px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink1)}
.pd-cmp>div:last-child h3{color:var(--lyra,#E84FE0)}
.pd-cmp ul{margin:0;padding-left:16px}
.pd-cmp li{font:500 10.5px/1.55 var(--mono);color:var(--ink3);margin:0 0 5px}
.pd-cmp li b{color:var(--ink1)}
@media (max-width:620px){.pd-cmp{grid-template-columns:1fr}}

/* the on-chain carousel and the Polymarket one are never both on screen */
.pd-view.pool-poly .pd-car{display:none}
@media (max-width:420px){
  .pd-pool{padding:8px 10px 0}
  .pd-pool button[data-pool] b{font-size:10.5px}
  .pd-pool button[data-pool] small{font-size:9px}
  .pd-pcar{--cw:264px}
  .pd-pnote{padding:2px 12px 12px}
}