:root{--bg:#f2f5fb;--sf:#fff;--tx:#1b2433;--mu:#6b7686;--bd:#e3e8f1;--ac:#2f5bea;--ac2:#7a4cff;--zebra:#f6f8fd;--hov:#e9efff;--sh:0 1px 2px rgba(20,30,60,.06),0 8px 22px rgba(20,30,60,.06)}
:root{color-scheme:light}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg:#0e121a;--sf:#171d29;--tx:#e8ecf3;--mu:#97a2b3;--bd:#283042;--ac:#6b93ff;--ac2:#a08bff;--zebra:#1c2332;--hov:#26304a;--sh:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.3)}}:root[data-theme=dark]{color-scheme:dark;--bg:#0e121a;--sf:#171d29;--tx:#e8ecf3;--mu:#97a2b3;--bd:#283042;--ac:#6b93ff;--ac2:#a08bff;--zebra:#1c2332;--hov:#26304a;--sh:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.3)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
button,input,select,textarea{font:inherit;color:inherit}input,select,textarea{background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:8px 11px;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}.err{border-color:#d62f3f!important;box-shadow:0 0 0 3px rgba(214,47,63,.18)!important}
input[type=checkbox]{width:auto}button:disabled{opacity:.4;cursor:default}label{display:block;font-size:12px;font-weight:600;color:var(--mu);margin:9px 0 4px}label i{color:#d62f3f;font-style:normal}
.b{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;border:0;border-radius:10px;padding:7px 14px;cursor:pointer;transition:transform .12s,box-shadow .15s,filter .15s;box-shadow:0 2px 8px color-mix(in srgb,var(--ac) 35%,transparent)}.b:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.07)}.b:active{transform:scale(.97)}
.b.s{background:var(--sf);color:var(--tx);border:1px solid var(--bd);box-shadow:none}.b.w{background:#1fa855;box-shadow:none}.b.e{background:#6b4fd6;box-shadow:none}.b.x{background:#d62f3f;box-shadow:none}.b.z{padding:3px 9px;font-size:12px;border-radius:8px}
.c{background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:var(--sh);transition:box-shadow .2s,transform .2s;animation:fadeUp .4s ease both}.c:hover{box-shadow:0 2px 4px rgba(20,30,60,.08),0 12px 28px rgba(20,30,60,.1)}.c h3{margin:0 0 10px;font-size:15px}h2{margin:0 0 14px;font-size:20px}
#lg{min-height:100vh;display:grid;place-items:center;padding:12px;background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--ac) 18%,transparent),transparent 50%),radial-gradient(circle at 80% 90%,color-mix(in srgb,var(--ac2) 18%,transparent),transparent 50%)}#lg form{width:100%;max-width:350px;animation:pop .4s ease both}#app{display:none}
header{background:color-mix(in srgb,var(--sf) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd);padding:8px 18px;display:flex;gap:14px;align-items:center;position:sticky;top:0;z-index:30}.logo{font-size:16px;white-space:nowrap}
nav{display:flex;gap:4px;flex:1;align-items:center}nav button,.chip{background:none;border:0;padding:7px 12px;border-radius:10px;cursor:pointer;color:var(--mu);display:flex;gap:6px;align-items:center;transition:background .15s,color .15s}nav button:hover,.chip:hover{background:var(--hov);color:var(--tx)}nav button.on,.chip.on{background:var(--hov);color:var(--ac);font-weight:600}
nav em{font-style:normal}.dd,#acc{position:relative}.dm{position:absolute;top:calc(100% + 6px);left:0;min-width:200px;background:var(--sf);border:1px solid var(--bd);border-radius:12px;box-shadow:var(--sh);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transition:all .16s;z-index:40}.dm.right{left:auto;right:0;min-width:270px}.dm.open{opacity:1;visibility:visible;transform:none}
.dm a{display:block;padding:8px 12px;border-radius:8px;cursor:pointer}.dm a:hover{background:var(--hov)}.dm a.out{color:#d62f3f}.ac{display:flex;gap:12px;align-items:center;padding:10px;border-bottom:1px solid var(--bd);margin-bottom:6px}.kv2{display:grid;grid-template-columns:70px 1fr;gap:2px 8px;padding:6px 12px 10px;font-size:13px}.kv2 span{color:var(--mu)}
.chip .cn{display:flex;flex-direction:column;text-align:left;line-height:1.2}.chip small{color:var(--mu);font-size:11px}.av{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:700;flex:none}
main{max-width:1240px;margin:auto;padding:18px}main>*{animation:fadeUp .4s ease both}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}.kpis .c{margin:0;border-top:4px solid var(--k);position:relative;overflow:hidden}.kpis .c b{font-size:28px;display:block;color:var(--k)}.kpis .c:before{content:attr(data-i);position:absolute;right:10px;top:6px;font-size:30px;opacity:.12}
.dg{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-bottom:14px}.dg>.c{margin:0;grid-column:span 4;display:flex;flex-direction:column}.dg .s6{grid-column:span 6}.dg .grow{flex:1;display:flex;flex-direction:column;justify-content:center}@media(max-width:1000px){.dg>.c{grid-column:span 12!important}}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-bottom:12px}
.fb{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:flex-end}.fb>*{flex:1;min-width:130px}.fb input:not([type]){flex:2;min-width:200px}.fb .b{flex:0 0 auto}
.tw{overflow-x:auto;border-radius:10px}table{width:100%;border-collapse:collapse;min-width:680px}th,td{text-align:left;padding:9px 10px;vertical-align:top}th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mu);white-space:nowrap;background:var(--zebra);border-bottom:2px solid var(--bd)}
tbody tr,table tr{transition:background .12s}table tr:nth-child(even) td{background:var(--zebra)}table tr:hover td{background:var(--hov)!important}table td{border-bottom:1px solid var(--bd)}
.f,.pill,.chp{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.green,.terkirim{background:rgba(31,157,85,.14);color:#1f9d55}.yellow,.simulasi,.sebagian{background:rgba(217,154,6,.16);color:#b07d00}.red,.gagal{background:rgba(214,47,63,.14);color:#d62f3f}.done{background:rgba(138,148,166,.18);color:var(--mu)}
.pr-Tinggi{background:rgba(214,47,63,.14);color:#d62f3f}.pr-Sedang{background:rgba(245,158,11,.18);color:#b26a00}.pr-Rendah{background:rgba(23,105,194,.14);color:#1769c2}
.st-Open{background:rgba(47,91,234,.14);color:var(--ac)}.st-InProgress{background:rgba(122,76,255,.16);color:#7a4cff}.st-Done{background:rgba(31,157,85,.14);color:#1f9d55}
.ch-WA{background:rgba(31,168,85,.15);color:#1fa855}.ch-Email{background:rgba(107,79,214,.15);color:#6b4fd6}.ch-WAEmail{background:linear-gradient(90deg,rgba(31,168,85,.2),rgba(107,79,214,.2));color:var(--tx)}
.pills{display:flex;gap:8px;flex-wrap:wrap}.pill{border:2px solid transparent;cursor:pointer;padding:5px 14px;transition:all .15s;opacity:.55}.pill.on{opacity:1;border-color:currentColor;transform:scale(1.04)}.pill:hover{opacity:1}
.who{display:flex;gap:8px;align-items:center}.who small{font-size:11px}
#m{position:fixed;inset:0;background:rgba(10,15,30,.55);backdrop-filter:blur(3px);display:none;place-items:center;padding:12px;overflow:auto;z-index:50}#m.on{display:grid}#m .c{width:100%;max-width:780px;max-height:92vh;overflow:auto;margin:0;animation:pop .22s ease both}
.mu{color:var(--mu)}.r{display:flex;gap:6px;flex-wrap:wrap;align-items:center}code{background:var(--zebra);padding:1px 6px;border-radius:6px;font-size:12px;border:1px solid var(--bd)}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.fg .full{grid-column:1/-1}@media(max-width:600px){.fg{grid-template-columns:1fr}}
.kvl{border:1px solid var(--bd);border-radius:10px;overflow:hidden;margin:10px 0}.kr{display:grid;grid-template-columns:160px 1fr;gap:10px;padding:8px 12px}.kr:nth-child(even){background:var(--zebra)}.kr>span{color:var(--mu)}@media(max-width:600px){.kr{grid-template-columns:1fr;gap:0}}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 4px 0 8px}
.ub{display:flex;align-items:center;gap:8px;margin:9px 0}.ub>span{width:110px;font-size:12px;color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ub small{color:var(--mu);white-space:nowrap}.stk{display:flex;flex:1;height:22px;background:var(--zebra);border-radius:6px;overflow:hidden}.stk i{color:#fff;font:600 11px/22px system-ui;text-align:center;font-style:normal;transform-origin:left;animation:grow .7s ease both}
.pb{display:inline-block;width:70px;height:8px;background:var(--bd);border-radius:4px;overflow:hidden;vertical-align:middle;margin-right:6px}.pb i{display:block;height:100%;background:#1f9d55;transform-origin:left;animation:grow .7s ease both}
.yy{margin:9px 0}.yl{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px}.yl span:first-child{font-weight:600}.dl{font-weight:700;padding:0 8px;border-radius:99px;font-size:11px;background:var(--zebra);color:var(--mu)}.dl.g{background:rgba(31,157,85,.15);color:#1f9d55}.dl.bd{background:rgba(214,47,63,.15);color:#d62f3f}
.yb{display:flex;align-items:center;gap:8px;margin:2px 0}.yb i{display:block;height:11px;border-radius:4px;transform-origin:left;animation:grow .7s ease both;min-width:3px}.yb b{font-size:11px;font-weight:600;white-space:nowrap}.yb small{color:var(--mu);font-weight:400}
pre{background:var(--zebra);padding:10px;border-radius:8px;white-space:pre-wrap;font-size:12px}.note{background:color-mix(in srgb,var(--ac) 8%,var(--sf));border:1px solid color-mix(in srgb,var(--ac) 20%,transparent);border-radius:10px;padding:8px 12px;font-size:12px;margin-bottom:12px}
.pgr{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}.pgr select{width:auto;padding:3px 6px}
.doc{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 10px;border-radius:8px}.doc:nth-child(even){background:var(--zebra)}.doc a{color:var(--ac);font-weight:600}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--bd);margin:12px 0;overflow-x:auto}.tab{background:none;border:0;padding:8px 14px;cursor:pointer;color:var(--mu);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all .15s}.tab:hover{color:var(--tx)}.tab.on{color:var(--ac);border-color:var(--ac);font-weight:600}.tp{animation:fadeUp .25s ease both}
.tl{position:relative;margin:10px 0 10px 14px;border-left:2px solid var(--bd);padding-left:22px}.ti{position:relative;margin-bottom:14px;animation:fadeUp .3s ease both}.td{position:absolute;left:-36px;top:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;box-shadow:0 0 0 4px var(--sf)}
.asg{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 10%,var(--sf)),color-mix(in srgb,var(--ac2) 10%,var(--sf)));border:1px solid var(--bd);border-radius:12px;padding:12px 14px;margin:10px 0}.asg .arrow{color:var(--mu);font-size:18px}
#tc{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:99}.toast{background:var(--sf);border:1px solid var(--bd);border-left:4px solid #1f9d55;border-radius:10px;padding:10px 16px;box-shadow:var(--sh);animation:slideIn .25s ease both;max-width:340px}.toast.err{border-left-color:#d62f3f}.toast.out{opacity:0;transform:translateX(30px);transition:all .3s}
@media(max-width:820px){nav button:not(.on) em{display:none}.chip .cn{display:none}.logo b{display:none}}

/* ===== v6: layout sidebar modern ===== */
#app{display:none;min-height:100vh}
aside#sb{position:fixed;inset:0 auto 0 0;width:272px;background:var(--sf);border-right:1px solid var(--bd);display:flex;flex-direction:column;z-index:60;transition:width .25s ease,transform .25s ease}
.wrap{flex:1;min-width:0;margin-left:272px;transition:margin .25s ease}
body.sbc aside#sb{width:80px}body.sbc .wrap{margin-left:80px}
.sb-h{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 8px;gap:8px}
.lg2{display:flex;align-items:center;gap:11px;font-size:18px;white-space:nowrap;overflow:hidden}
.lgi{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--ac),var(--ac2));font-size:21px;box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 40%,transparent)}
.sb-b{flex:1;overflow-y:auto;padding:4px 14px 14px;scrollbar-width:thin}
.segt{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);padding:18px 12px 8px;white-space:nowrap}
.ni{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--tx);cursor:pointer;transition:background .15s,color .15s,transform .15s;white-space:nowrap;margin:2px 0}
.ni:hover{background:var(--hov)}.ni .ico{flex:none;width:24px;text-align:center;font-size:18px}.ni em{font-style:normal;flex:1;overflow:hidden;text-overflow:ellipsis}
.ni.leaf.on{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 35%,transparent)}
.ni.on:not(.leaf){background:var(--hov);color:var(--ac);font-weight:600}
.chev{font-style:normal;color:var(--mu);transition:transform .2s}.grp.open>.ni .chev{transform:rotate(90deg)}
.subs{display:none;margin:2px 0 6px 23px;padding-left:12px;border-left:2px solid var(--bd)}.grp.open .subs{display:block;animation:fadeUp .25s ease both}
.si{display:block;padding:8px 12px;border-radius:9px;color:var(--mu);cursor:pointer;transition:all .15s;margin:2px 0}.si:hover{background:var(--hov);color:var(--tx);transform:translateX(2px)}.si.on{color:var(--ac);font-weight:600;background:var(--hov)}
.sb-f{padding:12px 14px 16px;border-top:1px solid var(--bd)}
.help-btn{width:100%;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;border:1px dashed #25d366;background:rgba(37,211,102,.08);color:var(--tx);cursor:pointer;transition:all .15s}.help-btn:hover{background:rgba(37,211,102,.2)}.help-btn .ico{width:24px;text-align:center;font-size:18px}.help-btn em{font-style:normal}
body.sbc .sb-h{flex-direction:column;padding:16px 0 4px}body.sbc .lg2 b,body.sbc .ni em,body.sbc .chev,body.sbc .subs,body.sbc .help-btn em{display:none}
body.sbc .ni,body.sbc .help-btn{justify-content:center}body.sbc .segt{height:1px;padding:0;margin:12px 14px;background:var(--bd);font-size:0;overflow:hidden}
.top{gap:12px;padding:12px 24px;min-height:64px}.ib{width:40px;height:40px;border-radius:12px;border:1px solid var(--bd);background:var(--sf);cursor:pointer;display:grid;place-items:center;font-size:17px;transition:all .15s;flex:none}.ib:hover{background:var(--hov);transform:translateY(-1px)}
.crumb{display:flex;gap:8px;align-items:center;color:var(--mu);overflow:hidden;white-space:nowrap}.crumb b{color:var(--tx)}.crumb i{font-style:normal;opacity:.5}.grow{flex:1}
main{max-width:1320px;width:100%;margin:0 auto;padding:24px 28px 100px}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px}.ph h2{margin:0;font-size:22px}.ph p{margin:3px 0 0}
.seg-tabs{display:inline-flex;flex-wrap:wrap;background:var(--zebra);border:1px solid var(--bd);border-radius:14px;padding:4px;gap:4px;margin:2px 0 18px}.seg-tabs button{border:0;background:none;padding:9px 18px;border-radius:10px;cursor:pointer;color:var(--mu);transition:all .15s}.seg-tabs button.on{background:var(--sf);color:var(--ac);font-weight:600;box-shadow:var(--sh)}
#ov{display:none;position:fixed;inset:0;background:rgba(10,15,30,.5);backdrop-filter:blur(2px);z-index:55}
#tc{top:76px;bottom:auto;right:20px}
/* ===== laporan: lebih lega ===== */
.rt table{min-width:0}.rt td{padding:15px 14px;line-height:1.6}.rt th{padding:13px 14px}.sect{margin-bottom:22px}.sect .ub{margin:16px 0}.sect h3{font-size:16px;margin-bottom:6px}
.stack{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
/* ===== bantuan admin ===== */
#fab{position:fixed;right:24px;bottom:24px;z-index:70;display:flex;gap:8px;align-items:center;border:0;border-radius:99px;padding:13px 20px;background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;font-weight:600;cursor:pointer;box-shadow:0 10px 26px rgba(18,140,126,.45);animation:pulse 2.6s infinite;transition:transform .15s}#fab:hover{transform:translateY(-2px) scale(1.03)}
@keyframes pulse{0%{box-shadow:0 10px 26px rgba(18,140,126,.45),0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 10px 26px rgba(18,140,126,.45),0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 10px 26px rgba(18,140,126,.45),0 0 0 0 rgba(37,211,102,0)}}
#hp{position:fixed;right:24px;bottom:90px;width:360px;max-width:calc(100vw - 32px);z-index:80;opacity:0;visibility:hidden;transform:translateY(18px) scale(.95);transform-origin:bottom right;transition:all .25s cubic-bezier(.2,.9,.3,1.2)}#hp.on{opacity:1;visibility:visible;transform:none}
.hpc{background:var(--sf);border:1px solid var(--bd);border-radius:22px;box-shadow:0 24px 60px rgba(10,20,50,.35);overflow:hidden;max-height:calc(100vh - 120px);overflow-y:auto}
.hill{background:linear-gradient(135deg,#128c7e,#25d366);position:relative;padding:8px 8px 0}.hx{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.25);color:#fff;cursor:pointer}.hx:hover{background:rgba(255,255,255,.4)}
.hpbody{padding:16px 18px 18px}.hpbody h3{margin:0 0 4px;font-size:18px}.adm{display:flex;align-items:center;gap:10px;margin:12px 0;padding:10px 12px;background:var(--zebra);border-radius:12px}.adm>div{flex:1}
.topics{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.tp2{border:1px solid var(--bd);background:var(--sf);border-radius:99px;padding:5px 12px;font-size:12px;cursor:pointer;transition:all .15s}.tp2:hover{border-color:#25d366}.tp2.on{background:rgba(37,211,102,.15);border-color:#25d366;color:#128c7e;font-weight:600}
.wabtn{display:block;text-align:center;background:linear-gradient(135deg,#25d366,#128c7e)!important;margin:10px 0 6px;padding:11px;border-radius:12px;font-weight:600}
@media(max-width:900px){aside#sb{transform:translateX(-100%);width:272px!important}body.sbo aside#sb{transform:none;box-shadow:0 0 40px rgba(0,0,0,.35)}body.sbo #ov{display:block}.wrap{margin-left:0!important}main{padding:18px 14px 100px}.top{padding:10px 14px}.crumb span,.crumb i{display:none}#fab b{display:none}#fab{padding:14px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== v7 perbaikan ===== */
body{--sbw:272px}body.sbc{--sbw:80px}
#m{z-index:90;padding:20px 20px 20px calc(var(--sbw) + 20px);transition:padding .25s ease}#m .c{max-width:min(780px,100%)}
body.sbc .grp .subs{display:none!important}body.sbc .grp .ni .chev{display:none}
@media(max-width:900px){body,body.sbc{--sbw:0px}#m{padding:12px}}
.chk{display:flex!important;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--bd);border-radius:12px;margin:8px 0!important;cursor:pointer;color:var(--tx)!important;font-size:14px!important;font-weight:400!important;transition:all .15s}.chk:hover{border-color:var(--ac);background:var(--hov)}.chk input{margin-top:4px;width:18px;height:18px}.chk span{display:flex;flex-direction:column}

/* ===== v8 ===== */
.fpanel{background:var(--sf);border:1px solid var(--bd);border-radius:16px;padding:16px 18px;margin-bottom:18px;box-shadow:var(--sh)}
.frow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fsearch{flex:1;min-width:260px;position:relative}.fsearch span{position:absolute;left:13px;top:50%;transform:translateY(-50%);opacity:.6}.fsearch input{padding-left:38px;height:42px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px 18px;margin-top:16px}.fgrid:empty{display:none}
.ff label{margin:0 0 5px}.ff select,.ff input{height:40px}.fmore{display:none}.fpanel.open .fmore{display:contents}
.chip{position:relative}.bdg{position:absolute;top:-4px;left:26px;min-width:19px;height:19px;border-radius:99px;background:#d62f3f;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px;box-shadow:0 0 0 2px var(--sf);animation:pop .3s}
.bdg2{background:#d62f3f;color:#fff;border-radius:99px;font-size:11px;padding:1px 8px;margin-left:6px;font-weight:700}
.nbig{display:flex;align-items:baseline;gap:10px;margin:14px 0;padding:14px 18px;border-radius:14px;background:linear-gradient(135deg,rgba(214,47,63,.12),rgba(217,154,6,.12))}.nbig b{font-size:38px;color:#d62f3f;line-height:1}
.nlist{display:flex;flex-direction:column;gap:10px}
.nit{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--bd);border-radius:12px;cursor:pointer;background:var(--sf);position:relative;transition:all .15s}.nit:hover{transform:translateX(3px);border-color:var(--ac);box-shadow:var(--sh)}.nit.rd{opacity:.65}.nic{font-size:20px}.ntx{margin-top:4px;font-size:13px;color:#b07d00;font-weight:600}.ntx.od{color:#d62f3f}.ndot{position:absolute;right:14px;top:14px;width:9px;height:9px;border-radius:50%;background:#d62f3f}
#iw{position:fixed;inset:0;z-index:120;background:rgba(10,15,30,.6);backdrop-filter:blur(3px);display:none;place-items:center}#iw.on{display:grid}#iw .c{max-width:380px;text-align:center;margin:0}#iw b{font-size:22px;color:#d62f3f}
.off{background:linear-gradient(135deg,#9aa6b2,#6b7686)!important;animation:none!important;box-shadow:none!important}
.warnb{background:rgba(214,47,63,.08)!important;border-color:rgba(214,47,63,.3)!important;color:#d62f3f!important}
.wabtn.dis{background:var(--bd)!important;color:var(--mu)!important;cursor:not-allowed;border:0;width:100%;box-shadow:none}
.chkgrid{display:flex;flex-wrap:wrap;gap:8px}.chk2{display:inline-flex!important;align-items:center;gap:6px;margin:0!important;padding:6px 12px;border:1px solid var(--bd);border-radius:99px;cursor:pointer;color:var(--tx)!important;font-size:13px!important;font-weight:400!important}.chk2:hover{border-color:var(--ac)}.chk2 input{width:auto}
tr.kid td:first-child{padding-left:34px}

/* ===== v9 ===== */
.note{background:rgba(47,91,234,.07)!important;border:1px solid rgba(47,91,234,.18)!important;border-radius:12px;padding:10px 14px;font-size:13px;color:var(--tx);line-height:1.55;transition:all .25s;max-height:600px;overflow:hidden}
.note.warn{background:rgba(217,154,6,.10)!important;border-color:rgba(217,154,6,.32)!important}.note.warnb{background:rgba(214,47,63,.08)!important;border-color:rgba(214,47,63,.3)!important;color:#d62f3f}
.note.soft{position:relative;padding-right:42px}.nx{position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.06);color:var(--mu);cursor:pointer;font-size:12px;transition:all .15s}.nx:hover{background:rgba(214,47,63,.15);color:#d62f3f}
.note.gone{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-width:0}
#tc{position:fixed;top:78px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);display:flex;flex-direction:column;gap:10px;z-index:200;width:min(470px,calc(100vw - 24px));pointer-events:none}
.toast{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--sf);border:1px solid var(--bd);box-shadow:0 14px 40px rgba(10,20,50,.3);animation:tin .35s cubic-bezier(.2,.9,.3,1.2) both;max-width:none}
.toast .ti2{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px}
.toast.ok{background:linear-gradient(90deg,rgba(31,157,85,.2),rgba(31,157,85,0) 70%),var(--sf);border-left:5px solid #1f9d55}.toast.ok .ti2,.toast.ok .tbar{background:#1f9d55}
.toast.err{background:linear-gradient(90deg,rgba(214,47,63,.2),rgba(214,47,63,0) 70%),var(--sf);border-left:5px solid #d62f3f}.toast.err .ti2,.toast.err .tbar{background:#d62f3f}
.toast.warn{border-left:5px solid #d99a06}.toast.warn .ti2,.toast.warn .tbar{background:#d99a06}.toast.info{border-left:5px solid var(--ac)}.toast.info .ti2,.toast.info .tbar{background:var(--ac)}
.toast .tb{flex:1;display:flex;flex-direction:column;line-height:1.35}.toast .tb b{font-size:14px}.toast .tb span{font-size:13px;color:var(--mu);word-break:break-word}.toast .tx{border:0;background:none;cursor:pointer;color:var(--mu);font-size:15px}
.tbar{position:absolute;left:0;bottom:0;height:4px;width:100%;transform-origin:left;animation:tshrink linear forwards}.toast:hover .tbar{animation-play-state:paused}.toast.out{opacity:0;transform:translateY(-10px);transition:all .25s}
@keyframes tin{from{opacity:0;transform:translateY(-18px) scale(.95)}to{opacity:1;transform:none}}@keyframes tshrink{to{transform:scaleX(0)}}
.pwbox{width:100%}.pwin{position:relative}.pwin input{padding-right:46px}.pweye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;font-size:17px;opacity:.7}.pweye:hover{opacity:1}
.pwbar{height:6px;border-radius:99px;background:var(--bd);margin:10px 0 8px;overflow:hidden}.pwbar i{display:block;height:100%;width:0;border-radius:99px;transition:width .25s,background .25s}
.pwls{display:flex;flex-wrap:wrap;gap:6px 14px}.pwr{font-size:12.5px;color:var(--mu);transition:color .2s}.pwr b{display:inline-block;width:16px;color:var(--mu)}.pwr.ok{color:#1f9d55;font-weight:600}.pwr.ok b{color:#1f9d55}
.fper{color:#d62f3f;font-size:12px;margin-top:6px;min-height:16px}
.pwex{margin-top:8px;font-size:12px;color:var(--mu);background:var(--zebra);padding:7px 10px;border-radius:9px}
.tp2.cl{opacity:.6;border-style:dashed}
.msel{padding:4px 8px;height:34px;min-width:132px}.msel.mo{border-color:#d62f3f;color:#d62f3f}.msel.mn{border-color:#1f9d55;color:#1f9d55}

/* Q4b: editor template OTP */
.otpl{margin-top:14px;padding-top:12px;border-top:1px dashed var(--bd)}.tokrow{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.tok{border:1px solid var(--bd);background:var(--bg2,#f4f6fb);border-radius:999px;padding:3px 10px;font:12px/1.4 ui-monospace,Consolas,monospace;cursor:pointer;color:inherit}.tok:hover{border-color:var(--pri,#2f5bea)}
.tokinfo{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:4px 0 10px;font-size:12px}.otw{font-size:12px;color:var(--mu)}.otw.bad{color:#d62f3f;font-weight:600}textarea.err{border-color:#d62f3f!important}
.wapv{border-radius:12px;overflow:hidden;border:1px solid var(--bd)}.wapv-h{background:#075e54;color:#fff;font-size:12px;padding:7px 12px}.wapv-b{background:#e5ddd5;padding:14px 12px}.wapv-m{background:#dcf8c6;color:#111;border-radius:10px 10px 2px 10px;padding:8px 10px 18px;max-width:420px;margin-left:auto;font-size:13.5px;line-height:1.45;position:relative;word-break:break-word;box-shadow:0 1px 1px rgba(0,0,0,.12)}.wapv-t{position:absolute;right:8px;bottom:3px;font-size:10px;color:#667}

/* Q5: pencarian global + tombol header */
.gsq{width:100%;font-size:16px;padding:12px 14px;border-radius:12px}.gsr{max-height:55vh;overflow:auto;margin:10px 0}.gsg{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mu);margin:12px 4px 4px}
.gsi{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-radius:10px;color:var(--tx);cursor:pointer;font:inherit}.gsi small{color:var(--mu);font-size:12px}.gsi:hover,.gsi.on{background:var(--hov)}
#thm,#gsb{font-size:17px}

/* Q5: ponsel - panel filter diciutkan bawaan (hanya pencarian + tombol Filter) */
.mo-only{display:none!important}
@media(max-width:600px){.mo-only{display:inline-flex!important}.fpanel:not(.open) .fgrid{display:none}.fpanel .frow{gap:8px}.fpanel .frow .fsearch{flex:1 1 100%}}
/* Q5: ponsel - tabel .rt menjadi kartu */
@media(max-width:600px){.rt table,.rt tbody,.rt tr,.rt td{display:block;width:100%}.rt tr:has(th){display:none}.rt tr{border:1px solid var(--bd);border-radius:12px;margin:0 0 10px;padding:6px 2px;background:var(--sf)}.rt td{padding:6px 12px;border:0!important;display:flex;gap:10px;align-items:flex-start;line-height:1.5}.rt td::before{content:attr(data-l);flex:0 0 84px;color:var(--mu);font-size:12px;padding-top:3px}.rt td[data-l=""]::before{display:none}.rt td>*{min-width:0}.rt td:last-child{justify-content:flex-end}}

/* Q6: impor tiket */
.chip2{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--hov);color:var(--tx)}.chip2.ok{background:rgba(31,157,85,.15);color:#1f9d55}.chip2.bad{background:rgba(214,47,63,.15);color:#d62f3f}
.impv{max-height:45vh;overflow:auto}.impv tr.impbad td{background:rgba(214,47,63,.07)}

/* Q9: kesehatan sistem */
.hl-list{display:flex;flex-direction:column;gap:2px}.hl-row{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;border:1px solid transparent}.hl-row .hl-i{flex:0 0 22px;text-align:center}.hl-row.hl-warn{background:rgba(217,154,6,.10);border-color:rgba(217,154,6,.28)}.hl-row.hl-bad{background:rgba(214,47,63,.08);border-color:rgba(214,47,63,.3)}.hl-row .mu{font-size:12.5px;word-break:break-word}