:root{
  --gold:#ecbb42;
  --gold-100:#f6dd9f;
  --paper:#fefefb;
  --ink:#141414;
  --ink-60:#5a5a5a;
  --ok:#16a34a;
  --card:#ffffff;
  --ring: rgba(236,187,66,.45);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius:20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Arial,Helvetica,sans-serif;
  background: radial-gradient(1200px 1200px at -10% -10%, var(--gold-100) 0%, var(--paper) 40%, var(--paper) 100%);
  color:var(--ink);
}

.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; gap:16px; position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75) 60%, rgba(255,255,255,0));
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.brand{display:flex; align-items:center; gap:14px}
.logo{width:48px; height:48px; border-radius:50%; border:2px solid var(--gold); background:var(--paper); object-fit:cover}
.brand-text h1{margin:0; font-size:20px; line-height:1.1}
.brand-text p{margin:2px 0 0; color:var(--ink-60); font-size:13px}

.actions{display:flex; gap:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 14px; border-radius:999px; font-weight:600; text-decoration:none}
.btn-outline{border:2px solid var(--gold); color:#332200}
.btn-outline:hover{background:var(--gold); transition:.2s}
.btn-ghost{background:transparent; color:var(--ink-60)}
.btn-ghost:hover{background:#fff; box-shadow:var(--shadow)}

.container{max-width:1100px; margin:28px auto; padding:0 18px}

/* 2 cards agora */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:28px}
.stat-card{
  background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px 20px
}
.stat-label{color:var(--ink-60); font-weight:600; font-size:13px; letter-spacing:.02em}
.stat-value{font-size:34px; font-weight:800; margin-top:6px}
.unit{font-size:16px; font-weight:700; margin-left:6px; color:var(--ink-60)}
.stat-sub{margin-top:6px; font-size:12px; color:var(--ink-60)}

.live{background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
.live-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.live-header h2{margin:0; font-size:18px}
.live-controls{display:flex; align-items:center; gap:8px; color:var(--ink-60); font-size:13px}
.dot{width:10px; height:10px; border-radius:50%; background:#bbb; box-shadow:0 0 0 4px rgba(0,0,0,.04)}
.dot.live{background:var(--ok); box-shadow:0 0 0 4px rgba(22,163,74,.12)}
.table-wrap{overflow:auto; border-radius:12px; border:1px solid rgba(0,0,0,.06)}
.table{width:100%; border-collapse:collapse; background:#fff}
.table th, .table td{padding:12px 14px; text-align:left; border-bottom:1px solid #f1f1f1; font-size:14px}
.table th{background:linear-gradient(180deg,#fff,#fafafa); color:#555}
.link{color:#0a58ca; text-decoration:none}
.link:hover{text-decoration:underline}

.about{margin:28px 0}
.about h3{margin:0 0 8px}
.about ol{margin:0 0 10px 18px; color:#333}
.disclaimer{font-size:12px; color:var(--ink-60)}

.site-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px; color:var(--ink-60); border-top:1px solid rgba(0,0,0,.06)
}

@media (max-width:900px){
  .stats{grid-template-columns:1fr}
  .actions{display:none}
}