:root{--hijau:#3FB2A0;--hijau-tua:#2E9587;--hijau-muda:#E7F6F3;--biru:#6FB1E4;--biru-muda:#EAF3FB;--teks:#37474F;--teks-lembut:#6b7c85;--bg:#F6FBFA;--kartu:#ffffff;--garis:#e6efee;--radius:16px;--shadow:0 6px 22px rgba(63,178,160,.1)}*{box-sizing:border-box}body{background:var(--bg);color:var(--teks);font-family:Segoe UI,system-ui,-apple-system,sans-serif}a{color:var(--hijau-tua)}.app{display:flex;min-height:100vh}.sidebar{width:260px;flex:0 0 260px;background:linear-gradient(170deg,var(--hijau) 0%,var(--hijau-tua) 100%);color:#fff;padding:0;position:sticky;top:0;height:100vh;overflow-y:auto}.sidebar .brand{padding:22px 20px 16px;display:flex;flex-direction:column;text-align:center;align-items:center;gap:8px}.sidebar .brand .logo{width:64px;height:64px;aspect-ratio:1/1;border-radius:12px;background:transparent;display:flex;align-items:center;justify-content:center;color:var(--hijau);font-size:32px;overflow:hidden}.sidebar .brand .logo img{width:100%;height:100%;object-fit:contain}.sidebar .brand b{font-size:1.05rem;line-height:1.2}.sidebar .brand small{opacity:.85;font-size:.72rem}.sidebar .nav-label{padding:14px 20px 6px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}.sidebar .item{display:flex;align-items:center;gap:12px;color:#eafaf7;text-decoration:none;padding:11px 20px;font-size:.93rem;border-left:4px solid transparent;transition:.15s}.sidebar .item i{font-size:1.15rem;width:22px;text-align:center}.sidebar .item:hover{background:#ffffff1f;color:#fff}.sidebar .item.active{background:#ffffff2e;border-left-color:#fff;font-weight:600}.sidebar .item.logout-btn{background:#dc3545;color:#fff;margin-top:10px;border-left-color:#dc3545;border-radius:6px;justify-content:center}.sidebar .item.logout-btn:hover{background:#c82333;color:#fff;border-left-color:#c82333}.main{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{background:#fff;border-bottom:1px solid var(--garis);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}.topbar h1{font-size:1.15rem;margin:0;font-weight:700}.content{padding:24px;flex:1}.card{border:none;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--kartu)}.card .card-header{background:transparent;border-bottom:1px solid var(--garis);font-weight:700;padding:16px 20px}.stat-card{border-radius:var(--radius);padding:20px;color:#fff;box-shadow:var(--shadow)}.stat-card .ikon{font-size:1.8rem;opacity:.85}.stat-card .nilai{font-size:1.5rem;font-weight:800;margin-top:4px}.stat-card small{opacity:.9}.bg-hijau{background:linear-gradient(140deg,var(--hijau),var(--hijau-tua))}.bg-biru{background:linear-gradient(140deg,var(--biru),#4f97cf)}.bg-hijau-soft{background:var(--hijau-muda);color:var(--hijau-tua)}.bg-biru-soft{background:var(--biru-muda);color:#2c6ea3}.btn-primary{background:var(--hijau);border-color:var(--hijau)}.btn-primary:hover{background:var(--hijau-tua);border-color:var(--hijau-tua)}.btn-outline-primary{color:var(--hijau-tua);border-color:var(--hijau)}.btn-outline-primary:hover{background:var(--hijau);border-color:var(--hijau)}.btn-info{background:var(--biru);border-color:var(--biru);color:#fff}.btn-info:hover{background:#4f97cf;border-color:#4f97cf;color:#fff}.text-hijau{color:var(--hijau-tua)!important}.text-biru{color:#2c6ea3!important}.badge-lunas{background:var(--hijau-muda);color:var(--hijau-tua)}.badge-belum{background:#fdecea;color:#d9534f}.table{--bs-table-hover-bg:var(--hijau-muda)}.table thead th{background:var(--hijau-muda);color:var(--hijau-tua);border-bottom:none;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}.table td,.table th{vertical-align:middle}.form-control:focus,.form-select:focus{border-color:var(--hijau);box-shadow:0 0 0 .2rem #3fb2a02e}.form-label{font-weight:600;font-size:.88rem;color:var(--teks)}.rounded-soft{border-radius:var(--radius)}.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--hijau-muda),var(--biru-muda));padding:20px}.auth-card{max-width:420px;width:100%}.auth-hero{width:70px;height:70px;border-radius:20px;background:linear-gradient(140deg,var(--hijau),var(--hijau-tua));color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 14px;box-shadow:var(--shadow)}@media (max-width:820px){.sidebar{position:fixed;left:-280px;z-index:1050;transition:.25s}.sidebar.open{left:0}.content{padding:16px}}@media print{.sidebar,.topbar,.no-print{display:none!important}.main,.content{padding:0}body{background:#fff}.card{box-shadow:none;border:1px solid #ddd}}