@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--green:#176b45;--green2:#218557;--ink:#172b22;--muted:#718078;--line:#e5ece7;--bg:#f5f8f6;--white:#fff;--shadow:0 8px 28px rgba(25,61,42,.055)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Inter,system-ui,-apple-system,sans-serif}a{color:var(--green);text-decoration:none}button,input,select,textarea{font:inherit}button,a,select{transition:.18s ease}.app-shell{min-height:100vh;display:flex}.sidebar{width:258px;flex-shrink:0;background:#fff;border-right:1px solid var(--line);padding:22px 15px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}.brand{display:flex;gap:11px;align-items:center;padding:3px 10px 24px;color:var(--ink)}.brand b{display:block;font-size:17px;letter-spacing:.6px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.brand-mark{width:52px;height:52px;border-radius:17px;background:linear-gradient(145deg,#218557,#105334);color:#fff;display:grid;place-items:center;font-size:27px;font-weight:800;box-shadow:0 8px 18px #176b4525}.smallmark{width:42px;height:42px;border-radius:13px;font-size:22px}.profile{display:flex;align-items:center;gap:10px;padding:14px 10px;margin-bottom:15px;background:#f4f8f5;border:1px solid #e9f0eb;border-radius:13px}.avatar{width:37px;height:37px;border-radius:12px;background:#dcefe3;color:var(--green);font-weight:800;display:grid;place-items:center;flex-shrink:0}.profile b{display:block;font-size:12px}.profile small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.sidebar nav{display:flex;flex-direction:column;gap:4px}.nav-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:#5e6f65;font-weight:500;font-size:12.5px}.nav-link>span:first-child{width:18px;text-align:center;font-size:16px}.nav-link:hover{background:#f3f8f4;color:var(--green)}.nav-link.active{background:#e8f5ec;color:var(--green);font-weight:700}.nav-label{font-size:10px;font-weight:800;letter-spacing:1px;color:#9aa79f;padding:18px 12px 7px}.logout{margin-top:auto;padding:13px 12px;color:#a34e48;font-weight:600;font-size:12px}.main{min-width:0;flex:1}.topbar{height:88px;background:#fff;border-bottom:1px solid var(--line);padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:15px}.eyebrow{font-size:9px;letter-spacing:1.4px;font-weight:800;color:#829187}.topbar h1{font-size:21px;margin:3px 0 0;letter-spacing:-.5px}.top-user{font-size:12px;color:#53645a;display:flex;align-items:center;gap:8px}.status-dot{width:8px;height:8px;background:#2ca76b;border-radius:50%}.content{max-width:1500px;padding:27px 32px 42px;margin:auto}.welcome{border-radius:18px;padding:27px 30px;background:linear-gradient(115deg,#155f3d,#228457);color:white;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden}.welcome h2{font-size:23px;letter-spacing:-.7px;margin:12px 0 5px}.welcome p{margin:0;color:#d8efe1;font-size:12px}.welcome-art{font-size:95px;opacity:.14;line-height:1;padding-right:30px}.pill{display:inline-block;border-radius:99px;padding:5px 9px;font-size:9px;letter-spacing:.8px;font-weight:800}.pill.light{background:#ffffff22;color:#fff}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0 30px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:17px 18px;box-shadow:var(--shadow)}.stat-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:17px;margin-bottom:14px}.green{background:#e1f5e8;color:#176b45}.blue{background:#e5efff;color:#2e5ca5}.gold{background:#fff2d7;color:#a16c08}.purple{background:#f0e8ff;color:#7851a6}.stat-card>span{display:block;color:#6e7c73;font-size:11px}.stat-card strong{display:block;font-size:28px;letter-spacing:-1px;margin:3px 0 5px}.stat-card small{display:block;color:#9aa49d;font-size:10px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:28px 0 14px}.section-heading h2{font-size:17px;margin:0 0 4px}.section-heading p{font-size:11px;color:var(--muted);margin:0}.module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.module-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;color:var(--ink);box-shadow:var(--shadow);min-height:176px;display:flex;flex-direction:column}.module-card:hover{transform:translateY(-2px);border-color:#b8d9c4;box-shadow:0 12px 28px #174b2c10}.module-icon{height:39px;width:39px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:#e1f5e8;color:#176b45}.module-icon.rkam,.module-icon.surat,.module-icon.arsip{background:#e5efff;color:#2e5ca5}.module-icon.lpj,.module-icon.inventaris{background:#fff2d7;color:#a16c08}.module-icon.prestasi{background:#f0e8ff;color:#7851a6}.module-card h3{font-size:13px;margin:13px 0 5px}.module-card p{font-size:11px;color:var(--muted);margin:0 0 13px;line-height:1.55}.module-foot{display:flex;justify-content:space-between;align-items:center;color:var(--green);font-size:10px;font-weight:700;margin-top:auto}.table-wrap{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px;white-space:nowrap}th{text-align:left;background:#f8faf8;color:#748178;font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:800}th,td{padding:13px 15px;border-bottom:1px solid #edf1ee}tr:last-child td{border-bottom:0}td b{font-size:11px}.cell-sub{display:block;color:#9aa49d;font-size:10px;margin-top:3px}.tag{display:inline-block;background:#eef5f0;color:#416b51;padding:4px 8px;border-radius:6px;font-size:10px;font-weight:700}.status{display:inline-block;border-radius:6px;padding:4px 8px;font-size:10px;font-weight:700;background:#f0f2f0;color:#657168}.status.lengkap,.status.disetujui{background:#e2f5e8;color:#187246}.status.proses{background:#e5efff;color:#2e5ca5}.status.perlu-perbaikan{background:#fff0e5;color:#a75d1a}.status.draft{background:#f0f2f0;color:#657168}.empty{text-align:center;color:#8a978e;padding:25px}.footer{border-top:1px solid var(--line);padding:17px 32px;color:#8a978e;font-size:10px;display:flex;justify-content:space-between}.module-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.module-intro h2{font-size:17px;margin:0 0 4px}.module-intro p{font-size:11px;color:var(--muted);margin:0}.count-badge{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 11px;color:#68786d;font-size:11px;font-weight:700;white-space:nowrap}.two-col{display:grid;grid-template-columns:minmax(290px,.86fr) minmax(0,1.14fr);gap:16px;align-items:start}.panel{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;min-width:0}.panel-head{padding:18px 20px 14px;border-bottom:1px solid #edf1ee}.panel-head h2{font-size:14px;margin:0 0 4px}.panel-head p{font-size:10.5px;color:var(--muted);margin:0}.form-grid{padding:18px 20px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label,.install-card label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;color:#526258;min-width:0}.form-grid input,.form-grid select,.form-grid textarea,.filter-form input,.filter-form select,.install-card input{width:100%;border:1px solid #dfe7e1;background:#fff;border-radius:8px;padding:10px 11px;color:var(--ink);outline:none;font-size:11px;min-width:0}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.filter-form input:focus,.install-card input:focus{border-color:#64ad81;box-shadow:0 0 0 3px #2c9b5b12}.form-grid textarea{resize:vertical;line-height:1.5}.form-grid small,.install-card small{font-size:9px;color:#8a978e;font-weight:400}.span2{grid-column:1/-1}.label-title{font-size:11px;font-weight:700;color:#526258}.check-row{display:flex;gap:10px;flex-wrap:wrap}.check{display:flex!important;align-items:center;gap:7px!important;flex-direction:row!important;border:1px solid #e2e9e4;border-radius:8px;padding:9px 12px;background:#fbfcfb}.check input{width:auto!important;accent-color:var(--green)}.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:8px;padding:10px 14px;font-weight:700;font-size:11px;cursor:pointer;text-decoration:none}.btn:hover{filter:brightness(.97);transform:translateY(-1px)}.btn.primary{background:var(--green);color:#fff}.btn.secondary{background:#f1f5f2;color:#53645a;border:1px solid #e2e9e4}.btn.full{width:100%;margin-top:17px;padding:12px}.btn.tiny{padding:6px 9px;font-size:10px}.danger-btn{background:#fff0ef;color:#a6423c}.filter-form{padding:14px;display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:7px;border-bottom:1px solid #edf1ee}.record-list{padding:4px 14px 14px;max-height:920px;overflow:auto}.record-item{padding:14px 3px;border-bottom:1px solid #edf1ee}.record-item:last-child{border-bottom:0}.record-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.record-item h3{font-size:12px;margin:9px 0 4px;line-height:1.45}.record-item p{font-size:10px;color:#829087;margin:0 0 7px}.record-item .description{font-size:10px;color:#53645a;margin-top:8px;white-space:normal;overflow-wrap:anywhere}.amount{font-size:14px;font-weight:800;color:var(--green);margin:8px 0}.file-link{font-size:10px;font-weight:700;display:inline-block;margin:3px 0 8px}.record-actions{display:flex;gap:7px;align-items:center;margin-top:9px}.record-actions form{margin:0}.empty-state{text-align:center;color:#8a978e;padding:35px 12px}.empty-state>div{font-size:29px;color:#b6c8bb}.empty-state b{display:block;font-size:12px;color:#596a5f;margin-top:8px}.empty-state p{font-size:10px}.alert{border-radius:9px;padding:11px 14px;margin-bottom:16px;font-size:11px}.alert.info{background:#e8f3ff;color:#285b92;border:1px solid #d6e8fc}.alert.danger{background:#fff0ef;color:#9f3d37;border:1px solid #f6d8d6}.alert.success{background:#e2f5e8;color:#176b45;border:1px solid #c8ead3}.user-list{padding:4px 17px 12px}.user-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #edf1ee}.user-row:last-child{border-bottom:0}.small-avatar{width:32px;height:32px;border-radius:10px}.user-info{flex:1;min-width:0}.user-info b,.user-info small{display:block}.user-info b{font-size:11px}.user-info small{font-size:9px;color:#829087;margin-top:3px;overflow-wrap:anywhere}.login-body{min-height:100vh;display:grid;place-items:center;padding:22px;background:radial-gradient(ellipse at top left,#e2f3e8,transparent 48%),#f5f8f6}.login-card,.install-card{width:min(100%,420px);background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:0 20px 65px #174b2c12}.login-card .brand-mark,.install-card .brand-mark{margin:0 auto 16px}.login-card h1,.install-card h1{text-align:center;font-size:25px;margin:0 0 3px;letter-spacing:-.8px}.muted{color:var(--muted)}.login-card>p,.install-card>p{text-align:center;font-size:11px;margin:0 0 22px}.login-card form,.install-card form{display:flex;flex-direction:column;gap:12px}.login-card label{font-size:11px;font-weight:700;color:#526258;margin-bottom:-7px}.small{font-size:10px}.center{text-align:center}.notice{background:#f1f7f2;border:1px solid #dcebe0;border-radius:10px;padding:12px 14px;margin-bottom:17px;font-size:10px;color:#53645a}.notice ol{padding-left:18px;margin:7px 0 0}.notice li{margin:3px 0}.install-card{width:min(100%,510px)}.install-card hr{border:0;border-top:1px solid var(--line);width:100%;margin:4px 0}.install-card form .btn{margin-top:5px}.topbar .eyebrow{font-size:8px}@media(max-width:1250px){.module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col{grid-template-columns:1fr}.record-layout .panel:first-child{order:1}.record-layout .panel:last-child{order:2}}@media(max-width:800px){.sidebar{width:68px;padding:14px 8px}.brand{padding:3px 5px 22px}.brand>span:last-child,.profile>div:last-child,.nav-link:not(.active){font-size:0}.brand-mark.smallmark{width:42px;height:42px}.profile{padding:8px 6px;justify-content:center}.profile .avatar{width:34px;height:34px}.nav-link{justify-content:center;padding:12px 5px;font-size:0}.nav-link>span:first-child{font-size:17px}.nav-label{font-size:0;padding:8px 0}.logout{font-size:0;text-align:center;padding:14px 0}.logout:first-letter{font-size:17px}.topbar{padding:14px 18px;height:78px}.topbar h1{font-size:17px}.top-user{font-size:0}.content{padding:18px 16px 30px}.welcome{padding:22px}.welcome h2{font-size:19px}.welcome-art{font-size:60px;padding:0}.module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer{padding:15px 18px}.filter-form{grid-template-columns:1fr 1fr}.filter-form input{grid-column:1/-1}}@media(max-width:480px){.module-grid{grid-template-columns:1fr 1fr;gap:9px}.module-card{padding:13px;min-height:168px}.module-card h3{font-size:12px}.module-card p{font-size:10px}.stats-grid{gap:9px}.stat-card{padding:13px}.stat-card strong{font-size:24px}.stat-card small{font-size:9px}.welcome-art{display:none}.welcome h2{font-size:17px}.form-grid{padding:14px;gap:12px}.panel-head{padding:15px}.login-card,.install-card{padding:25px 21px}.topbar .eyebrow{display:none}.count-badge{font-size:9px}.module-intro h2{font-size:15px}}