/* O VIP Custom (loja/custom/index.php). As cores e fontes das outras páginas
   do Monkey; o desenho é o da prévia que ele aprovou em 14/10/2026 (passada no
   Impeccable: peças em linhas, a tag em três passos, régua no lugar de texto). */

:root{
    --bg:#050507;--bg2:#0a0a0f;--bg3:#111118;--bg4:#16161f;
    --border:#1a1a25;--border2:#252535;
    --text:#eeeef0;--muted:#7a7a90;--muted2:#9d9db5;
    --accent:#f5a623;--accent2:#ffc344;--red:#e74c3c;--green:#2ecc71;
    --gold:#f5a623;--gold2:#ffc344;--gold-tinta:rgba(245,166,35,.09);
    --sagui:#6ec1ff;--vip:#3ddc84;--gorila:#a77bff;
    --radius:14px;--radius-sm:8px;--raio:14px;
    --curva:cubic-bezier(.23,1,.32,1);
    /* Escala de espaço em base 4. */
    --e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px;--e6:32px;--e7:48px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* O "hidden" dos modos refazer e esperando ganha do display das classes. */
[hidden]{display:none!important}
html{scrollbar-gutter:stable;scrollbar-color:var(--border2) var(--bg)}
html,body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{padding-top:64px;min-height:100vh;font-size:15px;line-height:1.5;caret-color:var(--gold);animation:pageIn .35s ease-out}
body.page-out{animation:pageOut .25s ease-in forwards}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pageOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
::selection{background:rgba(245,166,35,.32);color:#fff}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.grid-bg::before{content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
    background-size:60px 60px}

.pagina{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:var(--e7) 16px 7rem}
.topo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--e5);margin-bottom:var(--e6)}
h1{font-size:2.1rem;font-weight:800;letter-spacing:-.035em;margin:0 0 var(--e2);line-height:1.1}
.sub{color:var(--muted2);margin:0;max-width:44ch}
/* Quem já tem VIP: uma linha discreta de que ele pausa enquanto o Custom vale. */
.vip-pausa{margin:.55rem 0 0;max-width:52ch;font-size:.8rem;line-height:1.5;color:var(--muted)}
.vip-pausa b{color:var(--n);font-weight:700}
.pilulas{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}
.pilulas span{font-size:.8rem;color:var(--muted);margin-right:var(--e1)}
.pilulas button{font:600 .8rem Inter,sans-serif;color:var(--muted2);background:none;border:1px solid var(--border2);border-radius:999px;padding:6px 12px;cursor:pointer;transition:color .15s ease,border-color .15s ease}
@media (hover:hover){.pilulas button:hover{color:var(--text);border-color:var(--muted)}}
.pilulas [data-p="SAGUI"]{color:var(--sagui)}
.pilulas [data-p="VIP"]{color:var(--vip)}
.pilulas [data-p="GORILA"]{color:var(--gorila)}

/* O andamento: esperando a staff, recusado (refazer) ou o Custom valendo. */
.aviso-topo{margin:0 0 var(--e5);padding:var(--e4) var(--e5);border-radius:var(--raio);background:var(--bg2);border:1px solid var(--border2);font-size:.9rem;color:var(--muted2)}
.aviso-topo b{color:var(--text)}
.aviso-topo.recusado{border-color:color-mix(in srgb,var(--red) 55%,var(--border2))}
.aviso-topo.recusado b{color:#ff9b8f}
.aviso-topo.esperando{border-color:rgba(245,166,35,.35)}

.grade{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--e5);align-items:start}
.coluna{display:flex;flex-direction:column;gap:var(--e4);min-width:0}

.cartao{background:var(--bg2);border:1px solid var(--border);border-radius:var(--raio);padding:var(--e5)}
.cartao-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e3) var(--e5)}
.cartao-cab h2{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin:0}
.cartao-cab p{font-size:.82rem;color:var(--muted2);margin:var(--e1) 0 0}
/* A duração: um slider de 2 horas a 30 dias (pedido dele, 14/10/2026). Cada
   posição é uma bolinha no trilho, e o ponto anda de bolinha em bolinha; as
   que já foram ficam douradas. O trilho e as bolinhas ficam atrás do input,
   que só desenha o ponto. --frac (0 a 1) vem do JS. */
