: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%;min-height:34px;padding:3px 2px;font-size:10px}
.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}
.tabs button{flex:1;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)}
.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{background:var(--ac);color:#fff;border-color:var(--ac);animation:pulse .45s}#sk.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}