:root{
  --azul:#2457e6; --azul-esc:#0e2577; --verde:#1f8a3c; --verde-esc:#0b3f25; --lima:#c3ea4f; --creme:#f4f8e6;
  --bg:#060b14; --s1:#0d1522; --s2:#152033; --linha:#ffffff14; --txt:#f2f5fa; --muted:#8e9bb3;
  --grad:linear-gradient(120deg,#2457e6 0%,#1f8a3c 60%,#c3ea4f 100%);
  --r:18px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:Sora,system-ui,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}
input,textarea{-webkit-user-select:text;user-select:text}
button,select,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;transition:transform .12s,background .2s,opacity .2s}
button:active{transform:scale(.94)}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hidden{display:none!important}
.muted{color:var(--muted);font-size:.82rem}

/* ---- topo ---- */
.top{position:relative;height:calc(60px + var(--safe-t));padding:var(--safe-t) 14px 0;display:flex;align-items:center;justify-content:space-between;
  background:#060b14cc;backdrop-filter:blur(14px);border-bottom:1px solid var(--linha);z-index:5}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad);opacity:.9}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:Archivo;font-weight:500;font-size:1.12rem}
.brand b{font-weight:800;font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo{width:34px;height:34px;border-radius:11px;background:var(--grad);display:grid;place-items:center;box-shadow:0 4px 14px #2457e655}
.logo svg{width:18px;height:18px;color:#fff}
.top-actions{display:flex;gap:4px;align-items:center}
.ib{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--txt)}
.ib:hover{background:var(--s2)}
.ib:disabled{opacity:.28}
.cta{display:flex;align-items:center;gap:6px;margin-left:4px;padding:9px 14px;border-radius:12px;background:var(--grad);color:#fff;font-weight:700;font-size:.85rem;box-shadow:0 6px 18px #1f8a3c44}
.cta svg{width:18px;height:18px}

main{position:absolute;top:calc(60px + var(--safe-t));bottom:calc(68px + var(--safe-b));left:0;right:0}
.tab{display:none;position:absolute;inset:0;overflow:auto}
.tab.active{display:flex;flex-direction:column;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
#tab-carrossel{overflow:hidden}

/* ---- palco ---- */
#stage{flex:1;overflow-x:auto;overflow-y:hidden;display:flex;align-items:center;padding:0 28px;touch-action:pan-x;scrollbar-width:none;
  background:radial-gradient(circle at 15% 10%,#2457e622,transparent 45%),radial-gradient(circle at 85% 90%,#1f8a3c22,transparent 45%),
  radial-gradient(#ffffff0d 1px,transparent 1px) 0 0/18px 18px}
#stage::-webkit-scrollbar{display:none}
#cv{display:block;flex:none;touch-action:none;border-radius:4px;box-shadow:0 20px 60px #000a,0 0 0 1px #ffffff12}
.empty{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  width:min(280px,80%);pointer-events:none;color:var(--muted);font-size:.82rem}
.empty b{color:var(--txt);font-size:1rem}
.empty-ic{width:58px;height:58px;border-radius:18px;background:#ffffff10;display:grid;place-items:center;margin-bottom:4px}
.empty-ic svg{width:28px;height:28px;color:var(--lima)}

/* ---- dock de ferramentas ---- */
.dock{padding:8px 12px 12px}
.tools{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:24px;background:#0d1522e6;backdrop-filter:blur(14px);border:1px solid var(--linha);box-shadow:0 10px 30px #0008}
.tools button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.68rem;color:#c7d0e0;min-width:50px;padding:6px 2px;border-radius:14px}
.tools button:hover{background:#ffffff0a}
.chip{height:22px;min-width:30px;padding:0 6px;border-radius:7px;border:1.8px solid currentColor;display:grid;place-items:center;font-size:.68rem;font-weight:700}
.tools .fab{width:60px;height:60px;min-width:0;border-radius:20px;background:var(--grad);color:#fff;justify-content:center;margin-top:-26px;
  box-shadow:0 10px 26px #2457e677,inset 0 1px 0 #ffffff55;border:3px solid var(--bg)}
.tools .fab svg{width:28px;height:28px;stroke-width:2.4}
.tools.sel{overflow-x:auto;scrollbar-width:none}
.tools .danger{color:#ff7a7a}
.tools .x{min-width:40px;background:#ffffff10}

/* ---- abas ---- */
.tabbar{position:fixed;bottom:0;left:0;right:0;height:calc(68px + var(--safe-b));padding:6px 10px var(--safe-b);display:flex;gap:6px;background:#060b14f2;backdrop-filter:blur(14px);border-top:1px solid var(--linha)}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.7rem;color:var(--muted);font-weight:600}
.tabbar span{width:52px;height:30px;border-radius:999px;display:grid;place-items:center;transition:background .25s}
.tabbar .on{color:var(--txt)}
.tabbar .on span{background:linear-gradient(120deg,#2457e655,#1f8a3c55);color:var(--lima)}

/* ---- telas de formulário ---- */
.card{max-width:560px;width:100%;margin:0 auto;padding:18px 16px 28px}
.card h2{font-family:Archivo;font-weight:800;font-style:italic;margin:2px 0 16px;font-size:1.6rem;line-height:1.1}
.card h2 small{display:block;margin-top:4px;font-family:Sora;font-style:normal;font-weight:400;font-size:.8rem;color:var(--muted)}
label{display:block;font-size:.76rem;font-weight:600;color:var(--muted);margin:12px 0;letter-spacing:.2px}
input:not([type=range]):not([type=file]):not([type=checkbox]):not([type=color]),select,textarea{display:block;width:100%;margin-top:6px;background:var(--s1);border:1px solid var(--linha);border-radius:14px;padding:12px 14px;color:var(--txt);font-size:.95rem;outline:none;transition:border .2s}
input:focus,select:focus,textarea:focus{border-color:var(--azul)!important}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px!important}
input[type=file]{margin-top:6px;font-size:.78rem;max-width:100%;color:var(--muted)}
input[type=file]::file-selector-button{background:var(--s2);border:0;color:var(--txt);border-radius:10px;padding:8px 12px;margin-right:8px}
input[type=range]{width:100%;accent-color:var(--lima);margin-top:8px}
output{color:var(--lima);font-weight:700}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
details{margin:12px 0;background:var(--s1);border:1px solid var(--linha);border-radius:14px;padding:12px 14px}
summary{cursor:pointer;color:var(--lima);font-size:.85rem;font-weight:600}
details textarea{margin-top:10px}
.drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px;border:1.5px dashed #ffffff30;border-radius:var(--r);cursor:pointer;color:var(--txt);
  background:linear-gradient(120deg,#2457e612,#1f8a3c12)}
.drop span{font-weight:700;font-size:.95rem}
.thumbs{display:flex;gap:8px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.thumbs img{height:72px;border-radius:10px;flex:none;box-shadow:0 4px 12px #0006}
#v-prev{width:100%;max-width:210px;display:block;margin:14px auto;border-radius:18px;background:#000;aspect-ratio:9/16;box-shadow:0 16px 40px #000a,0 0 0 6px #ffffff10}
.pill{background:var(--creme);color:var(--azul-esc)!important;font-weight:700;border-radius:999px;padding:8px 16px;font-size:.9rem!important;text-decoration:none;display:inline-block;text-align:center}
.pill.big{display:block;width:100%;padding:15px;font-size:1rem!important;margin-top:12px;border-radius:16px;background:var(--grad);color:#fff!important;box-shadow:0 10px 24px #2457e644}
.pill.big.alt{background:var(--s2);box-shadow:none}
.pill:disabled{opacity:.5}

.opcao{background:var(--s1);border:1px solid var(--linha);border-left:3px solid var(--lima);border-radius:14px;padding:14px;margin-top:12px;white-space:pre-wrap;font-size:.9rem;line-height:1.5;-webkit-user-select:text;user-select:text}
.opcao .acoes{display:flex;gap:8px;margin-top:12px}
.opcao .acoes button{background:var(--s2);border-radius:999px;padding:7px 14px;font-size:.78rem;font-weight:600}

/* ---- folhas ---- */
.sheet{position:fixed;inset:0;background:#000a;z-index:20;display:flex;align-items:flex-end;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet-in{width:100%;max-height:78vh;overflow:auto;background:var(--s1);border:1px solid var(--linha);border-bottom:0;border-radius:26px 26px 0 0;padding:8px 18px calc(24px + var(--safe-b));max-width:640px;margin:0 auto;animation:up .28s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(40%)}}
.grab{width:40px;height:5px;border-radius:3px;background:#ffffff26;margin:4px auto 10px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sheet-head b{font-family:Archivo;font-weight:800;font-style:italic;font-size:1.2rem}
.sheet-head .ib{background:var(--s2);width:34px;height:34px;border-radius:50%}
.sheet-head .ib svg{width:18px;height:18px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.grid button{min-width:0;overflow:hidden;aspect-ratio:.85;border-radius:16px;background:var(--s2);border:1px solid var(--linha);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px}
.grid button>div{background:linear-gradient(135deg,#8fa6d8,#9fd18a)!important}
.grid .lbl{font-size:.66rem;color:var(--muted);font-weight:600}
.seg{display:flex;gap:6px;margin:10px 0;padding:4px;background:var(--bg);border-radius:14px}
.seg button{flex:1;padding:10px 6px;border-radius:11px;font-size:.82rem;font-weight:600;color:var(--muted)}
.seg button.sel{background:var(--grad);color:#fff}
.cores{display:flex;gap:10px;flex-wrap:wrap}
.cores button{width:44px;height:44px;border-radius:14px;border:2px solid #ffffff22;background-size:cover}
.lista button{display:flex;width:100%;align-items:center;gap:12px;padding:8px;border-radius:14px;background:var(--s2);margin-bottom:8px;font-size:.84rem;text-align:left}
.lista canvas{width:46px;height:46px;border-radius:10px;background:#000}
.filtros{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
.filtros button{flex:none;padding:9px 14px;border-radius:999px;background:var(--s2);font-size:.8rem;font-weight:600}
.filtros button.sel{background:var(--grad)}