/* PumpSight · sistema visual "casino pro".
   Ardósia profunda, superfícies em degraus, verde forte só para Up e acções principais,
   vermelho para Down, dourado só para ganhos. Saans em tudo, números tabulares.
   As utilidades Tailwind do Sight continuam a fazer o layout interno; aqui mudam os tokens
   e vivem os componentes próprios (moldura, barra lateral, destaque, cartões, apostas ao vivo). */

:root {
  --background: #0f1923;
  --secondary: #213743;
  --primary-green: #00e701;
  --primary-red: #ed4163;
  --tabs-bar-bg: #1a2c38;
  --tabs-pill-bg: #2f4553;
  --tabs-text-muted: #b1bad3;
  --tt-bg: #2f4553;

  --s0: #0f1923;   /* fundo */
  --s1: #1a2c38;   /* painel */
  --s2: #213743;   /* superfície elevada */
  --s3: #2f4553;   /* hover, bordas fortes */
  --s4: #3d5564;
  --line: rgba(177, 186, 211, 0.10);
  --tx: #ffffff;
  --tx2: #b1bad3;
  --tx3: #7c8da3;
  --up: #00e701;
  --up-ink: #05230a;
  --down: #ed4163;
  --gold: #ffb400;
  --sidebar: 248px;
  --top: 64px;
}

body { background: var(--s0); color: var(--tx); font-variant-numeric: tabular-nums; }
.bg-background { background-color: var(--s0); }
.bg-\[\#1a1a1a\] { background-color: var(--s1) !important; }
.bg-\[\#161616\] { background-color: var(--s1) !important; }
.bg-secondary\/50 { background-color: var(--s1) !important; }
.bg-secondary { background-color: var(--s2); }
.text-neutral-200 { color: #e3e8f2; } .text-neutral-300 { color: #cfd6e4; } .text-neutral-400 { color: var(--tx2); }
.text-neutral-500 { color: var(--tx3); } .text-neutral-600 { color: #5f7186; } .text-neutral-700 { color: #4a5c6e; }
.border-neutral-900 { border-color: var(--line); } .bg-neutral-900 { background-color: var(--line); } .bg-neutral-800 { background-color: var(--s3); }
.border-white\/8, .border-white\/10 { border-color: var(--line); }

/* ------------------------------------------------------------ moldura */
.ps-frame { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100dvh; }
.ps-side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--s1); border-right: 1px solid var(--line); padding: 14px 12px 16px; gap: 6px; overflow-y: auto; scrollbar-width: none; }
.ps-side::-webkit-scrollbar { display: none; }
.ps-brand { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px; margin-bottom: 8px; }
.ps-brand img { height: 26px; width: auto; }
.ps-brand b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.ps-brand b span { color: var(--up); }
.ps-group { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 12px; background: var(--s0); }
.ps-group + .ps-group { margin-top: 6px; }
.ps-group h6 { margin: 4px 8px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); }
.ps-nav { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--tx2); transition: background .15s, color .15s; }
.ps-nav svg { width: 18px; height: 18px; flex: none; }
.ps-nav:hover { background: var(--s2); color: var(--tx); }
.ps-nav.on { background: var(--s2); color: var(--tx); box-shadow: inset 3px 0 0 var(--up); }
.ps-nav .ct { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--tx3); background: var(--s2); border-radius: 6px; padding: 2px 6px; }
.ps-clock { margin-top: auto; padding: 14px; border-radius: 12px; background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--line); }
.ps-clock small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); }
.ps-clock strong { display: block; margin-top: 6px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.ps-bar { height: 4px; border-radius: 4px; background: var(--s3); overflow: hidden; margin-top: 10px; }
.ps-bar i { display: block; height: 100%; background: var(--up); border-radius: 4px; transition: width 1s linear; }
.ps-clock .sol { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--tx2); font-weight: 500; }
.ps-clock .sol b { color: var(--tx); font-weight: 600; }

