**3. assets/styles.css**
```css
:root {
  --bg: #0b0f14;
  --card: #111827;
  --muted: #6b7280;
  --text: #e5e7eb;
  --primary: #22d3ee;
  --accent: #a78bfa;
  --danger: #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;
  --ring: rgba(34, 211, 238, .35);
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f7fafc; --card:#ffffff; --text:#0b0f14; --muted:#4b5563; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans;
  background: var(--bg); color: var(--text);
}
a { color: var(--primary); text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 16px; }

/* Topbar */
.navbar { position: sticky; top:0; z-index:10; background: rgba(17,24,39,.7); backdrop-filter: blur(10px); border-bottom:1px solid #1f2937; }
.navbar .inner { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
.brand { display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.3px; }
.brand .logo { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--primary),var(--accent)); box-shadow:0 0 0 3px var(--ring); }
.navlinks { display:flex; gap:14px; flex-wrap: wrap; }
.navlinks a { padding:8px 10px; border-radius:10px; color:var(--text); }
.navlinks a.active, .navlinks a:hover { background: #0f172a; }

/* Grid cards */
.grid { display:grid; gap:16px; grid-template-columns: repeat(12, 1fr); }
.card { background:var(--card); border:1px solid #1f2937; border-radius:16px; padding:14px; box-shadow: 0 10px 25px rgba(0,0,0,.25); }
.card h3 { margin:0 0 8px; font-size:16px; color:#cbd5e1; }
.card .metric { font-size:28px; font-weight:700; }

/* Forms */
.input, select, .btn { width:100%; padding:10px 12px; border-radius:12px; border:1px solid #233044; background:#0b1320; color:var(--text); }
.input:focus, select:focus { outline:none; box-shadow: 0 0 0 3px var(--ring); border-color: var(--primary); }
.btn { background: linear-gradient(135deg,var(--primary),var(--accent)); color:#0b0f14; border:none; font-weight:700; cursor:pointer; }
.btn.secondary { background:#0b1320; color:var(--text); border:1px solid #233044; }
.btn.danger { background: var(--danger); color: #fff; }
.row { display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(6,1fr); } .row { grid-template-columns:1fr; } }
@media (max-width: 600px) { .grid { grid-template-columns: repeat(4,1fr); } }

/* Tables */
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:10px; border-bottom:1px solid #1f2937; text-align:left; }
.table th { color:#9ca3af; font-weight:600; }

/* Pills */
.badge { display:inline-block; padding:4px 8px; border-radius:20px; font-size:12px; border:1px solid #233044; color:#cbd5e1; }
.badge.green { border-color: #14532d; background:#052e16; color:#86efac; }
.badge.red { border-color:#450a0a; background:#2a0b0b; color:#fca5a5; }

/* Print styles for reports/receipts */
@media print {
  .navbar, .no-print { display:none !important; }
  body { background:white; color:black; }
  .card { box-shadow:none; border:1px solid #e5e7eb; }
}
```
---
Posso seguir com o **assets/app.js**?