:root{
  --bg:#0f172a;        /* slate-900 */
  --card:#111827;      /* gray-900  */
  --muted:#1f2937;     /* gray-800  */
  --text:#e5e7eb;      /* gray-200  */
  --accent:#22d3ee;    /* cyan-400  */
  --accent-2:#34d399;  /* emerald-400 */
  --danger:#f87171;    /* red-400 */
  --warning:#f59e0b;   /* amber-500 */
}
*{box-sizing:border-box}
body{
  margin:0; font-family: system-ui,Segoe UI,Roboto,Ubuntu,Arial; background:var(--bg); color:var(--text);
}
.header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:linear-gradient(90deg,var(--card),#0b1222);border-bottom:1px solid #1f2937}
.header h1{font-size:18px;margin:0}
.header nav a{color:var(--text);text-decoration:none;margin-left:16px;opacity:.9}
.container{max-width:1200px;margin:24px auto;padding:0 16px}
.card{background:var(--card);border:1px solid #1f2937;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden}
.card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #1f2937}
.card-header h2{font-size:18px;margin:0}
.card-content{padding:20px}
.input{background:var(--muted);border:1px solid #2b3545;border-radius:12px;padding:10px 12px;color:var(--text);width:100%}
.button{background:var(--accent);color:#001018;border:none;border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:600}
.button.secondary{background:transparent;border:1px solid #2b3545;color:var(--text)}
.button.danger{background:var(--danger);color:#320606}
.badge{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;display:inline-block}
.badge.pago{background:rgba(52,211,153,.15);color:var(--accent-2);border:1px solid rgba(52,211,153,.3)}
.badge.pendente{background:rgba(34,211,238,.12);color:var(--accent);border:1px solid rgba(34,211,238,.25)}
.badge.vencido{background:rgba(245,158,11,.12);color:var(--warning);border:1px solid rgba(245,158,11,.25)}
.badge.cancelado{background:rgba(248,113,113,.12);color:var(--danger);border:1px solid rgba(248,113,113,.25)}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;text-align:left;padding:8px 12px;color:#94a3b8}
.table tbody tr{background:var(--muted);border:1px solid #2b3545}
.table tbody td{padding:12px}
.table tbody tr:nth-child(odd){background:#243041}
.row-actions a{margin-right:8px;text-decoration:none;color:var(--accent)}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr 1fr}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
.footer{padding:24px;text-align:center;color:#94a3b8}
.helper{font-size:12px;color:#9ca3af}