:root{--bg:#eceae4;--pn:#f8f7f3;--tx:#22252a;--mu:#6c7078;--bd:#cfccc3;--ac:#c4620a;--vp:#2b2f36;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14161a;--pn:#1c1f24;--tx:#e4e6e9;--mu:#8b9099;--bd:#30343b;--ac:#f0953a}}
:root[data-theme="dark"]{--bg:#14161a;--pn:#1c1f24;--tx:#e4e6e9;--mu:#8b9099;--bd:#30343b;--ac:#f0953a}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--tx);font:11px/1.35 system-ui,"Segoe UI",sans-serif;overflow:hidden;-webkit-text-size-adjust:100%}
#app{display:flex;flex-direction:column;height:100%}
main{flex:1;display:flex;min-height:0}
#vp{flex:1;position:relative;min-width:0;background:var(--vp)}
#vp canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#toast{position:absolute;left:50%;top:8px;transform:translateX(-50%);max-width:90%;display:none;background:rgba(20,22,26,.85);color:#e4e6e9;padding:4px 9px;border-radius:6px;font-size:11px;pointer-events:none;z-index:3;text-align:center}
#selbox{position:absolute;display:none;border:1px dashed var(--ac);background:rgba(240,149,58,.15);pointer-events:none;z-index:2}
button,label.btn,input[type=number],select{background:var(--bg);color:var(--tx);border:1px solid var(--bd);border-radius:6px;padding:5px 8px;font:inherit;cursor:pointer;min-height:30px;box-sizing:border-box}
button:focus-visible,label.btn:focus-within,select:focus-visible{outline:2px solid var(--ac)}
button.on{background:var(--ac);color:#fff;border-color:var(--ac)}
button:disabled{opacity:.45;cursor:not-allowed}.locked{opacity:.45;border-style:dashed}
label.btn{display:flex;align-items:center;justify-content:center}
/* ikon + teks kecil di bawahnya */
[data-ic]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
[data-ic] small{font-size:8px;line-height:1.1;white-space:nowrap;opacity:.9}
/* grid sejajar: semua tombol satu kelompok berukuran sama */
.g{display:grid;gap:3px;margin-bottom:4px}.g1{grid-template-columns:1fr}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.g>button{width:100%;height:34px;min-height:34px;padding:2px;font-size:10px;gap:2px}
.g>button[data-ic] svg{width:14px;height:14px;flex:none}
.grp{margin-bottom:9px}.grp>h4,.box>h4{margin:0 0 4px;font-size:10px;font-weight:500;color:var(--mu)}
.box{border:1px solid var(--bd);border-radius:8px;padding:6px 7px;margin-bottom:9px}
.sub{font-size:10px;color:var(--mu);margin:3px 0 3px}
.fr{display:grid;grid-template-columns:1fr 58px;gap:6px;align-items:center;margin-bottom:4px}.fr label{color:var(--tx)}
input[type=number]{width:100%;cursor:text;padding:3px 6px;min-height:28px}
.pri{background:var(--ac);color:#fff;border-color:var(--ac)}
.dng{color:#d33;border-color:#d33}
/* label & opsi viewport */
.vl{position:absolute;display:flex;flex-wrap:wrap;gap:3px;align-items:center;color:#e4e6e9;font-size:9px;background:rgba(20,22,26,.6);padding:1px 4px;border-radius:3px;pointer-events:none}
.vl.sel>span{color:var(--ac)}
.vl .cb{display:none;pointer-events:auto;border:0;background:none;padding:0;min-height:0;color:#e4e6e9;flex-direction:row;gap:2px}.vl.sel .cb{display:flex}
.vl .vm{display:none;gap:3px;align-items:center;flex-wrap:wrap}.vl.sel.open .vm{display:flex}.vl .vm>*{pointer-events:auto}
.vl .vm button,.vl .vm select{background:rgba(255,255,255,.12);color:#e4e6e9;border:1px solid rgba(255,255,255,.22);border-radius:3px;padding:1px 4px;font-size:9px;min-height:0;line-height:1.3;flex-direction:row;gap:2px}
.vl .vm button.on{background:var(--ac);border-color:var(--ac);color:#fff}
.vl select option{color:#222;background:#fff}.vl input{width:34px;font-size:9px;min-height:0;padding:1px 3px}
.vl [data-ic] small{font-size:8px}
/* panel kamera */
#camtog,#asidebtn{z-index:4;min-height:0;border:0;color:#e4e6e9;background:rgba(20,22,26,.7);display:flex;padding:3px 6px}
#camtog{position:absolute;left:6px;bottom:6px;border-radius:6px}#camtog.flip svg{transform:rotate(180deg)}
#asidebtn{position:absolute;right:0;top:50%;transform:translateY(-50%);padding:10px 3px;border-radius:6px 0 0 6px;flex-direction:column;align-items:center;gap:3px}
#asidebtn small{writing-mode:vertical-rl;font-size:8px}#asidebtn.flip svg{transform:rotate(180deg)}
#campad{position:absolute;left:6px;bottom:30px;z-index:4;display:flex;flex-direction:column;gap:5px;background:rgba(20,22,26,.78);border-radius:8px;padding:6px;color:#e4e6e9}
.cp-row{display:flex;gap:8px;justify-content:space-between}.cp-sec{display:flex;flex-direction:column;align-items:center;gap:2px}.cp-sec small{font-size:9px;opacity:.85}
.pg{display:grid;grid-template-columns:repeat(3,24px);gap:3px}
#campad button{touch-action:none;background:rgba(255,255,255,.12);color:#e4e6e9;border:0;border-radius:5px;min-height:0;padding:0;display:flex;align-items:center;justify-content:center}
.pg button{width:24px;height:24px}
.cp-mid button{flex:1;height:28px;flex-direction:column;gap:0}.cp-mid [data-ic] small{font-size:8px}
.cp-fa button{flex:1;height:22px;font-size:9px;padding:0 4px;white-space:nowrap}
#camlock.on{background:var(--ac)}
/* panel kanan */
#side{width:clamp(160px,40vw,236px);background:var(--pn);border-left:1px solid var(--bd);display:flex;flex-direction:column;min-height:0}
#side.closed{display:none}
.tabs{display:flex;border-bottom:1px solid var(--bd);flex:0 0 auto;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 0 auto;min-width:30px;border:0;border-radius:0;background:none;padding:6px 2px 5px;min-height:0;color:var(--mu)}
.tabs button.on{color:var(--ac);box-shadow:inset 0 -2px var(--ac);background:none}
.panel{flex:1;overflow:auto;padding:6px 8px;-webkit-overflow-scrolling:touch}
.row{padding:6px 8px;border-radius:6px;cursor:pointer;display:flex;justify-content:space-between;gap:6px;align-items:center}
.row:hover{background:var(--bg)}.row.sel{background:var(--bg);box-shadow:inset 3px 0 var(--ac)}
.row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row small{font-size:10px;white-space:nowrap}
.dots{background:none;border:0;min-height:0;padding:3px 5px;color:var(--mu);display:flex;align-items:center}
.mu{color:var(--mu)}
#sidefoot{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-top:1px solid var(--bd)}
#sidefoot .fl{display:flex;gap:4px}#sidefoot button,#sidefoot label.btn{min-height:0;padding:3px 7px}
#pop{position:fixed;display:none;z-index:20;max-width:min(220px,88vw);background:var(--pn);color:var(--tx);border:1px solid var(--bd);border-radius:8px;padding:6px 8px;font-size:10px;line-height:1.4;min-width:170px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
#pop .btns{display:flex;flex-wrap:wrap;gap:3px;margin:5px 0 0}#pop button{min-height:26px;padding:3px 9px;font-size:11px}.pt{font-weight:600;margin-bottom:3px;word-break:break-all}
/* bar animasi (kecil) */
#tlbar{background:var(--pn);border-top:1px solid var(--bd);padding:2px 6px 0;display:flex;flex-direction:column;gap:1px}
.trow{display:flex;gap:3px;align-items:center}.trow button{min-height:22px;padding:1px 7px;border-radius:4px;font-size:10px}
.trow [data-ic] small,.trow .pb small{font-size:7px;line-height:1}
.pb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.sep{width:6px}#flab{margin-left:auto;color:var(--mu);font-size:10px}
#tl{position:relative;padding-bottom:5px}#tl #slider{width:100%;margin:0;display:block;height:12px;accent-color:var(--ac)}
#kt{position:absolute;left:7px;right:7px;bottom:0;height:4px;pointer-events:none}
#kt i{position:absolute;bottom:0;width:2px;height:4px;background:var(--ac);transform:translateX(-1px)}
#kt i.f{opacity:.35}
.noanim .pb,.noanim #slider{opacity:.4;pointer-events:none}
/* halaman setting layar penuh */
#settings{position:fixed;inset:0;z-index:30;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.sh{display:flex;justify-content:space-between;align-items:center;padding:6px 14px;background:var(--pn);border-bottom:1px solid var(--bd);font-size:14px}
.sh button{min-height:0;padding:3px 8px}
#setbody{flex:1;overflow:auto;padding:4px 14px 20px}
.cat h3{font-size:10px;font-weight:500;margin:14px 0 2px;color:var(--ac)}
.srow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--bd)}
.srow small{display:block;color:var(--mu);font-size:10px;margin-top:1px}.srow.soon{opacity:.55}
.sw{width:38px;height:22px;border-radius:11px;padding:0;min-height:0;position:relative;flex:0 0 auto}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--mu);transition:left .15s}
.sw.on::after{left:21px;background:#fff}
.bd{font-size:10px;border:1px solid var(--bd);border-radius:9px;padding:0 8px;color:var(--mu);white-space:nowrap}

.tg{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:5px}
.tg>button{min-height:34px;padding:3px 2px;font-size:10px;width:100%}.tg input{min-height:36px;text-align:center;padding:2px}
.tg .s2{grid-column:span 2}.tg .s4{grid-column:1/-1;margin:2px 0 0}

.jt{margin-bottom:6px}
button:not(#asidebtn):active{transform:scale(.95)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,149,58,.75)}100%{box-shadow:0 0 0 12px rgba(240,149,58,0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
#sk.fx{animation:pulse .45s}#sk.nope{animation:shake .3s}

/* Set key: redup seperti tombol lain, menyala hanya saat diklik */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,149,58,.75)}100%{box-shadow:0 0 0 12px rgba(240,149,58,0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
#sk.lit,#sk2.lit{background:var(--ac);color:#fff;border-color:var(--ac);animation:pulse .45s}#sk.nope,#sk2.nope{animation:shake .3s}
/* popover rapi: grid dua kolom simetris */
.pinfo{font-size:10px;line-height:1.45}.pmsg{font-size:10px;margin:4px 0}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:5px}
.pgrid button{width:100%;min-height:26px;padding:3px 4px;font-size:10px}
#pop .pin{width:100%;box-sizing:border-box;padding:4px 6px;font-size:11px;margin:4px 0;background:var(--bg);color:var(--tx);border:1px solid var(--bd);border-radius:6px}
#pop select{width:100%;font-size:10px;min-height:26px;margin:4px 0}
/* layout panel fleksibel */
#side.w1{width:clamp(140px,34vw,190px)}#side.w2{width:clamp(160px,40vw,236px)}#side.w3{width:clamp(200px,52vw,300px)}
main.pl #side{order:-1;border-left:0;border-right:1px solid var(--bd)}
main.pl #asidebtn{right:auto;left:0;border-radius:0 6px 6px 0}
main.pl #asidebtn svg{transform:rotate(180deg)}main.pl #asidebtn.flip svg{transform:none}
.srow.col{display:block}.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px;margin-top:6px}.seg button{min-height:28px;padding:3px 4px;font-size:10px}

/* anti menu bawaan saat tahan lama */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input,select{-webkit-user-select:text;user-select:text}
button,label.btn{touch-action:manipulation}button svg,label svg{pointer-events:none}
/* grid alat: tombol rapat, kolom angka diberi jarak */
.tr2{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:3px}
.tr3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 50px;gap:3px;margin-bottom:3px}
.tr2>button,.tr3>button{min-height:34px;padding:3px 2px;font-size:10px;width:100%}
.tr3 input{margin-left:8px;width:calc(100% - 8px);min-height:34px;text-align:center;padding:2px;box-sizing:border-box}
/* panel kamera sederhana: saklar + satu D-pad */
#campad{gap:5px;padding:6px;width:126px}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:3px}
#campad .seg2 button{height:22px;font-size:10px;padding:0}#campad .seg2 button.on{background:var(--ac)}
.cp-main{display:flex;gap:6px;justify-content:space-between}
.pg{grid-template-columns:repeat(3,22px);gap:3px}.pg button{width:22px;height:22px}
.cp-side{display:grid;grid-template-rows:repeat(3,22px);gap:3px}.cp-side button{width:30px;height:22px}
.cp-fa small{display:block;font-size:9px;opacity:.8;margin-bottom:2px}
.fa3{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
#campad .fa3 button{height:22px;font-size:9px;padding:0;white-space:nowrap}

/* menu cepat: daftar satu kolom, ikon dan teks kecil */
#qmenu{position:fixed;z-index:25;background:var(--pn);color:var(--tx);border:1px solid var(--bd);border-radius:8px;padding:3px;width:min(158px,70vw);max-height:min(74vh,430px);overflow:auto;box-shadow:0 4px 14px rgba(0,0,0,.35)}
#qmenu .qrow{display:flex;align-items:center;gap:7px;width:100%;min-height:23px;padding:2px 7px;border:0;border-radius:4px;background:none;color:var(--tx);font-size:10px;text-align:left}
#qmenu .qrow:active{background:var(--bg)}#qmenu .qrow.dng{color:#d33}#qmenu .qrow svg{flex:0 0 auto;opacity:.85}
#qmenu .qsep{height:1px;background:var(--bd);margin:2px 4px}
/* halaman setting: bar kategori di kiri, isi di kanan */
.sbody{flex:1;display:flex;min-height:0}
#setnav{width:88px;flex:0 0 auto;background:var(--pn);border-right:1px solid var(--bd);overflow:auto;padding:4px}
#setnav .snav{display:flex;align-items:center;gap:6px;width:100%;min-height:30px;padding:4px 6px;border:0;border-radius:6px;background:none;color:var(--mu);font-size:10px;text-align:left}
#setnav .snav.on{background:var(--bg);color:var(--ac);box-shadow:inset 2px 0 var(--ac)}
#setpane{flex:1;min-width:0;overflow:auto;padding:4px 12px 20px}
#setpane h3{font-size:11px;font-weight:600;margin:10px 0 4px;color:var(--ac)}
.snum{width:76px;text-align:center}
.prow{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0}.prow>button,.prow>label{min-height:30px;padding:4px 10px;font-size:10px}
.qcbox{width:100%;box-sizing:border-box;height:150px;margin:4px 0;padding:6px;font:10px/1.4 ui-monospace,Menlo,Consolas,monospace;background:var(--pn);color:var(--tx);border:1px solid var(--bd);border-radius:6px;resize:vertical;-webkit-user-select:text;user-select:text}
.prog{height:4px;background:var(--bd);border-radius:2px;margin:8px 0 4px;overflow:hidden}.prog i{display:block;height:100%;width:0;background:var(--ac);transition:width .2s}
.logbox{max-height:170px;overflow:auto;padding:6px;border:1px solid var(--bd);border-radius:6px;background:var(--pn);font:10px/1.4 ui-monospace,Menlo,Consolas,monospace;-webkit-user-select:text;user-select:text}
.logbox .err{color:#d33}
#setpane .pri{margin-top:8px;min-height:32px;padding:4px 12px;font-size:11px}

/* undo/redo melayang di pojok kanan atas viewport (jauh dari bar durasi); transport diberi jarak ke slider */
#hist{position:absolute;top:6px;right:6px;z-index:4;display:flex;gap:4px}
#hist button{min-height:0;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:rgba(20,22,26,.65);color:#e4e6e9;display:flex;align-items:center;justify-content:center}
#toast{max-width:calc(100% - 150px)}
#tlbar{gap:7px;padding:4px 8px 2px}
.trow{gap:6px}.trow button{min-height:26px;padding:2px 10px}

/* dialog konfirmasi */
#dlg{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.dbox{background:var(--pn);color:var(--tx);border:1px solid var(--bd);border-radius:10px;padding:12px;width:min(260px,100%);box-shadow:0 8px 30px rgba(0,0,0,.4)}
.dt{font-size:12px;font-weight:600;margin-bottom:6px}.dm{font-size:10px;color:var(--mu);margin:6px 0}
.dimg{display:block;width:100%;border-radius:6px;border:1px solid var(--bd)}
.db{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.db button{min-height:30px;font-size:11px}

/* daftar turun di popover (Save / Import) memakai gaya baris menu cepat */
#pop .qrow{display:flex;align-items:center;gap:7px;width:100%;min-height:24px;padding:2px 6px;border:0;border-radius:4px;background:none;color:var(--tx);font-size:10px;text-align:left}
#pop .qrow:active{background:var(--bg)}#pop .qrow svg{flex:0 0 auto;opacity:.85}#pop .qrow.soon{opacity:.5}#pop .qrow small{margin-left:auto}
#pop .qsep{height:1px;background:var(--bd);margin:2px 4px}
/* bingkai game 4:3 untuk pratinjau FPS */
#fpsguide{position:absolute;z-index:1;border:1px dashed rgba(255,255,255,.45);pointer-events:none;box-sizing:border-box}

/* dialog: tinggi dibatasi dan bisa digulir; pratinjau tidak boleh mendorong tombol keluar layar */
.dbox{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto}
.dimg{max-height:32vh;max-height:32dvh;object-fit:contain;background:#000}

/* dialog opsi impor */
.do{display:flex;flex-direction:column;gap:7px;margin:8px 0}
.orow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px}.orow small{display:block;color:var(--mu);font-size:10px}
.orow.off{opacity:.5}.orow .sw{flex:0 0 auto}.orow .snum{width:64px}
/* Pos & Rot rest pose */
.pgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:4px 0}
.pf{display:flex;flex-direction:column;gap:1px;font-size:9px;color:var(--mu)}.pf input{width:100%;min-height:24px;padding:2px 4px;font-size:10px;box-sizing:border-box;text-align:center}

/* tombol ANIM di pojok kanan bawah (bar play bergeser ke kiri) */
#tlbar{flex-direction:column;gap:6px}
#tlrow{display:flex;align-items:stretch;gap:8px}
#tlmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
#am{flex:none;align-self:stretch;display:flex;align-items:center;justify-content:center;width:56px;min-height:0;padding:0;border:0;border-radius:6px;background:var(--mu);color:#fff;font-size:10px;font-weight:700;letter-spacing:.6px}
#am.on{background:var(--ac);color:#000}
#am.dis{opacity:.45}
/* baris daftar SMD / joint / texture: ukuran semula dikecilkan 10%; terpilih = isi oranye + teks hitam */
.row{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.panel .row{padding:5px 7px;border-radius:6px;font-size:10px;gap:8px}
.panel .row small{font-size:9px}
@media(hover:hover){.panel .row:hover{background:var(--bg)}}
.panel .row.sel,.panel .row.sel:hover{background:var(--ac);box-shadow:none;color:#000;font-weight:600}
.panel .row.sel .mu,.panel .row.sel small,.panel .row.sel .ix{color:rgba(0,0,0,.62)}
.row .ix{flex:none;width:16px;font-size:9px;color:var(--mu);font-variant-numeric:tabular-nums;text-align:right}
.sec{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:var(--mu);padding:8px 4px 4px}
.panel .row .dots{flex:none;margin:-2px -3px -2px 0;padding:2px 4px;color:inherit;border-radius:4px}
.panel .row.sel .dots{color:#000}
.panel .row.off .nm{opacity:.5}

/* dope sheet */
#dope{max-height:124px;overflow:auto;position:relative;border:1px solid var(--bd);border-radius:6px;background:var(--bg);--dc:14px;-webkit-overflow-scrolling:touch}
#dinner{position:relative;width:max-content;min-width:100%}
.dr{display:flex;height:18px}
.dr .dn{position:sticky;left:0;z-index:2;flex:none;width:84px;box-sizing:border-box;padding:0 4px;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--pn);border-right:1px solid var(--bd);border-bottom:1px solid var(--bd);font-size:9px}
.dr.sel .dn{background:var(--ac);color:#000;font-weight:600}
.dr .dt{position:relative;flex:none;width:calc(var(--n)*var(--dc));border-bottom:1px solid var(--bd);background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(5*var(--dc) - 1px),rgba(128,128,128,.22) calc(5*var(--dc) - 1px),rgba(128,128,128,.22) calc(5*var(--dc)))}
.dr.sel .dt{background-color:rgba(240,149,58,.12)}
.dr.hd{position:sticky;top:0;z-index:3;height:16px;background:var(--pn)}
.dr.hd .dt{touch-action:none;background-image:none}
.dr.hd .dt span{position:absolute;top:3px;font-size:8px;color:var(--mu);pointer-events:none}
.dk{position:absolute;top:0;width:var(--dc);height:18px;touch-action:none;cursor:grab}
.dk::after{content:'';position:absolute;left:3px;top:5px;width:8px;height:8px;transform:rotate(45deg);background:var(--mu);border-radius:1px}
.dr.sel .dk::after{background:var(--ac)}
.dk.drag{z-index:1}.dk.drag::after{outline:2px solid var(--tx)}
#dph{position:absolute;top:0;bottom:0;width:2px;background:var(--ac);opacity:.85;pointer-events:none;z-index:1}

/* ease di dope sheet: bentuk titik */
.dk.e-io::after{border-radius:50%;transform:none;left:3px;top:5px}
.dk.e-in::after{border-radius:8px 1px 1px 8px;transform:none}
.dk.e-out::after{border-radius:1px 8px 8px 1px;transform:none}
.dk.e-step::after{border-radius:0;transform:none}
/* slider sudut normal */
.fr input[type=range]{flex:1;min-width:0;min-height:0;padding:0;border:0;background:transparent;accent-color:var(--ac)}
#nangv{min-width:30px;text-align:right;font-size:10px;color:var(--mu)}
#meshgrp .fr{grid-template-columns:38px 1fr 32px}

/* input angka joint */
.nv{min-height:26px;padding:3px 4px;font-size:10px;min-width:0;width:100%}
#numgrp .tr3{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:4px}

#meshoff{padding:8px}
.g>button small{font-size:9px;line-height:1}

/* pengaturan seleksi */
.srange{flex:1;min-width:70px;min-height:0;padding:0;border:0;background:transparent;accent-color:var(--ac)}
.srow .srange+small{min-width:42px;text-align:right}
.scol{width:44px;height:26px;padding:0;border:1px solid var(--bd);border-radius:4px;background:none;min-height:0}
.sxprev{height:84px;margin-bottom:8px;border:1px solid var(--bd);border-radius:6px;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#8a6a4a 0 8px,#a98763 8px 16px)}
.sxbox{position:relative;width:120px;height:56px;box-sizing:border-box}
.sxbox i{position:absolute;display:block}
.sxbox i:nth-child(1){left:-3px;top:-3px}.sxbox i:nth-child(2){right:-3px;top:-3px}.sxbox i:nth-child(3){left:-3px;bottom:-3px}.sxbox i:nth-child(4){right:-3px;bottom:-3px}

/* urutan transport: PLAY STOP X2 [ruang 30%] < label > */
.tsp{flex:1;min-width:6px}.trow #flab{margin:0 0 0 4px;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
#fnum{min-width:60px;text-align:center;color:var(--mu);font-size:10px;white-space:nowrap}
/* panel opsi alat: muncul halus ke bawah */
.collapse{max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .28s ease,opacity .22s ease}
.collapse.open{max-height:380px;opacity:1;pointer-events:auto}
.cin{padding:3px 0}
.opt{display:grid;grid-template-columns:1fr 1.3fr;gap:6px;align-items:center;margin:3px 0;font-size:10px}
.opt select{min-height:26px;padding:2px 4px;font-size:10px;min-width:0}
.chk{display:flex;align-items:center;gap:6px;font-size:10px;margin:4px 0}.chk input{min-height:0;width:auto}
.collapse .tr3{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:3px 0}
.collapse input[type=number]{min-height:26px;padding:3px 4px;font-size:10px;min-width:0;width:100%}

.pinm{flex:none;display:flex;color:var(--ac)}.row.sel .pinm{color:#000}
#ikb.on{background:var(--ac);color:#000}

#refvid{position:absolute;z-index:1;object-fit:contain;pointer-events:none;background:transparent;opacity:.45}
#refvid[hidden]{display:none}

/* checklist berkolom (impor hasil decompile) */
.itab{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;max-height:52vh;overflow:auto;text-align:left}
.icol{min-width:0}
.ihd{font-weight:700;letter-spacing:.5px;padding-bottom:4px;margin-bottom:4px;border-bottom:1px solid var(--bd)}
.icol .chk{align-items:flex-start;line-height:1.3}
.icol .chk span{min-width:0;word-break:break-all}

/* New Project / menu daftar / checklist 4 kolom */
#p-smd,#p-joint{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#pop .qrow.dng{color:#d33}
.dbox.wide{width:min(560px,100%)}
.itab.c4{grid-template-columns:repeat(4,minmax(80px,1fr));overflow-x:auto}
.itab.c4 .chk{font-size:10px}
/* Waveform + Event di timeline */
#evt{position:relative;height:14px}#evt[hidden]{display:none}
.evm{position:absolute;bottom:0;width:18px;height:14px;min-height:0;padding:0;border:0;border-radius:0;background:none}
.evm::before{content:'';position:absolute;left:4px;top:0;width:9px;height:13px;background:#4aa3ff;clip-path:polygon(0 0,100% 28%,24% 56%,24% 100%,0 100%)}
#wv{display:block;width:100%;height:28px;pointer-events:none}#wv[hidden]{display:none}
/* editor Seq/QC */
.sqc{border:1px solid var(--bd);border-radius:8px;padding:7px;margin:6px 0;display:flex;flex-direction:column;gap:5px}
.sqin{width:100%;box-sizing:border-box;min-height:28px;padding:3px 6px;font-size:11px;background:var(--bg);color:var(--tx);border:1px solid var(--bd);border-radius:6px}
.sqin.sqn{width:72px;flex:none}
.sqrow{display:flex;gap:5px;align-items:center}.sqrow button{min-height:28px;padding:2px 9px;font-size:10px}
.sqtools{justify-content:flex-end}.sqtools button:first-child{margin-right:auto}
.sqtools button svg{display:block}
.sqwarn{font-size:9px;color:#d33}
.sqev{display:flex;flex-direction:column;gap:4px}
.erow{display:grid;grid-template-columns:46px 56px 1fr 28px;gap:4px}
.erow input{min-width:0;min-height:26px;padding:2px 4px;font-size:10px;box-sizing:border-box;background:var(--bg);color:var(--tx);border:1px solid var(--bd);border-radius:6px}
.erow button{min-height:26px;padding:0}

/* daftar texture: nama + info 2 baris, titik tiga di kanan */
.row.tx{align-items:center}.row.tx .tl{flex:1;min-width:0}.row.tx .tl small{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.tx .dots{flex:none;padding:2px 4px}
.panel .row.tx.off .nm{opacity:.6}

/* Menu tekan lama (SMD / joint / daftar): kompak, ukuran setara menu tekan lama di viewport; grid 2 kolom simetris */
#pop.wide{min-width:214px;max-width:min(244px,94vw)}
#pop .pinfo{word-break:break-word;line-height:1.35}
#pop .ptiles{display:grid;grid-template-columns:repeat(var(--c,2),1fr);gap:3px;margin-top:5px}
#pop .tile{display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:25px;padding:2px 7px;border:1px solid var(--bd);border-radius:6px;background:none;color:var(--tx);font-size:10px;line-height:1.15;text-align:left}
#pop .tile span{flex:1;min-width:0}
#pop .tile svg{flex:0 0 auto;opacity:.85}
#pop .tile:active{background:var(--bg)}
#pop .tile.dng{color:#d33}
#pop .tile.locked{opacity:.45;border-style:dashed}
#pop .qrow.dng{color:#d33}

/* HUD kustom */
.hud-off{display:none!important}
#htr{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:4px;background:rgba(20,22,26,.7);border-radius:8px;padding:3px 5px;color:#e4e6e9}
#htr button{min-height:0;width:28px;height:26px;padding:0;border:0;border-radius:6px;background:none;color:#e4e6e9;display:flex;align-items:center;justify-content:center}
#htr #hfl{font-size:10px;min-width:30px;text-align:center}
#vp.hud-edit .hud-off{display:flex!important;opacity:.35}
#vp.hud-edit #toast.hud-off{display:block!important}
#vp.hud-edit #toast{display:block!important}
#vp.hud-edit #toast:empty::before{content:'Notifikasi'}
#vp.hud-edit #hist,#vp.hud-edit #asidebtn,#vp.hud-edit #camtog,#vp.hud-edit #toast,#vp.hud-edit #htr{outline:1px dashed var(--ac);outline-offset:2px;touch-action:none;pointer-events:auto;cursor:move}
#vp.hud-edit .hud-sel{outline:2px solid var(--ac)!important}
#hudbar{position:fixed;left:50%;top:6px;transform:translateX(-50%);z-index:60;max-width:96vw;background:var(--pn);border:1px solid var(--bd);border-radius:10px;padding:5px 8px;display:flex;flex-direction:column;gap:5px;align-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3);font-size:10px}
#hudbar .hbtns{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
#hudbar button{min-height:26px;padding:2px 9px;font-size:10px}

/* Buat model: kanvas gambar + editor UV */
.ovl{position:fixed;inset:0;z-index:70;background:var(--bg);color:var(--tx);display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px;overflow:auto;padding-top:max(8px,env(safe-area-inset-top))}
.ovl canvas{border:1px solid var(--bd);border-radius:8px;flex:none;touch-action:none}
.ovbar{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:center;width:100%;font-size:10px}
.ovbar .sp{flex:1}
.ovbar button,.ovbar select{min-height:28px;padding:2px 8px;font-size:10px}
.ovbar button.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.ovbar label{display:flex;align-items:center;gap:4px}
.ovbar input{width:64px;min-height:26px;padding:2px 4px;font-size:10px;box-sizing:border-box;background:var(--bg);color:var(--tx);border:1px solid var(--bd);border-radius:6px}

/* preset bentuk: 2 baris, geser ke samping, 3 kolom terlihat */
.hscroll{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:calc((100% - 12px)/3.35);gap:4px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;scroll-snap-type:x proximity}
.hscroll button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;padding:3px 2px;font-size:9px;line-height:1.1;text-align:center;scroll-snap-align:start}
.hscroll button svg{flex:none}
/* tombol ikon pada editor UV / gambar */
.ovbar .ib{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:34px;padding:2px 7px}
.ovbar .ib svg{width:15px;height:15px;display:block}
.ovbar .ib b{font-size:9px;font-weight:600}
.ovbar .ib .rot{display:flex;transform:rotate(90deg)}
.ovbar .sep{width:1px;height:20px;background:var(--bd);margin:0 2px}
.ovbar .ib.pri{background:var(--ac);color:#fff;border-color:var(--ac)}

/* tab Buat: bentuk 2 baris x 3 kolom terlihat, geser kanan-kiri untuk sisanya; hanya ikon */
.mkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:3px;padding:3px 0 5px}
.mkgrid button{display:flex;align-items:center;justify-content:center;min-height:0;height:auto;aspect-ratio:1/1;padding:0;min-width:0}
.mkgrid button svg{width:16px;height:16px;flex:none}
#mkbody.open{max-height:420px}
.mkdim{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mkdim label{display:flex;flex-direction:column;gap:2px;font-size:10px;color:var(--mu);min-width:0}
.mkdim input{width:100%;min-height:30px}

/* dialog Tiru: ringkas */
.tr-f{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--mu);min-width:0}
.tr-f select,.tr-f input{width:100%;min-height:32px}
.tr-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tr-row2{display:grid;grid-template-columns:1.6fr 1fr;gap:6px}
.tr-row2e{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tr-chips{display:flex;flex-wrap:wrap;gap:5px}
.tr-chip{min-height:32px;padding:3px 11px;font-size:11px;border-radius:999px}
.tr-chip.on{background:var(--ac);color:#fff;border-color:var(--ac)}

/* editor Gambar (custom model): layar penuh, kanvas berskala */
.dw{position:fixed;inset:0;z-index:70;background:var(--bg);color:var(--tx);display:flex;flex-direction:column;gap:6px;padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))}
.dw-top{display:flex;align-items:center;gap:8px;font-size:13px}
.dw-top .sp,.dw-bar .sp{flex:1}
.dw-chip{font-size:10px;padding:3px 9px;border-radius:999px;background:var(--pn);border:1px solid var(--bd);color:var(--mu);white-space:nowrap}
.dw-chip.bad{color:#fff;background:#d33;border-color:#d33}
.dw-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--bd);border-radius:8px;overflow:hidden;background:var(--pn)}
.seg button{border:0;border-radius:0;background:none;min-height:34px;padding:4px 10px;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:11px}
.seg button+button{border-left:1px solid var(--bd)}
.seg button.on{background:var(--ac);color:#fff}
.seg button i{display:flex}
.seg6{display:grid;grid-template-columns:repeat(6,1fr)}.seg6 button{padding:4px 1px;font-size:10px}
.dw-cvw{position:relative;flex:1;min-height:0;border:1px solid var(--bd);border-radius:10px;overflow:hidden;background:#181b20}
.dw-cvw canvas{position:absolute;inset:0;display:block;touch-action:none}
.dw-hint{position:absolute;left:8px;top:8px;pointer-events:none;font-size:10px;color:#cfd5df;background:rgba(0,0,0,.5);padding:3px 8px;border-radius:6px;max-width:calc(100% - 16px)}
.dw-opts label{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--mu)}
.dw-opts input{width:54px;min-height:32px;padding:2px 6px}.dw-opts select{min-height:32px;padding:2px 6px}
.dw-opts button{min-height:32px;font-size:10px}
.dw .ib{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:36px;min-height:34px;padding:2px 9px}
.dw .ib b{font-size:11px;font-weight:600}
.dw .ib.pri{background:var(--ac);color:#fff;border-color:var(--ac)}
.dw .dw-bar>button{min-height:34px}

/* mode garis di viewport: overlay 2D + dock timeline */
#drawcv{position:absolute;left:0;top:0;pointer-events:none;z-index:2;display:none}
#drawdock{position:absolute;left:0;right:0;bottom:0;z-index:6;background:var(--pn);border-top:1px solid var(--bd);color:var(--tx);font-size:11px;box-shadow:0 -4px 14px rgba(0,0,0,.25)}
.dd-h{display:flex;align-items:center;gap:5px;padding:5px 6px;flex-wrap:nowrap}
.dd-h .sp,.dd-f .sp{flex:1}
.dd-j{font-size:11px;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mu);font-weight:600}
#drawdock .ib{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:32px;min-height:32px;padding:2px 7px}
#drawdock .ib b{font-size:11px;font-weight:600}
#drawdock .ib.pri{background:var(--ac);color:#fff;border-color:var(--ac)}
#drawdock .ib.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.dd-chip{min-height:30px;padding:2px 10px;font-size:11px;border-radius:999px;white-space:nowrap}
.dd-chip.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.dd-body{padding:0 6px 6px;display:flex;flex-direction:column;gap:5px}
#drawdock.col .dd-body{display:none}
.dd-tlw{display:flex;gap:4px}
.dd-tll{width:56px;flex:none;display:flex;flex-direction:column;gap:6px;padding-top:16px}
.dd-tll button{min-height:26px;padding:0 2px;font-size:10px}
.dd-tl{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;height:74px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);position:relative;touch-action:pan-x}
.dd-tli{position:relative;height:100%}
.dd-tk{position:absolute;top:12px;bottom:0;width:1px;background:var(--bd);opacity:.5}
.dd-tk.maj{opacity:.9;top:0}
.dd-tk em{position:absolute;top:1px;left:3px;font-style:normal;font-size:9px;color:var(--mu)}
.dd-bar{position:absolute;height:24px;border-radius:6px;display:flex;align-items:center;padding:0 6px;font-size:10px;color:#fff;white-space:nowrap;overflow:hidden;touch-action:none;cursor:grab}
.dd-bar.mv{background:#c9741f}.dd-bar.rot{background:#3a7bd5}
.dd-bar.sel{outline:2px solid #fff;outline-offset:1px}
.dd-bar u{position:absolute;right:0;top:0;bottom:0;width:14px;background:rgba(255,255,255,.28);cursor:ew-resize}
.dd-ph{position:absolute;top:0;bottom:0;width:2px;background:#4aa3ff;pointer-events:none;z-index:2}
.dd-act{min-height:40px}
.dd-hint{display:flex;align-items:center;min-height:36px;font-size:11px;color:var(--mu)}
.dd-g{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.dd-f1{display:flex;flex-direction:column;gap:2px;font-size:9px;color:var(--mu);min-width:0}
.dd-f1 span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-f1 input,.dd-f1 select{width:100%;min-height:28px;padding:1px 4px;font-size:11px}
.dd-inf{font-size:10px;color:var(--mu);align-self:end;padding-bottom:8px;text-align:center}
.dd-del{align-self:end;justify-self:end}
.dd-opts{border-top:1px dashed var(--bd);padding-top:5px}
.dd-f{display:flex;align-items:center;gap:8px}
.dd-f>button:first-child{min-height:32px;padding:2px 12px}
.dd-tm{font-size:10px;color:var(--mu)}
.dd-lay{border-top:1px dashed var(--bd);padding-top:5px;display:flex;flex-direction:column;gap:4px}
.dd-gl{grid-template-columns:1.3fr 1fr 1fr}
.dd-nudge{grid-column:1/-1;display:flex;gap:5px}
.dd-nudge button{flex:1;min-height:28px;padding:0 4px;font-size:11px}
.dd-linf{font-size:10px;color:var(--mu);line-height:1.35}
#dlayer{position:absolute;bottom:0;height:7px;border-radius:4px;background:rgba(74,163,255,.6);border:1px solid #4aa3ff;pointer-events:none;z-index:3}
#tirubar{position:absolute;left:8px;right:8px;top:8px;z-index:7;background:var(--pn);border:1px solid var(--bd);border-radius:10px;padding:6px 8px;box-shadow:0 4px 14px rgba(0,0,0,.3);font-size:11px}
.tb-r{display:flex;align-items:center;gap:6px}
.tb-r select{flex:1;min-width:0;min-height:30px;padding:2px 6px}
.tb-l{color:var(--mu);font-size:10px}
#tirubar .ib{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:30px;padding:2px 6px}
.tb-h{margin-top:4px;color:var(--mu);font-size:10px;line-height:1.35}
.at-map{max-height:34vh;overflow-y:auto;border:1px solid var(--bd);border-radius:8px;padding:4px;display:flex;flex-direction:column;gap:3px;background:var(--bg)}

/* dialog alat cepat: grid kolom sama lebar, kontrol setinggi sama, tombol simetris */
.at-sec{border:1px solid var(--bd);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:7px}
.at-sec>h5{margin:0;font-size:10px;font-weight:600;color:var(--mu);text-transform:uppercase;letter-spacing:.04em}
.at-g{display:grid;grid-template-columns:repeat(var(--c,2),minmax(0,1fr));gap:6px;align-items:end}
.at-f{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--mu);min-width:0}
.at-f>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:12px}
.at-f select,.at-f input{width:100%;min-height:34px;box-sizing:border-box}
.at-b{min-height:34px;padding:0 6px;font-size:11px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.at-b.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.at-info{font-size:10px;color:var(--mu);line-height:1.4;word-break:break-word}
.at-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:center;font-size:11px}
.at-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:30px}
.at-row select{min-height:30px;padding:1px 6px;font-size:11px;width:100%;min-width:0}
.at-row{border-left:3px solid transparent;padding-left:5px}
.at-row.c3{border-left-color:#44cc77}.at-row.c2{border-left-color:#e6c14a}.at-row.c1{border-left-color:#f0953a}.at-row.c0{border-left-color:var(--bd)}
.at-top{display:flex;align-items:center;gap:8px}
.at-top .at-info{flex:1;min-width:0}
.at-sm{flex:none;width:64px}
.at-slot{display:flex;flex-direction:column;min-width:0}
.at-slot>.at-f{width:100%}
.at-g .at-b{padding:0 3px;font-size:10.5px}

/* Set key di bar Anim: ikon + label kecil seperti tombol transport */
.trow .kb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;flex:none;min-width:34px}
.trow .kb small{font-size:7px;line-height:1}
#sk2.dim{opacity:.5}

/* Efek: kepala lipat, dropdown, color picker sendiri */
.fxhead,.fxdd{display:flex;align-items:center;justify-content:space-between;width:100%;gap:6px;text-align:left}
.fxhead{font-size:10px;color:var(--mu);background:none;border:0;padding:2px 0;min-height:22px}
.fxhead svg,.fxdd svg{transition:transform .2s;flex:none}.fxhead.open svg,.fxdd.open svg{transform:rotate(180deg)}
.fxhead.open{color:var(--ac)}
#fxbody.open{max-height:900px}#fxanimlist.open{max-height:260px}#fxpick.open{max-height:260px}
.fxtypes{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:4px}
.fxt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px;font-size:10px}
.fxt.on{background:var(--ac);color:#fff;border-color:var(--ac)}
#fxanimlist{margin-top:3px}
.fxo{display:block;width:100%;text-align:left;margin-bottom:3px;padding:4px 7px;min-height:0;line-height:1.25}
.fxo b{display:block;font-weight:600;font-size:10px}.fxo small{display:block;font-size:9px;color:var(--mu)}
.fxo.on{border-color:var(--ac);box-shadow:inset 3px 0 var(--ac)}
.fxsp button{padding:3px 0;font-size:10px;min-height:26px}.fxsp button.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.fxsws{display:flex;align-items:center;gap:6px;font-size:10px}.fxsws i{width:16px;height:16px;border-radius:4px;border:1px solid var(--bd);display:block}
.fxpk{padding:5px 0 2px}
.fxsv,.fxhue,#fxhuew{position:relative;touch-action:none;border-radius:6px;overflow:visible}
.fxsv canvas{display:block;width:100%;height:84px;border-radius:6px;border:1px solid var(--bd)}
#fxhuew{margin:7px 0 6px}#fxhuew canvas{display:block;width:100%;height:12px;border-radius:6px;border:1px solid var(--bd)}
#fxsvk,#fxhuk{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.5);pointer-events:none}
#fxhuk{top:50%}
.fxhex{width:100%;box-sizing:border-box;min-height:26px;padding:3px 6px;font:11px ui-monospace,Menlo,Consolas,monospace;background:var(--bg);color:var(--tx);border:1px solid var(--bd);border-radius:6px;text-transform:uppercase}
.fxswl{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:6px}
.fxswl button{min-height:0;height:20px;padding:0;border-radius:5px}
.fxmk{width:100%;margin-top:6px}
.vis-lbl{font-size:9px;color:var(--mu);opacity:.55;padding:3px 7px 1px;letter-spacing:.2px}

.panel .row{touch-action:manipulation}

.row.fold{font-weight:600}.row.fold .nm{flex:1}


/* dialog isi i3Pack */
.dbox.i3p{width:min(760px,100%);padding:14px;display:flex;flex-direction:column;gap:10px}
.dbox.i3p .dt{font-size:13px;font-weight:700;text-align:center;word-break:break-all}
.dbox.i3p .dm{text-align:center;font-size:11px;opacity:.65;margin:0}
.dbox.i3p .do{display:flex;flex-direction:column;gap:8px;min-height:0}
.dbox.i3p{width:min(760px,100%)}
.i3p-tools{display:grid;gap:4px;margin-bottom:6px}.i3p-tools button{min-height:26px;font-size:10px}
.i3p-list{display:flex;flex-direction:column;gap:2px;max-height:min(46vh,340px);overflow:auto}
.i3p-gh,.i3p-ph{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--mu);padding:6px 2px 2px}
.i3p-gh span:first-child{flex:1}.i3p-ph{color:var(--tx);font-weight:600;font-size:11px;border-top:1px solid var(--bd);margin-top:4px;padding-top:8px}
.i3p-ph span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.i3p-ph small{color:var(--mu);font-weight:400}.i3p-ph .sw{flex:0 0 auto}
.i3p-row{padding:4px 2px;cursor:pointer;min-height:34px}.i3p-row.off .i3p-nm,.i3p-row.off .i3p-tx{opacity:.5}
.i3p-ic{flex:0 0 auto;display:flex;align-items:center;color:var(--mu)}
.i3p-tx{flex:1;min-width:0}.i3p-tx>div{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.i3p-tx small{display:block;font-size:9px;color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.i3p-row .sw{flex:0 0 auto}
.i3p-info{text-align:center;font-size:10px;color:var(--mu);margin:6px 0 2px}
.i3p-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:110px}.i3p-seg button{min-height:24px;font-size:10px}.i3p-seg button.on{background:var(--ac);color:#000}
.db.i3p-btns{grid-template-columns:1fr 1fr 1fr}.db.i3p-btns .pri{background:var(--ac);color:#000}.db.i3p-btns button:disabled{opacity:.4}

.i3p-tools button{display:flex;align-items:center;justify-content:center;gap:4px}.i3p-tools .ck{display:none;width:12px;height:12px;border-radius:3px;background:var(--ac);color:#000;align-items:center;justify-content:center}.i3p-tools button.on .ck{display:inline-flex}.i3p-tools button.on{border-color:var(--ac)}.i3p-tools button:disabled{opacity:.35}

.i3p-chips{display:flex;flex-wrap:wrap;gap:5px;padding:2px 0 4px}
.i3p-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:30px;padding:4px 9px 4px 6px;border:1px solid var(--bd);border-radius:7px;background:var(--bg2,transparent);font-size:11px;cursor:pointer;color:var(--tx)}
.i3p-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.i3p-chip .cb{flex:0 0 auto;width:15px;height:15px;border-radius:4px;border:1.5px solid var(--bd);display:flex;align-items:center;justify-content:center;color:transparent}
.i3p-chip .cb.on{background:var(--ac);border-color:var(--ac);color:#000}
.i3p-chip.off{opacity:.55}
.i3p-chip.miss{cursor:default;border-style:dashed;color:var(--mu)}.i3p-chip.miss small{font-size:9px;color:var(--mu)}
.i3p-gh.warn{color:var(--ac)}

.i3p-cols{display:flex;gap:8px;overflow-x:auto;align-items:flex-start;padding-bottom:4px}
.i3p-col{flex:1 0 136px;min-width:136px;border:1px solid var(--bd);border-radius:8px;overflow:hidden}
.i3p-ch{display:flex;align-items:center;gap:6px;padding:6px 8px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--bg2,rgba(127,127,127,.08));border-bottom:1px solid var(--bd)}
.i3p-ch span:first-child{flex:1}.i3p-ch small{font-weight:400;color:var(--mu)}
.i3p-ch .cb{cursor:pointer}
.i3p-cb{display:flex;flex-direction:column}
.i3p-item{display:flex;align-items:flex-start;gap:6px;padding:6px 8px;text-align:left;border:0;border-bottom:1px solid var(--bd);background:none;color:var(--tx);cursor:pointer;font-size:11px;width:100%}
.i3p-item:last-child{border-bottom:0}.i3p-item.off{opacity:.5}
.i3p-item .tx{display:flex;flex-direction:column;min-width:0;flex:1}.i3p-item .nm{overflow-wrap:anywhere}.i3p-item small{font-size:9px;color:var(--mu);overflow-wrap:anywhere}
.i3p-item .cb,.i3p-ch .cb{flex:0 0 auto;width:15px;height:15px;border-radius:4px;border:1.5px solid var(--bd);display:flex;align-items:center;justify-content:center;color:transparent;margin-top:1px}
.i3p-item .cb.on,.i3p-ch .cb.on{background:var(--ac);border-color:var(--ac);color:#000}
.i3p-item.miss{cursor:default;flex-direction:column;gap:2px}.i3p-col.miss .i3p-ch{color:var(--ac)}
.i3p .i3p-list{max-height:min(52vh,420px);overflow:auto}
.dlg.i3p,.i3p{max-width:min(96vw,720px)}
.i3p-col.miss{flex:1.4 0 200px;min-width:200px}.i3p-item.miss{min-width:0;width:100%}.i3p-item.miss small{word-break:break-all;overflow-wrap:anywhere}
.i3p-ch{min-height:32px;box-sizing:border-box}
.i3p-col{flex:1 0 118px;min-width:118px}.i3p-col.miss{flex:1.6 0 170px;min-width:170px}
/* v33: dialog daftar berkas lebih lebar, teks kecil, tanpa kotak pembungkus kolom */
#dlg:has(.dbox.i3p){padding:6px}
.dbox.i3p{width:min(1100px,100%);padding:10px 12px;gap:6px}
.dbox.i3p .do{gap:4px}
.i3p-cols{gap:14px;padding-bottom:2px}
.i3p-col{flex:1 0 96px;min-width:96px;border:0;border-radius:0;overflow:visible}
.i3p-col.miss{flex:1.8 0 160px;min-width:160px}
.i3p-ch{padding:2px 2px 4px;min-height:0;font-size:9px;gap:5px;background:none;border-bottom:1px solid var(--bd)}
.i3p-ch .cb{width:12px;height:12px;border-radius:3px;margin:0}
.i3p-item{padding:3px 2px;gap:5px;border-bottom:0;font-size:10px;line-height:1.25}
.i3p-item small{font-size:8px}
.i3p-item .cb{width:12px;height:12px;border-radius:3px;margin-top:0}
.i3p-item:hover{background:rgba(127,127,127,.08)}
.i3p-item.miss{gap:1px;padding:3px 2px 5px}
.i3p .i3p-list{max-height:min(58vh,460px)}
.dbox.i3p .dt{font-size:12px}.dbox.i3p .dm{font-size:10px}.i3p-info{font-size:9px;margin:2px 0}
.dbox.i3p .do .orow{min-height:0}
.i3p-cols{gap:10px}.i3p-col{flex:1 0 78px;min-width:78px}.i3p-col.miss{flex:1.8 0 130px;min-width:130px}
.i3p-item{font-size:9.5px}.i3p-ch{font-size:8.5px}.i3p-item .nm{overflow-wrap:anywhere;word-break:break-all}
.i3p-ch small{display:none}
/* tombol bawah dialog daftar berkas */
.dbox.i3p .db{gap:6px}
.db.i3p-btns button{min-height:24px;padding:0 6px;font-size:9.5px;border-radius:7px}
.dbox.i3p .do>.orow{min-height:0;padding:0;font-size:10px;gap:6px}
.i3p-seg{width:88px;gap:3px}.i3p-seg button{min-height:22px;font-size:9px;border-radius:6px;padding:0}