/* Tool Rail: one narrow tool column plus the original 3D controls. */
#sd-h-aux.tr-panel .sd-panel-title{gap:9px}
#sd-h-aux .tr-logo{width:28px;height:28px;object-fit:contain;flex:none}
#sd-h-aux .tr-brand{display:flex;flex-direction:column;gap:3px;min-width:0}
#sd-h-aux .tr-brand small{font-size:8px;font-weight:400;letter-spacing:1.4px;text-transform:uppercase;color:#bd93dc}
#sd-h-aux .tr-brand>span{font-size:12px}
#sd-h-aux .tr-rail,#sd-h-aux .tr-tool-heading,#sd-h-aux .tr-empty{display:none}
#sd-h-aux .tr-workspace{min-width:0;width:100%}
#sd-h-aux .tr-main{min-width:0;display:flex;flex-direction:column;gap:12px}
#sd-h-aux .tr-sims:empty{display:none}
#sd-h-aux[data-aux-view="camera"] .tr-sims{display:none!important}
#sd-h-aux .tr-footer{display:none}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"]{width:330px;max-width:350px}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"]>.sd-content{padding:0;gap:0;overflow:hidden}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-workspace{display:grid;grid-template-columns:47px minmax(0,1fr);min-height:0;flex:1;overflow:hidden}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-rail{display:flex;flex-direction:column;gap:3px;padding:6px 4px;align-self:stretch;background:#2a1c35;border-right:1px solid #65427c66;overflow-y:auto;scrollbar-width:thin}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-rail button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;min-height:40px;padding:4px 1px;border:1px solid transparent;border-radius:7px;background:none;box-shadow:none;color:#a68bb9;font-size:9px;flex:none}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-rail button span{font-size:9px;line-height:1.2;white-space:nowrap}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-rail button svg{width:17px;height:17px}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-rail button:hover{color:#f0dcff;background:#8555a324}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-rail button.on{color:#e6c9ff;background:#513361;border-color:#bd8ce45c}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-main{padding:14px 12px;overflow-y:auto;min-height:0;gap:13px;scrollbar-width:thin;overscroll-behavior:contain}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-camera,
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-sims{display:none}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-tool-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
#sd-h-aux .tr-tool-heading h3{margin:0;font-size:14px;font-weight:550;color:#ead9f7}
#sd-h-aux .tr-shortcut{color:#a78bbb;font-size:9px;white-space:nowrap}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-empty:not([hidden]){display:block}
#sd-h-aux .tr-empty{margin:0;font-size:11px;color:#b49ac5;line-height:1.8}
#sd-h-aux .tr-main #h-opts{padding:0;margin:0;border:0;gap:12px;flex:none}
#sd-h-aux #h-opts[hidden]{display:none!important}
#sd-h-aux #h-tat-body{gap:0;flex:none}
#sd-h-aux #h-tat-body[hidden],#sd-h-aux #h-tat-fitbox[hidden]{display:none!important}
#sd-h-aux .tr-common{border-top:1px solid #75508c55;padding-top:11px}
#sd-h-aux .tr-common summary{display:flex;align-items:center;gap:8px;list-style:none;font-size:9px;letter-spacing:1.1px;text-transform:uppercase;color:#ad8fc3;cursor:pointer;min-height:25px}
#sd-h-aux .tr-common summary::-webkit-details-marker{display:none}
#sd-h-aux .tr-common summary::after{content:'+';font-size:15px;margin-left:auto}
#sd-h-aux .tr-common[open] summary::after{content:'−'}
#sd-h-aux .tr-common #h-tat-fit{margin:10px 0 0;gap:13px}
#sd-h-aux .tr-main .sims-fit{display:flex;flex-direction:column;gap:12px;margin:0;min-width:0}
#sd-h-aux .tr-main .sims-fit[hidden]{display:none!important}
#sd-h-aux .tr-main label:not(.sims-flip){display:flex;flex-wrap:wrap;align-items:center;width:100%;min-width:0;gap:6px;font-size:10px;color:#b9a0cb}
#sd-h-aux .tr-main label input[type="range"]{order:3;flex:0 0 100%;width:100%;min-width:0;margin:0;accent-color:#bc91e8}
#sd-h-aux .tr-main label output{margin-left:auto;font-size:10px;color:#eddef8;white-space:nowrap}
#sd-h-aux .tr-main .sims-flip{display:flex;align-items:flex-start;gap:7px;font-size:10px;line-height:1.7;color:#c6b0d5;min-width:0}
#sd-h-aux .tr-main .sims-flip input{flex:none;margin-top:3px;accent-color:#bc91e8}
#sd-h-aux .tr-main .tat-note{font-size:10px;line-height:1.8;color:#ac92bf}
#sd-h-aux .tr-main .tat-keys{display:none}
#sd-h-aux .tr-help{min-width:0}
#sd-h-aux .tr-help summary{font-size:10px;color:#ae8cc5;cursor:pointer;min-height:23px;padding:3px 0}
#sd-h-aux .tr-help .tat-note{display:block;background:none;border:0;padding:8px 0 0;margin:0;border-radius:0}
#sd-h-aux .tr-main .tat-modes{display:flex;flex-wrap:nowrap;width:100%;min-width:0;gap:3px;padding:4px;background:#180f22;border:1px solid #78568a38;border-radius:7px}
#sd-h-aux .tr-main .tat-modes button{flex:1;min-width:0;padding:8px 3px;border:0;border-radius:4px;font-size:10px}
#sd-h-aux .tr-main .tat-modes button.on{background:#503260;color:#e5c8fc;box-shadow:none}
#sd-h-aux .tr-main .sims-fit-btns{display:flex;flex-direction:column;gap:7px;min-width:0}
#sd-h-aux .tr-main .btn{min-width:0;width:100%;padding:10px 7px;min-height:35px;font-size:10px;line-height:1.5;text-align:center;border-radius:7px;white-space:normal}
#sd-h-aux .tr-main .tat-stamp{display:flex;flex-wrap:wrap;gap:8px;width:100%;min-width:0}
#sd-h-aux .tr-main #h-brush-stamp-name{font-size:10px;overflow-wrap:anywhere;max-width:100%}
#sd-h-aux .tr-main .opt-colour{flex-direction:row;justify-content:space-between}
#sd-h-aux .tr-main .opt-colour::before{content:'Warna kuas'}
#sd-h-aux .tr-main .opt-colour input{width:45px;height:28px}
#sd-h-aux .tr-main .tat-stencil-fit{display:flex;flex-direction:column;gap:12px;min-width:0}
#sd-h-aux .tr-main .tat-stencil-fit[hidden]{display:none!important}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"]>.tr-footer{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid #75508c55;background:#2a1c35;flex:none;min-height:49px}
#sd-h-aux .tr-footer .tat-sym{display:flex;align-items:center;justify-content:flex-start;gap:7px;width:auto;flex:1;padding:7px 8px;border-radius:6px;font-size:10px}
#sd-h-aux .tr-footer .tr-sym-hint{font-size:9px;color:#aa8fbd;white-space:nowrap}
#sd-h-aux :is(button,input,summary):focus-visible{outline:2px solid #c798ed;outline-offset:2px}
@media(min-width:761px){
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"]{top:16px;max-height:calc(100% - 132px)}
}
@media(max-width:760px){
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"]{max-width:none;max-height:58%}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-workspace{grid-template-columns:47px minmax(0,1fr)}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-main{padding:12px}
body[data-page="tattoo"] #sd-h-aux[data-aux-view="tools"] .tr-rail button{min-height:44px;padding:6px 1px}
#sd-h-aux .tr-main .tat-modes button{min-height:36px;font-size:11px}
#sd-h-aux .tr-main label input[type="range"]{min-height:24px}
}