:root,[data-bs-theme=dark]{--bg:#050506;--pn:#101113;--pn2:#16171A;--ln:#232529;--mut:#8B8F99;--ac:#5B8CFF;
--bs-body-bg:var(--bg);--bs-body-color:#E8EEFB;--bs-secondary-color:var(--mut);--bs-border-color:var(--ln);--bs-primary:#3D6BFF;--bs-primary-rgb:61,107,255;--bs-link-color:#8FB0FF;--bs-link-hover-color:#fff;--bs-body-font-family:"Plus Jakarta Sans",system-ui,sans-serif;--bs-body-font-size:.92rem}
body{background:var(--bg)}
h1,.h4{font-weight:700;letter-spacing:-.01em}.text-secondary{color:var(--mut)!important}
.rail{position:fixed;inset:0 auto 0 0;width:84px;background:#08090B;border-right:1px solid #17181B;padding:18px 14px;display:flex;flex-direction:column;gap:6px;z-index:20;transition:width .2s}
.rail a{display:flex;align-items:center;gap:12px;height:48px;padding:0 15px;border-radius:15px;color:#9A9EA8;text-decoration:none;white-space:nowrap;overflow:hidden}
.rail a i{font-size:1.15rem}.rail a span,.rail .logo-wrap strong{display:none}.rail a:hover{background:#17181B;color:#fff}.rail a.on{background:#fff;color:#0B0C10}
.rail .rl{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}.rail .logo-wrap{height:auto;padding:0;justify-content:center;color:#fff;font-size:1.15rem}.rail .logo-wrap:hover{background:none}
.logo{width:44px;height:44px;object-fit:contain}.tg{background:#17181B;border:0;color:#9A9EA8;border-radius:10px;width:32px;height:28px;align-self:center}
.rail .grow{flex:1}body.exp .rail{width:236px}body.exp .rail a span,body.exp .rail .logo-wrap strong{display:inline}body.exp .rail .logo-wrap{justify-content:flex-start;padding-left:6px;gap:10px}body.exp .tg i{transform:rotate(180deg)}
.mn{margin-left:84px;padding:22px 30px 40px;transition:margin .2s}body.exp .mn{margin-left:236px}
.tb{display:flex;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap}.tb .sr{position:relative;flex:1;max-width:340px}.tb .sr i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mut)}
.tb .sr input{width:100%;background:var(--pn);border:1px solid var(--ln);border-radius:14px;padding:10px 14px 10px 38px;color:#fff}.tb .dt{color:#C7CAD3;font-weight:600;margin-left:6px}
.me{margin-left:auto;display:flex;align-items:center;gap:10px}.me small{display:block;color:var(--mut);line-height:1}.me b{font-weight:600}
.av{width:42px;height:42px;border-radius:50%;background:#1C1D21;display:grid;place-items:center;font-weight:700;overflow:hidden;flex:none}.av img{width:100%;height:100%;object-fit:cover}
.card,.kp,.pc{background:var(--pn);border:1px solid var(--ln);border-radius:20px;box-shadow:none}
.kp{padding:18px;position:relative;height:100%}.kp .t{color:#C7CAD3;font-weight:500}.kp .n{font-size:2rem;font-weight:700;margin:14px 0 8px;letter-spacing:-.02em}.kp small{color:var(--mut)}
.kp.hi{background:#EEF2FF;color:#0B0C10;border-color:#EEF2FF}.kp.hi .t,.kp.hi small{color:#4A4F63}
.kp .go{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:#1C1D21;color:#cbd6f2;display:grid;place-items:center;text-decoration:none}.kp.hi .go{background:#1F4BD8;color:#fff}
.pl{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:8px;font-size:.75rem;font-weight:600;margin-right:6px}.pl.up{background:rgba(74,222,128,.16);color:#4ADE80}.pl.dn{background:rgba(248,113,113,.16);color:#F87171}.pl.nt{background:#1C1D21;color:#9A9EA8}
.kp.hi .pl.up{background:#C9F5DB;color:#12703A}.kp.hi .pl.dn{background:#FFD5D5;color:#B42323}
.pc{overflow:hidden;height:100%}.pc .top{padding:9px 16px;color:#0B0C10;font-weight:600}.pc .bot{padding:14px 16px}.pc .bot b{font-size:2rem;letter-spacing:-.02em}
.c1 .top{background:#8FA8FF}.c2 .top{background:#F2A27A}.c3 .top{background:#FFE08A}.c4 .top{background:#7EE8A8}
.big{font-size:3rem;font-weight:700;letter-spacing:-.03em;line-height:1}.big small{font-size:1.2rem;font-weight:500;color:#C7CAD3}
.card .ttl{font-weight:600;font-size:1.05rem}.lg-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:8px}
.table{--bs-table-bg:transparent;--bs-table-hover-bg:#16171A;--bs-table-color:#E8EEFB;--bs-table-border-color:#1B1C20;margin:0}
.table thead th{background:#0B0C0E;color:var(--mut);font-weight:500;font-size:.8rem;padding:14px 16px;border:0}.table td{padding:14px 16px}.table-responsive{border-radius:20px}
.batal td{text-decoration:line-through;color:#6B6F7A!important}.batal .st,.batal td:last-child *{text-decoration:none}
.st{display:inline-block;padding:3px 10px;border-radius:8px;font-size:.75rem;font-weight:600}.st.aktif{background:rgba(74,222,128,.14);color:#4ADE80}.st.batal{background:rgba(248,113,113,.14);color:#F87171}
.form-control,.form-select,.ts-control{background:#0B0C0E!important;border:1px solid var(--ln)!important;border-radius:12px!important;color:#E8EEFB!important;padding:.6rem .85rem}
.form-control:focus,.form-select:focus{border-color:var(--ac)!important;box-shadow:0 0 0 3px rgba(91,140,255,.2)!important}.form-control::placeholder{color:#5F636E}
.ts-dropdown{background:#101113!important;border:1px solid var(--ln)!important;color:#E8EEFB!important;border-radius:12px!important}.ts-dropdown .active{background:#1E2233!important;color:#fff!important}.ts-control input,.ts-control .item{color:#E8EEFB!important}
.btn{border-radius:12px;font-weight:600;padding:.55rem 1.1rem}.btn-primary{--bs-btn-bg:#3D6BFF;--bs-btn-border-color:#3D6BFF;--bs-btn-hover-bg:#5B8CFF;--bs-btn-hover-border-color:#5B8CFF;--bs-btn-active-bg:#2F55D6}
.btn-add{background:#fff;color:#0B0C10;border:0}.btn-add:hover{background:#DDE6FF;color:#0B0C10}
.btn-outline-primary,.btn-outline-secondary,.btn-outline-danger{--bs-btn-hover-color:#fff}.btn-sm{padding:.3rem .7rem;border-radius:10px}
.info-box{background:#0B0C0E;border:1px solid var(--ln);border-radius:12px;padding:12px 14px}.nomor{font-size:1.6rem;font-weight:800;color:#8FB0FF;word-break:break-all;letter-spacing:-.01em}
.alert{border-radius:14px;border:1px solid var(--ln)}.pagination{--bs-pagination-bg:var(--pn);--bs-pagination-border-color:var(--ln);--bs-pagination-color:#C7CAD3;--bs-pagination-active-bg:#3D6BFF}

.lg-logo{width:84px;height:84px;object-fit:contain}

@media(max-width:768px){.rail{inset:auto 0 0 0;width:100%!important;flex-direction:row;padding:8px 10px;justify-content:space-around;border-top:1px solid #17181B;border-right:0}.rail .rl,.rail .grow,.rail a span{display:none!important}.rail a{padding:0 14px;height:44px}
.mn,body.exp .mn{margin-left:0;padding:16px 14px 90px}.tb .dt,.me div{display:none}.tb .sr{max-width:none}}

body.lo{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow-x:hidden}
body.lo::before{content:"";position:fixed;inset:-60px;background:url(../images/login.jpg) center/cover;filter:blur(28px) brightness(.3) saturate(1.25);z-index:-1}
.lo-card{display:grid;grid-template-columns:1.05fr 1fr;width:100%;max-width:960px;min-height:560px;background:#0B0C0E;border:1px solid rgba(255,255,255,.14);border-radius:32px;padding:8px;box-shadow:0 40px 90px rgba(0,0,0,.65)}
.lo-img{position:relative;border-radius:25px;overflow:hidden;min-height:544px}.lo-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 30%}
.lo-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent 30%,transparent 58%,rgba(0,0,0,.78))}
.lo-brand{position:absolute;left:24px;top:22px;z-index:2;display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.5rem;letter-spacing:.04em;color:#fff}.lo-brand img{width:36px;height:36px;object-fit:contain}
.lo-cap{position:absolute;left:26px;right:26px;bottom:24px;z-index:2;color:#E6E8EE}.lo-cap b{display:block;font-size:1.15rem;margin-bottom:2px}.lo-cap span{color:#B9BDC8;font-size:.85rem}
.lo-form{display:flex;flex-direction:column;justify-content:center;padding:36px 52px}.lo-form h2{text-align:center;font-weight:700;margin-bottom:6px}.lo-form .sub{text-align:center;color:var(--mut);margin-bottom:28px}
.lo-pw{position:relative}.lo-pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--mut);padding:8px}.lo-pw .form-control{padding-right:44px}
.lo-foot{text-align:center;color:#5F636E;font-size:.78rem;margin-top:26px}
@media(max-width:768px){body.lo{padding:14px}.lo-card{grid-template-columns:1fr;min-height:0;border-radius:26px}.lo-img{min-height:180px}.lo-form{padding:26px 20px 22px}.lo-cap{display:none}}

@keyframes fi{from{opacity:0;transform:translateX(-6px)}}
@media(max-width:768px){
.rail{inset:auto 14px calc(14px + env(safe-area-inset-bottom)) 14px;width:auto!important;height:66px;flex-direction:row;align-items:center;justify-content:space-around;gap:2px;padding:9px 10px;border:1px solid #26282D;border-radius:26px;background:rgba(16,17,19,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 14px 44px rgba(0,0,0,.65)}
.rail a{flex:none;height:46px;padding:0 14px;gap:8px;border-radius:999px}.rail a i{font-size:1.3rem}
.rail a.xm{display:none}
.rail a.on{background:#fff;color:#0B0C10;padding:0 18px 0 15px}
.rail a.on span{display:inline!important;font-weight:600;font-size:.86rem;animation:fi .28s ease}
.mn,body.exp .mn{padding-bottom:112px}}

.chip{cursor:pointer}.doc h2{font-size:1.25rem;font-weight:700}.sig{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;text-align:center}.sig div{padding-top:70px}
.dropdown-menu{border-radius:14px;border:1px solid var(--ln);background:var(--pn)}.dropdown-item{border-radius:8px}
@media print{html,body{background:#fff!important;color:#000!important}body::before{display:none}
.rail,.tb,.noprint{display:none!important}.mn,body.exp .mn{margin:0!important;padding:0!important}
.card,.doc{background:#fff!important;border:0!important;box-shadow:none!important;color:#000!important;padding:0!important}
.table{--bs-table-color:#000;--bs-table-bg:#fff;--bs-table-border-color:#999;--bs-table-hover-bg:#fff;color:#000}.table thead th{background:#eee!important;color:#000!important;border:1px solid #999}.table td{border:1px solid #bbb;padding:6px 8px}
.text-secondary{color:#444!important}.st{border:1px solid #999;background:none!important;color:#000!important}@page{size:A4;margin:14mm}}

.pf-hero{background:radial-gradient(circle at 50% -10%,rgba(91,140,255,.28),transparent 62%),var(--pn)}
.pf-ring{position:relative;width:136px;height:136px;padding:5px;border-radius:50%;background:linear-gradient(135deg,#5B8CFF,#7EE8A8)}
.pf-ring .av{width:100%!important;height:100%!important;border:4px solid #101113;font-size:2.4rem}
.pf-cam{position:absolute;right:2px;bottom:4px;width:38px;height:38px;border-radius:50%;border:3px solid #101113;background:#fff;color:#0B0C10;display:grid;place-items:center}
.pill{display:inline-block;padding:4px 13px;border-radius:999px;background:#1C1D21;color:#C7CAD3;font-size:.8rem;font-weight:500}.pill.blue{background:rgba(91,140,255,.16);color:#9DB8FF}
.pf-stat{background:#0B0C0E;border:1px solid var(--ln);border-radius:16px;padding:14px}.pf-stat b{display:block;font-size:1.6rem}.pf-stat small{color:var(--mut)}
.dz{display:flex;align-items:center;gap:16px;padding:20px;border:1.5px dashed #34363C;border-radius:18px;background:#0B0C0E;cursor:pointer;margin:0;transition:border-color .15s}.dz:hover{border-color:#5B8CFF}.dz i{font-size:2rem;color:#8FB0FF}
.dev{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#0B0C0E;border:1px solid var(--ln);border-radius:16px;margin-bottom:8px}
.dev .ic{width:42px;height:42px;border-radius:12px;background:rgba(91,140,255,.14);color:#8FB0FF;display:grid;place-items:center;font-size:1.25rem;flex:none}

.bar{height:8px;border-radius:99px;background:#1C1D21;overflow:hidden}.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#5B8CFF,#7EE8A8)}
.fav+.fav{border-top:1px solid var(--ln)}.g-x-4{--bs-gutter-x:2rem}.g-y-3{--bs-gutter-y:1rem}