:root {
    --hijau: #0aa7a4;
    --hijau-gelap: #087d7a;
    --hijau-muda: #e8f8f7;
    --lime: #c6db00;
    --navy: #193342;
    --abu: #f5f7f8;
    --border: #e5ebee;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--abu); color:#24343d; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { text-decoration:none; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:270px; position:fixed; inset:0 auto 0 0; background:#fff; border-right:1px solid var(--border); padding:22px 16px; display:flex; flex-direction:column; z-index:1020; }
.brand-wrap { display:flex; align-items:center; gap:12px; padding:0 4px 20px; border-bottom:1px solid var(--border); }
.brand-logo { width:118px; height:auto; object-fit:contain; }
.brand-title { font-weight:800; letter-spacing:.05em; color:var(--hijau-gelap); font-size:1rem; }
.brand-subtitle { color:#7b8b93; font-size:.72rem; }
.user-card { display:flex; align-items:center; gap:10px; margin:18px 0; padding:12px; background:linear-gradient(135deg,var(--hijau-muda),#f8fff3); border:1px solid #d9f0ee; border-radius:14px; }
.user-avatar { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--hijau); color:#fff; font-size:1.2rem; flex:none; }
.user-card small { color:#6d7f87; }
.min-w-0 { min-width:0; }
.sidebar-nav { display:flex; flex-direction:column; gap:5px; overflow:auto; }
.nav-link-custom { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:#51616a; font-weight:600; font-size:.92rem; }
.nav-link-custom i { width:20px; text-align:center; }
.nav-link-custom:hover { background:#f3f8f8; color:var(--hijau-gelap); }
.nav-link-custom.active { background:var(--hijau-muda); color:var(--hijau-gelap); box-shadow:inset 3px 0 0 var(--hijau); }
.sidebar-footer { margin-top:auto; padding-top:14px; border-top:1px solid var(--border); }
.main-content { margin-left:270px; min-height:100vh; width:calc(100% - 270px); display:flex; flex-direction:column; }
.topbar { min-height:84px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; padding:16px 28px; position:sticky; top:0; z-index:1000; }
.page-title { font-size:1.35rem; font-weight:800; color:var(--navy); }
.page-kicker { color:#809098; font-size:.79rem; margin-top:3px; }
.content-wrap { padding:28px; flex:1; }
.app-footer { display:flex; justify-content:space-between; padding:18px 28px; color:#8b989e; font-size:.78rem; }
.card-soft { border:1px solid var(--border); border-radius:16px; box-shadow:0 6px 24px rgba(24,51,66,.045); }
.stat-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px; height:100%; box-shadow:0 6px 24px rgba(24,51,66,.045); }
.stat-icon { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--hijau-muda); color:var(--hijau-gelap); font-size:1.3rem; }
.stat-number { font-size:1.9rem; line-height:1; font-weight:800; color:var(--navy); }
.stat-label { color:#7d8c93; font-size:.82rem; }
.section-title { color:var(--navy); font-weight:800; font-size:1.05rem; }
.table-modern { --bs-table-bg: transparent; }
.table-modern thead th { font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; color:#7d8b92; background:#f8fafb; border-bottom:1px solid var(--border); padding:12px; white-space:nowrap; }
.table-modern tbody td { vertical-align:middle; padding:12px; border-color:#eef2f3; font-size:.9rem; }
.badge { font-weight:700; letter-spacing:.01em; }
.btn-primary { --bs-btn-bg:var(--hijau); --bs-btn-border-color:var(--hijau); --bs-btn-hover-bg:var(--hijau-gelap); --bs-btn-hover-border-color:var(--hijau-gelap); }
.btn-outline-primary { --bs-btn-color:var(--hijau-gelap); --bs-btn-border-color:var(--hijau); --bs-btn-hover-bg:var(--hijau); --bs-btn-hover-border-color:var(--hijau); }
.form-control,.form-select { border-color:#dce5e8; border-radius:10px; padding:.65rem .8rem; }
.form-control:focus,.form-select:focus { border-color:#6dc9c6; box-shadow:0 0 0 .2rem rgba(10,167,164,.12); }
.login-page { min-height:100vh; display:grid; place-items:center; background:radial-gradient(circle at 10% 10%,#e9fbf8,transparent 38%),radial-gradient(circle at 90% 90%,#f5fbdc,transparent 36%),#f7f9fa; padding:24px; }
.login-card { width:min(980px,100%); min-height:560px; background:#fff; border:1px solid var(--border); border-radius:24px; overflow:hidden; box-shadow:0 24px 80px rgba(24,51,66,.12); display:grid; grid-template-columns:1.05fr .95fr; }
.login-identity { padding:54px; background:linear-gradient(145deg,#e7faf7,#f8fce9); display:flex; flex-direction:column; justify-content:center; }
.login-identity img { width:310px; max-width:100%; margin-bottom:34px; }
.login-title { color:var(--navy); font-size:2.35rem; font-weight:900; letter-spacing:.02em; }
.login-copy { color:#60737c; max-width:430px; }
.login-panel { padding:54px; display:flex; flex-direction:column; justify-content:center; }
.data-note { background:#f7fbfb; border:1px dashed #b9dedd; border-radius:12px; padding:12px 14px; font-size:.85rem; color:#587078; }
.mobile-menu-link { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:9px; color:#53636b; font-weight:600; }
.mobile-menu-link.active { background:var(--hijau-muda); color:var(--hijau-gelap); }
@media (max-width: 991.98px) {
    .sidebar { display:none; }
    .main-content { margin-left:0; width:100%; }
    .content-wrap { padding:18px; }
    .topbar { padding:14px 18px; }
    .page-kicker { display:none; }
}
@media (max-width: 767.98px) {
    .login-card { grid-template-columns:1fr; }
    .login-identity { padding:34px; min-height:260px; }
    .login-panel { padding:34px; }
    .login-title { font-size:1.8rem; }
    .app-footer { padding:16px 18px; }
}
@media print {
    .sidebar,.topbar,.app-footer,.no-print { display:none!important; }
    .main-content { margin:0!important; width:100%!important; }
    .content-wrap { padding:0!important; }
    body { background:#fff; }
    .card-soft { box-shadow:none; border-color:#ccc; }
}