*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:#0b1220;color:#e5e7eb}
#app{max-width:1100px;margin:0 auto;padding:24px}
h1,h2{margin:0 0 12px}
h1{font-size:28px}h2{font-size:20px}
.card{background:#0f172a;border:1px solid #1f2937;border-radius:14px;padding:18px;margin:16px 0;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.topbar{position:sticky;top:0;display:flex;gap:12px;align-items:center;background:#0f172a;border:1px solid #1f2937;border-radius:14px;padding:10px 14px;margin-bottom:16px;z-index:10}
.topbar .brand{font-weight:700}
.topbar .spacer{flex:1}
.hidden{display:none!important}
.form{display:grid;gap:10px}
input,select,textarea{background:#111827;border:1px solid #374151;color:#e5e7eb;border-radius:10px;padding:10px}
button{border:0;border-radius:10px;padding:10px 14px;cursor:pointer}
button.primary{background:#2563eb;color:#fff}
button.ghost{background:transparent;border:1px solid #334155;color:#e5e7eb}
button.danger{background:#ef4444;color:#fff}
button.sm{padding:6px 10px;font-size:12px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid .card:nth-child(1){grid-column:1/-1}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:12px}
@media(max-width:900px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:#111827;border:1px solid #1f2937;border-radius:12px;padding:12px}
.kpi.total{background:#0a0f1a;border:1px solid #334155}
.kpi-label{font-size:12px;color:#9ca3af} .kpi-value{font-size:22px;font-weight:700;margin-top:4px}
.table{margin-top:10px}
.table table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #1f2937;padding:8px;text-align:left;font-size:14px}
.tabs{display:flex;gap:8px;margin-bottom:10px}
.tabs .tab{background:#0a0f1a;border:1px solid #334155;color:#e5e7eb;padding:8px 12px;border-radius:999px;font-size:13px}
.tabs .tab.active{background:#2563eb;border-color:#2563eb}
#loginView{max-width:420px;margin:10vh auto}
#snackbar{visibility:hidden;min-width:240px;background:#10b981;color:#06251a;text-align:center;border-radius:8px;padding:12px;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:999;box-shadow:0 8px 24px rgba(0,0,0,.3)}
#snackbar.show{visibility:visible;animation:fadein .2s, fadeout .2s 2.2s}
@keyframes fadein{from{bottom:0;opacity:0}to{bottom:24px;opacity:1}}
@keyframes fadeout{from{bottom:24px;opacity:1}to{bottom:0;opacity:0}}