[hidden]{display:none!important}
@font-face{font-family:"Montserrat SF";src:url(/fonts/montserrat.woff) format("woff");font-weight:100 900;font-display:swap}
@font-face{font-family:"Cinzel";src:url(/fonts/cinzel.woff) format("woff");font-weight:400 900;font-display:swap}
@font-face{font-family:"Pinyon Script";src:url(/fonts/pinyon.woff) format("woff");font-display:swap}
:root{--bk:#0B0B0C;--c1:#141112;--c2:#1C1916;--c3:#26211C;--wh:#fff;--off:#F4F1EC;--mut:#B9AFA4;--g1:#F6DFA6;--g2:#EBC77F;--g3:#D9AE5F;--g4:#C9944A;--cu:#B87333;
--line:rgba(217,174,95,.30);--gold:linear-gradient(135deg,#F6DFA6 0%,#D9AE5F 25%,#B87333 55%,#EBC77F 80%,#C9944A 100%);--sideW:400px;--safeB:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bk);color:var(--off);font-family:"Montserrat SF",Montserrat,system-ui,sans-serif;font-size:17px;overscroll-behavior:none}
body{position:fixed;inset:0;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:var(--off)}
#app{display:flex;flex-direction:column;height:100%}
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 6px) 10px 6px;background:var(--c1);border-bottom:1px solid var(--line);flex:0 0 auto}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand img{width:36px;height:36px}
.brand b{display:block;font-family:Cinzel,serif;font-size:18px;letter-spacing:.06em;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.brand small{display:block;font-size:10px;letter-spacing:.3em;color:var(--mut);text-transform:uppercase;white-space:nowrap}
.topbtns{display:flex;align-items:center;gap:2px}
.ib{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;height:52px;border-radius:12px;padding:2px 4px;color:var(--off)}
.ib svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ib span{font-size:10.5px;margin-top:2px;color:var(--mut)}
.ib:active,.ib.on{background:var(--c3);color:var(--g2)}
.ib:disabled{opacity:.35}
.gold{background:var(--gold);color:#1a1208;font-weight:700;border-radius:14px;padding:0 18px;height:48px;font-size:17px;box-shadow:0 2px 12px rgba(201,148,74,.35)}
.gold.big{height:58px;font-size:19px;padding:0 30px;border-radius:16px}
.ghost{border:1px solid var(--line);border-radius:14px;height:50px;padding:0 18px;color:var(--g2);background:transparent}
.main{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.stagewrap{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#060606 radial-gradient(circle at 50% 40%,#17130f 0,#060606 70%);touch-action:none}
#stage{position:absolute;left:0;top:0;transform-origin:0 0;image-rendering:auto;box-shadow:0 6px 40px rgba(0,0,0,.6)}
.side{flex:0 0 auto;display:flex;flex-direction:column;background:var(--c1);border-top:1px solid var(--line);padding-bottom:var(--safeB);height:44vh;height:44dvh}
#tabs{display:flex;gap:4px;overflow-x:auto;padding:6px 6px;scrollbar-width:none;flex:0 0 auto;order:3;border-top:1px solid rgba(255,255,255,.05)}
#tabs::-webkit-scrollbar{display:none}
#tabs button{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:70px;padding:6px 6px;border-radius:12px;color:var(--mut);font-size:12.5px}
#tabs button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#tabs button.on{color:var(--g1);background:var(--c3)}
#panel{flex:1 1 auto;overflow-y:auto;padding:10px 14px 14px;order:2;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;min-height:120px}
#strip{display:flex;gap:6px;overflow-x:auto;padding:6px 8px;order:1;border-bottom:1px solid rgba(255,255,255,.05);flex:0 0 auto}
#strip button{flex:0 0 auto;width:54px;height:54px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:#000;position:relative}
#strip button.on{border-color:var(--g3)}
#strip img{width:100%;height:100%;object-fit:cover;display:block}
#strip .add{border:1px dashed var(--line);color:var(--g2);font-size:28px}
h3{font-family:Cinzel,serif;font-weight:600;font-size:15px;letter-spacing:.12em;color:var(--g2);margin:14px 0 8px;text-transform:uppercase}
h3:first-child{margin-top:2px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.row.nowrap{flex-wrap:nowrap}
.sl{margin:4px 0 10px}
.sl .hd{display:flex;justify-content:space-between;align-items:center;font-size:16px;margin-bottom:2px}
.sl .hd label{color:var(--off)}
.sl .hd input{width:66px;text-align:center;background:var(--c3);border:1px solid transparent;border-radius:8px;padding:5px 4px;font-size:15px;color:var(--g1);-webkit-user-select:text;user-select:text}
.sl .hd input:focus{outline:none;border-color:var(--g3)}
.sl .ln{display:flex;align-items:center;gap:6px}
.sl .ln button{width:40px;height:40px;border-radius:10px;background:var(--c2);color:var(--g2);font-size:22px;flex:0 0 auto;line-height:1}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:40px;background:transparent;margin:0;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(90deg,var(--trk1,#3a332c),var(--trk2,#3a332c))}
input[type=range]::-moz-range-track{height:6px;border-radius:4px;background:linear-gradient(90deg,var(--trk1,#3a332c),var(--trk2,#3a332c))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--gold);margin-top:-12px;box-shadow:0 1px 6px rgba(0,0,0,.6);border:2px solid #1a1208}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--g2);border:2px solid #1a1208}
.sl.changed .hd label{color:var(--g1)}
.sl.changed .hd label::after{content:" •";color:var(--g3)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:46px;padding:0 15px;border-radius:12px;background:var(--c2);border:1px solid rgba(255,255,255,.07);font-size:15.5px;color:var(--off)}
.chip.on{background:var(--c3);border-color:var(--g3);color:var(--g1)}
.chip.sm{min-height:40px;padding:0 12px;font-size:14.5px}
.btn{min-height:50px;padding:0 18px;border-radius:14px;background:var(--c2);border:1px solid var(--line);color:var(--g1);font-size:16px}
.btn.full{width:100%}
.btn:disabled{opacity:.4}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.pre{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px;border-radius:12px;background:var(--c2);border:2px solid transparent;font-size:13px;color:var(--off)}
.pre.on{border-color:var(--g3);color:var(--g1)}
.pre img,.pre canvas{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block;background:#222}
.pre .x{position:absolute}
.sw{width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.18);flex:0 0 auto}
.sw.on{border-color:var(--g1);box-shadow:0 0 0 2px var(--bk) inset}
input[type=color]{width:46px;height:46px;border:0;border-radius:50%;padding:0;background:none}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:2px solid var(--g3);border-radius:50%}
select,input[type=text],input[type=number],textarea{background:var(--c2);border:1px solid var(--line);border-radius:12px;min-height:48px;padding:8px 12px;font-size:16px;width:100%;-webkit-user-select:text;user-select:text}
textarea{min-height:70px;resize:vertical}
.hint{color:var(--mut);font-size:14px;line-height:1.45;margin:6px 0}
.hint b{color:var(--g2)}
.curve{width:100%;aspect-ratio:1;max-width:360px;display:block;margin:4px auto;background:#0e0c0b;border-radius:12px;border:1px solid var(--line);touch-action:none}
#hist{width:100%;height:70px;display:block;border-radius:10px;background:#0e0c0b;margin-bottom:6px}
.pos9{display:grid;grid-template-columns:repeat(3,46px);gap:6px}
.pos9 button{height:40px;border-radius:8px;background:var(--c2);border:1px solid rgba(255,255,255,.08)}
.pos9 button.on{border-color:var(--g3);background:var(--c3)}
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.logos button{aspect-ratio:1;border-radius:10px;background:repeating-conic-gradient(#2a2622 0 25%,#1b1815 0 50%) 0 0/16px 16px;border:2px solid transparent;padding:6px}
.logos button.on{border-color:var(--g3)}
.logos img{width:100%;height:100%;object-fit:contain}
#empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;gap:12px}
#empty img{width:120px;height:auto}
#empty h1{font-family:Cinzel,serif;font-weight:600;letter-spacing:.08em;margin:0;font-size:26px;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
#empty p{margin:0;color:var(--off);font-size:17px;line-height:1.5}#empty small{color:var(--mut);font-size:14px}
#busy{position:absolute;inset:0;background:rgba(6,6,6,.78);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:20;padding:20px;text-align:center}
#busy p{margin:0;font-size:17px;max-width:320px}
.bar{width:240px;height:8px;border-radius:5px;background:#2a2622;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}
.spin{width:44px;height:44px;border-radius:50%;border:4px solid #3a322a;border-top-color:var(--g2);animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.zoombar{position:absolute;right:8px;top:8px;display:flex;gap:4px;align-items:center;background:rgba(20,17,18,.85);border:1px solid var(--line);border-radius:12px;padding:3px;z-index:5}
.zoombar button{min-width:36px;height:34px;border-radius:9px;font-size:20px;color:var(--g2)}
.zoombar #zFit{font-size:13.5px;padding:0 8px}
.zoombar span{font-size:13px;min-width:46px;text-align:center;color:var(--mut)}
#cmpLine{position:absolute;top:0;bottom:0;width:0;z-index:4;pointer-events:none}
#cmpLine i{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--g2);box-shadow:0 0 6px rgba(0,0,0,.8)}
#cmpLine::after{content:"⟷";position:absolute;top:50%;left:-22px;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:var(--gold);color:#1a1208;font-size:22px;display:flex;align-items:center;justify-content:center;font-weight:700}
#cmpLine b,#cmpLine em{position:absolute;top:10px;font-size:12px;letter-spacing:.15em;font-style:normal;background:rgba(0,0,0,.6);padding:4px 8px;border-radius:6px;color:var(--off)}
#cmpLine b{right:10px}#cmpLine em{left:10px}
#brushCur{position:absolute;border:2px solid rgba(246,223,166,.95);border-radius:50%;pointer-events:none;z-index:6;box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.4)}
#sheet{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheetbox{background:var(--c1);border:1px solid var(--line);border-radius:22px 22px 0 0;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;padding:18px 18px calc(18px + var(--safeB))}
.sheetbox h2{font-family:Cinzel,serif;font-size:20px;letter-spacing:.08em;margin:0 0 10px;color:var(--g1)}
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 74px);transform:translateX(-50%);background:var(--c3);border:1px solid var(--g3);color:var(--off);padding:12px 18px;border-radius:14px;z-index:60;font-size:16px;max-width:90vw;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.layers{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.check{display:flex;align-items:center;gap:10px;min-height:46px;font-size:16px}
.check input{width:24px;height:24px;accent-color:var(--g3)}
.sep{height:1px;background:var(--line);margin:14px 0}
.batchlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px}
.batchlist img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
@media (min-width:900px){
  .main{flex-direction:row}
  .side{flex:0 0 var(--sideW);height:auto;max-height:none;border-top:0;border-left:1px solid var(--line)}
  #tabs{order:1;flex-wrap:wrap;overflow:visible;border-top:0;border-bottom:1px solid rgba(255,255,255,.05)}
  #tabs button{min-width:0;flex:1 0 13%;padding:6px 2px;font-size:11.5px}
  #strip{order:0}
  #panel{order:2}
  .ib{min-width:72px}
  .ib span{font-size:11.5px}
  #sheet{align-items:center}.sheetbox{border-radius:22px}
}
@media (max-width:480px){ .brand{display:none} .topbtns{width:100%;justify-content:space-between} .ib{min-width:46px} .ib span{font-size:9.5px} .gold{padding:0 14px} }
/* ---------- câmera ---------- */
#cam{position:fixed;inset:0;z-index:80;background:#000;display:flex;flex-direction:column;color:var(--off)}
#cam .cv{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none}
#cam canvas.view{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#cam canvas.view.mir{transform:translate(-50%,-50%) scaleX(-1)}
#cam video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#cam .ctop{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:calc(env(safe-area-inset-top,0px) + 6px) 8px 6px;background:rgba(0,0,0,.55);flex-wrap:nowrap;overflow-x:auto}
#cam .cbtn{min-width:52px;height:52px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;color:var(--off);background:rgba(255,255,255,.06);flex:0 0 auto}
#cam .cbtn small{font-size:10.5px;color:var(--mut);margin-top:1px}
#cam .cbtn.on{color:var(--g1);background:rgba(217,174,95,.22)}
#cam .cbot{background:rgba(0,0,0,.7);padding:6px 8px calc(env(safe-area-inset-bottom,0px) + 10px)}
#cam .fil{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
#cam .fil::-webkit-scrollbar{display:none}
#cam .fil button{flex:0 0 auto;padding:0 14px;height:40px;border-radius:20px;background:rgba(255,255,255,.08);font-size:14.5px;color:var(--off)}
#cam .fil button.on{background:var(--gold);color:#1a1208;font-weight:700}
#cam .modes{display:flex;justify-content:center;gap:6px;margin:2px 0 8px}
#cam .modes button{height:40px;padding:0 16px;border-radius:20px;font-size:15px;color:var(--mut);letter-spacing:.04em}
#cam .modes button.on{color:var(--g1);background:rgba(217,174,95,.18)}
#cam .shoot{display:flex;align-items:center;justify-content:space-around}
#cam .shutter{width:80px;height:80px;border-radius:50%;background:var(--off);border:5px solid #1a1208;box-shadow:0 0 0 4px var(--g3)}
#cam .shutter:active{transform:scale(.94)}
#cam .shutter.burst{background:var(--g2)}
#cam .grid3{position:absolute;inset:0;pointer-events:none;background:
 linear-gradient(90deg,transparent calc(33.33% - 1px),rgba(255,255,255,.45) 33.33%,transparent calc(33.33% + 1px),transparent calc(66.66% - 1px),rgba(255,255,255,.45) 66.66%,transparent calc(66.66% + 1px)),
 linear-gradient(transparent calc(33.33% - 1px),rgba(255,255,255,.45) 33.33%,transparent calc(33.33% + 1px),transparent calc(66.66% - 1px),rgba(255,255,255,.45) 66.66%,transparent calc(66.66% + 1px))}
#cam .level{position:absolute;left:50%;top:50%;width:160px;height:0;margin-left:-80px;border-top:2px solid rgba(255,255,255,.8);pointer-events:none;transition:border-color .2s}
#cam .level.ok{border-color:var(--g1);box-shadow:0 0 8px var(--g2)}
#cam .level span{position:absolute;left:50%;top:6px;transform:translateX(-50%);font-size:12px;background:rgba(0,0,0,.5);padding:2px 6px;border-radius:6px}
#cam .count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:120px;font-family:Cinzel,serif;color:var(--g1);text-shadow:0 4px 30px #000;pointer-events:none}
#cam .focus{position:absolute;width:76px;height:76px;margin:-38px 0 0 -38px;border:2px solid var(--g1);border-radius:10px;pointer-events:none;transition:transform .25s}
#cam .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .25s}
#cam .rng{display:flex;align-items:center;gap:8px;padding:0 6px;font-size:13px;color:var(--mut)}
#cam .rng input{flex:1;height:36px}
#cam .msg{position:absolute;left:10px;right:10px;bottom:10px;text-align:center;font-size:14px;color:var(--mut);pointer-events:none;text-shadow:0 1px 3px #000}
#cam .err{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;font-size:17px}
@media (max-width:899px){ .zoombar{top:6px;right:6px;padding:2px;opacity:.85} .zoombar #zIn,.zoombar #zOut{display:none} .zoombar button{height:30px} .zoombar span{min-width:40px;font-size:12px} }