.ps-main { min-width: 0; display: flex; flex-direction: column; }
.ps-top { position: sticky; top: 0; z-index: 60; height: var(--top); display: flex; align-items: center; gap: 12px; padding: 0 24px; background: rgba(15, 25, 35, 0.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); }
.ps-top .logo-m { display: none; }
.ps-search { display: flex; align-items: center; gap: 10px; height: 40px; width: min(420px, 40vw); padding: 0 14px; border-radius: 10px; background: var(--s0); border: 1px solid var(--line); color: var(--tx3); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .15s; }
.ps-search:hover { border-color: var(--s4); }
.ps-search kbd { margin-left: auto; font: 600 11px/1 inherit; padding: 4px 6px; border-radius: 6px; background: var(--s2); color: var(--tx3); }
.ps-top .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ps-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 12px; }
.ps-body.with-rail { grid-template-columns: minmax(0, 1fr) 300px; }
.ps-body > #rail { position: sticky; top: calc(var(--top) + 16px); }

/* botões */
.ps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; transition: filter .15s, transform .06s, background .15s; }
.ps-btn:active { transform: translateY(1px); }
.ps-btn.primary { background: var(--up); color: var(--up-ink); box-shadow: 0 8px 24px rgba(0, 231, 1, 0.18); }
.ps-btn.primary:hover { filter: brightness(1.08); }
.ps-btn.ghost { background: var(--s2); color: var(--tx); }
.ps-btn.ghost:hover { background: var(--s3); }
.ps-btn.gold { background: linear-gradient(180deg, #ffc533, var(--gold)); color: #2b1c00; box-shadow: 0 8px 24px rgba(255, 180, 0, 0.2); }
.ps-wallet { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 12px; border-radius: 10px; background: var(--s0); border: 1px solid var(--line); }
.ps-wallet .bal { font-size: 14px; font-weight: 600; }
.ps-wallet .bal small { color: var(--tx3); font-weight: 500; margin-left: 4px; }
.ps-wallet img { width: 28px; height: 28px; border-radius: 50%; }

/* página */
.ps-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 28px 12px 18px; }
.ps-head h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.ps-head p { margin: 6px 0 0; color: var(--tx2); font-size: 15px; font-weight: 500; }
.ps-section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.ps-section-title svg { width: 20px; height: 20px; color: var(--up); }
.ps-section-title .sub { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--tx3); }

