body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f6fb;color:#1f2937}.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:#111827;color:#fff;padding:22px;box-sizing:border-box}.brand{font-size:22px;font-weight:bold;margin-bottom:6px}.sub{font-size:12px;color:#cbd5e1;margin-bottom:28px}.menu a{display:block;color:#e5e7eb;text-decoration:none;padding:12px 14px;border-radius:8px;margin-bottom:8px}.menu a:hover,.menu a.active{background:#2563eb;color:#fff}.main{margin-left:240px;padding:28px}.topbar{background:#fff;border-radius:14px;padding:22px;box-shadow:0 4px 15px rgba(0,0,0,.07);margin-bottom:22px}.topbar h1{margin:0;font-size:26px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}.card{background:#fff;border-radius:14px;padding:22px;box-shadow:0 4px 15px rgba(0,0,0,.07);border-left:6px solid #2563eb}.card.green{border-left-color:#16a34a}.card.red{border-left-color:#dc2626}.card.orange{border-left-color:#f59e0b}.card-title{font-size:13px;color:#64748b;font-weight:bold}.card-num{font-size:28px;font-weight:bold;margin-top:8px}.box{background:#fff;border-radius:14px;padding:22px;box-shadow:0 4px 15px rgba(0,0,0,.07);margin-bottom:22px}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}label{font-size:13px;font-weight:bold;display:block;margin-bottom:6px}.input{width:100%;box-sizing:border-box;padding:10px;border:1px solid #cbd5e1;border-radius:8px}.btn{border:0;border-radius:8px;padding:10px 15px;font-weight:bold;cursor:pointer}.btn-primary{background:#2563eb;color:#fff}.btn-success{background:#16a34a;color:#fff}.btn-warning{background:#f59e0b;color:#fff}.btn-danger{background:#dc2626;color:#fff}.btn-secondary{background:#6b7280;color:#fff}.msg{display:block;font-weight:bold;margin-bottom:14px}table{width:100%;border-collapse:collapse;font-size:14px}th{background:#111827;color:#fff;text-align:left;padding:12px}td{border-bottom:1px solid #e5e7eb;padding:10px}tr:hover td{background:#f9fafb}.status-masuk{color:#16a34a;font-weight:bold}.status-keluar{color:#dc2626;font-weight:bold}@media(max-width:900px){.sidebar{position:relative;width:100%}.main{margin-left:0}.grid,.form-grid{grid-template-columns:1fr}}