:root { --bg:#0b0f17; --card:#121826; --line:#1f2937; --mut:#8b98ad; --txt:#e8edf5; --acc:#f7941d; --acc2:#ffb74d; --ok:#86efac; --bad:#fca5a5; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(1200px 600px at 50% -10%, #16203a 0%, var(--bg) 60%); color:var(--txt); font-family:'Segoe UI',system-ui,sans-serif; }
.logo { height:34px; width:auto; }
button, input, select { font:inherit; }

.login { max-width:400px; margin:12vh auto 0; padding:36px 28px; background:var(--card); border:1px solid var(--line); border-radius:18px; text-align:center; }
.login h1 { font-size:1.3rem; margin:18px 0 6px; }
.login p { color:var(--mut); font-size:.9rem; margin:0 0 22px; }
.login .nota { margin:16px 0 0; font-size:.8rem; }
.g-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:13px; border:none; border-radius:10px; background:#fff; color:#1f1f1f; font-weight:700; cursor:pointer; }
.g-btn:hover { background:#f1f1f1; }

.topo { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 24px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#101727,#0a0e16); }
.quem { display:flex; align-items:center; gap:10px; font-weight:600; font-size:.9rem; }
.quem img { width:32px; height:32px; border-radius:50%; }
.quem button { background:none; border:1px solid var(--line); color:var(--mut); border-radius:8px; padding:6px 12px; cursor:pointer; }

main { max-width:1000px; margin:0 auto; padding:24px 16px 60px; }
h2 { font-size:1.05rem; margin:32px 0 12px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:4px; }
.card small { color:var(--mut); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.card b { font-size:1.6rem; }
.card span { color:var(--mut); font-size:.8rem; }
.card.destaque { border-color:var(--acc); background:linear-gradient(135deg,rgba(247,148,29,.16),var(--card)); }
.card.destaque b { color:var(--acc2); }

.lojas { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.loja { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center; }
.loja.off { opacity:.5; }
.loja .lg { width:72px; height:72px; border-radius:12px; background:#fff; display:grid; place-items:center; overflow:hidden; }
.loja .lg img { max-width:100%; max-height:100%; object-fit:contain; }
.loja .lg span { color:#111; font-size:1.8rem; font-weight:800; }
.loja b { font-size:.9rem; }
.loja small { color:var(--mut); font-size:.75rem; }

.meses { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:.9rem; }
.meses th, .meses td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); }
.meses th { color:var(--mut); font-weight:600; font-size:.78rem; }
.ok { color:var(--ok); } .pend { color:var(--acc2); } .erro { color:var(--bad); }
.vazio { color:var(--mut); background:var(--card); border:1px dashed var(--line); border-radius:14px; padding:20px; text-align:center; }

.pix { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; align-items:end; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.pix label { display:flex; flex-direction:column; gap:6px; color:var(--mut); font-size:.8rem; }
.pix input, .pix select { padding:10px; border-radius:9px; border:1px solid var(--line); background:#0b1120; color:var(--txt); }
.pix button { padding:11px; border:none; border-radius:9px; background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#1a1206; font-weight:800; cursor:pointer; }
#msgPix { grid-column:1/-1; font-size:.85rem; }

@media (max-width:600px) {
  .topo { padding:12px 16px; } .quem span { display:none; }
  .meses th:nth-child(2), .meses td:nth-child(2) { display:none; }
}