/* ------------------------------------------------------------ destaque */
.ps-hero { position: relative; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 0; border-radius: 16px; overflow: hidden; background: var(--s1); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); }
.ps-hero .info { display: flex; flex-direction: column; gap: 18px; padding: 24px; background: linear-gradient(180deg, var(--s2), var(--s1)); border-right: 1px solid var(--line); }
.ps-hero .who { display: flex; align-items: center; gap: 14px; }
.ps-hero .who img.c { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.ps-hero .who .sym { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.ps-hero .who .nm { font-size: 13px; color: var(--tx3); font-weight: 500; margin-top: 2px; }
.ps-hero .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(0, 231, 1, 0.1); color: var(--up); font-size: 12px; font-weight: 600; }
.ps-hero .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); animation: ps-blink 1.2s infinite; }
@keyframes ps-blink { 50% { opacity: .25; } }
.ps-hero .q { font-size: 15px; color: var(--tx2); font-weight: 500; }
.ps-hero .clock { display: flex; align-items: baseline; justify-content: space-between; }
.ps-hero .clock strong { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.ps-hero .clock small { font-size: 12px; color: var(--tx3); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ps-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; }
.ps-stats div { background: var(--s0); padding: 12px 14px; }
.ps-stats dt { font-size: 12px; color: var(--tx3); font-weight: 500; }
.ps-stats dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.ps-hero .chartbox { position: relative; padding: 20px 24px 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ps-hero .chartbox .top { display: flex; align-items: center; gap: 10px; }
.ps-hero .chartbox .top b { font-size: 14px; font-weight: 600; }
.ps-hero .dots { display: flex; gap: 6px; margin-left: auto; }
.ps-hero .dots button { width: 8px; height: 8px; border-radius: 4px; background: var(--s3); transition: width .25s, background .25s; }
.ps-hero .dots button.on { width: 22px; background: var(--up); }

/* barra de odds e botões de aposta */
.ps-odds { display: flex; flex-direction: column; gap: 8px; }
.ps-odds .lbl { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.ps-odds .lbl .u { color: var(--up); } .ps-odds .lbl .d { color: var(--down); }
.ps-odds .track { display: flex; height: 6px; border-radius: 6px; overflow: hidden; gap: 3px; }
.ps-odds .track i { display: block; height: 100%; border-radius: 6px; transition: width .4s cubic-bezier(.22,1,.36,1); }
.ps-odds .track i.u { background: var(--up); } .ps-odds .track i.d { background: var(--down); }
.ps-bet { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ps-bet a, .ps-bet button { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px; border-radius: 10px; font-size: 15px; font-weight: 700; transition: filter .15s, transform .06s; }
.ps-bet a:active, .ps-bet button:active { transform: translateY(1px); }
.ps-bet .u { background: var(--up); color: var(--up-ink); box-shadow: 0 8px 24px rgba(0, 231, 1, 0.16); }
.ps-bet .d { background: var(--down); color: #2b0711; box-shadow: 0 8px 24px rgba(237, 65, 99, 0.16); }
.ps-bet a:hover, .ps-bet button:hover { filter: brightness(1.08); }
.ps-bet .x { font-size: 13px; font-weight: 700; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.16); }
.ps-bet.sm a, .ps-bet.sm button { height: 40px; font-size: 14px; padding: 0 12px; }

/* ------------------------------------------------------------ filtros */
.ps-filters { position: sticky; top: var(--top); z-index: 30; display: flex; align-items: center; gap: 8px; padding: 14px 0; margin: 10px 0 4px; background: var(--s0); overflow-x: auto; scrollbar-width: none; }
.ps-filters::-webkit-scrollbar { display: none; }
.ps-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; background: var(--s1); color: var(--tx2); font-size: 14px; font-weight: 600; transition: background .15s, color .15s; }
.ps-chip svg { width: 16px; height: 16px; }
.ps-chip:hover { background: var(--s2); color: var(--tx); }
.ps-chip.on { background: var(--s3); color: var(--tx); }
.ps-chip .ct { font-size: 12px; color: var(--tx3); }
.ps-sep { flex: none; width: 1px; height: 22px; background: var(--line); margin: 0 4px; }

/* ------------------------------------------------------------ cartões de mercado */
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.ps-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line); transition: transform .18s cubic-bezier(.22,1,.36,1), border-color .18s, box-shadow .18s; }
.ps-card:hover { transform: translateY(-2px); border-color: var(--s4); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.ps-card > a.cover { position: absolute; inset: 0; z-index: 0; border-radius: 14px; }
.ps-card .hd { display: flex; align-items: center; gap: 12px; pointer-events: none; }
.ps-card .hd img { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--line); }
.ps-card .hd .t { min-width: 0; flex: 1; }
.ps-card .hd .t b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-card .hd .t span { display: block; font-size: 12.5px; color: var(--tx3); font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-timer { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 8px; background: var(--s0); font-size: 13px; font-weight: 600; color: var(--tx); }
.ps-timer i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); }
.ps-timer.late i { background: var(--down); }
.ps-timer.done { color: var(--tx3); } .ps-timer.done i { background: var(--tx3); }
.ps-card .px { display: flex; align-items: baseline; justify-content: space-between; pointer-events: none; font-size: 13px; color: var(--tx3); font-weight: 500; }
.ps-card .px b { font-size: 15px; font-weight: 600; color: var(--tx); margin-left: 4px; }
.ps-card .px .chg { font-weight: 600; }
.ps-card .ps-bet, .ps-card .ft { position: relative; z-index: 1; }
.ps-card .ft { display: flex; align-items: center; gap: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--tx3); font-weight: 600; }
.ps-card .ft button, .ps-card .ft a { display: inline-flex; align-items: center; gap: 5px; transition: color .15s; }
.ps-card .ft svg { width: 17px; height: 17px; }
.ps-card .ft button:hover, .ps-card .ft a:hover { color: var(--tx); }
.ps-card .ft .on { color: var(--up); }
.ps-card .ft .push { margin-left: auto; }
.ps-card .outs { display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.ps-card .outs .r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; }
.ps-card .outs .r span { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-card .outs .r i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.ps-card .outs .m { height: 4px; border-radius: 4px; background: var(--s0); overflow: hidden; grid-column: 1 / -1; }
.ps-card .outs .m b { display: block; height: 100%; border-radius: 4px; }
.ps-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--s2); color: var(--tx2); }
.ps-tag.w { background: rgba(255, 180, 0, 0.12); color: var(--gold); }

