:root{
  --bbym-red:#C81E1E;
  --bbym-black:#0B0B0B;
  --bbym-gold:#FFD700;
  --bbym-white:#FFFFFF;
  --text:#111213;
  --muted:#6B7280;
  --bg:#F8F8F8;
  --card:#ffffff;
  --focus: 2px dotted var(--bbym-gold);
  --radius:16px;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

a{color:var(--bbym-red);text-decoration:none}
a:hover{text-decoration:underline}

.header{
  background:linear-gradient(90deg, var(--bbym-black), #1A1A1A);
  color:var(--bbym-white);
  padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom: 3px solid rgba(255,215,0,0.35);
}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.brand .logo{
  width:36px;height:36px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--bbym-gold), #b48c00);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35);
  display:grid;place-items:center;color:var(--bbym-black);font-weight:900;
}
.brand span{letter-spacing:.3px}

.nav{display:flex;gap:12px;flex-wrap:wrap}
.nav a, .nav button{
  color:var(--bbym-white);
  background:transparent;
  border:1px solid rgba(255,255,255,0.18);
  padding:8px 12px;border-radius:999px;cursor:pointer;
  transition:.2s ease;
}
.nav a:hover,.nav button:hover{background:rgba(255,255,255,0.08)}

.container{max-width:1100px;margin:24px auto;padding:0 16px}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:12px 0 24px}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kpis{grid-template-columns:1fr}}

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  border:1px solid #eee;
}
.card h3{margin:4px 0 8px 0;font-size:1rem;color:#111}
.kpi .value{font-size:1.8rem;font-weight:800}
.kpi .hint{color:var(--muted);font-size:.9rem}

.section-title{
  margin:8px 0 12px;
  padding-left:12px;
  border-left:4px solid var(--bbym-gold);
  font-weight:800;
}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bbym-red);
  color:white;border:none;border-radius:12px;
  padding:10px 14px;cursor:pointer;box-shadow:var(--shadow);
}
.btn.secondary{background:#1f2937}
.btn.ghost{background:transparent;color:var(--bbym-red);border:1px solid var(--bbym-red)}
.btn:focus-visible{outline:var(--focus)}
.btn:hover{filter:brightness(1.05)}

.grid{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.span-12{grid-column:span 12}
.span-8{grid-column:span 8}
.span-6{grid-column:span 6}
.span-4{grid-column:span 4}
.span-3{grid-column:span 3}
@media(max-width:900px){.span-6,.span-4,.span-3,.span-8{grid-column:span 12}}

.progress{width:100%;height:12px;background:#efefef;border-radius:999px;overflow:hidden;border:1px solid #e5e7eb}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--bbym-gold), #ffec88);}

.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px 12px;border-bottom:1px solid #f0f0f0;text-align:left}
.table tr:last-child td{border-bottom:none}
.table thead th{background:#f9fafb;color:#111;font-weight:700}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.8rem;border:1px solid #e5e7eb;background:#fff}
.badge.gold{border-color:var(--bbym-gold);}

.footer{margin-top:32px;padding:18px 20px;color:#fff;background:linear-gradient(90deg,#111, #191919);border-top:3px solid rgba(255,215,0,0.35);text-align:center}

/* Big Metrics */
.big-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0 20px}
@media(max-width:900px){.big-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.big-metrics{grid-template-columns:1fr}}
.big-metrics .metric{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:16px;padding:16px;border:1px solid #e5e7eb;background:#fff;box-shadow:var(--shadow)}
.big-metrics .metric .number{font-size:2.2rem;font-weight:900;letter-spacing:.5px;color:#fff;background:#000;padding:10px 16px;border-radius:12px;display:inline-block}
.big-metrics .metric .caption{margin-top:8px;color:#111;font-weight:700;text-transform:uppercase;letter-spacing:.8px;font-size:.85rem}

/* Modal (setup/auth) */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none}
.modal{position:fixed;inset:0;display:none;place-items:center}
.modal.active,.modal-backdrop.active{display:grid}
.modal-card{background:#fff;border-radius:16px;box-shadow:var(--shadow);border:1px solid #eee;max-width:520px;width:92%;padding:18px}
.modal-card h3{margin:.2rem 0 0.6rem}
.modal-card label{display:block;margin-top:8px}
.modal-card input{width:100%;padding:10px;border-radius:12px;border:1px solid #e5e7eb}
.modal-actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}
.small{font-size:.9rem;color:#6b7280}