:root{--bg:#f3f7f8;--paper:#fff;--muted:#667b84;--ink:#172d36;--primary:#0f5764;--primary-2:#0a4152;--teal:#1b927f;--mint:#e1f7f1;--line:#dce7eb;--danger:#bc3a4a;--danger-bg:#fff0f0;--amber:#ae7017;--amber-bg:#fff8e9;--shadow:0 9px 32px rgba(15,63,78,.06);--radius:16px;--sidebar:248px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);font-size:14px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:var(--primary)}.muted,.subtle{color:var(--muted)}.tiny{font-size:11px}.small{font-size:12px}.text-right{text-align:right}.nowrap{white-space:nowrap}.strong{font-weight:750}.section-caption{letter-spacing:.12em;text-transform:uppercase;font-size:10px;color:var(--muted);font-weight:750}.caption{font-size:12px;color:var(--muted);line-height:1.6}.app-shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}.sidebar{background:#103f4c;color:#e3f3f3;position:sticky;top:0;max-height:100vh;overflow-y:auto;padding:25px 14px 18px;display:flex;flex-direction:column;gap:13px}.side-brand{display:flex;align-items:center;gap:11px;padding:0 9px 21px}.logo-mark{width:40px;height:40px;border-radius:12px;background:#5bd3b5;color:#113f4b;display:grid;place-items:center;font-weight:900;font-size:26px;box-shadow:0 3px 8px rgba(0,0,0,.09)}.side-brand .name{font-size:18px;font-weight:800;letter-spacing:-.03em}.side-brand .desc{font-size:10px;color:#9cbdc7;letter-spacing:.1em}.side-group{margin:10px 14px 3px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#91b6c2;font-weight:700}.nav-btn{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:0;border-radius:11px;color:#c4dce3;background:transparent;font-weight:580;text-align:left;font-size:13px;transition:.15s}.nav-btn:hover{background:rgba(255,255,255,.09)}.nav-btn.active{background:#fff;color:#114855;box-shadow:0 4px 13px rgba(0,0,0,.12);font-weight:800}.nav-btn svg{flex:0 0 auto}.nav-btn .nav-caption{font-size:10px;padding:2px 5px;border-radius:5px;background:#bfedf0;color:#0a4c52;margin-left:auto}.sidebar-bottom{margin-top:auto;padding:20px 8px 0}.side-profile{padding:12px;background:rgba(255,255,255,.08);border-radius:12px;display:flex;gap:9px;align-items:center}.avatar{height:33px;width:33px;border-radius:50%;background:#76d4be;color:#184953;font-weight:850;display:grid;place-items:center}.shell-content{min-width:0}.topbar{height:80px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}.topbar h2{margin:3px 0 0;font-size:22px;letter-spacing:-.045em}.topbar .meta{color:var(--muted);font-size:12px}.header-actions{display:flex;align-items:center;gap:12px}.signal{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--teal)}.signal.offline{color:var(--amber)}.main-content{max-width:1520px;padding:30px 32px 75px;margin:auto}.headline{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}.headline h1{margin:0;font-size:26px;letter-spacing:-.05em}.headline p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.55}.button-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.btn{padding:10px 15px;border-radius:9px;border:1px solid var(--line);color:var(--ink);background:#fff;font-weight:720;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-size:12px;min-height:38px}.btn:hover{border-color:#8ec5c6;background:#f9fdfd}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.primary:hover{background:#06434f}.btn.success{background:#e4f7ef;color:#0a7759;border-color:#b4ebd5}.btn.danger{background:#fff2f3;color:#b73d4b;border-color:#ffdade}.btn.ghost{border-color:transparent;background:transparent}.btn.sm{padding:7px 10px;min-height:30px}.btn.icon-only{width:35px;padding:6px}.btn.full{width:100%}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:20px}.metric{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:19px;box-shadow:var(--shadow)}.metric-label{font-size:12px;color:var(--muted);font-weight:650}.metric-num{font-weight:800;font-size:32px;letter-spacing:-.06em;margin-top:10px;font-variant-numeric:tabular-nums}.metric-foot{font-size:11px;color:var(--muted);margin-top:5px}.metric-icon{width:36px;height:36px;border-radius:11px;background:#e5f7f2;color:#0b8470;display:grid;place-items:center;margin-left:auto}.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:16px}.panel h3{font-size:15px;margin:0 0 5px;font-weight:800;letter-spacing:-.01em}.panel .panel-intro{font-size:12px;color:var(--muted);margin:0 0 17px;line-height:1.6}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.form-stack{display:flex;flex-direction:column;gap:12px}.form-stack h3{margin:10px 0 0}label{font-size:12px;font-weight:670;color:#35505a;display:flex;flex-direction:column;gap:6px}input,select,textarea{padding:10px 11px;background:#fff;border:1px solid #cfdce1;border-radius:9px;outline:none;width:100%;color:var(--ink);min-width:0;transition:border .13s,box-shadow .13s}input:focus,select:focus,textarea:focus{border-color:#249a9b;box-shadow:0 0 0 3px #18a19c23}input[readonly]{background:#f4f7f8}textarea{resize:vertical;min-height:72px}.filterbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:15px}.filterbar>*{flex:1;min-width:150px}.filterbar .btn{flex:0 0 auto}.table-scroller{overflow-x:auto;border:1px solid var(--line);border-radius:11px}table{width:100%;border-collapse:collapse;font-size:12px;min-width:650px}thead th{padding:12px 13px;text-align:left;font-size:11px;color:#607780;text-transform:uppercase;letter-spacing:.05em;background:#f6f9fa;white-space:nowrap}td{padding:12px 13px;border-top:1px solid #eaf0f1;vertical-align:middle}tbody tr:hover{background:#f7fbfb}.table-actions{display:flex;gap:5px}.pill{display:inline-flex;gap:5px;align-items:center;padding:4px 9px;border-radius:100px;font-size:10px;font-weight:750;background:#edf2f5;color:#496776;white-space:nowrap}.pill.good{background:#e5f7ef;color:#168066}.pill.warn{background:#fff4dd;color:#946414}.pill.bad{background:#ffeded;color:#bd4956}.pill.info{background:#e8f2fc;color:#3470a1}.empty{border:1px dashed #cbdfe1;padding:26px;border-radius:12px;text-align:center;color:var(--muted);font-size:13px}.list-cards{display:flex;flex-direction:column;gap:10px}.list-card{padding:15px;border:1px solid var(--line);border-radius:12px;display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff}.list-card .title{font-weight:780}.list-card .detail{font-size:12px;color:var(--muted);margin-top:5px}.list-card .right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.notice{border-radius:11px;background:#eff5f8;border:1px solid #ddebf0;padding:12px 14px;color:#426172;font-size:12px;line-height:1.65}.notice.success{background:#eaf8f0;border-color:#c2eed7;color:#287456}.notice.warn{background:var(--amber-bg);border-color:#f3dfad;color:#92651e}.notice.danger{background:var(--danger-bg);border-color:#ffd6db;color:var(--danger)}.progress-track{height:9px;border-radius:20px;background:#e1ecee;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#118f87,#57c6a4);border-radius:20px;max-width:100%;transition:width .3s}.progress-line{display:flex;justify-content:space-between;align-items:center;margin:9px 0;font-size:12px}.timeline{display:flex;flex-direction:column;gap:13px}.timeline-item{display:flex;gap:12px;align-items:flex-start}.timeline-dot{border-radius:50%;height:28px;width:28px;display:grid;place-items:center;background:#e0f4ef;color:var(--teal);flex:0 0 auto;font-weight:750}.timeline-body{flex:1;border-bottom:1px solid var(--line);padding:1px 0 12px}.timeline-body p{margin:4px 0 0;color:var(--muted);font-size:12px}.mobile-toggle{display:none}.boot-screen,.login-wrap{display:grid;place-content:center;min-height:100vh;padding:18px}.boot-screen{text-align:center}.boot-screen .logo-mark{margin:0 auto 15px}.boot-screen h1{margin:0}.login-wrap{background:radial-gradient(circle at 15% 10%,#b3e7de 0,transparent 32%),radial-gradient(circle at 90% 95%,#b3cfeb 0,transparent 27%),#f1f6f7}.login-card{width:min(420px,92vw);padding:35px;background:#fff;border-radius:22px;box-shadow:0 22px 70px #0d3b4b1c;border:1px solid #deedef}.login-card .logo-mark{margin-bottom:20px}.login-card h1{margin:0;font-size:29px;letter-spacing:-.055em}.login-card p{line-height:1.6}.login-card .btn{margin-top:8px}.login-footer{margin-top:22px;text-align:center;font-size:11px;color:#83949c}.setup-page{display:grid;place-items:center;min-height:100vh;padding:25px}.setup-card{width:min(660px,95vw);border:1px solid var(--line);border-radius:22px;padding:33px;background:#fff;box-shadow:var(--shadow)}.setup-card h1{font-size:24px}.primary-btn{display:inline-block;border:0;background:var(--primary);color:#fff;border-radius:9px;padding:12px 18px;font-weight:750;text-decoration:none}.app-dialog{border:1px solid var(--line);border-radius:17px;box-shadow:0 25px 100px rgba(6,26,36,.23);padding:0;width:min(690px,calc(100vw - 22px));max-height:min(88vh,960px);overflow:auto;color:var(--ink)}.app-dialog::backdrop{background:rgba(5,24,33,.45)}.dialog-header{padding:19px 23px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:start;gap:10px;position:sticky;top:0;background:#fff;z-index:3}.dialog-header h3{margin:0;font-size:18px}.dialog-content{padding:22px 23px}.dialog-footer{padding:15px 23px;background:#f7fafb;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;position:sticky;bottom:0}.app-dialog .close-x{font-size:22px;border:0;background:transparent;color:var(--muted);line-height:1}.tabrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}.tab{padding:9px 14px;background:#edf3f4;border-radius:8px;border:1px solid transparent;color:#48646b;font-weight:700;font-size:12px}.tab.active{background:#e0f5ee;color:#006657;border-color:#bce8d9}.note-list{padding-left:20px;line-height:1.75;color:#557079}.inline-code{font-family:ui-monospace,Consolas,monospace;background:#edf4f5;border-radius:5px;padding:2px 5px}.divide{height:1px;background:var(--line);margin:15px 0}.footer-note{font-size:11px;color:#8a9ca4;margin:28px 0}.small-icon{display:inline-flex;align-items:center;vertical-align:middle}.small-icon svg{height:18px;width:18px}.drawer-mask{display:none}#toast{position:fixed;bottom:24px;right:26px;z-index:100;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast-msg{background:#103f4c;color:#fff;padding:13px 16px;box-shadow:0 12px 35px #103f4c33;border-radius:10px;max-width:380px;font-size:12px;line-height:1.5;animation:pop .2s}.toast-msg.error{background:#b44350}@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}.offline-box{border:1px solid #c9e9e2;background:#f0fcf7;border-radius:12px;padding:14px;margin-bottom:15px}.input-mini{max-width:120px}.mobile-nav{display:none}.num{font-variant-numeric:tabular-nums}.wide-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end}.step-circle{height:30px;width:30px;display:grid;place-items:center;border-radius:10px;background:#e1f7f1;color:#0a6a5c;font-weight:850}.stats-row{display:flex;gap:15px;flex-wrap:wrap}.stats-row>div{flex:1;padding:16px;border-radius:12px;background:#f3f8f8;min-width:130px}.stat-big{font-weight:800;font-size:23px;letter-spacing:-.04em}.checkbox-line{display:flex;flex-direction:row;align-items:center;gap:8px;padding:7px 0;font-size:13px}.checkbox-line input{width:17px;height:17px}.float-panel{border-left:3px solid #139488;padding:13px;background:#effaf7;border-radius:7px;margin-bottom:16px}.hidden{display:none!important}
@media(max-width:1100px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.main-content{padding:24px}.topbar{padding:0 24px}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){:root{--sidebar:0}.app-shell{display:block}.sidebar{width:263px;position:fixed;inset:0 auto 0 0;z-index:32;transform:translateX(-110%);transition:transform .2s;max-height:100vh}.sidebar.open{transform:translateX(0)}.drawer-mask.active{display:block;position:fixed;inset:0;background:rgba(7,27,38,.38);z-index:31}.mobile-toggle{display:inline-flex}.topbar{height:69px;padding:0 16px}.topbar h2{font-size:18px}.topbar .meta{font-size:11px}.topbar .user-label{display:none}.main-content{padding:20px 14px 105px}.headline{flex-direction:column;align-items:stretch;margin-bottom:17px}.headline h1{font-size:23px}.metrics{gap:9px}.metric{padding:15px}.metric-num{font-size:27px}.panel{padding:17px}.grid-2,.grid-3{grid-template-columns:1fr}.form-grid,.form-grid.three{grid-template-columns:1fr}.filterbar{align-items:stretch}.filterbar>*{min-width:100%;flex:1}.filterbar .btn{flex:1}.list-card{align-items:flex-start;flex-wrap:wrap}.list-card .right{width:100%;justify-content:flex-start}.mobile-nav{display:flex;align-items:center;justify-content:space-around;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:20;box-shadow:0 -4px 25px #0c485315;padding-bottom:env(safe-area-inset-bottom)}.mobile-nav button{display:flex;align-items:center;gap:3px;flex-direction:column;min-width:65px;flex:1;padding:10px 3px;background:none;border:0;font-size:10px;color:#67818a;font-weight:650}.mobile-nav button.active{color:#057969}.mobile-nav svg{width:21px;height:21px}.app-dialog{width:calc(100vw - 16px);max-height:91vh}.dialog-header,.dialog-content,.dialog-footer{padding:15px}.setup-card{padding:20px}#toast{bottom:90px;left:16px;right:16px}.toast-msg{max-width:none}}
@media print{.sidebar,.topbar,.mobile-nav,.btn{display:none!important}.app-shell{display:block}.main-content{padding:0}.panel{box-shadow:none}}

/* ===============================================================
   PILKADES MODERN BLUE — penyegaran satu tema untuk seluruh aplikasi
   Palet: biru cerah, nila, toska, putih lembut. Tidak mengubah data.
   =============================================================== */
:root{
 --bg:#f4f7ff;--paper:#fff;--ink:#172849;--muted:#657795;
 --primary:#2563eb;--primary-2:#1e40af;--teal:#0d9488;
 --mint:#dffaf5;--line:#e3eaf6;--shadow:0 8px 34px rgba(45,74,146,.065);
 --radius:18px;--sidebar:252px;
}
html{scrollbar-color:#cbdcf8 transparent}
body{background:radial-gradient(ellipse at 82% 3%,#e9efff 0,transparent 38%),radial-gradient(ellipse at 6% 80%,#eafaf8 0,transparent 43%),#f5f8ff}
button,input,select,textarea{font-family:inherit}
a{color:#2464e9}
.sidebar{background:linear-gradient(172deg,#fff 0%,#fcfdff 58%,#f0f5ff 100%);color:#243e66;border-right:1px solid #e2eaf8;box-shadow:4px 0 24px rgba(38,74,159,.025)}
.side-brand{border-bottom:1px solid #ecf0fa;padding-bottom:22px}
.logo-mark{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 55%,#7652ed 100%);color:#fff;box-shadow:0 7px 16px rgba(44,93,220,.23)}
.side-brand .name{color:#143a80;font-weight:900;letter-spacing:-.04em}
.side-brand .desc{color:#6c86ae;font-weight:750}
.side-group{color:#7990bb;letter-spacing:.13em}
.nav-btn{color:#465d7c;font-weight:650;border:1px solid transparent;border-radius:12px;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}
.nav-btn:hover{background:#ebf2ff;color:#1d56bd;border-color:#e4edff;transform:translateX(1px)}
.nav-btn.active{background:linear-gradient(105deg,#2c74f3,#4b65ea);color:#fff;box-shadow:0 7px 16px rgba(38,92,224,.18);font-weight:800;border-color:transparent}
.nav-btn.active:hover{background:linear-gradient(105deg,#2569e6,#4e5ee6)}
.nav-btn .nav-caption{background:#eaf1ff;color:#1d5fce}
.sidebar-bottom{padding-top:15px}
.side-profile{background:#ebf3ff;border:1px solid #dce9ff;color:#1c3d77}
.avatar{background:linear-gradient(145deg,#2563eb,#55c9d5);color:#fff}
.topbar{background:linear-gradient(95deg,rgba(255,255,255,.95),rgba(241,246,255,.94));border-bottom:1px solid #e4ecfa;box-shadow:0 2px 20px rgba(34,71,154,.035);backdrop-filter:blur(14px)}
.topbar h2{color:#173661;font-weight:850}
.main-content{max-width:1580px}
.headline h1{color:#153b77;font-weight:850}
.headline p{color:#687d9d}
.btn{border-radius:11px;border-color:#dce5f4;color:#31527e;background:#fff;transition:transform .15s,background .15s,box-shadow .15s;font-weight:740}
.btn:hover{border-color:#a8c2ff;background:#f8faff;transform:translateY(-1px)}
.btn.primary{border-color:#2867e9;background:linear-gradient(115deg,#2976f6,#485ee9);color:#fff;box-shadow:0 5px 14px rgba(39,103,229,.16)}
.btn.primary:hover{background:linear-gradient(115deg,#1c63df,#3f50dc);box-shadow:0 9px 17px rgba(39,103,229,.22)}
.btn.success{background:#e3faf4;color:#08796e;border-color:#c2ede3}
.btn.danger{background:#fff1f3;color:#bd3648;border-color:#ffdae0}
.panel,.metric{border-color:#e6ebf7;box-shadow:var(--shadow)}
.panel h3{color:#213960}
.metric-icon{background:#eaf1ff;color:#286ae6}
.metric-num{color:#162f64}
label{color:#385273;font-weight:730}
input,select,textarea{border:1px solid #d7e2f3;border-radius:11px;color:#1c3659;background:#fff;padding:10px 13px;min-height:43px}
input:hover,select:hover,textarea:hover{border-color:#b5c9ed}
input:focus,select:focus,textarea:focus{border-color:#5483fa;box-shadow:0 0 0 4px rgba(73,126,244,.13)}
input[readonly]{background:#f3f6fc}
.notice{background:#f1f6ff;border-color:#dce7fd;color:#325a9a}
.notice.success{background:#eafaef;border-color:#bde8db;color:#116957}
.notice.warn{background:#fff9e9;border-color:#fae5b1;color:#7c571b}
.notice.danger{background:#fff3f4;border-color:#ffd9de;color:#a72840}
.table-scroller{border-color:#e3ebf9}
thead th{background:#f2f6ff;color:#5d739c}
td{border-top-color:#eaf0fa}
tbody tr:hover{background:#f7faff}
.tab.active{background:#e9efff;color:#2459d9;border-color:#c7d9ff}
.step-circle,.timeline-dot{background:#e8f1ff;color:#205fe2}
.progress-fill{background:linear-gradient(90deg,#3277ed,#6ccadd)}
.stats-row>div{background:#f0f5ff}
.toast-msg{background:#1c4bb5}
.login-wrap{background:radial-gradient(circle at 15% 10%,#cbdcff 0,transparent 34%),radial-gradient(circle at 90% 95%,#d9d1ff 0,transparent 30%),#f1f7ff}
.login-card{border-color:#e5ecfc;box-shadow:0 24px 70px rgba(36,70,151,.13)}
.mobile-nav button.active{color:#2868de}

/* Date: pengguna selalu melihat dd/mm/yyyy, picker native hanya tombol kalender */
.date-field .date-control{display:block;position:relative;width:100%}
.date-field .date-text{padding-right:48px;font-variant-numeric:tabular-nums;letter-spacing:.015em}
.date-picker-native{position:absolute;top:2px;right:3px;width:40px;min-width:40px;height:calc(100% - 4px);border:none!important;background:transparent;box-shadow:none!important;padding:0 9px 0 0;opacity:.9;cursor:pointer;color:#376ac8;color-scheme:light}
.date-picker-native::-webkit-datetime-edit{display:none}
.date-picker-native::-webkit-calendar-picker-indicator{opacity:1;margin:0;cursor:pointer;filter:sepia(.5) saturate(2) hue-rotate(176deg)}
.date-field:focus-within .date-control{border-radius:11px}

/* Pengaturan: form penuh lebar, kolom kompak, bagian berbahaya tersembunyi */
.settings-page{display:flex;flex-direction:column;gap:16px}
.settings-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:27px 32px;border-radius:23px;background:linear-gradient(115deg,#2478ed 0%,#3a66ef 52%,#7456df 100%);color:#fff;box-shadow:0 16px 34px rgba(52,99,220,.17)}
.settings-hero::before{content:"";position:absolute;right:8%;top:-130px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.17) 0,rgba(255,255,255,0) 70%)}
.settings-hero::after{content:"";position:absolute;right:24%;bottom:-140px;width:290px;height:290px;border-radius:50%;border:45px solid rgba(255,255,255,.07)}
.settings-hero-copy{position:relative;z-index:1;max-width:760px}
.settings-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.15em;color:#dfecff}
.settings-hero h1{font-size:28px;line-height:1.2;letter-spacing:-.045em;color:#fff;margin:10px 0 7px;font-weight:860}
.settings-hero p{color:#f3f5ff;margin:0;font-size:13px;line-height:1.5}
.settings-hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.settings-hero-pills span{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.15);color:#fff;padding:7px 11px;border-radius:100px;font-size:11px;font-weight:740;backdrop-filter:blur(8px)}
.settings-hero-art{flex:0 0 auto;display:grid;place-items:center;width:112px;height:112px;border-radius:30px;color:#fff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);transform:rotate(-10deg);box-shadow:0 14px 24px rgba(24,48,114,.14);position:relative;z-index:1}
.settings-hero-art svg{transform:rotate(10deg)}
.settings-form{display:flex;flex-direction:column;gap:14px}
.settings-card{padding:22px 24px;margin:0;border-radius:19px}
.settings-section-head{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.settings-section-head h3{font-size:16px;margin:0 0 4px;font-weight:850;color:#1c3b74}
.settings-section-head p{font-size:12px;margin:0;color:#7485a4;line-height:1.4}
.settings-icon{flex:0 0 42px;width:42px;height:42px;border-radius:13px;display:grid;place-items:center}
.settings-icon.blue{background:#e9f1ff;color:#2469e9}
.settings-icon.violet{background:#f0eaff;color:#7450d9}
.settings-icon.teal{background:#e0f9f4;color:#069b8b}
.settings-fields{display:grid;column-gap:14px;row-gap:14px}
.settings-fields.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.settings-fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.settings-fields .span-all{grid-column:1/-1}
.settings-fields input{height:44px}
.settings-date-tip{display:flex;align-items:center;gap:8px;padding:12px 14px;margin-top:15px;background:#eef5ff;border:1px solid #deebff;border-radius:12px;color:#4a6896;font-size:12px;line-height:1.45}
.settings-date-tip svg{flex:0 0 auto;color:#326ee5}
.settings-savebar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 2px 12px}
.settings-savebar>div{display:flex;align-items:center;gap:9px;color:#687c99;font-size:12px}
.settings-savebar>div svg{color:#11a391;flex:0 0 auto}
.settings-save-btn{min-width:220px;min-height:44px}
.settings-tools-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.settings-tools-grid .settings-card{margin:0}
.settings-backup-form{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.settings-backup-form>div{flex:1;min-width:240px}
.settings-backup-form .btn{min-height:43px}
.settings-helper{color:#8290a9;font-size:11px;line-height:1.5;margin:13px 0 0}
.settings-audit .btn{min-height:43px}
.settings-danger-zone{border:1px solid #f1dfe3;background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.settings-danger-zone summary{padding:18px 24px;display:flex;gap:10px;align-items:center;color:#9c4151;font-size:13px;font-weight:800;cursor:pointer;list-style:none;user-select:none}
.settings-danger-zone summary::-webkit-details-marker{display:none}
.settings-danger-zone summary>span{font-size:11px;font-weight:520;color:#8290a9;margin-left:auto}
.settings-danger-zone[open] summary{background:#fff7f8;border-bottom:1px solid #f7e8ea}
.settings-danger-zone[open] summary::after{content:"⌃";margin-left:5px}
.settings-danger-content{padding:22px 24px}
.settings-restore-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px;align-items:end}
.settings-restore-form .btn{grid-column:1/-1;justify-self:end;min-width:200px}

@media(max-width:1250px){.settings-fields.four{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-tools-grid{grid-template-columns:1fr 1fr}}
@media(max-width:980px){.settings-tools-grid{grid-template-columns:1fr}.settings-restore-form{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-restore-form .btn{justify-self:stretch}}
@media(max-width:760px){
 .settings-hero{padding:23px 20px}.settings-hero h1{font-size:24px}.settings-hero-art{width:66px;height:66px;border-radius:19px}.settings-hero-art svg{width:42px;height:42px}
 .settings-card{padding:18px}.settings-section-head{margin-bottom:16px}
 .settings-fields.four,.settings-fields.three{grid-template-columns:repeat(2,minmax(0,1fr))}
 .settings-savebar{flex-direction:column;align-items:stretch}.settings-save-btn{width:100%}
 .settings-restore-form{grid-template-columns:1fr}.settings-danger-zone summary{flex-wrap:wrap}.settings-danger-zone summary>span{margin-left:0;width:100%}
 .settings-danger-content{padding:16px}
}
@media(max-width:470px){.settings-fields.four,.settings-fields.three{grid-template-columns:1fr}.settings-hero-art{display:none}.settings-hero{padding:20px}.settings-hero h1{font-size:22px}.settings-date-tip{align-items:flex-start}.settings-section-head p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.nav-btn,.btn{transition:none!important}}
@media print{.settings-hero{color:#111;background:#fff;box-shadow:none}.settings-danger-zone,.settings-savebar,.settings-tools-grid{display:none!important}}

/* =========================================
   PILKADES v8 — modernisasi menyeluruh antarmuka
   Fokus: kepadatan dashboard, navigasi, formulir, tabel,
   pemeriksaan HP, aksesibilitas dan responsivitas.
   ========================================= */
:root{--bg:#f5f8ff;--ink:#1b355c;--muted:#6d7d99;--line:#e2e9f6;--primary:#2869ef;--primary-2:#4356d9;--teal:#06978d;--mint:#e3f9f4;--shadow:0 9px 30px rgba(43,78,154,.055);--radius:17px}
body{background:linear-gradient(160deg,#f8fbff 0%,#eef3ff 55%,#f0fbfa 100%) fixed;color:var(--ink)}
::selection{background:#d4e3ff;color:#183a8b}
:focus-visible{outline:3px solid #5988f8!important;outline-offset:2px}
button:active:not(:disabled){transform:translateY(1px)}
.sidebar{background:linear-gradient(180deg,#fff 0%,#f4f7ff 100%);border-right:1px solid #e5ebf8;scrollbar-width:thin;scrollbar-color:#c0d2fa transparent}
.side-brand{margin-bottom:3px}
.nav-search-wrap{position:relative;margin:0 4px 4px;display:flex;align-items:center;color:#7490bb}
.nav-search-wrap>svg{position:absolute;left:13px;z-index:1;pointer-events:none}
.nav-search-wrap>input{width:100%;border-radius:12px;background:#f2f6ff;border:1px solid #e2eaf9;font-size:12px;height:40px;min-height:40px;padding:9px 10px 9px 40px}
.nav-search-wrap>input::placeholder{color:#8d9cba}
.nav-search-wrap>input:focus{background:#fff}
.nav-btn[hidden],.side-group[hidden]{display:none!important}
.side-profile .avatar{flex-shrink:0}
.topbar{height:74px}
.main-content{max-width:1600px;padding:26px 30px 85px}
.page-headline{margin-bottom:22px;align-items:center}
.page-eyebrow{color:#6b87c5;display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.12em;margin-bottom:5px}
.page-headline h1{font-size:26px}
.page-headline .button-row{justify-content:flex-end}
.panel{padding:23px;border-radius:18px}
.panel .panel-intro{margin-bottom:14px}
.btn{min-height:41px;font-size:12px;line-height:1.35;transition:background .15s,transform .15s,box-shadow .15s}
.btn.sm{min-height:33px}
.btn:disabled{transform:none!important;filter:grayscale(.22)}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-stack{gap:14px}
.form-stack>label,.form-grid>label{min-width:0}
label{line-height:1.4}
input,textarea,select{min-height:44px}
input[type=file]{padding:9px;max-width:100%;overflow:hidden}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:#2869ef}
input::placeholder,textarea::placeholder{color:#9aabc5}
textarea{line-height:1.55;min-height:82px}
.app-dialog{width:min(760px,calc(100vw - 28px));max-height:min(92vh,970px);border-radius:20px}
.app-dialog.dialog-wide{width:min(940px,calc(100vw - 28px))}
.app-dialog.dialog-wide .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.app-dialog .dialog-header{background:linear-gradient(100deg,#f8faff,#eff5ff);border-bottom:1px solid #e6ecfa}
.app-dialog .dialog-header h3{font-size:18px;color:#203d77}
.app-dialog .dialog-content{padding:22px 24px 25px}
.app-dialog .dialog-footer{background:#fff;border-top:1px solid #e5edfa;position:sticky;bottom:0;z-index:1}
.app-dialog form.form-stack>button[type=submit]{min-height:45px;margin-top:3px}
.table-scroller{overflow:auto;border-radius:13px;box-shadow:0 3px 16px rgba(30,73,154,.02);scrollbar-width:thin;scrollbar-color:#b4c6ec #f6f9ff}
table{font-variant-numeric:tabular-nums}
thead th{position:sticky;top:0;z-index:1;letter-spacing:.045em;padding:13px 13px}
tbody tr:nth-child(even){background:#fafcff}
tbody tr:hover{background:#edf4ff}
td{line-height:1.55}
.table-actions{gap:6px;flex-wrap:wrap;min-width:110px}
.table-actions .btn{white-space:nowrap}
.filterbar{padding:15px;background:#f6f9ff;border:1px solid #eaf0fc;border-radius:13px;margin-bottom:15px;align-items:end}
.filterbar .btn{min-height:44px}
.list-card{border:1px solid #e2eafa;box-shadow:0 3px 14px rgba(46,82,167,.025);border-radius:13px;padding:15px 17px}
.list-card .title{color:#1e4179}
.list-card:hover{border-color:#b9d0f8;background:#fbfdff}
.empty{border:1px dashed #b8c9e7;background:#f8faff;line-height:1.6}
.empty svg{color:#6485c4}
.notice{line-height:1.65}
.pill{font-weight:790}
/* Dashboard desktop: seluruh 5 indikator di satu baris, tidak menyisakan kartu yatim. */
.dashboard-page{display:flex;flex-direction:column;gap:20px}
.dashboard-hero{background:linear-gradient(111deg,#1e69e9 0%,#416aec 52%,#7655de 100%);border-radius:23px;padding:28px 33px;min-height:190px;color:#fff;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:25px;box-shadow:0 14px 34px rgba(51,95,209,.17)}
.dashboard-hero:before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;right:-95px;top:-260px;background:radial-gradient(circle,#ffffff26,#ffffff00 70%)}
.dashboard-hero:after{content:"";position:absolute;width:300px;height:300px;border:38px solid #ffffff0c;border-radius:50%;right:155px;bottom:-315px}
.dashboard-hero-main{position:relative;z-index:1;max-width:790px}
.dashboard-kicker{display:inline-flex;align-items:center;gap:7px;color:#dfeeff;font-size:10px;letter-spacing:.12em;font-weight:790}
.dashboard-hero h1{margin:9px 0 8px;color:white;font-size:28px;letter-spacing:-.04em;line-height:1.2;font-weight:850}
.dashboard-hero p{margin:0;color:#f2f6ff;font-size:13px;line-height:1.65}
.dashboard-hero p strong{color:#fff}
.dashboard-hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:19px}
.dashboard-hero-actions .btn.primary{background:#fff;color:#2c61da;border-color:#fff;box-shadow:0 4px 16px #193aa72e}
.dashboard-hero-actions .btn.primary:hover{background:#f1f5ff}
.dashboard-hero-actions .btn:not(.primary){background:#ffffff1c;color:#fff;border:1px solid #ffffff66}
.dashboard-hero-actions .btn:not(.primary):hover{background:#ffffff33}
.dashboard-hero-art{position:relative;display:grid;place-items:center;width:115px;height:115px;background:#ffffff20;border:1px solid #ffffff3b;border-radius:28px;color:#fff;transform:rotate(-9deg);flex:0 0 auto}
.dashboard-hero-art>span{position:absolute;bottom:-7px;right:-12px;background:#a3f4ed;color:#0f756d;border-radius:14px;padding:8px;transform:rotate(9deg);box-shadow:0 8px 16px #1a379d30}
.dashboard-section-caption{display:flex;align-items:end;justify-content:space-between;gap:16px}
.dashboard-section-caption h2{font-size:20px;letter-spacing:-.03em;color:#1a3e79;margin:0 0 4px;font-weight:850}
.dashboard-section-caption p{color:#7384a0;margin:0;font-size:12px}
.dashboard-period{font-size:11px;font-weight:760;white-space:nowrap;border:1px solid #dbe7fa;background:white;color:#4e6ba5;padding:8px 12px;border-radius:100px;display:inline-flex;align-items:center;gap:7px}
.dashboard-metrics{margin:0;gap:13px}
.dashboard-metrics.metrics-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.dashboard-metrics .metric{min-width:0;min-height:132px;position:relative;overflow:hidden;padding:17px 17px 16px;border-top:3px solid #4d88ef}
.dashboard-metrics .metric:nth-child(2){border-top-color:#12b6a3}
.dashboard-metrics .metric:nth-child(3){border-top-color:#f0ad4e}
.dashboard-metrics .metric:nth-child(4){border-top-color:#8f70df}
.dashboard-metrics .metric:nth-child(5){border-top-color:#5190e8}
.dashboard-metrics .metric-label{font-size:12px;font-weight:750;color:#5d749d}
.dashboard-metrics .metric-icon{width:33px;height:33px;border-radius:10px}
.dashboard-metrics .metric-num{font-size:30px;margin-top:7px;line-height:1.1}
.dashboard-metrics .metric-foot{font-size:11px;line-height:1.5;color:#7d8ea8}
.dashboard-sections{gap:14px}
.dashboard-sections .panel{margin:0;min-height:250px;padding:24px}
.panel-title-row{display:flex;justify-content:space-between;align-items:start;gap:10px;margin-bottom:15px}
.panel-title-row .panel-intro{margin:5px 0 0}
.panel-icon-circle{width:39px;height:39px;border-radius:13px;flex:0 0 auto;background:#e8f1ff;color:#306fe4;display:grid;place-items:center}
.panel-icon-circle.purple{background:#f0eafe;color:#745de3}
.progress-dashboard{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 15px}
.progress-big{color:#2157d0;font-weight:880;font-size:48px;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.progress-big span{font-size:26px}
.progress-summary{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.progress-summary span{border-radius:9px;background:#f2f6ff;color:#5d729e;font-size:11px;padding:8px 10px}
.progress-summary b{color:#2958b1}
.dashboard-track{height:11px;background:#e9eef8}
.dashboard-assurance{display:flex;align-items:flex-start;gap:8px;margin-top:17px;padding:12px 14px;border-radius:12px;background:#eaf9f5;border:1px solid #c8f0e5;color:#16746a;font-size:12px;line-height:1.55}
.dashboard-assurance svg{flex-shrink:0}
.workflow-list{display:grid;gap:2px}
.workflow-item{display:flex;align-items:center;gap:12px;width:100%;background:transparent;border:0;border-bottom:1px solid #edf1fa;padding:10px 4px;text-align:left;color:#1e3a67;border-radius:8px}
.workflow-item:hover{background:#f3f7ff}
.workflow-item:last-child{border-bottom:0}
.workflow-num{height:30px;width:30px;flex:0 0 30px;border-radius:50%;background:#e9f1ff;color:#2d68dc;display:grid;place-items:center;font-size:11px;font-weight:850}
.workflow-copy{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
.workflow-copy strong{font-size:12px}
.workflow-copy small{font-size:11px;color:#8092ae}
.workflow-item>svg{color:#6e88ba}
.dashboard-quick{margin-top:1px}
.dashboard-quick>.dashboard-section-caption{margin-bottom:13px}
.quick-action-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.quick-action{border:1px solid #e1e9f8;border-radius:16px;background:white;min-height:138px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;padding:16px;position:relative;box-shadow:var(--shadow);color:#264679;transition:box-shadow .16s,transform .16s,border-color .16s}
.quick-action:hover{transform:translateY(-2px);box-shadow:0 11px 26px #335fbe18;border-color:#b9cdfb}
.quick-action-icon{width:38px;height:38px;border-radius:12px;background:#eaf2ff;display:grid;place-items:center;color:#2f70eb}
.quick-action:nth-child(2) .quick-action-icon{color:#0b9b87;background:#e7f9f3}
.quick-action:nth-child(3) .quick-action-icon{color:#8055d8;background:#f1ebff}
.quick-action strong{font-weight:820;font-size:12px;line-height:1.35}
.quick-action>span:not(.quick-action-icon):not(.quick-arrow){font-size:11px;color:#7c8ca9;line-height:1.5;padding-right:12px}
.quick-arrow{position:absolute;right:14px;bottom:14px;color:#4b79d3}
.onboarding-panel{margin:0;background:linear-gradient(120deg,#fff,#f6faff);border:1px solid #cfddfb}
.onboarding-heading{display:flex;gap:12px;align-items:start;color:#2d6ee4}
.onboarding-heading>svg{flex:0 0 auto;margin-top:3px}
.onboarding-heading h3{font-size:16px}
.onboarding-heading p{margin:5px 0 0}
.onboarding-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:17px 0 12px}
.onboarding-step{display:flex;align-items:center;gap:10px;border:1px solid #dce7f7;background:#fff;border-radius:13px;padding:14px 11px;text-align:left;min-width:0;color:#244576}
.onboarding-step:hover{border-color:#88b1fc;background:#f7fbff}
.onboarding-step .step-number{display:grid;place-items:center;border-radius:50%;background:#2869ed;color:white;width:30px;height:30px;flex:0 0 30px;font-weight:840}
.onboarding-step>span:nth-child(2){display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}
.onboarding-step strong{font-size:12px}
.onboarding-step small{font-size:11px;line-height:1.4;color:#7e91ad}
.onboarding-step>svg{color:#4b76cd;flex:0 0 auto}
.dashboard-page .footer-note{padding:5px 0 3px;text-align:center;color:#8b9ab1;font-size:11px}
/* Tampilan petugas HP dan formulir penting lebih nyaman disentuh */
@media(max-width:1500px){.dashboard-metrics.metrics-five{grid-template-columns:repeat(3,minmax(0,1fr))}.quick-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.dashboard-metrics.metrics-five{grid-template-columns:repeat(3,minmax(0,1fr))}.onboarding-steps{grid-template-columns:1fr}.dashboard-hero-art{width:90px;height:90px}.dashboard-hero-art>svg{width:54px;height:54px}}
@media(max-width:850px){.quick-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-metrics.metrics-five{grid-template-columns:repeat(2,minmax(0,1fr))}.app-dialog.dialog-wide .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .nav-search-wrap{margin-top:3px}
 .sidebar{padding-top:19px}
 .main-content{padding:17px 13px 100px}
 .dashboard-page{gap:15px}
 .dashboard-hero{padding:23px 20px;min-height:0;border-radius:17px}
 .dashboard-hero h1{font-size:23px}
 .dashboard-hero-art{display:none}
 .dashboard-hero-actions .btn{min-height:43px}
 .dashboard-section-caption{align-items:flex-start}
 .dashboard-section-caption h2{font-size:18px}
 .dashboard-period{font-size:10px}
 .dashboard-metrics .metric{min-height:121px;padding:14px}
 .dashboard-metrics .metric-num{font-size:29px}
 .dashboard-sections .panel{padding:18px;min-height:0}
 .progress-big{font-size:42px}
 .progress-summary{justify-content:flex-start}
 .quick-action{min-height:134px;padding:15px}
 .page-headline .button-row{justify-content:flex-start}
 .table-actions .btn{min-height:38px}
 .app-dialog.dialog-wide{width:calc(100vw - 16px)}
 .app-dialog .dialog-content{padding:16px}
 .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:490px){
 .dashboard-hero h1{font-size:21px}
 .dashboard-section-caption{flex-wrap:wrap}
 .dashboard-metrics.metrics-five{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dashboard-metrics .metric-label{font-size:11px}
 .dashboard-metrics .metric-num{font-size:27px}
 .dashboard-metrics .metric-foot{font-size:10px}
 .dashboard-metrics .metric-icon{width:29px;height:29px}
 .progress-dashboard{flex-direction:column;align-items:flex-start}
 .quick-action-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .quick-action{min-height:140px;padding:13px}
 .onboarding-heading h3{font-size:14px}
 .form-grid,.form-grid.three,.app-dialog.dialog-wide .form-grid{grid-template-columns:1fr}
 .page-headline h1{font-size:22px}
 .table-scroller{margin-left:-3px;margin-right:-3px}
 .list-card .right .btn{min-height:42px}
}
@media(prefers-reduced-motion:reduce){.quick-action,.workflow-item,.onboarding-step{transition:none!important;scroll-behavior:auto!important}}
@media print{body{background:#fff!important}.dashboard-hero,.dashboard-quick,.onboarding-panel{display:none!important}.dashboard-page{gap:10px}.dashboard-metrics.metrics-five{grid-template-columns:repeat(5,minmax(0,1fr))}.dashboard-sections{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Dua form operasional yang paling sering dipakai Admin ditata dalam kolom. */
@media(min-width:850px){
 .panel form[data-form="assign-region"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:12px}
 .panel form[data-form="assign-region"]>button{width:100%}
 .panel form[data-form="add-region"]{display:grid;grid-template-columns:1.6fr 1fr;align-items:end;gap:12px}
 .panel form[data-form="add-region"]>button{grid-column:1/-1}
 .panel form[data-form="add-region"]>.form-grid{gap:10px}
}