/* ------------------------------------------------------------ apostas ao vivo */
.ps-bets { border-radius: 14px; background: var(--s1); border: 1px solid var(--line); overflow: hidden; }
.ps-bets table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ps-bets th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--tx3); letter-spacing: .04em; text-transform: uppercase; background: var(--s1); }
.ps-bets td { padding: 12px 16px; border-top: 1px solid var(--line); font-weight: 600; white-space: nowrap; }
.ps-bets tr:nth-child(even) td { background: rgba(15, 25, 35, 0.35); }
.ps-bets .r { text-align: right; }
.ps-bets .who { display: inline-flex; align-items: center; gap: 8px; }
.ps-bets .who img { width: 22px; height: 22px; border-radius: 50%; }
.ps-bets .mk { display: inline-flex; align-items: center; gap: 8px; color: var(--tx2); }
.ps-bets .mk img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.ps-bets .side-u { color: var(--up); } .ps-bets .side-d { color: var(--down); }
.ps-bets .empty { padding: 36px 16px; text-align: center; color: var(--tx3); font-weight: 500; }
.ps-bets tr.fresh td { animation: ps-fresh 1.2s ease-out; }
@keyframes ps-fresh { from { background: rgba(0, 231, 1, 0.12); } }

/* ------------------------------------------------------------ painel de compra, gráficos e afins */
.chart-plot { border-radius: 10px; }
.t-tabs { background: var(--s1); }
.t-modal { background: var(--s1) !important; box-shadow: 0 0 0 1px var(--line), 0 30px 90px rgba(0, 0, 0, 0.6) !important; }
.t-dropdown { background: var(--s2) !important; box-shadow: 0 0 0 1px var(--line), 0 16px 48px rgba(0, 0, 0, 0.5) !important; }
.ps-toast { background: var(--s2); box-shadow: 0 0 0 1px var(--line), 0 16px 48px rgba(0, 0, 0, 0.5); }
footer { border-top-color: var(--line) !important; }

/* barra móvel */
.ps-mob { display: none; }

