:root{ --primary:#1F6F4A; --accent:#E8B44A; }
*{ -webkit-tap-highlight-color: transparent; }
body{ font-family:'Inter',system-ui,sans-serif; }
.card{ background:#fff; border-radius:1rem; box-shadow:0 1px 3px rgba(16,24,40,.08), 0 4px 16px rgba(31,111,74,.06); border:1px solid #e5efe9; }
.btn-primary{ background:#1F6F4A; color:#fff; font-weight:600; border-radius:.75rem; padding:.65rem 1.1rem; transition:.15s; display:inline-flex; align-items:center; gap:.5rem; justify-content:center;}
.btn-primary:hover{ background:#175739; }
.btn-gold{ background:#E8B44A; color:#1F2937; font-weight:600; border-radius:.75rem; padding:.65rem 1.1rem; display:inline-flex;align-items:center;gap:.5rem;justify-content:center;}
.btn-ghost{ background:#fff; border:1px solid #d7e2dc; border-radius:.75rem; padding:.6rem 1rem; font-weight:600; display:inline-flex;align-items:center;gap:.5rem;justify-content:center;}
.btn-ghost:hover{ background:#F2F8F5; }
.btn-danger{ background:#C0392B; color:#fff; font-weight:600; border-radius:.75rem; padding:.6rem 1rem; }
.input{ width:100%; border:1px solid #d7e2dc; border-radius:.75rem; padding:.65rem .9rem; background:#fff; outline:none; }
.input:focus{ border-color:#1F6F4A; box-shadow:0 0 0 3px rgba(31,111,74,.15); }
label.lbl{ font-size:.8rem; font-weight:600; color:#374151; margin-bottom:.3rem; display:block;}
.badge{ font-size:.7rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; text-transform:uppercase; letter-spacing:.03em;}
.badge-pending{ background:#FEF3C7; color:#92400E; border:1px solid #FCD34D;}
.badge-approved{ background:#DCFCE7; color:#166534; border:1px solid #86EFAC;}
.badge-rejected{ background:#FEE2E2; color:#991B1B; border:1px solid #FCA5A5;}
.badge-masuk{ background:#E6F2EC; color:#1F6F4A; }
.badge-keluar{ background:#FDECEA; color:#C0392B; }
.navlink{ display:flex; align-items:center; gap:.7rem; padding:.65rem .9rem; border-radius:.75rem; font-weight:600; font-size:.9rem; color:#4b5563; }
.navlink.active{ background:#1F6F4A; color:#fff; }
.navlink:hover:not(.active){ background:#E6F2EC; color:#1F6F4A;}
table.tbl{ width:100%; border-collapse:collapse; font-size:.875rem;}
table.tbl th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:#6b7280; padding:.6rem .75rem; background:#F2F8F5; white-space:nowrap;}
table.tbl td{ padding:.7rem .75rem; border-top:1px solid #eef2f0; vertical-align:middle;}
table.tbl tr:hover td{ background:#fafdfb; }
.saldo-hero{ background: linear-gradient(135deg,#1F6F4A 0%,#2a8a5e 60%,#37a06f 100%); position:relative; overflow:hidden;}
.saldo-hero::after{ content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:rgba(232,180,74,.25);}
.saldo-hero::before{ content:''; position:absolute; right:40px; bottom:-80px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.08);}
.stat-num{ font-variant-numeric: tabular-nums; }
.scroll-thin::-webkit-scrollbar{ height:6px; width:6px;} .scroll-thin::-webkit-scrollbar-thumb{ background:#cbd5d1; border-radius:99px;}
.modal-back{ background:rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.fade-in{ animation: fadeIn .18s ease-out; } @keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
@media print{ .no-print{ display:none !important; } }
.bottomnav{ position:fixed; bottom:0; left:0; right:0; z-index:40; background:#fff; border-top:1px solid #e5efe9; display:flex; justify-content:space-around; padding:.4rem .2rem calc(.4rem + env(safe-area-inset-bottom)); }
.bottomnav a{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:.65rem; font-weight:600; color:#6b7280; padding:.3rem .6rem; border-radius:.6rem;}
.bottomnav a.active{ color:#1F6F4A; }