.duracao{display:flex;flex-direction:column;gap:var(--e3)}
.duracao-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e4)}
.duracao h2{font-size:.95rem;margin:0}
.duracao-valor{font:700 1.35rem 'JetBrains Mono',monospace;letter-spacing:-.02em;color:var(--gold2);font-variant-numeric:tabular-nums}
.duracao-trilho{--frac:1;--meio:11px;position:relative;height:28px}
.duracao-trilho::before{content:'';position:absolute;left:var(--meio);right:var(--meio);top:50%;height:2px;transform:translateY(-50%);background:var(--border2);border-radius:999px}
.duracao-cheio{position:absolute;left:var(--meio);top:50%;height:2px;transform:translateY(-50%);width:calc((100% - 2 * var(--meio)) * var(--frac));background:var(--gold);border-radius:999px;transition:width .12s var(--curva)}
.duracao-pontos{position:absolute;left:var(--meio);right:var(--meio);top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.duracao-pontos i{flex:none;width:6px;height:6px;margin:0 -3px;border-radius:50%;background:var(--border2);transition:background-color .12s ease,transform .12s var(--curva)}
.duracao-pontos i.cheio{background:var(--gold)}
/* A virada de horas para dias: a bolinha do "1 dia" é um pouco maior. */
.duracao-pontos i.dia1{width:8px;height:8px;margin:0 -4px}
.duracao-slider{position:absolute;inset:0;-webkit-appearance:none;appearance:none;width:100%;height:100%;margin:0;background:transparent;cursor:pointer}
.duracao-slider::-webkit-slider-runnable-track{height:100%;background:transparent}
.duracao-slider::-moz-range-track{background:transparent}
.duracao-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:3px;border-radius:50%;background:var(--gold2);border:3px solid var(--bg2);box-shadow:0 0 0 1px var(--gold)}
.duracao-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--gold2);border:3px solid var(--bg2);box-shadow:0 0 0 1px var(--gold)}
.duracao-slider:focus-visible{outline:none}
.duracao-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(245,166,35,.45)}
.duracao-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px rgba(245,166,35,.45)}
.duracao-pontas{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}
/* No celular cabem as 52 bolinhas se forem menores. */
@media (max-width:520px){
    .duracao-pontos i{width:4px;height:4px;margin:0 -2px}
    .duracao-pontos i.dia1{width:6px;height:6px;margin:0 -3px}
}
@media (prefers-reduced-motion:reduce){.duracao-cheio,.duracao-pontos i{transition:none}}
[data-travado] .seg,[data-travado] .pilulas,[data-travado] .trails-grade{opacity:.45;pointer-events:none}

/* O controle de escolha: um trilho com as opções; o preço embaixo do nome. */
.seg{display:inline-flex;flex-wrap:wrap;gap:var(--e1);padding:var(--e1);background:var(--bg);border:1px solid var(--border);border-radius:11px}
.seg label{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;min-height:44px;padding:6px 12px;border-radius:8px;cursor:pointer;text-align:center;transition:background-color .15s ease}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg b{font-size:.85rem;font-weight:600;color:var(--muted2);white-space:nowrap}
.seg small{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--muted);white-space:nowrap}
.seg small:empty{display:none}
@media (hover:hover){.seg label:hover b{color:var(--text)}}
.seg label:has(input:checked){background:var(--gold-tinta);box-shadow:inset 0 0 0 1px rgba(245,166,35,.55)}
.seg label:has(input:checked) b{color:var(--text)}
.seg label:has(input:checked) small{color:var(--gold2)}
.seg label:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:1px}
/* Refazer: o que fica abaixo do que já foi pago não dá para escolher. */
.seg label.abaixo-pago{opacity:.32;cursor:not-allowed}
.trail.abaixo-pago{cursor:default}
.trail.abaixo-pago .tick{opacity:.6}