/* ------------------------------------------------------------ responsivo */
@media (max-width: 1280px) { .ps-body.with-rail { grid-template-columns: minmax(0, 1fr); } .ps-body > #rail { display: none !important; } }
@media (max-width: 1100px) { .ps-hero { grid-template-columns: 1fr; } .ps-hero .info { border-right: 0; border-bottom: 1px solid var(--line); } }
@media (max-width: 1024px) {
  .ps-frame { grid-template-columns: minmax(0, 1fr); }
  .ps-side { display: none; }
  .ps-top { padding: 0 14px; }
  .ps-top .logo-m { display: flex; align-items: center; }
  .ps-top .logo-m img { height: 26px; }
  .ps-search { width: 40px; padding: 0; justify-content: center; }
  .ps-search span, .ps-search kbd { display: none; }
  .ps-mob { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset: auto 0 0 0; z-index: 80; height: 62px; padding-bottom: env(safe-area-inset-bottom); background: rgba(26, 44, 56, 0.96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .ps-mob a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--tx3); }
  .ps-mob a svg { width: 20px; height: 20px; }
  .ps-mob a.on { color: var(--up); }
  body { padding-bottom: 62px; }
}
@media (max-width: 640px) {
  .ps-body { padding: 0 4px; }
  .ps-head { padding: 20px 12px 12px; } .ps-head h1 { font-size: 22px; }
  .ps-hero .info, .ps-hero .chartbox { padding: 16px; }
  .ps-hero .clock strong { font-size: 32px; }
  .ps-wallet .bal small { display: none; }
  .ps-bets th:nth-child(5), .ps-bets td:nth-child(5), .ps-bets th:nth-child(6), .ps-bets td:nth-child(6) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ps-hero .live i { animation: none; } }
.ps-card .ft span { display: inline-flex; align-items: center; gap: 5px; }
.ps-card .hd .t span .ps-tag { display: inline-flex; margin-right: 4px; }
.ps-card .hd .t b.wq { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; font-size: 14.5px; }
.ps-card .hd { align-items: flex-start; }

/* ------------------------------------------------------------ página de mercado */
.ps-mcard { display: flex; flex-direction: column; gap: 20px; padding: 22px; border-radius: 16px; background: var(--s1); border: 1px solid var(--line); }
.ps-mtop { display: flex; align-items: center; gap: 14px; }
.ps-mtop img.c { width: 52px; height: 52px; border-radius: 13px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); flex: none; }
.ps-mtop .t { min-width: 0; flex: 1; }
.ps-mtop .t b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.ps-mtop .t span { display: block; margin-top: 3px; font-size: 14px; color: var(--tx2); font-weight: 500; }
.ps-mtop .r { display: flex; align-items: center; gap: 10px; flex: none; }
.ps-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--s2); color: var(--tx2); }
.ps-pill.live { background: rgba(0, 231, 1, 0.1); color: var(--up); }
.ps-pill.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); animation: ps-blink 1.2s infinite; }
.ps-pill.up { background: rgba(0, 231, 1, 0.12); color: var(--up); } .ps-pill.down { background: rgba(237, 65, 99, 0.12); color: var(--down); }
.ps-mclock { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 20px; }
.ps-mclock small { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); }
.ps-mclock strong { display: block; font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.ps-mclock .ps-bar { margin: 0; align-self: end; margin-bottom: 8px; }
.ps-stats.c4 { grid-template-columns: repeat(4, 1fr); }
.ps-mchart .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.ps-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--s0); font-size: 14px; font-weight: 500; color: var(--tx2); }
.ps-banner b { color: var(--tx); }
.ps-banner.up { box-shadow: inset 3px 0 0 var(--up); } .ps-banner.down { box-shadow: inset 3px 0 0 var(--down); }
.ps-aside { display: none; width: 340px; flex: none; position: sticky; top: calc(var(--top) + 16px); }
@media (min-width: 1024px) { .ps-aside { display: block; } .ps-mobile-only { display: none !important; } }

.ps-panel { position: relative; border-radius: 16px; background: var(--s1); border: 1px solid var(--line); padding: 16px; }
.ps-panel .inner { display: flex; flex-direction: column; gap: 14px; transition: opacity .2s; }
.ps-panel .inner.busy { opacity: 0; pointer-events: none; }
.ps-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px; border-radius: 12px; background: var(--s0); }
.ps-pick button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 9px; font-size: 15px; font-weight: 700; color: var(--tx2); transition: background .15s, color .15s; }
.ps-pick button small { font-size: 12px; font-weight: 600; opacity: .8; }
.ps-pick button.u.on { background: var(--up); color: var(--up-ink); }
.ps-pick button.d.on { background: var(--down); color: #2b0711; }
.ps-pick button:not(.on):hover { background: var(--s2); color: var(--tx); }
.ps-label { font-size: 12px; font-weight: 600; color: var(--tx3); letter-spacing: .04em; text-transform: uppercase; }
.ps-amount { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 14px; border-radius: 12px; background: var(--s0); border: 1px solid var(--line); transition: border-color .15s; }
.ps-amount:focus-within { border-color: var(--s4); }
.ps-amount > span { font-size: 20px; font-weight: 600; color: var(--tx3); }
.ps-amount input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--tx); font: 600 22px/1 inherit; }
.ps-amount .sol { font-size: 13px; font-weight: 600; color: var(--tx3); }
.ps-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ps-presets button { height: 34px; border-radius: 8px; background: var(--s2); color: var(--tx2); font-size: 13px; font-weight: 600; transition: background .15s, color .15s; }
.ps-presets button:hover, .ps-presets button.on { background: var(--s3); color: var(--tx); }
.ps-win { display: flex; align-items: baseline; justify-content: space-between; padding: 14px; border-radius: 12px; background: var(--s0); }
.ps-win span { font-size: 13px; font-weight: 600; color: var(--tx2); }
.ps-win b { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--up); }
.ps-win small { display: block; text-align: right; margin-top: 2px; font-size: 12px; color: var(--tx3); font-weight: 500; }
.ps-btn.lg { height: 50px; font-size: 15px; border-radius: 12px; width: 100%; }
.ps-btn.danger { background: var(--down); color: #2b0711; box-shadow: 0 8px 24px rgba(237, 65, 99, 0.18); }
.ps-btn[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.ps-pos { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--s0); }
.ps-note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--tx3); font-weight: 500; }
.ps-chatcard { border-radius: 16px; background: var(--s1); border: 1px solid var(--line); padding: 16px; }
@media (max-width: 640px) { .ps-stats.c4 { grid-template-columns: 1fr 1fr; } .ps-mclock strong { font-size: 28px; } .ps-mcard { padding: 16px; } }
.ps-card .px { flex-wrap: wrap; gap: 2px 12px; }
.ps-card .px b { font-size: 14px; }
@media (max-width: 640px) { .ps-mtop { flex-wrap: wrap; } .ps-mtop .t { flex-basis: calc(100% - 70px); } .ps-mtop .r { width: 100%; } .ps-mtop .r [data-pastwrap] { margin-left: auto; } }

