@font-face{font-family:"Montserrat";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;--c4:#332B23;--off:#F4F1EC;--mut:#B9AFA4;--g1:#F6DFA6;--g2:#EBC77F;--g3:#D9AE5F;--g4:#C9944A;--cu:#B87333;
--line:rgba(217,174,95,.28);--gold:linear-gradient(135deg,#F6DFA6 0%,#D9AE5F 25%,#B87333 55%,#EBC77F 80%,#C9944A 100%);--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bk);color:var(--off);font-family:"Montserrat",system-ui,sans-serif;font-size:16px;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;touch-action:manipulation}
input,select,textarea{font:inherit;color:var(--off);-webkit-user-select:text;user-select:text}
h1,h2,h3{font-family:Cinzel,serif;font-weight:600;letter-spacing:.04em}
a{color:var(--g2)}
#app{display:flex;flex-direction:column;height:100%}
/* splash */
#splash{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 42%,#221C16,#0B0B0C 70%);display:flex;align-items:center;justify-content:center;transition:opacity .6s}
#splash.out{opacity:0;pointer-events:none}
.spl-in{text-align:center;animation:splIn 1.1s ease-out both}
.spl-in img{width:150px;height:150px;filter:drop-shadow(0 0 30px rgba(217,174,95,.35))}
.spl-in h1{margin:14px 0 0;font-size:24px;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.spl-in p{margin:6px 0 0;letter-spacing:.6em;font-size:12px;color:var(--mut)}
.spl-in i{display:block;margin:18px auto 0;width:120px;height:2px;background:var(--gold);background-size:200% 100%;animation:shim 1.2s linear infinite}
@keyframes splIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes shim{from{background-position:200% 0}to{background-position:-200% 0}}
/* topo */
.top{display:flex;align-items:center;gap:6px;padding:calc(var(--sat) + 6px) 8px 6px;background:var(--c1);border-bottom:1px solid var(--line);flex:0 0 auto;min-height:60px}
.brand{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto;cursor:pointer}
.brand img{width:38px;height:38px;flex:0 0 auto}
.brand b{display:block;font-family:Cinzel,serif;font-size:16px;letter-spacing:.05em;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;font-size:10px;letter-spacing:.42em;color:var(--mut);text-transform:uppercase}
.topact{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.ib{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:48px;height:48px;border-radius:12px;padding:2px 4px;color:var(--off)}
.ib svg,.nav svg,.tool svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ib span{font-size:10px;margin-top:1px;color:var(--mut)}
.ib:active,.ib.on{background:var(--c3);color:var(--g2)}
.ib:disabled{opacity:.3}
.gold{background:var(--gold);color:#1a1208;font-weight:700;border-radius:14px;padding:0 18px;height:48px;font-size:16px;box-shadow:0 2px 14px rgba(201,148,74,.3);white-space:nowrap}
.gold.big{height:56px;font-size:18px;padding:0 28px;border-radius:16px}
.gold:disabled{opacity:.45}
.ghost{border:1px solid var(--line);border-radius:14px;height:48px;padding:0 16px;color:var(--g2);background:transparent;white-space:nowrap}
.ghost.sm,.gold.sm{height:40px;font-size:14px;padding:0 12px;border-radius:12px}
.danger{color:#ff8a80;border-color:rgba(255,138,128,.35)}
/* views */
#views{flex:1 1 auto;min-height:0;position:relative}
.view{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#v-editor,#v-video{overflow:hidden;display:flex;flex-direction:column}
.nav{display:flex;justify-content:space-around;background:var(--c1);border-top:1px solid var(--line);padding:4px 4px calc(var(--sab) + 4px);flex:0 0 auto}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:12px;color:var(--mut);font-size:11.5px;min-height:56px}
.nav button.on{color:var(--g1)}
.nav button.on svg{stroke:var(--g2)}
.pad{padding:16px 16px 40px;max-width:1100px;margin:0 auto}
.hero{position:relative;border-radius:22px;padding:22px 20px;background:radial-gradient(circle at 85% 0%,rgba(217,174,95,.28),transparent 55%),linear-gradient(160deg,#1C1916,#0B0B0C);border:1px solid var(--line);overflow:hidden}
.hero h1{margin:0 0 6px;font-size:22px;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0 0 14px;color:var(--mut);font-size:14px;line-height:1.5}
.hero .row{display:flex;gap:8px;flex-wrap:wrap}
.hero img.wm{position:absolute;right:-30px;top:-30px;width:150px;opacity:.12}
.sec{display:flex;align-items:center;justify-content:space-between;margin:22px 0 10px}
.sec h2{margin:0;font-size:16px;color:var(--g2)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:0 14px;height:40px;font-size:14px;color:var(--off);background:var(--c1);white-space:nowrap}
.chip.on{background:var(--gold);color:#1a1208;border-color:transparent;font-weight:700}
.sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.size{background:var(--c1);border:1px solid var(--line);border-radius:16px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:104px;font-size:12px;text-align:center}
.size i{display:block;border:2px solid var(--g3);border-radius:4px;background:rgba(217,174,95,.08)}
.size small{color:var(--mut);font-size:10.5px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.card{background:var(--c1);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-align:left;position:relative}
.card .th{position:relative;width:100%;aspect-ratio:3/4;background:#060606;display:flex;align-items:center;justify-content:center}
.card .th canvas,.card .th img{max-width:100%;max-height:100%;display:block}
.card .nm{padding:8px 10px 10px;font-size:12.5px;line-height:1.3}
.card .nm small{display:block;color:var(--mut);font-size:11px;margin-top:2px}
.card .del{position:absolute;top:6px;right:6px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:18px}
.empty{color:var(--mut);font-size:14px;padding:18px;border:1px dashed var(--line);border-radius:16px;text-align:center}
/* editor */
.ed-main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ed-stage{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}
#edCanvas{position:absolute;left:0;top:0;width:100%;height:100%;touch-action:none}
.zoomctl{position:absolute;right:8px;bottom:8px;display:flex;gap:4px;background:rgba(20,17,18,.85);border:1px solid var(--line);border-radius:14px;padding:3px}
.zoomctl button{min-width:44px;height:40px;border-radius:10px;font-size:18px}
.zoomctl button#zFit{font-size:12px}
.pagebar{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:4px;background:rgba(20,17,18,.85);border:1px solid var(--line);border-radius:14px;padding:3px}
.pagebar button{min-width:40px;height:40px;border-radius:10px;font-size:15px}
.pagebar span{font-size:12px;color:var(--mut);padding:0 4px;white-space:nowrap}
.ed-side{flex:0 0 auto;background:var(--c1);border-top:1px solid var(--line);max-height:44dvh;display:flex;flex-direction:column}
.ed-side:empty,.ed-side.closed{display:none}
.ed-panel{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 14px 14px;overscroll-behavior:contain}
.ed-panel:empty{display:none}
.ed-tools{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;background:var(--c1);border-top:1px solid var(--line);padding:4px 4px calc(var(--sab) + 4px);flex:0 0 auto}
.ed-tools::-webkit-scrollbar{display:none}
.tool{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:66px;min-height:58px;padding:6px 4px;border-radius:12px;color:var(--mut);font-size:11.5px}
.tool.on{color:var(--g1);background:var(--c3)}
.tool.del{color:#ff8a80}
.ph{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.ph h3{margin:0;font-size:14px;color:var(--g2)}
.ph .x{width:40px;height:40px;border-radius:10px;font-size:20px;color:var(--mut)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.nw{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.lbl{font-size:12px;color:var(--mut);margin:10px 0 6px;display:block}
.sl{display:grid;grid-template-columns:96px 1fr 44px;align-items:center;gap:8px;margin:6px 0}
.sl span{font-size:13px}
.sl output{font-size:12px;color:var(--mut);text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--c4);border-radius:4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--gold);margin-top:-11px;box-shadow:0 1px 6px rgba(0,0,0,.5)}
input[type=range]::-moz-range-track{height:4px;background:var(--c4)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#D9AE5F;border:0}
.in,select.in,textarea.in{width:100%;background:var(--c2);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:16px;min-height:48px}
textarea.in{min-height:96px;resize:vertical;line-height:1.4}
.sw{display:flex;gap:8px;flex-wrap:wrap}
.sw button{width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.18);flex:0 0 auto}
.sw button.on{outline:3px solid var(--g2);outline-offset:2px}
.sw .metal{background:var(--gold)}
.opt{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.opt button{background:var(--c2);border:1px solid var(--line);border-radius:12px;min-height:56px;padding:6px;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.opt button.on{border-color:var(--g2);color:var(--g1);background:var(--c3)}
.opt button svg{width:28px;height:28px;fill:none;stroke:var(--g3);stroke-width:1.5}
.opt button canvas{max-width:100%}
.fontlist{display:flex;flex-direction:column;gap:4px}
.fontlist button{text-align:left;padding:10px 12px;border-radius:10px;background:var(--c2);font-size:22px;min-height:52px}
.fontlist button.on{outline:2px solid var(--g2)}
.layers{display:flex;flex-direction:column;gap:6px}
.layer{display:flex;align-items:center;gap:6px;background:var(--c2);border:1px solid transparent;border-radius:12px;padding:4px 6px;min-height:52px}
.layer.on{border-color:var(--g2)}
.layer .ln{flex:1;font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:8px 4px;text-align:left}
.layer button.s{width:40px;height:40px;border-radius:10px;font-size:16px;color:var(--mut)}
.pages{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.pages .pg{flex:0 0 auto;width:78px;border-radius:10px;border:2px solid transparent;background:#000;padding:0;position:relative}
.pages .pg.on{border-color:var(--g2)}
.pages .pg canvas{width:100%;display:block;border-radius:8px}
.pages .pg b{position:absolute;left:4px;top:4px;background:rgba(0,0,0,.6);border-radius:6px;font-size:10px;padding:1px 5px}
.hint{font-size:12.5px;color:var(--mut);line-height:1.45;margin:6px 0}
.tog{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;min-height:48px;font-size:14px}
.tog input{width:24px;height:24px;accent-color:#D9AE5F}
/* sheet */
#sheet{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center}
.sheet-box{background:var(--c1);border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;width:100%;max-width:640px;max-height:88dvh;overflow-y:auto;padding:16px 16px calc(var(--sab) + 18px);-webkit-overflow-scrolling:touch}
.sheet-box h3{margin:4px 0 12px;color:var(--g2);font-size:17px}
@media(min-width:700px){#sheet{align-items:center}.sheet-box{border-radius:22px;border-bottom:1px solid var(--line)}}
#busy{position:fixed;inset:0;z-index:80;background:rgba(5,5,5,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px;text-align:center}
.spin{width:54px;height:54px;border-radius:50%;border:3px solid rgba(217,174,95,.2);border-top-color:var(--g3);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
#busy .bar{width:min(320px,80vw);height:6px;background:var(--c3);border-radius:6px;overflow:hidden}
#busy .bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}
#toast{position:fixed;left:50%;bottom:calc(var(--sab) + 90px);transform:translateX(-50%);z-index:90;background:#1f1a15;border:1px solid var(--line);color:var(--off);padding:12px 18px;border-radius:14px;font-size:14px;max-width:90vw;box-shadow:0 8px 30px rgba(0,0,0,.5);text-align:center}
/* wizard */
.steps{display:flex;gap:6px;margin:0 0 14px}
.steps i{flex:1;height:4px;border-radius:4px;background:var(--c3)}
.steps i.on{background:var(--gold)}
.evs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.ev{background:var(--c1);border:1px solid var(--line);border-radius:16px;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:14px;padding:10px}
.ev svg{width:34px;height:34px;fill:none;stroke:var(--g3);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ev.on{border-color:var(--g2);background:var(--c3)}
.form{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:700px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--mut)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs .t{width:84px;height:84px;border-radius:12px;overflow:hidden;position:relative;background:#000}
.thumbs .t img{width:100%;height:100%;object-fit:cover}
.thumbs .t button{position:absolute;top:3px;right:3px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff}
.thumbs .add{width:84px;height:84px;border-radius:12px;border:1px dashed var(--g4);color:var(--g2);font-size:30px}
.navrow{display:flex;gap:10px;justify-content:space-between;margin-top:18px;position:sticky;bottom:0;padding:10px 0 calc(var(--sab) + 6px);background:linear-gradient(transparent,var(--bk) 30%)}
.navrow .gold{flex:1}
.preview{display:flex;justify-content:center}
.preview canvas{max-width:100%;max-height:62dvh;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.actions button{min-height:56px}
/* vídeo */
.vd-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;background:#060606;overflow:hidden}
.vd-stage canvas{max-width:100%;max-height:100%;display:block;background:#000}
.vd-ctrl{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--c1);border-top:1px solid var(--line)}
.vd-ctrl .tm{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;min-width:86px}
.vd-ctrl input{flex:1}
.tl{background:#0f0d0c;border-top:1px solid var(--line);padding:8px 0;flex:0 0 auto;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;position:relative}
.tl-in{position:relative;padding:0 50vw 0 12px;min-height:118px}
.tl-row{display:flex;gap:4px;height:62px;align-items:stretch}
.clip{position:relative;flex:0 0 auto;border-radius:10px;overflow:hidden;border:2px solid transparent;background:#222;min-width:44px}
.clip.on{border-color:var(--g2)}
.clip canvas{height:100%;display:block}
.clip b{position:absolute;left:4px;bottom:3px;font-size:10px;background:rgba(0,0,0,.65);padding:1px 5px;border-radius:6px}
.clip i{position:absolute;right:4px;top:3px;font-size:10px;font-style:normal;background:rgba(0,0,0,.65);padding:1px 5px;border-radius:6px;color:var(--g2)}
.tl-add{flex:0 0 auto;width:62px;border-radius:10px;border:1px dashed var(--g4);color:var(--g2);font-size:26px}
.tl-sub{display:flex;gap:4px;height:30px;margin-top:6px;position:relative}
.tl-txt{position:absolute;top:0;height:28px;border-radius:8px;background:rgba(217,174,95,.25);border:1px solid var(--g4);font-size:11px;padding:0 6px;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.tl-txt.on{background:var(--gold);color:#1a1208}
.tl-mus{position:absolute;top:0;height:16px;border-radius:6px;background:rgba(184,115,51,.35);font-size:10px;padding:0 6px;display:flex;align-items:center;white-space:nowrap}
.playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none;box-shadow:0 0 6px #000;z-index:3}
.vd-panel{background:var(--c1);border-top:1px solid var(--line);max-height:34dvh;overflow-y:auto;padding:10px 14px}
.vd-panel:empty{display:none}
/* desktop */
@media(min-width:900px){
  .ed-main{flex-direction:row}
  .ed-side{width:380px;max-height:none;border-top:0;border-left:1px solid var(--line)}
  .ed-side.closed{display:flex}
  .ed-panel:empty::before{content:"Toque num elemento para editar ou escolha uma ferramenta abaixo.";display:block;color:var(--mut);font-size:13px;padding:20px}
  .ed-panel:empty{display:block}
  .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .nav{justify-content:center;gap:30px}.nav button{flex:0 0 100px}
}

.brand{min-width:0;overflow:hidden;flex:1 1 auto}
@media (max-width:700px){body.full .brand div{display:none}body.full .brand{flex:1 1 auto}}