*{box-sizing:border-box;font-family:Segoe UI,Arial,sans-serif}
body{margin:0;background:#f3f6fb;color:#1f2937}
.header{background:linear-gradient(90deg,#020617,#0f172a);color:#fff;padding:16px 28px;display:flex;justify-content:space-between}
.wrapper{display:flex;min-height:100vh}
.sidebar{width:230px;background:#020617;padding-top:25px}
.sidebar a{display:block;padding:13px 28px;color:#c7d2fe;text-decoration:none}
.sidebar a:hover,.sidebar a.active{background:#0f172a;color:#38bdf8}
.content{flex:1;padding:30px}
.card{background:#fff;padding:22px;border-radius:14px;box-shadow:0 10px 25px rgba(0,0,0,.08);margin-bottom:22px}
table{width:100%;border-collapse:collapse}
th{background:#0f172a;color:#fff;padding:12px;font-size:13px}
td{padding:12px;border-bottom:1px solid #e5e7eb;font-size:13px}
.badge{padding:6px 14px;border-radius:999px;font-size:12px}
.unpaid{background:#fee2e2;color:#991b1b}
.paid{background:#dcfce7;color:#166534}
.btn{padding:8px 14px;border-radius:8px;text-decoration:none;font-size:12px;color:#fff}
.wa{background:#22c55e}
.pay{background:#2563eb}
input,select,button{padding:10px;margin-bottom:10px;width:100%;border-radius:8px;border:1px solid #d1d5db}
button{background:#0f172a;color:#fff;border:none}