/* As peças: uma linha cada, como no configurador de servidor da host. */
.pecas{padding:var(--e2) var(--e5)}
/* Os giros: um slider por roleta, no molde do da duração (pedido dele, 15/10/2026).
   As paradas não andam de 10 em 10 (10, 20, 30, 50...), então cada uma leva o
   número embaixo, alinhado com a bolinha (o 11px é o --meio do trilho). */
.roletas-cab{padding-bottom:var(--e3)}
.roletas .peca,.peca.giro{flex-direction:column;align-items:stretch;gap:var(--e2)}
.giro-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e4)}
.giro-valor{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.giro-valor .duracao-valor{font-size:1.1rem}
.giro-valor small{font:.78rem 'JetBrains Mono',monospace;color:var(--muted2);font-variant-numeric:tabular-nums}
.giro-valor small.brinde{color:var(--gold2)}
.giro-marcas{display:flex;justify-content:space-between;padding:0 11px;margin-top:-4px}
.giro-marcas span{flex:none;width:0;display:flex;justify-content:center;font:.7rem 'JetBrains Mono',monospace;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.giro-marcas span.cheio{color:var(--muted2)}
.giro-marcas span.atual{color:var(--gold2);font-weight:700}
/* Refazer: as paradas abaixo do que já foi pago. */
.giro-marcas span.abaixo{opacity:.35}
.peca{display:flex;align-items:center;justify-content:space-between;gap:var(--e3) var(--e5);padding:var(--e4) 0;border-top:1px solid var(--border)}
.peca:first-child{border-top:0}
.peca h3{font-size:.92rem;font-weight:600;margin:0}
.peca p{font-size:.8rem;color:var(--muted);margin:2px 0 0}
.peca p span{margin-right:6px;font-weight:600}

/* Tag custom: o destaque da página. */
.cartao.tag{border-color:rgba(245,166,35,.35);background:linear-gradient(180deg,rgba(245,166,35,.05),var(--bg2) 160px)}
.so{display:inline-block;margin-left:var(--e2);vertical-align:2px;font:700 .7rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--bg);background:var(--gold);border-radius:4px;padding:2px 6px}
.tag-corpo{display:none;flex-direction:column;gap:var(--e6);margin-top:var(--e5);padding-top:var(--e5);border-top:1px solid var(--border)}
.tag-corpo.aberto{display:flex}
/* A tag custom animada (31/10/2026): a prévia no placar, o que dá para fazer e o editor. */
.tag-animada{display:flex;flex-direction:column;gap:var(--e4);margin-top:var(--e5);padding-top:var(--e5);border-top:1px solid var(--border)}
.ta-lista{list-style:none;display:flex;flex-wrap:wrap;gap:var(--e2) var(--e5);font-size:.82rem;color:var(--muted2)}
.ta-lista li{display:flex;align-items:center;gap:var(--e2)}
.ta-lista li::before{content:'';width:10px;height:2px;border-radius:2px;background:var(--gold);flex:none}
.ta-rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e3) var(--e5)}
.ta-rodape .nota{flex:1 1 280px}
.ta-link{flex:none;font:600 .82rem Inter,sans-serif;color:var(--gold);border:1px solid rgba(245,166,35,.35);border-radius:999px;padding:7px 14px;transition:background-color .15s ease,border-color .15s ease}
@media (hover:hover){.ta-link:hover{background:var(--gold-tinta);border-color:var(--gold)}}
/* Esperando a staff ou sem troca sobrando: dá para ver (e trocar de aba), não para mexer. */
.tag-corpo.travado .passo{pointer-events:none}
.tag-corpo.travado .passo:not(:last-child){opacity:.55}
.passo{display:flex;flex-direction:column;gap:var(--e3)}
.rotulo{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.abas{display:flex;gap:var(--e1);padding:var(--e1);background:var(--bg);border:1px solid var(--border);border-radius:11px;align-self:flex-start}
.aba{font:600 .85rem Inter,sans-serif;color:var(--muted2);background:none;border:0;border-radius:8px;padding:8px 16px;cursor:pointer}
.aba[aria-selected=true]{color:var(--text);background:var(--gold-tinta);box-shadow:inset 0 0 0 1px rgba(245,166,35,.55)}
.campo{display:flex;flex-direction:column;gap:var(--e2)}
.campo>label,.campo>.nome-campo{font-size:.8rem;color:var(--muted2)}
.campo input[type=text]{width:100%;max-width:280px;font:600 1rem 'JetBrains Mono',monospace;color:var(--text);background:var(--bg);border:1px solid var(--border2);border-radius:9px;padding:10px 12px;transition:border-color .15s ease}
.campo input[type=text]:focus{outline:none;border-color:var(--gold)}
.campos{display:flex;flex-direction:column;gap:var(--e4)}

/* Escolher o símbolo: o lado de antes e o de depois; a lista abre embaixo. */
.lados{display:flex;flex-wrap:wrap;gap:var(--e2)}
.lado{display:flex;align-items:center;gap:var(--e3);height:44px;padding:0 14px;font:600 .82rem Inter,sans-serif;color:var(--muted2);background:var(--bg);border:1px solid var(--border2);border-radius:9px;cursor:pointer}
.lado b{min-width:1.3em;font-size:1.2rem;font-weight:600;color:var(--text);text-align:center}
@media (hover:hover){.lado:hover{border-color:var(--muted)}}
.lado[aria-expanded=true]{border-color:var(--gold);background:var(--gold-tinta);color:var(--text)}
.painel-simb{display:none;flex-direction:column;gap:var(--e3);margin-top:var(--e2);padding:var(--e3);background:var(--bg);border:1px solid var(--border);border-radius:12px}
.painel-simb.aberto{display:flex}
.cats{display:flex;flex-wrap:wrap;gap:var(--e1)}
.cat{font:600 .8rem Inter,sans-serif;color:var(--muted2);background:none;border:0;border-radius:7px;padding:6px 10px;cursor:pointer}
.cat[aria-selected=true]{color:var(--text);background:var(--bg3)}
.glifos{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:var(--e1);max-height:196px;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.glifo{height:42px;font:500 1.15rem Inter,'Noto Sans Symbols','Segoe UI Symbol',sans-serif;color:var(--text);background:var(--bg2);border:1px solid var(--border);border-radius:8px;cursor:pointer;padding:0}
.glifo.par{font-size:1rem}
@media (hover:hover){.glifo:hover{border-color:var(--muted)}}
.glifo[aria-pressed=true]{border-color:var(--gold);background:var(--gold-tinta)}
.glifo.nenhum{grid-column:span 2;font:600 .8rem Inter,sans-serif;color:var(--muted2)}

/* O quadro de pintar: a tag grande, cada letra é um alvo. */
.palco{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:var(--e6) var(--e4);border-radius:12px;
    background:radial-gradient(ellipse at 50% 0%,#1d2633 0%,#0d1117 75%);touch-action:none;user-select:none;-webkit-user-select:none}
.letra{width:44px;height:58px;display:grid;place-items:center;font:800 1.75rem Inter,sans-serif;border-radius:8px;cursor:crosshair;text-shadow:0 2px 6px rgba(0,0,0,.6);transition:background-color .12s ease}
@media (hover:hover){.letra:hover{background:rgba(255,255,255,.06)}}
.letra.espaco{width:18px;cursor:default}
.pincel{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2)}
.cor{width:28px;height:28px;border-radius:50%;border:0;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.cor[aria-pressed=true]{box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--text)}
.pintar-tudo{margin-left:auto;font:600 .8rem Inter,sans-serif;color:var(--muted2);background:none;border:0;padding:6px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border2)}
@media (hover:hover){.pintar-tudo:hover{color:var(--text)}}

.separar{display:flex;align-items:center;gap:var(--e3);cursor:pointer;font-size:.88rem}
.separar input{appearance:none;width:38px;height:22px;border-radius:999px;background:var(--border2);position:relative;cursor:pointer;flex-shrink:0;margin:0;transition:background-color .18s ease}
.separar input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s var(--curva)}
.separar input:checked{background:var(--gold)}
.separar input:checked::after{transform:translateX(16px)}
.separar input:disabled{opacity:.5;cursor:not-allowed}
.separar small{color:var(--muted);font-size:.8rem}

/* O chat e o placar como no perfil público (monkey-hvh/perfil/perfil.css). */
.chat-cs{border-radius:10px;padding:var(--e4);display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    background:linear-gradient(160deg,#1c2733 0%,#121a22 55%,#0c1117 100%)}
.chat-linha{display:inline-block;max-width:100%;background:rgba(0,0,0,.42);border-radius:3px;padding:.38rem .6rem;
    font-weight:600;font-size:.95rem;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.placar-caixa{container-type:inline-size}
.placar-jogo{--pj-col:30px 24px minmax(0,13rem) 52px minmax(0,1fr) 60px 52px 52px 52px 38px 54px;
    border-radius:8px;padding:.6rem .65rem .75rem;background:linear-gradient(180deg,#3b3933,#2d2c28);
    font-family:'Barlow Condensed',sans-serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
.pj-cab{display:grid;grid-template-columns:var(--pj-col);gap:3px;align-items:end;padding:0 0 .35rem;
    color:#c4c6c9;font-size:.78rem;font-weight:500;text-align:center;white-space:nowrap}
.pj-sinal svg{width:13px;height:10px}
.pj-mvp svg{width:12px;height:12px;vertical-align:-1px}
.placar-cs{display:grid;grid-template-columns:var(--pj-col);gap:3px;align-items:center;height:32px;border-radius:2px;
    background:#566b8c;font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:600;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.pl-ping{text-align:center;color:#a9b5c6;font-weight:500}
.pl-av{width:24px;height:24px;border-radius:2px;background:#2b3442}
.pl-quem{display:flex;align-items:center;gap:.35rem;min-width:0;padding-left:.15rem}
.pl-clan{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pl-nome{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-card{display:flex;align-items:center;justify-content:center}
.pl-card svg{display:block;width:50px;height:auto}
.pl-n{align-self:stretch;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.13)}
.pl-mvp svg{width:14px;height:14px}
.pl-mvp sup{font-size:.62rem;margin-left:1px;align-self:flex-start;margin-top:5px}
.placar-cs.troca{animation:trocaJogo .22s var(--curva)}
@keyframes trocaJogo{from{opacity:0;transform:translateY(4px)}}
@container (max-width:640px){
    .placar-jogo{--pj-col:22px minmax(0,1fr) 42px 36px 40px;padding:.5rem .5rem .6rem}
    .pj-sinal,.pj-armas,.pj-din,.pj-mortes,.pj-ast,.pj-mvp,.pl-ping,.pl-armas,.pl-din,.pl-mortes,.pl-ast,.pl-mvp{display:none}
    .placar-jogo .placar-cs{font-size:.88rem}
    .placar-jogo .pl-av{width:22px;height:22px}
    .placar-jogo .pl-card svg{width:40px}
}
.no-jogo{display:grid;gap:var(--e3)}
.nota{font-size:.8rem;color:var(--muted);margin:0}

/* Trails: cada uma com a animação do perfil, marcada uma por uma. */
.trails-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--e3);margin-top:var(--e5)}
.trail{position:relative;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--border2);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .15s ease}
.trail input{position:absolute;opacity:0;pointer-events:none}
.trail canvas{display:block;width:100%;height:86px}
.trail-info{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-top:1px solid var(--border)}
.trail-info b{font-size:.82rem;font-weight:600;line-height:1.3;color:var(--muted2)}
.trail-info small{font:.75rem 'JetBrains Mono',monospace;color:var(--muted);white-space:nowrap}
.tick{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.3);background:rgba(5,5,7,.5)}
.tick svg{width:12px;height:12px;opacity:0;color:var(--bg)}
@media (hover:hover){.trail:hover{border-color:var(--muted)}}
.trail:has(input:checked){border-color:var(--gold)}
.trail:has(input:checked) .tick{background:var(--gold);border-color:var(--gold)}
.trail:has(input:checked) .tick svg{opacity:1}
.trail:has(input:checked) b{color:var(--text)}
.trail:has(input:checked) small{color:var(--gold2)}
.trail:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}

/* Resumo. Cabe sempre na tela (pergunta dele, 15/10/2026: com o Custom cheio,
   o resumo passava da tela e o botão só aparecia no fim da página). Maior que
   a tela, ele rola por dentro, e o botão com o aviso dele fica grudado no pé. */
.resumo{position:sticky;top:calc(64px + var(--e5));max-height:calc(100dvh - 64px - 2 * var(--e5));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
    background:var(--bg2);border:1px solid var(--border2);border-radius:var(--raio);padding:var(--e5)}
.resumo-acao{position:sticky;bottom:calc(-1 * var(--e5));margin:0 calc(-1 * var(--e5)) calc(-1 * var(--e5));padding:var(--e3) var(--e5) var(--e5);background:var(--bg2)}
.resumo-acao::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:14px;background:linear-gradient(transparent,var(--bg2));pointer-events:none}
.resumo h2{font-size:.95rem;margin:0 0 var(--e4)}
.linhas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e2);font-size:.84rem}
.linhas li{display:flex;justify-content:space-between;gap:var(--e3)}
.linhas li span:first-child{color:var(--muted2)}
.linhas li span:last-child{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.linhas li.ouro span{color:var(--gold2)}
.linhas li.fraco span{color:var(--muted)}
.total{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--e5);padding-top:var(--e4);border-top:1px solid var(--border)}
.total span{color:var(--muted2);font-size:.85rem}
.total b{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-size:1.8rem;letter-spacing:-.02em;color:var(--gold)}
.dia{text-align:right;font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--muted)}
.giros{font-size:.8rem;color:var(--muted2);margin:var(--e4) 0 0}
.giros:empty{display:none}
.giros b{color:var(--gold2);font-weight:600}
.regua{margin-top:var(--e6);padding-bottom:var(--e7)}
.trilho{position:relative;height:3px;border-radius:2px;background:var(--border2);margin:var(--e5) 6px 0}
.marca{position:absolute;top:50%;transform:translate(-50%,-50%)}
.marca i{display:block;width:9px;height:9px;border-radius:50%;background:var(--n);box-shadow:0 0 0 3px var(--bg2)}
.marca small{position:absolute;top:13px;left:50%;transform:translateX(-50%);font:500 .7rem/1.3 'JetBrains Mono',monospace;color:var(--n);text-align:center;white-space:nowrap}
.seu{position:absolute;top:50%;transform:translate(-50%,-50%);transition:left .25s var(--curva)}
.seu i{display:block;width:13px;height:13px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--bg2)}
.seu small{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);font:700 .7rem 'JetBrains Mono',monospace;color:var(--gold);white-space:nowrap}
.aprovacao{font-size:.8rem;color:var(--muted2);margin:0 0 var(--e3)}
.igual-pronto{font-size:.82rem;line-height:1.5;color:var(--muted2);margin:0 0 var(--e3);padding:var(--e3);border-radius:10px;border:1px solid rgba(245,166,35,.35);background:var(--gold-tinta)}
.igual-pronto b{color:var(--text)}
.igual-pronto a{color:var(--gold2);text-decoration:underline;text-underline-offset:2px}
.troca-info{font-size:.85rem;line-height:1.55;color:var(--muted2);margin:0 0 var(--e4)}
.troca-info b{color:var(--text)}
.troca-info .recusada{display:block;margin-top:var(--e2);color:#ff9b8f}
.comprar{width:100%;font:700 .95rem Inter,sans-serif;color:var(--bg);background:var(--gold);border:0;border-radius:10px;padding:14px;cursor:pointer;transition:filter .18s ease}
@media (hover:hover){.comprar:hover{filter:brightness(1.08)}}
.comprar:disabled{opacity:.45;cursor:not-allowed;filter:none}
.comprar.secundario{color:var(--gold);background:transparent;border:1px solid var(--gold)}
.compartilhar{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;font:600 .82rem Inter,sans-serif;color:var(--muted2);background:none;border:0;border-radius:10px;padding:10px;cursor:pointer;transition:color .15s ease}
.compartilhar[hidden]{display:none}
.compartilhar svg{width:15px;height:15px;flex:none}
@media (hover:hover){.compartilhar:hover{color:var(--gold)}}
.compartilhar:disabled{opacity:.45;cursor:not-allowed}
.compartilhar:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Na renovação a régua some: o botão ganha o respiro que ela dava. */
.renovando #comprar{margin-top:var(--e4)}
.troca-bloco{margin-top:var(--e5);padding-top:var(--e5);border-top:1px solid var(--border)}
.erro{font-size:.8rem;color:#ff9b8f;margin:var(--e2) 0 0;text-align:center}
.erro:empty{display:none}

.barra{display:none;position:fixed;left:0;right:0;bottom:0;align-items:center;justify-content:space-between;gap:var(--e4);padding:var(--e3) 16px;background:rgba(10,10,15,.96);border-top:1px solid var(--border2);z-index:5}
.barra span{font-size:.8rem;color:var(--muted2)}
.barra b{font-family:'JetBrains Mono',monospace;font-size:1.2rem;color:var(--gold)}
.barra a{font:700 .82rem Inter,sans-serif;color:var(--bg);background:var(--gold);border-radius:8px;padding:10px 14px}

.toast{position:fixed;left:50%;bottom:1.5rem;z-index:1000;max-width:calc(100vw - 2rem);background:var(--bg3);border:1px solid var(--border2);
    border-radius:12px;padding:.7rem 1.05rem;font-size:.84rem;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.6);
    transform:translate(-50%,14px);opacity:0;pointer-events:none;transition:transform .22s var(--curva),opacity .22s}
.toast.aberto{transform:translate(-50%,0);opacity:1}
.toast.erro{border-color:color-mix(in srgb,var(--red) 60%,transparent);color:#ff9b8f}

footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:2rem 2.5rem;display:flex;justify-content:space-between;
    align-items:center;flex-wrap:wrap;gap:1rem;color:var(--muted);font-size:.8rem}
.footer-links{display:flex;flex-wrap:wrap;gap:1.3rem}
footer a{color:var(--muted2);transition:color .2s}
footer a:hover{color:var(--accent)}

@media (max-width:900px){
    .grade{grid-template-columns:minmax(0,1fr)}
    .resumo{position:static;max-height:none;overflow:visible}
    .resumo-acao{position:static}
    .resumo-acao::before{display:none}
    .barra{display:flex}
}
@media (max-width:640px){
    .pagina{padding-top:var(--e6)}
    h1{font-size:1.75rem}
    .cartao{padding:var(--e4)}
    .pecas{padding:var(--e1) var(--e4)}
    .peca,.cartao-cab,.duracao{flex-direction:column;align-items:stretch}
    .seg{display:flex}
    .seg label{flex:1;min-width:0;padding:6px 6px}
    .campo input[type=text]{max-width:none}
    .letra{width:28px;height:42px;font-size:1.2rem}
    .letra.espaco{width:10px}
    .palco{gap:2px;padding:var(--e5) var(--e2)}
    .trails-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
    footer{padding:1.5rem 1rem}
}
@media (prefers-reduced-motion:reduce){
    body,.seu,.separar input,.separar input::after{animation:none;transition:none}
    .placar-cs.troca{animation:none}
}