:root{--primary:#176b58;--primary-dark:#0f4f42;--primary-soft:#e8f5f1;--ink:#172b2a;--muted:#6d7f7d;--line:#e4ecea;--surface:#fff;--canvas:#f4f8f7;--warning:#f4a340;--danger:#d95757;--info:#397ac9;--shadow:0 12px 32px rgba(20,70,61,.08)}
*{box-sizing:border-box}body{font-family:Inter,"Nunito Sans",sans-serif;background:var(--canvas);color:var(--ink)}a{text-decoration:none}.app-shell{min-height:100vh}.app-sidebar{position:fixed;inset:0 auto 0 0;width:270px;background:linear-gradient(180deg,#0c4e43,#123b35);color:#fff;z-index:1040;display:flex;flex-direction:column}.brand{height:82px;padding:18px 22px;display:flex;gap:12px;align-items:center;border-bottom:1px solid rgba(255,255,255,.1)}.brand-mark{width:44px;height:44px;border-radius:14px;background:#fff;color:var(--primary);display:grid;place-items:center;font-size:24px}.brand strong{display:block;font-size:15px;line-height:1.2}.brand small{color:#b9d8d1}.sidebar-profile{margin:18px 16px;padding:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:16px;display:flex;gap:11px;align-items:center}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#dff3ed;color:var(--primary-dark);font-weight:800}.sidebar-profile small{color:#b9d8d1}.nav-section{padding:2px 14px;overflow-y:auto}.nav-label{padding:14px 12px 7px;text-transform:uppercase;letter-spacing:.09em;font-size:10px;color:#8fbdb4}.side-link{display:flex;align-items:center;gap:13px;color:#d5e7e3;padding:11px 13px;margin:3px 0;border-radius:12px;font-size:14px}.side-link i{font-size:18px;width:20px}.side-link:hover,.side-link.active{color:#fff;background:rgba(255,255,255,.13)}.side-link.active{box-shadow:inset 3px 0 #68d1b6}.sidebar-bottom{margin-top:auto;padding:15px}.app-main{margin-left:270px;min-height:100vh}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--line);padding:0 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1030}.topbar-left,.topbar-actions{display:flex;align-items:center;gap:12px}.mobile-toggle{display:none;border:0;background:var(--primary-soft);color:var(--primary);width:42px;height:42px;border-radius:12px}.search-box{position:relative;width:min(360px,30vw)}.search-box i{position:absolute;left:14px;top:12px;color:#82918f}.search-box input{padding-left:40px;border:1px solid var(--line);background:#f8fbfa;border-radius:12px;height:43px}.icon-button{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);position:relative}.notification-dot{position:absolute;right:8px;top:7px;width:7px;height:7px;border-radius:50%;background:#e45b5b}.page-content{padding:28px}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:24px}.eyebrow{text-transform:uppercase;color:var(--primary);font-size:11px;letter-spacing:.12em;font-weight:800}.page-heading h1{font-size:26px;margin:4px 0 4px;font-weight:750}.page-heading p{color:var(--muted);margin:0}.btn-app{border-radius:11px;padding:10px 16px;font-weight:650}.btn-primary{background:var(--primary);border-color:var(--primary)}.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}.stat-card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.stat-card{padding:20px;height:100%;position:relative;overflow:hidden}.stat-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:22px}.stat-value{font-size:27px;font-weight:800;margin:14px 0 3px}.stat-label{color:var(--muted);font-size:13px}.stat-trend{font-size:11px;color:var(--primary);font-weight:700}.tone-green{background:#dff4ed;color:#14715d}.tone-blue{background:#e5effb;color:#397ac9}.tone-orange{background:#fff0dc;color:#c97818}.tone-red{background:#fde8e8;color:#c64c4c}.panel{padding:22px}.panel-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.panel-title{font-size:16px;font-weight:750;margin:0}.panel-subtitle{color:var(--muted);font-size:12px;margin:3px 0 0}.quick-action{border:1px solid var(--line);border-radius:15px;padding:17px;color:var(--ink);display:flex;align-items:center;gap:13px;height:100%;transition:.2s}.quick-action:hover{transform:translateY(-2px);border-color:#abd6cb;color:var(--primary)}.quick-action i{width:42px;height:42px;border-radius:12px;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary);font-size:20px}.table{vertical-align:middle}.table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#71817f;border-bottom-color:var(--line);background:#f8fbfa;white-space:nowrap}.table tbody td{font-size:13px;border-color:#edf2f1}.status-pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:6px 9px;font-size:11px;font-weight:700}.status-pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.status-success{background:#e4f6ef;color:#177058}.status-warning{background:#fff2de;color:#ad6914}.status-info{background:#e7f0fb;color:#3473bb}.status-danger{background:#fdeaea;color:#bd4949}.status-muted{background:#edf1f0;color:#647471}.form-control,.form-select{border-color:#dce6e4;border-radius:11px;padding:10px 12px}.form-control:focus,.form-select:focus{border-color:#62af9d;box-shadow:0 0 0 .2rem rgba(23,107,88,.1)}.form-label{font-size:12px;font-weight:700;color:#435553}.form-hint{font-size:11px;color:var(--muted)}.filter-bar{padding:14px;background:#f8fbfa;border:1px solid var(--line);border-radius:14px;margin-bottom:18px}.empty-chart{height:215px;display:flex;align-items:flex-end;gap:13px;padding:20px 8px 5px;border-bottom:1px solid var(--line)}.chart-bar{flex:1;background:linear-gradient(180deg,#3eaa90,#bce3d9);border-radius:8px 8px 2px 2px;min-width:16px}.activity-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #edf2f1}.activity-item:last-child{border:0}.activity-icon{width:37px;height:37px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex:none}.activity-item p{font-size:13px;margin:0}.activity-item small{color:var(--muted)}.app-footer{padding:20px 28px;color:var(--muted);font-size:12px}.login-page{min-height:100vh;background:linear-gradient(130deg,#073d35 0%,#176b58 52%,#e8f5f1 52%);display:grid;place-items:center;padding:24px}.login-card{width:min(1050px,100%);min-height:620px;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 30px 90px rgba(4,47,39,.25)}.login-visual{height:100%;padding:48px;color:#fff;background:linear-gradient(rgba(7,65,54,.82),rgba(7,65,54,.93)),url('../images/dashboard/people.svg') center bottom/85% no-repeat}.login-visual h1{font-size:37px;margin-top:90px}.login-form{padding:60px}.login-logo{width:58px;height:58px;border-radius:18px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:28px}.stepper{display:flex;gap:8px}.step-dot{height:7px;flex:1;border-radius:9px;background:#dde8e5}.step-dot.active{background:var(--primary)}.file-drop{border:1.5px dashed #a8c6bf;background:#f8fbfa;border-radius:14px;padding:25px;text-align:center}.offcanvas-overlay{display:none}.role-accent-admin{--primary:#176b58;--primary-dark:#0f4f42;--primary-soft:#e8f5f1}.role-accent-ktp{--primary:#3768b1;--primary-dark:#254c87;--primary-soft:#e9f0fb}.role-accent-sekretaris{--primary:#7955a6;--primary-dark:#5c3c83;--primary-soft:#f0eafb}.role-accent-informasi{--primary:#b06a1c;--primary-dark:#885013;--primary-soft:#fff1df}