@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600&display=swap";:root{--navy:#0f1c3f;--navy-2:#172145;--navy-3:#1e2d5a;--gold:#c9922a;--gold-2:#dfa83d;--gold-lt:#f5e5c0;--white:#fff;--gray-1:#f0f2f7;--gray-2:#d8dce8;--gray-3:#8e96b0;--text:#1a2340;--green:#1e8a4a;--red:#c0392b;--green-tint:#e6f7ed;--red-tint:#fde8e6;--gold-tint:var(--gold-lt);--blue-tint:#dde8ff;--blue:#2553c9;--purple-tint:#ede9fe;--purple:#5b21b6;--teal-tint:#ccfbf1;--teal:#0f766e;--font-sans:"Plus Jakarta Sans", sans-serif;--font-mono:"JetBrains Mono", monospace;--radius-sm:8px;--radius-md:10px;--radius-lg:14px;--radius-xl:16px;--radius-2xl:20px;--radius-full:999px;--shadow-sidebar:4px 0 24px #00000040;--shadow-card-hover:0 8px 24px #0f1c3f1f;--shadow-modal:0 20px 60px #00000040;--shadow-panel:-8px 0 40px #0000002e;--shadow-toast:0 8px 24px #0003;--sidebar-width:240px;--transition-fast:.15s;--transition-base:.2s}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100vh}body{font-family:var(--font-sans);background:var(--gray-1);color:var(--text);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font-family:inherit}svg{display:block}body.auth-body{background:var(--navy);display:flex;overflow:hidden}.sidebar{width:var(--sidebar-width);background:var(--navy);z-index:100;height:100vh;box-shadow:var(--shadow-sidebar);flex-direction:column;display:flex;position:fixed;top:0;left:0}.sidebar-brand{border-bottom:1px solid #ffffff14;align-items:center;gap:12px;padding:28px 24px 22px;display:flex}.brand-icon{background:var(--gold);border-radius:var(--radius-md);justify-content:center;align-items:center;width:38px;height:38px;display:flex}.brand-icon svg{width:22px;height:22px;fill:var(--white)}.brand-name{color:var(--white);font-size:14px;font-weight:700;line-height:1.2}.brand-sub{color:var(--gray-3);letter-spacing:.04em;text-transform:uppercase;font-size:10px;font-weight:500}.sidebar-user{text-align:center;border-bottom:1px solid #ffffff14;flex-direction:column;align-items:center;gap:10px;padding:18px 20px 20px;display:flex}.user-avatar{background:var(--gold);width:68px;height:68px;color:var(--navy);border:3px solid var(--gold-2);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:22px;font-weight:800;display:flex;overflow:hidden;box-shadow:0 0 0 4px #c9922a2e}.user-avatar img{object-fit:cover;width:100%;height:100%}.user-name{color:var(--white);font-size:13px;font-weight:700;line-height:1.3}.user-jabatan{background:var(--gold);color:var(--navy);letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius-full);margin-top:2px;padding:3px 10px;font-size:9.5px;font-weight:800;display:inline-block}.user-cabang{color:var(--gray-3);justify-content:center;align-items:center;gap:4px;margin-top:2px;font-size:10.5px;display:flex}.user-cabang svg{width:11px;height:11px;stroke:var(--gray-3);fill:none;stroke-width:2px}.nav{flex-direction:column;flex:1;gap:2px;padding:16px 12px;display:flex;overflow-y:auto}.nav-label{letter-spacing:.1em;text-transform:uppercase;color:var(--gray-3);padding:10px 12px 6px;font-size:9.5px;font-weight:700}.nav-item{border-radius:var(--radius-md);cursor:pointer;color:var(--gray-3);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;gap:12px;padding:11px 14px;font-size:13.5px;font-weight:500;text-decoration:none;display:flex}.nav-item:hover{color:var(--white);background:#ffffff0f}.nav-item.active{background:var(--gold);color:var(--navy);font-weight:700}.nav-item.active svg{stroke:var(--navy)}.nav-item svg{stroke:currentColor;fill:none;stroke-width:2px;flex-shrink:0;width:18px;height:18px}.nav-badge{background:var(--gold);color:var(--navy);border-radius:var(--radius-full);margin-left:auto;padding:1px 7px;font-size:10px;font-weight:700}.nav-item.active .nav-badge{background:var(--navy);color:var(--white)}.nav-badge.nb-red{background:var(--red);color:var(--white)}.sidebar-foot{border-top:1px solid #ffffff14;padding:16px 12px}.btn-logout{border-radius:var(--radius-md);color:var(--gray-3);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:10px 14px;font-size:13px;font-weight:500;display:flex}.btn-logout:hover{color:#e67e6e;background:#c0392b26}.btn-logout svg{stroke:currentColor;fill:none;stroke-width:2px;width:17px;height:17px}.main{margin-left:var(--sidebar-width);min-height:100vh;padding:32px 36px}.topbar{justify-content:space-between;align-items:center;margin-bottom:28px;display:flex}.page-title{color:var(--navy);font-size:22px;font-weight:800}.page-date{color:var(--gray-3);margin-top:2px;font-size:12.5px}.topbar-right{align-items:center;gap:10px;display:flex}.topbar-btn{border-radius:var(--radius-md);border:1.5px solid var(--gray-2);background:var(--white);cursor:pointer;justify-content:center;align-items:center;width:38px;height:38px;display:flex;position:relative}.topbar-btn svg{width:17px;height:17px;stroke:var(--navy-3);fill:none;stroke-width:2px}.notif-dot{background:var(--gold);border:1.5px solid var(--white);border-radius:50%;width:7px;height:7px;position:absolute;top:7px;right:7px}.period-select{border-radius:var(--radius-md);border:1.5px solid var(--gray-2);color:var(--navy);background:var(--white);appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E96B0' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding:8px 32px 8px 14px;font-family:inherit;font-size:12.5px;font-weight:600}.period-select:focus{outline:none}.left-panel{flex:0 0 55%;min-height:100vh;position:relative;overflow:hidden}.left-bg{background-position:50%;background-size:cover;transition:transform 8s;position:absolute;inset:0}.left-panel:hover .left-bg{transform:scale(1.04)}.left-overlay{background:linear-gradient(135deg,#0f1c3fb8 0%,#0f1c3f61 50%,#c9922a2e 100%);position:absolute;inset:0}.left-panel:after{content:"";background:linear-gradient(180deg, transparent 0%, var(--gold) 40%, var(--gold-2) 60%, transparent 100%);opacity:.6;width:4px;height:100%;position:absolute;top:0;right:0}.left-content{z-index:2;flex-direction:column;justify-content:space-between;height:100%;padding:44px 48px;display:flex;position:relative}.brand{align-items:center;gap:14px;display:flex}.brand-text{flex-direction:column;display:flex}.brand-tagline{color:#ffffff80;letter-spacing:.1em;text-transform:uppercase;margin-top:1px;font-size:10.5px;font-weight:600}.left-headline{flex-direction:column;flex:1;justify-content:center;display:flex}.eyebrow{background:#c9922a26;border:1px solid #c9922a59;border-radius:30px;align-items:center;gap:8px;width:fit-content;margin-bottom:24px;padding:5px 14px 5px 10px;display:inline-flex}.eyebrow-dot{background:var(--gold-2);width:7px;height:7px;box-shadow:0 0 8px var(--gold);border-radius:50%;animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}.eyebrow-text{color:var(--gold-2);letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:700}.headline{color:var(--white);letter-spacing:-.025em;margin-bottom:20px;font-size:46px;font-weight:900;line-height:1.08}.headline .accent{color:var(--gold-2);display:inline-block;position:relative}.headline .accent:after{content:"";background:var(--gold);opacity:.5;border-radius:2px;width:100%;height:3px;position:absolute;bottom:2px;left:0}.subheadline{color:#ffffff9e;max-width:380px;font-size:15px;font-weight:500;line-height:1.65}.stat-row{gap:12px;margin-top:36px;display:flex}.stat-chip{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-lg);background:#ffffff14;border:1px solid #ffffff1f;flex-direction:column;gap:3px;padding:14px 18px;display:flex}.stat-chip .val{color:var(--white);font-size:20px;font-weight:800;font-family:var(--font-mono);line-height:1}.stat-chip .val .unit{color:var(--gold-2);margin-left:2px;font-size:12px}.stat-chip .lbl{color:#ffffff73;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;font-weight:600}.left-footer{color:#ffffff4d;font-size:11px;font-weight:500}.right-panel{background:var(--white);flex:0 0 45%;justify-content:center;align-items:center;min-height:100vh;padding:48px 52px;display:flex;position:relative;overflow-y:auto}.right-panel:before{content:"";background:linear-gradient(90deg, var(--gold) 0%, var(--gold-2) 100%);height:3px;position:absolute;top:0;left:0;right:0}.form-wrapper{width:100%;max-width:380px}.form-header{margin-bottom:36px}.form-eyebrow{color:var(--gold);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;font-size:11px;font-weight:700}.form-title{color:var(--navy);letter-spacing:-.02em;margin-bottom:8px;font-size:28px;font-weight:900;line-height:1.15}.form-subtitle{color:var(--gray-3);font-size:13.5px;font-weight:500;line-height:1.5}.divider{align-items:center;gap:14px;margin:26px 0;display:flex}.divider:before,.divider:after{content:"";background:var(--gray-2);border-radius:2px;flex:1;height:1.5px}.divider-text{color:var(--gray-3);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;font-size:11px;font-weight:700}.info-box{border-radius:var(--radius-md);background:#c9922a0f;border:1.5px solid #c9922a33;align-items:flex-start;gap:10px;padding:14px 16px;display:flex}.info-box svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:2px;flex-shrink:0;margin-top:1px}.info-box-text{color:var(--text);font-size:12px;font-weight:500;line-height:1.55}.info-box-text strong{color:var(--navy);font-weight:700}.form-footer{text-align:center;color:var(--gray-3);margin-top:28px;font-size:11.5px;font-weight:500}.form-footer a{color:var(--gold);font-weight:700;text-decoration:none}@media (width<=900px){body.auth-body{flex-direction:column;overflow:auto}.left-panel{flex:0 0 260px;min-height:260px}.left-panel:after{display:none}.left-content{padding:28px 28px 24px}.headline{font-size:28px}.stat-row{display:none}.right-panel{flex:unset;min-height:unset;padding:36px 24px 48px}}.card{background:var(--white);border-radius:var(--radius-xl);border:1.5px solid var(--gray-2);overflow:hidden}.card-head{border-bottom:1.5px solid var(--gray-1);justify-content:space-between;align-items:center;gap:14px;padding:20px 24px;display:flex}.card-title{color:var(--navy);font-size:14px;font-weight:700}.card-sub{color:var(--gray-3);margin-top:2px;font-size:11.5px}.card-link{color:var(--gold);align-items:center;gap:4px;font-size:12px;font-weight:700;text-decoration:none;display:flex}.card-link:hover{color:var(--gold-2)}.card-link svg{stroke:currentColor;fill:none;stroke-width:2.5px;width:13px;height:13px}.content-grid{grid-template-columns:1fr 340px;align-items:start;gap:22px;display:grid}.main-grid{grid-template-columns:1fr 320px;gap:20px;margin-bottom:20px;display:grid}.bottom-grid{grid-template-columns:1fr 1fr;gap:20px;display:grid}.layout{grid-template-columns:1fr 300px;align-items:start;gap:22px;display:grid}.right-col{flex-direction:column;gap:20px;display:flex}.dark-card{background:var(--navy);border-radius:var(--radius-xl);color:var(--white);padding:22px}.dark-card-title{margin-bottom:4px;font-size:14px;font-weight:700}.dark-card-sub{color:var(--gray-3);margin-bottom:18px;font-size:12px;line-height:1.6}.btn-primary-navy{border-radius:var(--radius-md);background:var(--navy);color:var(--white);cursor:pointer;transition:background var(--transition-fast);border:none;justify-content:center;align-items:center;gap:8px;padding:11px;font-family:inherit;font-size:13px;font-weight:700;display:flex}.btn-primary-navy:hover{background:var(--navy-3)}.btn-primary-navy svg{width:15px;height:15px;stroke:var(--white);fill:none;stroke-width:2px}.btn-primary-navy:disabled{background:var(--gray-2);color:var(--gray-3);cursor:not-allowed}.btn-primary-gold{background:var(--gold);width:100%;color:var(--navy);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast);border:none;justify-content:center;align-items:center;gap:8px;padding:11px;font-size:13.5px;font-weight:700;display:flex}.btn-primary-gold:hover{background:var(--gold-2)}.btn-primary-gold svg{width:16px;height:16px;stroke:var(--navy);fill:none;stroke-width:2.5px}.btn-pill-gold{background:var(--gold);color:var(--navy);cursor:pointer;transition:background var(--transition-fast);border:none;border-radius:9px;align-items:center;gap:7px;padding:9px 18px;font-size:12.5px;font-weight:700;display:flex}.btn-pill-gold:hover{background:var(--gold-2)}.btn-pill-gold svg{width:14px;height:14px;stroke:var(--navy);fill:none;stroke-width:2.5px}.btn-outline{color:var(--navy-3);border:1.5px solid var(--gray-2);cursor:pointer;transition:all var(--transition-fast);background:0 0;border-radius:9px;padding:8px 14px;font-size:12px;font-weight:600}.btn-outline:hover{border-color:var(--navy-3)}.btn-batal,.btn-cancel,.btn-cancel-upload,.btn-modal-batal{border-radius:var(--radius-md);border:1.5px solid var(--gray-2);background:var(--white);color:var(--gray-3);cursor:pointer;transition:all var(--transition-fast);flex:1;padding:11px;font-family:inherit;font-size:13px;font-weight:600}.btn-batal:hover,.btn-cancel:hover,.btn-cancel-upload:hover,.btn-modal-batal:hover{background:var(--gray-1)}.btn-simpan,.btn-import,.btn-confirm-ok,.btn-done{border-radius:var(--radius-md);background:var(--navy);color:var(--white);cursor:pointer;transition:background var(--transition-fast);border:none;flex:2;justify-content:center;align-items:center;gap:8px;padding:11px;font-family:inherit;font-size:13px;font-weight:700;display:flex}.btn-simpan:hover,.btn-import:hover,.btn-done:hover{background:var(--navy-3)}.btn-simpan svg,.btn-import svg,.btn-done svg{width:15px;height:15px;stroke:var(--white);fill:none;stroke-width:2px}.btn-import:disabled{background:var(--gray-2);color:var(--gray-3);cursor:not-allowed}.btn-confirm-ok{background:var(--green)}.btn-confirm-ok:hover{background:#176e3b}.btn-hapus{border-radius:var(--radius-md);background:var(--red);color:var(--white);cursor:pointer;transition:background var(--transition-fast);border:none;flex:1;justify-content:center;align-items:center;gap:7px;padding:11px;font-family:inherit;font-size:13px;font-weight:700;display:flex}.btn-hapus:hover{background:#a93226}.btn-hapus svg{width:14px;height:14px;stroke:var(--white);fill:none;stroke-width:2px}.btn-reset{border:1.5px solid var(--gray-2);background:var(--white);color:var(--gray-3);cursor:pointer;transition:all var(--transition-fast);border-radius:9px;align-items:center;gap:6px;padding:7px 14px;font-size:12px;font-weight:600;display:flex}.btn-reset:hover{border-color:var(--red);color:var(--red)}.btn-reset svg{stroke:currentColor;fill:none;stroke-width:2px;width:13px;height:13px}.btn-icon-action{border-radius:var(--radius-sm);border:1.5px solid var(--gray-2);background:var(--white);cursor:pointer;width:30px;height:30px;transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.btn-icon-action svg{fill:none;stroke-width:2px;width:14px;height:14px;stroke:var(--gray-3)}.btn-icon-action:hover{border-color:var(--navy)}.btn-icon-action:hover svg{stroke:var(--navy)}.btn-icon-action.del:hover{border-color:var(--red);background:var(--red-tint)}.btn-icon-action.del:hover svg{stroke:var(--red)}.action-btns{align-items:center;gap:6px;display:flex}.btn-login{background:var(--navy);width:100%;color:var(--white);border-radius:var(--radius-md);cursor:pointer;letter-spacing:.01em;transition:background var(--transition-base), transform .1s, box-shadow var(--transition-base);border:none;justify-content:center;align-items:center;gap:9px;padding:15px;font-family:inherit;font-size:14.5px;font-weight:700;display:flex;position:relative;overflow:hidden}.btn-login:before{content:"";background:#ffffff0f;width:60%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%;transform:skew(-20deg)}.btn-login:hover:before{left:150%}.btn-login:hover{background:var(--navy-3);transform:translateY(-1px);box-shadow:0 8px 24px #0f1c3f47}.btn-login:active{transform:translateY(0)}.btn-login svg{stroke:currentColor;fill:none;stroke-width:2px;flex-shrink:0;width:17px;height:17px}.btn-login.loading{pointer-events:none;opacity:.85}.btn-login.loading .btn-text{display:none}.btn-login.loading .spinner{display:block}.btn-login.loading .btn-icon{display:none}.spinner{border:2.5px solid #ffffff4d;border-top-color:var(--white);border-radius:50%;width:17px;height:17px;animation:.7s linear infinite spin;display:none}@keyframes spin{to{transform:rotate(360deg)}}.btn-tambah{border-radius:var(--radius-md);background:var(--navy);color:var(--white);cursor:pointer;transition:background var(--transition-fast);white-space:nowrap;border:none;align-items:center;gap:8px;padding:9px 18px;font-family:inherit;font-size:13px;font-weight:700;display:flex}.btn-tambah:hover{background:var(--navy-3)}.btn-tambah svg{width:15px;height:15px;stroke:var(--white);fill:none;stroke-width:2.5px}.btn-download{background:var(--gold);width:100%;color:var(--navy);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast);border:none;justify-content:center;align-items:center;gap:8px;padding:11px;font-size:13.5px;font-weight:700;display:flex}.btn-download:hover{background:var(--gold-2)}.btn-download svg{width:16px;height:16px;stroke:var(--navy);fill:none;stroke-width:2.5px}.btn-konfirmasi{border-radius:var(--radius-sm);background:var(--green-tint);color:var(--green);cursor:pointer;white-space:nowrap;transition:background var(--transition-fast), border-color var(--transition-fast);border:1.5px solid #b6e6cb;flex-shrink:0;align-items:center;gap:5px;padding:6px 12px;font-size:11.5px;font-weight:700;display:flex}.btn-konfirmasi:hover{border-color:var(--green);background:#c8f0d8}.btn-konfirmasi svg{width:13px;height:13px;stroke:var(--green);fill:none;stroke-width:2.5px}.btn-konfirmasi.confirmed{background:var(--gray-1);color:var(--gray-3);border-color:var(--gray-2);cursor:default;pointer-events:none}.btn-konfirmasi.confirmed svg{stroke:var(--gray-3)}.btn-hitung{background:var(--gold);width:100%;color:var(--navy);border-radius:var(--radius-lg);cursor:pointer;transition:background var(--transition-fast);border:none;justify-content:center;align-items:center;gap:8px;margin-top:6px;padding:13px;font-size:15px;font-weight:800;display:flex}.btn-hitung:hover{background:var(--gold-2)}.btn-hitung svg{width:18px;height:18px;stroke:var(--navy);fill:none;stroke-width:2.5px}.btn-row{gap:10px;display:flex}.form-section{margin-bottom:22px}.form-section-title{color:var(--gray-3);text-transform:uppercase;letter-spacing:.1em;align-items:center;gap:8px;margin-bottom:14px;font-size:10px;font-weight:700;display:flex}.form-section-title:after{content:"";background:var(--gray-1);flex:1;height:1px}.form-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.form-grid.full{grid-template-columns:1fr}.form-group{flex-direction:column;gap:5px;margin-bottom:13px;display:flex}.form-label{color:var(--navy);font-size:12px;font-weight:700}.form-label .req-mark{color:var(--red);margin-left:2px}.form-hint{color:var(--gray-3);margin-top:2px;font-size:11px}.form-input,.form-select{border-radius:var(--radius-md);border:1.5px solid var(--gray-2);width:100%;color:var(--text);background:var(--white);transition:border-color var(--transition-fast);padding:10px 13px;font-family:inherit;font-size:13px}.form-input:focus,.form-select:focus{border-color:var(--gold);outline:none}.form-select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E96B0' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px}.form-label.on-dark{color:var(--gray-3);letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px;font-size:11px;font-weight:600;display:block}.form-input.on-dark,.form-select.on-dark{color:var(--white);background:#ffffff12;border:1.5px solid #ffffff1f}.form-input.on-dark::placeholder{color:#ffffff4d}.form-input.on-dark:focus,.form-select.on-dark:focus{border-color:var(--gold)}.form-select.on-dark option{background:var(--navy-3);color:var(--white)}.amount-wrap,.input-wrap{position:relative}.amount-prefix,.input-prefix{color:var(--gray-3);font-size:12.5px;font-weight:600;font-family:var(--font-mono);position:absolute;top:50%;left:13px;transform:translateY(-50%)}.input-suffix{color:var(--gray-3);font-size:12px;font-weight:600;position:absolute;top:50%;right:13px;transform:translateY(-50%)}.form-input.has-prefix,.field.has-prefix{padding-left:36px}.field.has-suffix{padding-right:72px}.input-group{margin-bottom:18px}.input-label{color:var(--gray-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;font-size:11px;font-weight:700;display:block}.field{border:1.5px solid var(--gray-2);border-radius:var(--radius-md);width:100%;font-size:14px;font-family:var(--font-mono);color:var(--text);background:var(--white);transition:border-color var(--transition-fast), background var(--transition-fast);outline:none;padding:11px 14px}.field:focus{border-color:var(--gold);background:#fffdf8}select.field{font-family:var(--font-sans);cursor:pointer;--webkit-appearance:none;font-size:13.5px}.select-arrow{pointer-events:none;position:absolute;top:50%;right:13px;transform:translateY(-50%)}.select-arrow svg{width:15px;height:15px;stroke:var(--gray-3);fill:none;stroke-width:2px}.field-hint{color:var(--gray-3);margin-top:5px;font-size:11px}.field-group{flex-direction:column;gap:18px;margin-bottom:24px;display:flex}.field-row{flex-direction:column;gap:7px;display:flex}.field-input-wrap{position:relative}.field-icon{width:17px;height:17px;stroke:var(--gray-3);fill:none;stroke-width:2px;pointer-events:none;transition:stroke var(--transition-base);position:absolute;top:50%;left:14px;transform:translateY(-50%)}.field-input{border:1.5px solid var(--gray-2);border-radius:var(--radius-md);width:100%;color:var(--text);background:var(--gray-1);transition:border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);outline:none;padding:13px 14px 13px 42px;font-family:inherit;font-size:14px;font-weight:500}.field-input::placeholder{color:var(--gray-3);font-weight:400}.field-input:focus{border-color:var(--gold);background:var(--white);box-shadow:0 0 0 3px #c9922a1f}.field-input:focus+.field-icon,.field-input-wrap:focus-within .field-icon{stroke:var(--gold)}.field-toggle{cursor:pointer;background:0 0;border:none;align-items:center;padding:4px;display:flex;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.field-toggle svg{width:16px;height:16px;stroke:var(--gray-3);fill:none;stroke-width:2px;transition:stroke var(--transition-base)}.field-toggle:hover svg{stroke:var(--navy)}.field-label{color:var(--navy);letter-spacing:.01em;font-size:12.5px;font-weight:700}.error-msg{color:var(--red);background:#c0392b14;border:1px solid #c0392b33;border-radius:9px;align-items:center;gap:8px;margin-bottom:20px;padding:11px 14px;font-size:12.5px;font-weight:600;display:none}.error-msg.show{display:flex}.error-msg svg{width:15px;height:15px;stroke:var(--red);fill:none;stroke-width:2px;flex-shrink:0}.toolbar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.search-row{border-bottom:1.5px solid var(--gray-1);gap:10px;padding:14px 24px;display:flex}.search-wrap{flex:1;position:relative}.search-wrap svg{width:15px;height:15px;stroke:var(--gray-3);fill:none;stroke-width:2px;pointer-events:none;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.search-input{border-radius:var(--radius-md);border:1.5px solid var(--gray-2);width:100%;color:var(--text);background:var(--gray-1);transition:border-color var(--transition-fast), background var(--transition-fast);outline:none;padding:9px 14px 9px 36px;font-family:inherit;font-size:13px}.search-input:focus{border-color:var(--gold);background:var(--white)}.filter-select{border-radius:var(--radius-md);border:1.5px solid var(--gray-2);color:var(--text);background:var(--gray-1);appearance:none;cursor:pointer;transition:border-color var(--transition-fast);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E96B0' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding:9px 32px 9px 12px;font-family:inherit;font-size:13px}.filter-select:focus{border-color:var(--gold);outline:none}.tenor-chips,.chip-select-group{flex-wrap:wrap;gap:8px;display:flex}.tenor-chip,.chip-select{border:1.5px solid var(--gray-2);background:var(--white);color:var(--gray-3);cursor:pointer;transition:all var(--transition-fast);border-radius:9px;padding:8px 16px;font-size:13px;font-weight:600}.tenor-chip:hover,.chip-select:hover{border-color:var(--navy-3);color:var(--navy)}.tenor-chip.active,.chip-select.active{background:var(--navy);color:var(--white);border-color:var(--navy)}.form-divider{border:none;border-top:1.5px solid var(--gray-1);margin:20px 0}.photo-upload-row{align-items:center;gap:16px;margin-bottom:24px;display:flex}.photo-preview{background:var(--gold);width:68px;height:68px;color:var(--navy);border:3px solid var(--gold-lt);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:20px;font-weight:800;display:flex;position:relative;overflow:hidden}.photo-preview img{object-fit:cover;width:100%;height:100%;display:none}.photo-upload-btn{border-radius:var(--radius-md);border:1.5px dashed var(--gray-2);background:var(--gray-1);cursor:pointer;text-align:center;color:var(--gray-3);transition:border-color var(--transition-fast), background var(--transition-fast);flex:1;padding:10px 16px;font-size:12.5px;font-weight:600}.photo-upload-btn:hover{border-color:var(--gold);color:var(--gold);background:#fffdf8}.photo-upload-btn span{margin-top:2px;font-size:11px;font-weight:400;display:block}.visually-hidden-input{display:none}.badge{border-radius:var(--radius-full);align-items:center;gap:5px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-flex}.badge-dot{background:currentColor;border-radius:50%;width:6px;height:6px}.badge-green,.badge-aktif{background:var(--green-tint);color:var(--green)}.badge-red,.badge-nonaktif{background:var(--red-tint);color:var(--red)}.badge-gold{background:var(--gold-tint);color:#8a5f0a}.badge-gray{background:var(--gray-1);color:var(--gray-3)}.badge-blue{background:var(--blue-tint);color:var(--blue)}.badge-navy{color:var(--navy);background:#0f1c3f14}.badge-ao{background:var(--gold-tint);color:#7a4f0c}.badge-sv{color:var(--navy);background:#0f1c3f14}.chip-on-dark{border-radius:var(--radius-full);margin-top:5px;padding:2px 8px;font-size:10px;font-weight:700;display:inline-block}.chip-on-dark.green{color:#5dd68a;background:#5dd68a26}.chip-on-dark.red{color:#f08080;background:#f0808026}.chip-on-dark.gold{color:var(--gold-2);background:#dfa83d26}.val-bar{flex-wrap:wrap;gap:10px;display:flex}.val-chip{border-radius:9px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:600;display:flex}.val-chip svg{fill:none;stroke-width:2.5px;width:14px;height:14px}.val-chip.ok{background:var(--green-tint);color:var(--green)}.val-chip.ok svg{stroke:var(--green)}.val-chip.err{background:var(--red-tint);color:var(--red)}.val-chip.err svg{stroke:var(--red)}.val-chip.warn{background:var(--gold-tint);color:#8a5f0a}.val-chip.warn svg{stroke:var(--gold)}.avatar{background:var(--gold);color:var(--navy);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:800;display:flex;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.avatar-sm{width:32px;height:32px;font-size:11px}.avatar-md{border:2px solid var(--gold-lt);width:36px;height:36px;font-size:13px}.avatar-lg{border:3px solid var(--gold-2);width:56px;height:56px;font-size:18px}.avatar-xl{border:3px solid var(--gold-2);width:68px;height:68px;font-size:22px;box-shadow:0 0 0 4px #c9922a2e}.avatar.av-blue{background:var(--blue-tint);color:var(--blue);border-color:#bfdbfe}.avatar.av-purple{background:var(--purple-tint);color:var(--purple);border-color:#ddd6fe}.avatar.av-teal{background:var(--teal-tint);color:var(--teal);border-color:#99f6e4}.avatar.av-red{background:var(--red-tint);color:#7a1810;border-color:#fca5a5}.avatar.av-gold{background:var(--gold-tint);color:#8a5f0a}.avatar.av-green{background:var(--green-tint);color:var(--green)}.avatar.av-navy{background:var(--navy-3);color:var(--white)}.profile-cell{align-items:center;gap:11px;display:flex}.profile-name{color:var(--navy);font-size:13px;font-weight:700}.profile-sub{color:var(--gray-3);margin-top:1px;font-size:11px}.profile-sub.mono{font-family:var(--font-mono)}.rank-badge{border-radius:var(--radius-sm);justify-content:center;align-items:center;width:24px;height:24px;font-size:11px;font-weight:800;display:flex}.rank-1{background:var(--gold-lt);color:#7a4f0c}.rank-2{background:var(--gray-1);color:var(--gray-3)}.rank-3{background:var(--red-tint);color:#7a1810}.rank-n{background:var(--gray-1);color:var(--gray-3)}.table-wrap{overflow-x:auto}.data-table{border-collapse:collapse;width:100%;min-width:600px}.data-table th{color:var(--gray-3);text-transform:uppercase;letter-spacing:.05em;text-align:left;background:var(--gray-1);border-bottom:1.5px solid var(--gray-2);white-space:nowrap;padding:12px 16px;font-size:10.5px;font-weight:700}.data-table td{border-bottom:1px solid var(--gray-1);vertical-align:middle;color:var(--text);padding:13px 16px;font-size:13px}.data-table tbody tr:last-child td{border-bottom:none}.data-table tbody tr:hover td{background:#fafbfd}.data-table td.mono,.cell-mono{font-family:var(--font-mono)}.data-table tr.row-err td{background:#fff5f5}.data-table tr.row-err td:first-child{border-left:3px solid var(--red)}.data-table tr.row-ok td:first-child{border-left:3px solid var(--green)}.row-status{border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;display:inline-flex}.row-status.ok{background:var(--green-tint)}.row-status.err{background:var(--red-tint)}.row-status svg{fill:none;stroke-width:2.5px;width:12px;height:12px}.row-status.ok svg{stroke:var(--green)}.row-status.err svg{stroke:var(--red)}.err-note{color:var(--red);font-size:10.5px;font-family:var(--font-sans);margin-top:3px}.more-rows{color:var(--gray-3);border-top:1px solid var(--gray-1);padding:12px 24px;font-size:12px;font-style:italic}.mini-prog-wrap{background:var(--gray-1);border-radius:var(--radius-full);width:60px;height:5px;overflow:hidden}.mini-prog-fill{border-radius:var(--radius-full);background:var(--gold);height:100%}.tabs{gap:4px;margin-bottom:20px;display:flex}.tab{cursor:pointer;border:1.5px solid var(--gray-2);background:var(--white);color:var(--gray-3);transition:all var(--transition-fast);border-radius:9px;padding:8px 18px;font-size:13px;font-weight:600}.tab.active{background:var(--navy);color:var(--white);border-color:var(--navy)}.tab:hover:not(.active){border-color:var(--navy-3);color:var(--navy)}.tab-count{background:var(--gray-1);color:var(--gray-3);border-radius:10px;margin-left:5px;padding:1px 6px;font-size:10px;font-weight:700;display:inline-block}.tab.active .tab-count{color:var(--white);background:#ffffff26}.steps{align-items:center;gap:0;display:flex}.step{flex:1;align-items:center;gap:8px;display:flex}.step-num{border:2px solid var(--gray-2);width:26px;height:26px;color:var(--gray-3);transition:all var(--transition-base);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex}.step.done .step-num{background:var(--green);border-color:var(--green);color:var(--white)}.step.active .step-num{background:var(--gold);border-color:var(--gold);color:var(--navy)}.step-label{color:var(--gray-3);font-size:11.5px;font-weight:600}.step.done .step-label,.step.active .step-label{color:var(--navy)}.step-line{background:var(--gray-2);height:2px;transition:background var(--transition-base);flex:1;margin:0 8px}.step-line.done{background:var(--green)}.stats-row,.kpi-grid,.stats{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;display:grid}.stat-card{background:var(--white);border-radius:var(--radius-lg);border:1.5px solid var(--gray-2);align-items:center;gap:14px;padding:18px 20px;display:flex;position:relative;overflow:hidden}.stat-icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.stat-icon svg{fill:none;stroke-width:2px;width:20px;height:20px}.stat-icon.si-navy{background:#0f1c3f14}.stat-icon.si-navy svg{stroke:var(--navy)}.stat-icon.si-green{background:var(--green-tint)}.stat-icon.si-green svg{stroke:var(--green)}.stat-icon.si-red{background:var(--red-tint)}.stat-icon.si-red svg{stroke:var(--red)}.stat-icon.si-gold{background:var(--gold-tint)}.stat-icon.si-gold svg{stroke:var(--gold)}.stat-val{color:var(--navy);font-size:22px;font-weight:800;line-height:1}.stat-lbl{color:var(--gray-3);margin-top:3px;font-size:11.5px;font-weight:500}.stat-card.has-corner:before{content:"";opacity:.07;border-radius:0 16px 0 80px;width:80px;height:80px;position:absolute;top:0;right:0}.stat-card.s1:before{background:var(--navy)}.stat-card.s2:before{background:var(--gold)}.stat-card.s3:before{background:var(--green)}.stat-card.s4:before{background:var(--navy)}.stat-label{color:var(--gray-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-size:11px;font-weight:600}.stat-value{color:var(--navy);font-size:28px;font-weight:800;line-height:1}.stat-sub{color:var(--gray-3);margin-top:6px;font-size:11.5px}.stat-chip-trend{border-radius:var(--radius-full);align-items:center;gap:3px;margin-top:8px;padding:2px 8px;font-size:10.5px;font-weight:700;display:inline-flex}.kpi-card{background:var(--white);border-radius:var(--radius-xl);border:1.5px solid var(--gray-2);padding:20px 22px;position:relative;overflow:hidden}.kpi-card:after{content:"";background:var(--gray-1);border-radius:50%;width:80px;height:80px;position:absolute;top:-16px;right:-16px}.kpi-label{color:var(--gray-3);align-items:center;gap:6px;margin-bottom:10px;font-size:11.5px;font-weight:600;display:flex}.kpi-label svg{fill:none;stroke-width:2px;width:13px;height:13px;stroke:var(--gray-3)}.kpi-val{color:var(--navy);font-size:26px;font-weight:800;line-height:1;font-family:var(--font-mono);margin-bottom:8px}.kpi-val .kpi-unit{color:var(--gray-3);font-size:13px;font-weight:600;font-family:var(--font-sans);margin-left:4px}.kpi-bar-wrap{background:var(--gray-1);border-radius:4px;height:4px;margin-top:12px;overflow:hidden}.kpi-bar-fill{border-radius:4px;height:100%;transition:width 1s}.trend{border-radius:var(--radius-full);align-items:center;gap:4px;padding:3px 9px;font-size:11.5px;font-weight:700;display:inline-flex}.trend svg{fill:none;stroke-width:2.5px;stroke:currentColor;width:11px;height:11px}.trend-up{background:var(--green-tint);color:var(--green)}.trend-down{background:var(--red-tint);color:var(--red)}.trend-flat{background:var(--gray-1);color:var(--gray-3)}.chip-up{background:var(--green-tint);color:var(--green)}.chip-down{background:var(--red-tint);color:var(--red)}.banner{background:var(--navy);border-radius:18px;justify-content:space-between;align-items:center;margin-bottom:22px;padding:26px 32px;display:flex;position:relative;overflow:hidden}.banner:before{content:"";pointer-events:none;background:#c9922a1f;border-radius:50%;width:200px;height:200px;position:absolute;top:-40px;right:-40px}.banner:after{content:"";pointer-events:none;background:#c9922a12;border-radius:50%;width:140px;height:140px;position:absolute;bottom:-60px;right:60px}.banner-greet{color:var(--gray-3);margin-bottom:6px;font-size:12px}.banner-title{color:var(--white);margin-bottom:10px;font-size:20px;font-weight:800}.banner-title span{color:var(--gold-2)}.banner-chips{flex-wrap:wrap;gap:10px;display:flex}.banner-chip{border-radius:var(--radius-sm);color:var(--gray-3);background:#ffffff14;align-items:center;gap:6px;padding:6px 12px;font-size:12px;display:flex}.banner-chip svg{width:13px;height:13px;stroke:var(--gold);fill:none;stroke-width:2px}.banner-chip strong{color:var(--white)}.banner-art{z-index:1;flex-shrink:0;position:relative}.banner-art svg{opacity:.18;width:80px;height:80px}.summary-banner{background:var(--navy);border-radius:var(--radius-xl);grid-template-columns:1fr 1px 1fr 1px 1fr 1px 1fr;align-items:center;gap:0;margin-bottom:24px;padding:24px 28px;display:grid}.sum-divider{background:#ffffff1a;height:48px}.sum-item{text-align:center;padding:0 24px}.sum-item:first-child{text-align:left;padding-left:0}.sum-item:last-child{text-align:right}.sum-label{color:var(--gray-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;font-size:10.5px;font-weight:600}.sum-value{color:var(--white);font-size:22px;font-weight:800;font-family:var(--font-mono)}.sum-value.gold{color:var(--gold-2)}.sum-value.green{color:#5dd68a}.sum-value.red{color:#f08080}.prog-wrap,.prog-bar{background:var(--gray-1);border-radius:var(--radius-full);height:7px;overflow:hidden}.prog-fill{border-radius:var(--radius-full);height:100%;transition:width 1.2s}.prog-fill.f-navy,.pf-navy{background:var(--navy)}.prog-fill.f-gold,.pf-gold{background:var(--gold)}.prog-fill.f-green,.pf-green{background:var(--green)}.prog-fill.f-red,.pf-red{background:var(--red)}.target-list,.prog-item-list{flex-direction:column;gap:16px;display:flex}.target-top,.prog-row{justify-content:space-between;align-items:center;margin-bottom:7px;display:flex}.target-name,.prog-name{color:var(--navy);font-size:13px;font-weight:700}.target-pct,.prog-pct{font-size:12px;font-weight:800;font-family:var(--font-mono);color:var(--gray-3)}.target-sub,.prog-sub{color:var(--gray-3);margin-top:2px;font-size:10.5px}.chart-area{padding:20px 22px 16px}.chart-legend{flex-wrap:wrap;gap:18px;margin-bottom:16px;display:flex}.legend-item{color:var(--gray-3);align-items:center;gap:7px;font-size:12px;font-weight:600;display:flex}.legend-dot{border-radius:3px;width:10px;height:10px}.legend-dot.navy{background:var(--navy)}.legend-dot.gold{background:var(--gold)}.legend-dot.green{background:var(--green)}.bar-chart-wrap{align-items:flex-end;gap:10px;height:140px;display:flex}.bar-group{flex:1;align-items:flex-end;gap:3px;display:flex}.bar{transition:opacity var(--transition-fast);cursor:pointer;border-radius:5px 5px 0 0}.bar:hover{opacity:.8}.bar.navy{background:var(--navy)}.bar.gold{background:var(--gold)}.chart-x{gap:10px;padding:0 22px 18px;display:flex}.chart-x-label{text-align:center;color:var(--gray-3);flex:1;font-size:10.5px;font-weight:600}.line-chart-svg{width:100%;height:130px;overflow:visible}.modal-overlay{z-index:500;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0a122899;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal-overlay.show{display:flex}.modal-box,.modal{background:var(--white);border-radius:var(--radius-2xl);text-align:center;width:360px;max-width:calc(100vw - 32px);box-shadow:var(--shadow-modal);padding:32px;animation:.18s popIn}@keyframes popIn{0%{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}.modal-icon{border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;margin:0 auto 18px;display:flex}.modal-icon.danger{background:var(--red-tint)}.modal-icon.danger svg{stroke:var(--red)}.modal-icon.success{background:var(--green-tint)}.modal-icon.success svg{stroke:var(--green)}.modal-icon svg{fill:none;stroke-width:2px;width:26px;height:26px}.modal-title{color:var(--navy);margin-bottom:8px;font-size:17px;font-weight:800}.modal-sub,.modal-body{color:var(--gray-3);font-size:13px;line-height:1.6}.modal-body{text-align:left;margin-bottom:20px}.modal-body strong,.modal-name{color:var(--navy);font-weight:700}.modal-detail{background:var(--gray-1);border-radius:var(--radius-lg);text-align:left;flex-direction:column;gap:8px;margin-bottom:20px;padding:14px 16px;display:flex}.modal-row{justify-content:space-between;font-size:12.5px;display:flex}.modal-row span:first-child{color:var(--gray-3)}.modal-row span:last-child{color:var(--navy);font-weight:700;font-family:var(--font-mono)}.modal-actions,.modal-btns{gap:10px;margin-top:24px;display:flex}.panel-overlay{z-index:300;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0a122873;display:none;position:fixed;inset:0}.panel-overlay.show{display:block}.side-panel{background:var(--white);z-index:400;width:460px;height:100vh;box-shadow:var(--shadow-panel);flex-direction:column;transition:right .28s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:-500px}.side-panel.open{right:0}.panel-head{border-bottom:1.5px solid var(--gray-1);flex-shrink:0;justify-content:space-between;align-items:center;padding:24px 26px 20px;display:flex}.panel-title{color:var(--navy);font-size:16px;font-weight:800}.panel-sub{color:var(--gray-3);margin-top:2px;font-size:12px}.btn-close-panel{border:1.5px solid var(--gray-2);background:var(--white);cursor:pointer;width:32px;height:32px;transition:all var(--transition-fast);border-radius:9px;justify-content:center;align-items:center;display:flex}.btn-close-panel:hover{border-color:var(--red);background:var(--red-tint)}.btn-close-panel svg{width:14px;height:14px;stroke:var(--gray-3);fill:none;stroke-width:2px}.btn-close-panel:hover svg{stroke:var(--red)}.panel-body{flex:1;padding:22px 26px;overflow-y:auto}.panel-foot{border-top:1.5px solid var(--gray-1);flex-shrink:0;gap:10px;padding:16px 26px;display:flex}.progress-overlay{z-index:400;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0a122899;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.progress-overlay.show{display:flex}.progress-box{background:var(--white);border-radius:var(--radius-2xl);text-align:center;width:360px;padding:32px;animation:.18s popIn}.progress-title{color:var(--navy);margin-bottom:6px;font-size:16px;font-weight:800}.progress-sub{color:var(--gray-3);margin-bottom:20px;font-size:13px}.progress-bar-wrap{background:var(--gray-1);border-radius:var(--radius-full);height:8px;margin-bottom:10px;overflow:hidden}.progress-bar-fill{background:var(--gold);border-radius:var(--radius-full);height:100%;transition:width .3s}.progress-pct{color:var(--navy);font-size:13px;font-weight:700;font-family:var(--font-mono)}.progress-done{display:none}.progress-done.show{display:block}.done-icon{background:var(--green-tint);border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;margin:0 auto 16px;display:flex}.done-icon svg{width:28px;height:28px;stroke:var(--green);fill:none;stroke-width:2px}.empty-state{text-align:center;padding:60px 24px}.empty-state.compact{padding:48px 24px}.empty-icon{background:var(--gray-1);border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;margin:0 auto 16px;display:flex}.empty-icon.lg{width:64px;height:64px}.empty-icon svg{width:26px;height:26px;stroke:var(--gray-3);fill:none;stroke-width:1.5px}.empty-title{color:var(--navy);font-size:14px;font-weight:700}.empty-sub{color:var(--gray-3);margin-top:4px;font-size:12.5px;line-height:1.6}.drop-zone{border:2px dashed var(--gray-2);border-radius:var(--radius-lg);text-align:center;cursor:pointer;transition:border-color var(--transition-base), background var(--transition-base);padding:48px 24px;position:relative}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--gold);background:#fffdf8}.drop-zone input[type=file]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.drop-icon{background:var(--gray-1);width:64px;height:64px;transition:background var(--transition-base);border-radius:50%;justify-content:center;align-items:center;margin:0 auto 16px;display:flex}.drop-zone:hover .drop-icon,.drop-zone.drag-over .drop-icon{background:var(--gold-lt)}.drop-icon svg{width:28px;height:28px;stroke:var(--gray-3);fill:none;stroke-width:1.5px;transition:stroke var(--transition-base)}.drop-zone:hover .drop-icon svg,.drop-zone.drag-over .drop-icon svg{stroke:var(--gold)}.drop-title{color:var(--navy);margin-bottom:6px;font-size:15px;font-weight:700}.drop-sub{color:var(--gray-3);font-size:12.5px;line-height:1.6}.drop-sub span{color:var(--gold);font-weight:700}.file-info{background:var(--gray-1);border-radius:var(--radius-md);align-items:center;gap:12px;padding:12px 16px;display:none}.file-info.show{display:flex}.file-icon{background:var(--gold-lt);border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.file-icon svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:2px}.file-name{color:var(--navy);font-size:13px;font-weight:700}.file-size{color:var(--gray-3);margin-top:2px;font-size:11.5px}.btn-remove{border-radius:var(--radius-sm);border:1.5px solid var(--gray-2);background:var(--white);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;margin-left:auto;display:flex}.btn-remove svg{width:13px;height:13px;stroke:var(--gray-3);fill:none;stroke-width:2px}.btn-remove:hover{border-color:var(--red)}.btn-remove:hover svg{stroke:var(--red)}.action-row{border-top:1.5px solid var(--gray-1);gap:10px;padding:20px 24px;display:flex}.col-list{flex-direction:column;gap:8px;display:flex}.col-item{align-items:flex-start;gap:10px;display:flex}.col-dot{background:var(--gold);border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-top:5px}.col-name{color:var(--white);font-size:12px;font-weight:700}.col-desc{color:var(--gray-3);margin-top:1px;font-size:11px}.col-required{border-radius:var(--radius-full);margin-left:4px;padding:1px 6px;font-size:9.5px;font-weight:700}.col-required.req{color:var(--gold-2);background:#c9922a33}.col-required.opt{color:var(--gray-3);background:#8e96b026}.history-list,.activity-list,.riwayat-list{flex-direction:column;display:flex}.history-item,.act-item,.rw-item,.hist-item{border-bottom:1px solid var(--gray-1);align-items:flex-start;gap:12px;padding:13px 0;display:flex;position:relative}.history-item:last-child,.act-item:last-child,.rw-item:last-child,.hist-item:last-child{border-bottom:none}.icon-chip{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.icon-chip svg{fill:none;stroke-width:2px;width:15px;height:15px}.icon-chip.green{background:var(--green-tint)}.icon-chip.green svg{stroke:var(--green)}.icon-chip.gold{background:var(--gold-lt)}.icon-chip.gold svg{stroke:var(--gold)}.icon-chip.red{background:var(--red-tint)}.icon-chip.red svg{stroke:var(--red)}.icon-chip.navy{background:#0f1c3f14}.icon-chip.navy svg{stroke:var(--navy)}.history-content{flex:1}.history-text,.act-text,.rw-name,.hist-name{color:var(--navy);font-size:12.5px;font-weight:600;line-height:1.5}.history-text span,.act-text span{color:var(--gold)}.history-time,.act-time,.rw-meta,.hist-meta{color:var(--gray-3);margin-top:2px;font-size:11px}.history-badge,.act-badge,.hist-badge{border-radius:var(--radius-full);white-space:nowrap;flex-shrink:0;margin-top:2px;padding:2px 8px;font-size:10px;font-weight:700}.history-badge.green,.act-badge.green{background:var(--green-tint);color:var(--green)}.history-badge.red,.act-badge.red{background:var(--red-tint);color:var(--red)}.history-badge.gold,.act-badge.gold{background:var(--gold-lt);color:#7a4f0c}.rw-amount{font-size:13px;font-weight:700;font-family:var(--font-mono);margin-left:auto}.rw-amount.green{color:var(--green)}.rw-amount.red{color:var(--red)}.breakdown-list{flex-direction:column;gap:14px;display:flex}.breakdown-item{align-items:center;gap:12px;display:flex}.breakdown-icon{border-radius:var(--radius-md);background:#0f1c3f0f;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.breakdown-icon svg{width:16px;height:16px;stroke:var(--navy);fill:none;stroke-width:2px}.breakdown-name{color:var(--navy);font-size:12.5px;font-weight:700}.breakdown-sub{color:var(--gray-3);font-size:11px}.breakdown-right{text-align:right;margin-left:auto}.breakdown-val{color:var(--navy);font-size:13px;font-weight:800;font-family:var(--font-mono)}.breakdown-pct{color:var(--gray-3);margin-top:1px;font-size:10.5px}.timeline-list{flex-direction:column;display:flex}.tl-item{border-bottom:1px solid var(--gray-1);gap:14px;padding:14px 0;display:flex}.tl-item:last-child{border-bottom:none}.tl-dot{background:var(--gold);border:2px solid var(--gold-lt);border-radius:50%;flex-shrink:0;width:10px;height:10px;margin-top:5px}.tl-dot.navy{background:var(--navy);border-color:var(--gray-2)}.tl-name{color:var(--navy);font-size:13px;font-weight:600}.tl-meta{color:var(--gray-3);margin-top:2px;font-size:11px}.tl-time{color:var(--gray-3);font-size:10.5px;font-family:var(--font-mono);margin-left:auto}.list-row{border-bottom:1px solid var(--gray-1);cursor:pointer;align-items:center;gap:14px;padding:16px 24px;transition:background .1s;display:flex}.list-row:last-child{border-bottom:none}.list-row:hover{background:#f8f9fc}.list-info{flex:1;min-width:0}.list-name{color:var(--navy);font-size:13.5px;font-weight:600}.list-meta{color:var(--gray-3);flex-wrap:wrap;gap:10px;margin-top:2px;font-size:11.5px;display:flex}.list-meta span{align-items:center;gap:3px;display:flex}.list-meta svg{width:11px;height:11px;stroke:var(--gray-3);fill:none;stroke-width:2px}.list-right{text-align:right;flex-shrink:0}.list-amount{font-size:14px;font-weight:700;font-family:var(--font-mono);color:var(--navy)}.list-due{color:var(--gray-3);margin-top:2px;font-size:11px}.form-card{padding:24px}.result-empty{text-align:center;padding:48px 24px}.result-empty-icon{background:var(--gray-1);border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 16px;display:flex}.result-empty-icon svg{width:28px;height:28px;stroke:var(--gray-3);fill:none;stroke-width:1.5px}.result-empty-title{color:var(--navy);margin-bottom:6px;font-size:14px;font-weight:700}.result-empty-sub{color:var(--gray-3);font-size:12.5px;line-height:1.6}.result-wrap{display:none}.result-wrap.show{display:block}.result-hero{background:var(--navy);text-align:center;padding:24px}.result-hero-label{color:var(--gray-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;font-size:11px;font-weight:700}.result-hero-value{color:var(--gold-2);font-size:34px;font-weight:800;font-family:var(--font-mono);line-height:1}.result-hero-sub{color:#ffffff80;margin-top:8px;font-size:12px}.detail-list{flex-direction:column;padding:0 24px;display:flex}.detail-row{border-bottom:1px solid var(--gray-1);justify-content:space-between;align-items:center;padding:13px 0;font-size:13px;display:flex}.detail-row:last-child{border-bottom:none}.detail-key{color:var(--gray-3);font-weight:500}.detail-val{color:var(--navy);font-weight:700;font-family:var(--font-mono);font-size:13px}.detail-val.gold{color:var(--gold)}.detail-val.green{color:var(--green)}.schedule-table{border-collapse:collapse;width:100%}.schedule-table th{color:var(--gray-3);text-transform:uppercase;letter-spacing:.05em;text-align:left;border-bottom:1.5px solid var(--gray-1);background:var(--gray-1);padding:10px 24px;font-size:10.5px;font-weight:700}.schedule-table th:last-child{text-align:right}.schedule-table td{border-bottom:1px solid var(--gray-1);padding:12px 24px;font-size:13px}.schedule-table tr:last-child td{border-bottom:none}.schedule-table td:last-child{text-align:right;font-family:var(--font-mono);font-weight:700}.schedule-table td:first-child{color:var(--gray-3);font-size:12px}.schedule-table td:nth-child(2){color:var(--navy);font-weight:600}.schedule-table td:nth-child(3){color:var(--gray-3);font-size:12px;font-family:var(--font-mono)}.calc-card{background:var(--white);border:1.5px solid var(--gray-2);border-radius:var(--radius-xl);overflow:hidden}.calc-display{background:var(--navy);font-family:var(--font-mono);padding:20px 22px}.calc-label{color:var(--gray-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;font-size:10px}.calc-result{color:var(--white);font-size:30px;font-weight:500}.calc-sub-row{justify-content:space-between;margin-top:10px;display:flex}.calc-mini{color:var(--gray-3);font-size:11px}.calc-mini span{color:var(--gold);font-weight:600}.calc-keys{background:var(--gray-2);grid-template-columns:repeat(4,1fr);gap:1px;display:grid}.key{background:var(--white);text-align:center;cursor:pointer;font-size:13px;font-family:var(--font-mono);color:var(--navy);padding:12px 8px;font-weight:500;transition:background .1s}.key:hover{background:var(--gray-1)}.key.op{color:var(--navy-3);background:#f0f2f7;font-weight:600}.key.eq{background:var(--gold);color:var(--navy);font-weight:700}.key.eq:hover{background:var(--gold-2)}.key.span2{grid-column:span 2}.donut-wrap{align-items:center;gap:20px;display:flex}.donut-svg{flex-shrink:0;width:90px;height:90px;transform:rotate(-90deg)}.donut-legend{flex-direction:column;gap:8px;display:flex}.dl-item{align-items:center;gap:8px;font-size:12px;display:flex}.dl-dot{border-radius:3px;flex-shrink:0;width:8px;height:8px}.dl-name{color:var(--gray-3);font-weight:500}.dl-val{color:var(--navy);font-size:12px;font-weight:700;font-family:var(--font-mono);margin-left:auto;padding-left:12px}.toggle-row{border-top:1px solid var(--gray-1);justify-content:space-between;align-items:center;padding:14px 0;display:flex}.toggle-info .toggle-lbl{color:var(--navy);font-size:13px;font-weight:700}.toggle-info .toggle-desc{color:var(--gray-3);margin-top:2px;font-size:11.5px}.toggle-switch{cursor:pointer;flex-shrink:0;width:44px;height:24px;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{border-radius:var(--radius-full);background:var(--gray-2);transition:background var(--transition-base);position:absolute;inset:0}.toggle-slider:before{content:"";background:var(--white);width:18px;height:18px;transition:transform var(--transition-base);border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 4px #0003}.toggle-switch input:checked+.toggle-slider{background:var(--green)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(20px)}.checkbox-wrap{cursor:pointer;align-items:center;gap:8px;display:flex}.checkbox-wrap input[type=checkbox]{display:none}.custom-check{border:1.5px solid var(--gray-2);background:var(--gray-1);border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;width:17px;height:17px;transition:all .15s;display:flex}.checkbox-wrap input:checked+.custom-check{background:var(--navy);border-color:var(--navy)}.custom-check svg{width:10px;height:10px;stroke:var(--white);fill:none;stroke-width:3px;opacity:0;transition:opacity .15s}.checkbox-wrap input:checked+.custom-check svg{opacity:1}.check-label{color:var(--gray-3);font-size:12.5px;font-weight:500}.options-row{justify-content:space-between;align-items:center;margin-bottom:26px;display:flex}.forgot-link{color:var(--gold);font-size:12.5px;font-weight:600;text-decoration:none;transition:color .15s}.forgot-link:hover{color:var(--gold-2)}.mobile-nav{background:var(--white);border-top:1.5px solid var(--gray-2);z-index:200;justify-content:space-around;padding:10px 20px 16px;display:none;position:fixed;bottom:0;left:0;right:0}.mn-item{cursor:pointer;flex-direction:column;align-items:center;gap:4px;display:flex}.mn-item svg{width:20px;height:20px;stroke:var(--gray-3);fill:none;stroke-width:2px}.mn-item.active svg{stroke:var(--gold)}.mn-item span{color:var(--gray-3);font-size:10px;font-weight:600}.mn-item.active span{color:var(--gold)}.mobile-profile{background:var(--navy);border-radius:var(--radius-xl);align-items:center;gap:16px;margin-bottom:20px;padding:18px 20px;display:none}.mp-avatar{background:var(--gold);width:56px;height:56px;color:var(--navy);border:3px solid var(--gold-2);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;font-weight:800;display:flex;overflow:hidden}.mp-avatar img{object-fit:cover;width:100%;height:100%}.mp-name{color:var(--white);font-size:14px;font-weight:700}.mp-jabatan{background:var(--gold);color:var(--navy);letter-spacing:.05em;text-transform:uppercase;border-radius:var(--radius-full);margin:4px 0;padding:2px 8px;font-size:9px;font-weight:800;display:inline-block}.mp-cabang{color:var(--gray-3);font-size:10.5px}.text-navy{color:var(--navy)}.text-gold{color:var(--gold)}.text-green{color:var(--green)}.text-red{color:var(--red)}.text-muted{color:var(--gray-3)}.text-white{color:var(--white)}.text-mono{font-family:var(--font-mono)}.text-center{text-align:center}.text-right{text-align:right}.bg-navy{background:var(--navy)}.bg-gold{background:var(--gold)}.bg-white{background:var(--white)}.bg-gray-1{background:var(--gray-1)}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-xs{gap:6px}.gap-sm{gap:10px}.gap-md{gap:16px}.gap-lg{gap:22px}.hidden{display:none!important}.full-width{width:100%}.icon-xs{width:12px;height:12px}.icon-sm{width:15px;height:15px}.icon-md{width:18px;height:18px}.icon-lg{width:24px;height:24px}@media (width<=1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.main-grid,.bottom-grid{grid-template-columns:1fr}}@media (width<=900px){.sidebar{display:none}.main{margin-left:0;padding:20px 16px 40px}.main.has-mobile-nav{padding-bottom:80px}.stats-row,.kpi-grid,.stats{grid-template-columns:repeat(2,1fr)}.content-grid,.layout,.main-grid,.bottom-grid{grid-template-columns:1fr}.right-col{display:none}.mobile-nav,.mobile-profile{display:flex}.summary-banner{grid-template-columns:1fr 1fr;gap:16px}.sum-divider{display:none}.sum-item{padding:0;text-align:left!important}.tabs{padding-bottom:4px;overflow-x:auto}.side-panel{width:100%}}.toast[data-v-cc238ae8]{white-space:nowrap;z-index:9999;pointer-events:auto;border-radius:12px;align-items:center;gap:10px;max-width:calc(100vw - 48px);padding:12px 16px 12px 14px;font-family:Plus Jakarta Sans,sans-serif;font-size:13px;font-weight:600;display:flex;position:fixed;bottom:32px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0003}.toast--success[data-v-cc238ae8]{background:var(--navy,#0f1c3f);color:#fff}.toast--success .toast-icon[data-v-cc238ae8]{color:#5dd68a}.toast--error[data-v-cc238ae8]{background:var(--red,#c0392b);color:#fff}.toast--error .toast-icon[data-v-cc238ae8]{color:#ffb3ad}.toast--warning[data-v-cc238ae8]{background:var(--gold,#c9922a);color:var(--navy,#0f1c3f)}.toast--warning .toast-icon[data-v-cc238ae8]{color:var(--navy,#0f1c3f)}.toast-icon[data-v-cc238ae8]{flex-shrink:0;align-items:center;display:flex}.toast-msg[data-v-cc238ae8]{text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.toast-close[data-v-cc238ae8]{cursor:pointer;color:inherit;opacity:.6;background:0 0;border:none;flex-shrink:0;align-items:center;padding:0;transition:opacity .15s;display:flex}.toast-close[data-v-cc238ae8]:hover{opacity:1}.toast-enter-active[data-v-cc238ae8],.toast-leave-active[data-v-cc238ae8]{transition:opacity .2s,transform .2s}.toast-enter-from[data-v-cc238ae8]{opacity:0;transform:translate(-50%)translateY(12px)}.toast-leave-to[data-v-cc238ae8]{opacity:0;transform:translate(-50%)translateY(8px)}