*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#18202b;font:14px Inter,Arial,sans-serif}.top{height:68px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.top a{color:#fff;text-decoration:none}.layout{display:flex;min-height:calc(100vh - 68px)}.side{width:240px;background:#fff;border-right:1px solid #e5e7eb;padding:20px 14px}.side .brand{font-weight:800;font-size:19px;padding:10px 12px 22px}.side a{display:block;padding:12px 14px;margin:3px 0;border-radius:10px;color:#374151;text-decoration:none}.side a:hover{background:#eef4ff;color:#2563eb}.content{flex:1;padding:28px;max-width:1500px}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eef4ff,#f8fafc)}.login-box{width:min(980px,94%);text-align:center}.logo{width:56px;height:56px;margin:auto;border-radius:16px;background:#2563eb;color:white;display:grid;place-items:center;font-size:26px;font-weight:800}.login-box h1{font-size:32px;margin:14px 0 4px}.login-box h1 span{color:#2563eb}.muted{color:#6b7280}.login-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;text-align:left}.panel,.card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:22px;box-shadow:0 10px 35px #1118270a}.panel h2,.card h2{margin-top:0}label{font-weight:700;display:block;margin:12px 0 7px}input,select{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:10px;font:inherit;background:white}button,.btn{border:0;background:#2563eb;color:#fff;border-radius:10px;padding:12px 16px;font-weight:700;text-decoration:none;display:inline-block;cursor:pointer;margin-top:14px}.dark{background:#111827}.danger{background:#fee2e2;color:#991b1b}.success{background:#dcfce7;color:#166534}.alert{padding:12px 14px;border-radius:10px;margin:14px 0}.head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.head h1{margin:0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.stat{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:20px}.stat small{display:block;color:#6b7280}.stat strong{display:block;font-size:23px;margin-top:8px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.full{grid-column:1/-1}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid #edf0f3;text-align:left;white-space:nowrap}th{color:#6b7280;font-size:12px}.badge{padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700}.badge.masuk,.badge.terverifikasi{background:#dcfce7;color:#166534}.badge.keluar,.badge.ditolak{background:#fee2e2;color:#991b1b}.badge.pending{background:#fef3c7;color:#92400e}.actions{display:flex;gap:8px;flex-wrap:wrap}.filter{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.filter>div{min-width:180px}.chart{height:280px}.right{text-align:right}@media(max-width:900px){.side{display:none}.content{padding:16px}.stats,.grid2,.grid3,.login-grid,.formgrid{grid-template-columns:1fr}.top{padding:0 15px}.head{display:block}.chart{height:220px}}