/* ------------------------------------------------------------ apostas da ronda em cada cartão */
.ps-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: relative; z-index: 1; }
.ps-sides > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--s0); }
.ps-sides .k { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.ps-sides .k i { width: 6px; height: 6px; border-radius: 50%; }
.ps-sides .u .k { color: var(--up); } .ps-sides .u .k i { background: var(--up); }
.ps-sides .d .k { color: var(--down); } .ps-sides .d .k i { background: var(--down); }
.ps-sides b { font-size: 15px; font-weight: 600; color: var(--tx); }
.ps-sides small { font-size: 12px; color: var(--tx3); font-weight: 500; }
.ps-recent { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 12.5px; color: var(--tx3); font-weight: 500; position: relative; z-index: 1; }
.ps-recent .av { display: flex; }
.ps-recent .av img { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px var(--s1); }
.ps-recent .av img + img { margin-left: -6px; }
.ps-recent .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-recent .t b { color: var(--tx2); font-weight: 600; }
.ps-recent .t .u { color: var(--up); font-weight: 600; } .ps-recent .t .d { color: var(--down); font-weight: 600; }
.ps-recent .live { width: 6px; height: 6px; border-radius: 50%; background: var(--up); flex: none; animation: ps-blink 1.2s infinite; }
.ps-card.ps-flash, .ps-hero.ps-flash { animation: ps-flash 1.4s ease-out; }
.ps-card.ps-flash.d, .ps-hero.ps-flash.d { animation-name: ps-flash-d; }
@keyframes ps-flash { 0% { box-shadow: 0 0 0 2px var(--up), 0 0 40px rgba(0, 231, 1, .35); } 100% { box-shadow: 0 0 0 1px var(--line); } }
@keyframes ps-flash-d { 0% { box-shadow: 0 0 0 2px var(--down), 0 0 40px rgba(237, 65, 99, .35); } 100% { box-shadow: 0 0 0 1px var(--line); } }
.ps-pop { position: absolute; z-index: 5; left: 50%; top: 46%; transform: translate(-50%, 0); padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none;
  background: var(--up); color: var(--up-ink); box-shadow: 0 10px 30px rgba(0,0,0,.45); animation: ps-pop 2.2s cubic-bezier(.22,1,.36,1) forwards; }
.ps-pop.d { background: var(--down); color: #2b0711; }
@keyframes ps-pop { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.9); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px); } }
@media (prefers-reduced-motion: reduce) { .ps-pop { animation-duration: .01s; } .ps-card.ps-flash, .ps-hero.ps-flash { animation: none; } }