:root{--ink:#172522;--muted:#71807a;--line:#e7ece9;--paper:#fff;--bg:#f4f7f5;--green:#147a5a;--green-dark:#0c6247;--mint:#eaf6f0;--orange:#e99a46;--red:#cf5d58;--shadow:0 18px 45px rgba(24,51,41,.08);--radius:18px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px 'DM Sans',system-ui,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.loading{height:100vh;display:grid;place-content:center;gap:12px;text-align:center;color:var(--muted)}.spinner{width:26px;height:26px;border:3px solid #dce8e1;border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite;margin:auto}@keyframes spin{to{transform:rotate(360deg)}}
.auth-layout{min-height:100vh;display:grid;grid-template-columns:minmax(360px,1.05fr) 1fr;background:#fff}.auth-story{position:relative;overflow:hidden;background:#0e513d;color:white;padding:clamp(36px,7vw,100px);display:flex;flex-direction:column;justify-content:space-between}.auth-story:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-150px;bottom:-240px;border:1px solid #ffffff22;box-shadow:0 0 0 46px #ffffff0a,0 0 0 100px #ffffff08}.brand{display:flex;align-items:center;gap:12px;font:800 18px Manrope,sans-serif}.brand-mark{width:40px;height:40px;border-radius:13px;background:#c9f0d9;color:#0c6247;display:grid;place-items:center;font-weight:800}.story-copy{max-width:470px;z-index:1}.story-copy h1{font:800 clamp(34px,4.4vw,58px)/1.07 Manrope,sans-serif;letter-spacing:-2px;margin:20px 0}.story-copy p{color:#c0ddd1;font-size:17px;line-height:1.75}.story-foot{color:#b3d2c6;font-size:13px}.auth-panel{display:grid;place-items:center;padding:36px}.auth-card{width:min(100%,420px)}.auth-card h2{font:800 30px Manrope,sans-serif;margin:0 0 9px}.auth-card>p{color:var(--muted);margin:0 0 28px;line-height:1.6}.field{display:grid;gap:7px;margin:0 0 16px}.field label{font-size:13px;font-weight:700;color:#43524b}.field input,.field select,.field textarea{width:100%;border:1px solid #dce5df;border-radius:11px;padding:12px 13px;background:white;color:var(--ink);outline:0;transition:.2s}.field input:focus,.field select:focus,.field textarea:focus{border-color:#54aa87;box-shadow:0 0 0 3px #54aa871b}.field textarea{min-height:90px;resize:vertical}.hint{font-size:12px;color:var(--muted);line-height:1.5}.btn{border:0;background:var(--green);color:#fff;border-radius:11px;padding:11px 16px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s}.btn:hover{background:var(--green-dark);transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn.block{width:100%;padding:13px}.btn.secondary{background:#edf5f0;color:var(--green-dark)}.btn.secondary:hover{background:#dcefe4}.btn.ghost{background:transparent;color:#607169}.btn.danger{background:#fff0ee;color:#a63834}.icon-button{border:0;background:transparent;color:inherit;border-radius:9px;font-size:21px;line-height:1;padding:8px}.icon-button:hover{background:#f0f4f1}
.shell{min-height:100vh;display:grid;grid-template-columns:252px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column}.sidebar .brand{padding:3px 10px 25px}.side-label{padding:12px 12px 7px;color:#9aa8a1;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}.nav{display:grid;gap:4px}.nav button{border:0;background:transparent;text-align:left;padding:11px 12px;border-radius:10px;color:#65746c;font-weight:600;display:flex;gap:12px;align-items:center}.nav button:hover{background:#f4f7f5;color:var(--ink)}.nav button.active{background:var(--mint);color:var(--green-dark);font-weight:700}.nav-icon{width:21px;text-align:center;font-size:16px}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding:14px 5px 0}.user-chip{display:flex;align-items:center;gap:10px;padding:8px}.avatar{height:36px;width:36px;border-radius:12px;background:#e0f2e8;color:#176a4d;display:grid;place-items:center;font-weight:800}.user-meta{min-width:0;flex:1}.user-meta strong,.user-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-meta strong{font-size:13px}.user-meta small{color:var(--muted);margin-top:3px;font-size:11px;text-transform:capitalize}.logout{width:100%;text-align:left;border:0;background:transparent;color:#77857e;padding:10px;border-radius:9px}.logout:hover{background:#fff2f0;color:#a63834}.main{min-width:0}.topbar{height:74px;padding:0 clamp(20px,4vw,52px);background:#ffffffc9;backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:3}.mobile-menu{display:none}.top-title{font:700 17px Manrope,sans-serif}.top-subtitle{font-size:12px;color:var(--muted);margin-top:3px}.content{max-width:1440px;padding:32px clamp(20px,4vw,52px) 55px;margin:auto}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}.page-head h1{font:800 28px Manrope,sans-serif;letter-spacing:-.7px;margin:0 0 6px}.page-head p{margin:0;color:var(--muted)}.actions{display:flex;gap:8px;flex-wrap:wrap}.grid{display:grid;gap:17px}.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 4px 15px #132e2010;padding:20px;min-width:0}.stat-card{position:relative;overflow:hidden}.stat-card .stat-label{color:var(--muted);font-weight:600;font-size:13px}.stat-value{font:800 27px Manrope,sans-serif;margin:13px 0 5px;letter-spacing:-.7px}.stat-note{font-size:12px;color:#8a9891}.stat-icon{position:absolute;right:18px;top:17px;width:38px;height:38px;display:grid;place-items:center;background:var(--mint);border-radius:12px;color:var(--green);font-size:18px}.cols-2{grid-template-columns:1.15fr .85fr}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.card-head h3{font:700 16px Manrope,sans-serif;margin:0}.card-head p{font-size:12px;color:var(--muted);margin:4px 0 0}.link-button{border:0;background:none;color:var(--green);font-weight:700;font-size:13px}.table-wrap{overflow:auto;width:100%}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;color:#8a9891;font-size:11px;text-transform:uppercase;letter-spacing:.55px;padding:11px 12px;border-bottom:1px solid var(--line)}td{padding:13px 12px;border-bottom:1px solid #f0f3f1;font-size:13px}tbody tr:last-child td{border-bottom:0}.empty{text-align:center;padding:40px 18px;color:var(--muted)}.empty-icon{font-size:28px;margin-bottom:10px}.badge{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:5px 9px;font-size:11px;font-weight:700;background:#f0f3f1;color:#617069}.badge:before{content:"";height:6px;width:6px;border-radius:50%;background:currentColor}.badge.success,.badge.lunas,.badge.aktif{background:#e9f7ef;color:#218158}.badge.warning,.badge.diajukan,.badge.menunggu-konfirmasi{background:#fff5e5;color:#a86c12}.badge.danger,.badge.ditolak,.badge.terlambat{background:#fff0ef;color:#bd514a}.badge.info,.badge.berjalan,.badge.disetujui{background:#edf4ff;color:#4772ad}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.search{max-width:330px;position:relative;flex:1}.search input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px 10px 36px;background:#fff;outline:0}.search:before{content:'⌕';position:absolute;left:12px;top:6px;color:#8b9b93;font-size:20px}.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow:auto}.tabs button{border:0;background:none;padding:11px 13px;color:#7d8b84;font-weight:700;white-space:nowrap;border-bottom:2px solid transparent}.tabs button.active{color:var(--green);border-bottom-color:var(--green)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.form-grid .wide{grid-column:1/-1}.setting-row{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:start;border-bottom:1px solid var(--line);padding:18px 0}.setting-row:last-child{border-bottom:0}.setting-row h4{margin:0 0 5px;font-size:14px}.setting-row p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.rule-line{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:7px;margin-bottom:8px}.rule-line input{min-width:0}.inline-note{padding:12px 14px;border-radius:11px;background:#f3f8f5;color:#557166;font-size:12px;line-height:1.55;margin-bottom:16px}.modal{border:0;border-radius:18px;width:min(94vw,650px);max-height:90vh;padding:25px;box-shadow:0 30px 100px #10291d55}.modal::backdrop{background:#10291d88;backdrop-filter:blur(3px)}.modal .close{float:right;margin:-10px -10px 0 0}.modal h2{font:800 21px Manrope,sans-serif;margin:2px 32px 18px 0}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.toast{position:fixed;right:22px;top:20px;z-index:20;background:#173c30;color:#fff;border-radius:12px;padding:13px 17px;box-shadow:var(--shadow);opacity:0;transform:translateY(-10px);pointer-events:none;transition:.25s;max-width:min(90vw,450px)}.toast.show{opacity:1;transform:translateY(0)}.toast.error{background:#9d403a}.notice{border:1px solid #f1dfb9;background:#fff9e9;color:#896324;border-radius:12px;padding:14px;margin:12px 0;font-size:13px;line-height:1.5}.amount{font-weight:700;font-variant-numeric:tabular-nums}.hidden{display:none!important}
input[type=checkbox]{width:auto!important;accent-color:var(--green);vertical-align:middle;margin-right:7px}
@media(max-width:1050px){.shell{grid-template-columns:220px 1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.cols-2{grid-template-columns:1fr}}@media(max-width:720px){.auth-layout{grid-template-columns:1fr}.auth-story{display:none}.auth-panel{min-height:100vh;padding:24px}.shell{display:block}.sidebar{position:fixed;z-index:9;left:-270px;width:252px;transition:left .22s;box-shadow:var(--shadow)}.sidebar.open{left:0}.mobile-menu{display:block}.topbar{height:64px;padding:0 16px;justify-content:flex-start;gap:12px}.content{padding:24px 15px 40px}.page-head{display:block}.page-head .actions{margin-top:16px}.page-head h1{font-size:24px}.stats{gap:10px}.stat-card{padding:15px}.stat-icon{width:32px;height:32px;right:13px;top:13px}.stat-value{font-size:21px;margin-top:20px}.card{padding:16px;border-radius:15px}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.setting-row{grid-template-columns:1fr;gap:12px}.rule-line{grid-template-columns:1fr 1fr}.rule-line input:last-of-type{grid-column:1/-1}.toolbar{align-items:stretch;flex-direction:column}.search{max-width:none}.modal{padding:20px}.tabs{margin-right:-16px}.table-wrap{margin:0 -6px;width:calc(100% + 12px)}}