:root{font-family:Inter,ui-sans-serif,system-ui,Arial;color:#1a2840;background:#f5f7fb}*{box-sizing:border-box}body{margin:0;display:flex;min-height:100vh}a{color:#245fc4;text-decoration:none}a:hover{text-decoration:underline}.sidebar{width:250px;flex-shrink:0;background:#102747;color:#e9f0ff;padding:28px 18px;display:flex;flex-direction:column;gap:28px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:21px}.brandicon{display:grid;place-items:center;background:#2c78ff;width:42px;height:42px;border-radius:12px}.brand small,.school small{display:block;font-size:9px;letter-spacing:1.5px;color:#9db5d5;margin-top:3px}.school{border:1px solid #38506d;padding:14px;border-radius:10px;font-size:13px}.school small{font-size:11px;letter-spacing:0;margin-top:6px}nav{display:grid;gap:8px}.navitem{padding:13px 15px;color:#c6d7f2;border-radius:9px}.navitem:hover{background:#1d3d67;color:white;text-decoration:none}.logout{margin-top:auto;background:transparent;border:1px solid #567096;color:#e9f0ff;width:100%}main{flex:1;min-width:0;padding:35px clamp(18px,4vw,55px)}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#6683a5}h1{font-size:30px;margin:7px 0}h2{font-size:19px}.avatar{display:grid;place-items:center;border-radius:50%;background:#e0ebff;color:#225bc2;width:40px;height:40px;font-weight:800}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.metric,.card{background:white;border:1px solid #e4eaf2;border-radius:14px;box-shadow:0 5px 20px #152c4d08}.metric{padding:24px}.metric span,.metric small{display:block;color:#71809a}.metric strong{display:block;font-size:clamp(20px,2.2vw,30px);margin:15px 0}.metric small{font-size:12px}.section-head,.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:30px 0 14px}.tablewrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th{color:#72829a;background:#fafbfd;font-size:11px;text-transform:uppercase;letter-spacing:.5px}th,td{padding:17px 18px;border-bottom:1px solid #edf1f6}tr:last-child td{border-bottom:0}.money{font-weight:700;white-space:nowrap}.truncate{max-width:290px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hint{color:#71809a;font-size:12px}.toolbar form{display:flex;gap:8px;flex-wrap:wrap}input,textarea{border:1px solid #d7e0ec;padding:12px 13px;border-radius:9px;font:inherit;min-width:0;max-width:100%;background:white}button,.button{border:1px solid #d7e0ec;border-radius:9px;padding:11px 17px;cursor:pointer;background:white;color:#203b5e;font:inherit;display:inline-block}.primary{background:#2563eb;color:white;border-color:#2563eb}.button.primary{color:white}.formcard{padding:25px;max-width:900px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:grid;gap:7px;font-size:13px;font-weight:600;margin-bottom:14px}.wide{grid-column:1/-1}textarea{width:100%;resize:vertical}.details{padding:30px;max-width:850px}.details dl{display:grid;grid-template-columns:180px 1fr;gap:20px}.details dt{color:#73829a}.details dd{margin:0}.tag{background:#e7efff;padding:9px 15px;border-radius:8px;color:#245fc4;font-weight:800}.login{max-width:440px;padding:30px;margin:50px auto}.login input,.login button{width:100%}footer{font-size:12px;color:#95a0b0;margin-top:45px}@media(max-width:850px){body{display:block}.sidebar{width:100%;gap:12px;padding:15px}.sidebar nav{display:flex;overflow-x:auto}.sidebar .school,.sidebar .logout{display:none}.navitem{white-space:nowrap}main{padding:20px}.metrics{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.toolbar{align-items:flex-start;flex-direction:column}.details dl{grid-template-columns:1fr;gap:7px}.details dt{margin-top:12px}}
#app{display:contents}#notice{color:#b42318;margin-bottom:10px}input,textarea{max-width:100%}button{cursor:pointer}button:disabled{opacity:.5}

/* Aksi pengelolaan BPU */
.row-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;white-space:nowrap}
button.danger{background:#fff0f0;color:#a51d2d;border:1px solid #e8a6ac;border-radius:8px;padding:9px 12px;cursor:pointer;font:inherit;font-weight:600}
button.danger:hover{background:#ffe0e0}
button.danger:disabled{opacity:.55;cursor:wait}

.monthbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#e8f3ed;padding:12px 18px;border-radius:12px;margin:12px 0 22px;border:1px solid #c5dfce}.monthbar label{font-weight:700;color:#174c36}.monthbar select{min-width:210px;max-width:100%;background:white;border:1px solid #abcbb8;border-radius:8px;padding:9px 12px;font:inherit}