/* ============================================================
   Corretora dos Sonhos — pregão de novela (dark + verde/vermelho)
   ============================================================ */
:root{
  --fundo:#0f1526; --painel:#171f36; --linha:#28324f;
  --ink:#e8ecf7; --muted:#93a0c2;
  --alta:#2dd881; --baixa:#f05252; --acao:#4b7bec; --dourado:#c9a24b;
}
*{box-sizing:border-box;}
body{margin:0;font-family:"Inter",system-ui,sans-serif;background:var(--fundo);color:var(--ink);}
.wrap{max-width:860px;margin:0 auto;padding:0 16px;}

.topo{background:linear-gradient(120deg,#101830,#1b2647);border-bottom:3px solid var(--acao);}
.topo .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 16px;flex-wrap:wrap;}
.logo{font-size:1.5rem;font-weight:800;}
.logo span{color:var(--alta);}
.slogan{font-size:.78rem;color:var(--muted);font-style:italic;margin-top:2px;}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{background:rgba(255,255,255,.08);border:1px solid var(--linha);border-radius:999px;padding:7px 14px;font-size:.85rem;color:var(--ink);text-decoration:none;}
.chip.link:hover{background:rgba(255,255,255,.16);}

.aviso{background:#2a2410;border-bottom:1px solid #4d431c;color:#e5cf7a;text-align:center;font-size:.82rem;padding:8px 12px;}

main{padding:26px 0 40px;display:grid;gap:22px;}
.painel{background:var(--painel);border:1px solid var(--linha);border-radius:14px;padding:22px 24px;}
.painel h2{margin:0 0 10px;font-size:1.15rem;}
.sub{color:var(--muted);font-size:.88rem;margin:0 0 16px;line-height:1.6;}
.pos{color:var(--alta);} .neg{color:var(--baixa);}

.cart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:6px;}
.cart-grid div{background:rgba(255,255,255,.04);border:1px solid var(--linha);border-radius:10px;padding:10px 14px;}
.cart-grid small{display:block;color:var(--muted);font-size:.72rem;margin-bottom:2px;}
.cart-grid b{font-size:1.05rem;font-variant-numeric:tabular-nums;}

.acao{border:1px solid var(--linha);border-radius:12px;padding:14px 16px;margin-bottom:12px;background:rgba(255,255,255,.02);}
.a-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;}
.a-id{display:flex;gap:10px;align-items:center;}
.a-emoji{font-size:30px;}
.a-nome{font-weight:700;font-size:.95rem;}
.a-ticker{font-size:.74rem;color:var(--muted);}
.a-preco{text-align:right;}
.a-preco b{font-size:1.15rem;font-variant-numeric:tabular-nums;display:block;}
.a-var{font-size:.8rem;font-weight:700;}
.spark{width:100%;height:34px;margin:8px 0 4px;}
.a-pos{font-size:.8rem;color:var(--muted);background:rgba(75,123,236,.12);border-radius:8px;padding:6px 10px;margin:6px 0;}
.a-acoes{display:flex;gap:8px;margin-top:8px;}
.a-acoes input{width:80px;background:var(--fundo);border:1px solid var(--linha);border-radius:8px;color:var(--ink);padding:9px 10px;font-size:.9rem;font-family:inherit;}
.a-btn{flex:1;border:none;border-radius:8px;padding:10px 0;font-weight:800;font-size:.85rem;cursor:pointer;font-family:inherit;}
.a-btn.comprar{background:var(--alta);color:#06281a;}
.a-btn.vender{background:transparent;border:1px solid var(--baixa);color:var(--baixa);}
.a-btn:disabled{opacity:.35;cursor:not-allowed;}

.rodape{text-align:center;color:var(--muted);font-size:.78rem;padding:10px 16px 34px;line-height:1.7;}
@media(max-width:640px){ .painel{padding:16px;} }