*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:#f6f8fb;color:#111827}.topbar{height:68px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:10}.brand{font-weight:900;font-size:20px;color:#2563eb}.nav a{margin-left:14px;color:#475569;text-decoration:none;font-weight:700}.wrap{max-width:1180px;margin:0 auto;padding:32px 20px}.grid{display:grid;gap:18px}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}.card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:22px;box-shadow:0 12px 30px rgba(15,23,42,.06)}.hero{background:linear-gradient(135deg,#eff6ff,#ecfeff);border:1px solid #bfdbfe}.hero h1{font-size:40px;line-height:1.05;margin:0 0 12px}.muted{color:#64748b}.btn{border:0;border-radius:14px;padding:12px 18px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.primary{background:#2563eb;color:#fff}.secondary{background:#e0f2fe;color:#0369a1}.danger{background:#fee2e2;color:#991b1b}input,select{width:100%;border:1px solid #cbd5e1;border-radius:14px;padding:12px 14px;margin:6px 0 12px;background:#fff}label{font-size:13px;font-weight:800;color:#334155}.stat strong{display:block;font-size:28px}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px;border-bottom:1px solid #e5e7eb;text-align:left}.badge{display:inline-flex;border-radius:999px;padding:6px 10px;background:#dcfce7;color:#166534;font-weight:800;font-size:12px}.warn{background:#fef3c7;color:#92400e}.badge.danger{background:#fee2e2;color:#991b1b}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.login-box{max-width:460px;margin:50px auto}.toast{position:fixed;right:20px;bottom:20px;background:#111827;color:#fff;padding:14px 18px;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.18);z-index:80}
.notif-bell{position:relative;cursor:pointer;text-decoration:none}
.notif-badge{position:absolute;top:-9px;right:-12px;background:#ef4444;color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:2px 6px;min-width:18px;text-align:center;line-height:1.2}
.notif-panel{position:fixed;top:74px;right:16px;width:min(420px,92vw);max-height:70vh;overflow:auto;background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.18);z-index:60;display:none}
.notif-panel.open{display:block}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #e5e7eb;font-weight:800}
.notif-item{padding:12px 16px;border-bottom:1px solid #f1f5f9}
.notif-item.unread{background:#eff6ff}
.notif-item strong{display:block;font-size:14px}
.notif-item p{margin:4px 0 2px;font-size:13px;color:#475569;white-space:pre-line}
.notif-item small{color:#94a3b8;font-size:11px}
.pay-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:70;display:flex;align-items:center;justify-content:center;padding:16px}
.pay-modal{background:#fff;border-radius:22px;max-width:500px;width:100%;padding:24px;max-height:88vh;overflow:auto}
.pay-modal h2{margin:0 0 6px}
.pay-amount{font-size:32px;font-weight:900;color:#2563eb;margin:10px 0}
.pay-line{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed #e5e7eb}
.pay-line b{text-align:right;word-break:break-all}
.pay-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
@media print{body.print-report *{visibility:hidden}body.print-report #reportArea,body.print-report #reportArea *{visibility:visible}body.print-report #reportArea{position:absolute;top:0;left:0;width:100%;border:0;box-shadow:none}}
/* ===== Layout admin bersidebar ===== */
.admin-shell{display:flex;min-height:100vh}
.admin-side{width:250px;background:#0b1220;color:#e2e8f0;display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh;gap:8px}
.admin-brand{display:flex;align-items:center;gap:11px;padding:4px 6px 14px}
.admin-logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#2563eb,#7c3aed);display:grid;place-items:center;font-weight:900;color:#fff}
.admin-brand strong{display:block;font-size:15px}.admin-brand small{color:#94a3b8;font-size:11px}
.admin-nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto}
.admin-navitem{background:transparent;border:0;color:#cbd5e1;text-align:left;padding:11px 13px;border-radius:10px;cursor:pointer;font-weight:600;font-size:14px}
.admin-navitem:hover{background:rgba(148,163,184,.12)}
.admin-navitem.active{background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff}
.admin-side-foot{display:flex;flex-direction:column;gap:6px;border-top:1px solid rgba(148,163,184,.2);padding-top:12px}
.admin-side-foot a{color:#94a3b8;text-decoration:none;font-size:13px;padding:4px 6px}
.admin-side-foot a:hover{color:#fff}
.admin-main{flex:1;min-width:0;background:#f6f8fb}
.admin-top{position:sticky;top:0;z-index:9;background:#fff;border-bottom:1px solid #e5e7eb;padding:16px 26px;display:flex;justify-content:space-between;align-items:center}
.admin-top strong{font-size:18px}
.admin-page{display:none;padding:24px 26px 40px}
.admin-page.active{display:block}
.table-wrap{overflow-x:auto}
@media(max-width:820px){.admin-shell{flex-direction:column}.admin-side{width:100%;height:auto;position:relative;flex-direction:column}.admin-nav{flex-direction:row;flex-wrap:wrap}.admin-navitem{flex:1 0 auto}}@media(max-width:900px){.cols-3,.cols-4{grid-template-columns:1fr}.hero h1{font-size:30px}.topbar{padding:0 16px}.nav a{font-size:13px;margin-left:8px}}