:root{
  --tinta:#0C1726; --painel:#132338; --painel2:#1A2D47; --linha:#263B58;
  --texto:#E8EEF5; --suave:#93A6BD; --laranja:#FF7A1A; --laranja2:#FF9A4D;
  --perigo:#FF5C5C; --ok:#3DD68C;
  --r:8px; --fonte:"Schibsted Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--tinta);color:var(--texto);font:14px/1.45 var(--fonte);-webkit-font-smoothing:antialiased}
a{color:var(--laranja2)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}

.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linha);background:var(--painel2);
  padding:7px 12px;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:#3A5478}
.btn.pri{background:var(--laranja);border-color:var(--laranja);color:#1B0D02;font-weight:600}
.btn.pri:hover{background:var(--laranja2)}
.btn.fant{background:transparent;border-color:transparent}
.btn.fant:hover{background:var(--painel2)}
.btn.perigo{color:var(--perigo)}
.btn:disabled{opacity:.5;cursor:default}
.btn.mini{padding:4px 8px;font-size:12px}

input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;background:var(--tinta);border:1px solid var(--linha);border-radius:6px;padding:7px 9px}
textarea{resize:vertical;min-height:70px}
input[type=color]{width:34px;height:30px;padding:0;border:1px solid var(--linha);border-radius:6px;background:none;cursor:pointer}
input[type=range]{width:100%;accent-color:var(--laranja)}
label.campo{display:block;font-size:12px;color:var(--suave);margin:10px 0 4px}
.linha2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.linha3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.flex{display:flex;gap:8px;align-items:center}
.grow{flex:1}
.muted{color:var(--suave)}
.hidden{display:none!important}

/* topo */
.topo{height:52px;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--painel);border-bottom:1px solid var(--linha)}
.marca{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:-.01em;text-decoration:none;color:var(--texto)}
.marca i{width:22px;height:22px;border-radius:6px;background:conic-gradient(from 200deg,var(--laranja),#FFC08A,var(--laranja));display:block}

/* toast */
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--painel2);border:1px solid var(--linha);
  padding:10px 16px;border-radius:var(--r);z-index:99;max-width:min(560px,90vw);box-shadow:0 10px 30px #0008}
#toast.erro{border-color:var(--perigo)}

/* login */
.login{min-height:100%;display:grid;place-items:center;padding:20px;
  background:radial-gradient(1200px 500px at 80% -10%,#1E3A5F55,transparent),var(--tinta)}
.login form{width:min(360px,100%);background:var(--painel);border:1px solid var(--linha);border-radius:14px;padding:26px}
.login h1{font-size:22px;margin:14px 0 4px;letter-spacing:-.02em}

/* projetos */
.pagina{max-width:1180px;margin:0 auto;padding:26px 18px}
.pagina h1{font-size:26px;letter-spacing:-.02em;margin:0 0 4px}
.formatos{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 28px}
.formato{background:var(--painel);border:1px solid var(--linha);border-radius:10px;padding:12px;cursor:pointer;display:flex;gap:10px;align-items:center;min-width:170px}
.formato:hover{border-color:var(--laranja)}
.formato .ret{background:var(--painel2);border:1px solid #3A5478;border-radius:3px}
.formato b{display:block;font-weight:600}
.formato small{color:var(--suave)}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.proj{background:var(--painel);border:1px solid var(--linha);border-radius:10px;overflow:hidden}
.proj .img{aspect-ratio:4/5;background:#0A1320 center/contain no-repeat;display:block}
.proj .inf{padding:10px 12px;display:flex;align-items:center;gap:6px}
.proj .inf div{flex:1;min-width:0}
.proj .inf b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.proj .inf small{color:var(--suave)}
.vazio{border:1px dashed var(--linha);border-radius:10px;padding:40px;text-align:center;color:var(--suave)}

/* editor */
.editor{display:grid;grid-template-columns:58px 1fr 320px;grid-template-rows:52px 1fr 104px;height:100vh}
.editor .topo{grid-column:1/-1}
.ferramentas{background:var(--painel);border-right:1px solid var(--linha);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:4px}
.ferramentas button{width:44px;height:44px;border-radius:8px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--suave)}
.ferramentas button:hover{background:var(--painel2);color:var(--texto)}
.ferramentas button.ativo{background:var(--painel2);color:var(--laranja)}
.ferramentas svg{width:22px;height:22px}
.palco{position:relative;overflow:auto;display:flex;background:
  radial-gradient(circle,#1B2C44 1px,transparent 1px) 0 0/22px 22px,#0A1320}
.palco-in{margin:auto;padding:40px}
#stage{box-shadow:0 10px 40px #0009}
.lateral{background:var(--painel);border-left:1px solid var(--linha);display:flex;flex-direction:column;min-height:0;grid-row:2/4;grid-column:3}
.abas{display:flex;border-bottom:1px solid var(--linha)}
.abas button{flex:1;padding:12px 6px;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;color:var(--suave)}
.abas button.ativo{color:var(--texto);border-color:var(--laranja)}
.aba{padding:12px 14px 30px;overflow:auto;flex:1}
.aba h3{font-size:13px;margin:18px 0 6px;color:var(--suave);font-weight:600}
.aba h3:first-child{margin-top:4px}
.seg{display:flex;border:1px solid var(--linha);border-radius:6px;overflow:hidden}
.seg button{flex:1;padding:6px;border:0;background:var(--tinta);cursor:pointer;color:var(--suave)}
.seg button.ativo{background:var(--painel2);color:var(--texto)}
.paginas{grid-column:1/3;background:var(--painel);border-top:1px solid var(--linha);display:flex;align-items:center;gap:10px;padding:10px 14px;overflow-x:auto}
.pag{flex:none;height:78px;border:2px solid var(--linha);border-radius:6px;background:#0A1320 center/cover;cursor:pointer;position:relative}
.pag.ativa{border-color:var(--laranja)}
.pag span{position:absolute;left:4px;bottom:3px;font-size:11px;background:#000a;border-radius:4px;padding:0 5px}
.pag-add{flex:none;width:58px;height:78px;border:1px dashed var(--linha);border-radius:6px;display:grid;place-items:center;cursor:pointer;color:var(--suave);background:none}

.camada{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;cursor:pointer;border:1px solid transparent}
.camada:hover{background:var(--painel2)}
.camada.sel{border-color:var(--laranja);background:var(--painel2)}
.camada .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camada .ic{width:18px;text-align:center;color:var(--suave)}
.camada button{background:none;border:0;cursor:pointer;color:var(--suave);padding:2px 4px}
.camada button:hover{color:var(--texto)}
.camada.oculta .nm{opacity:.45}

.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.ref{position:relative;border:1px solid var(--linha);border-radius:6px;overflow:hidden;background:#0A1320}
.ref img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.ref select{border:0;border-top:1px solid var(--linha);border-radius:0;padding:3px;font-size:11px}
.ref .x{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;background:#000b;color:#fff;cursor:pointer;line-height:1}
.ref-add{aspect-ratio:1;border:1px dashed var(--linha);border-radius:6px;display:grid;place-items:center;color:var(--suave);cursor:pointer;background:none}
.acoes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.acoes .btn{justify-content:center;font-size:12.5px}
.hist{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hist img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;cursor:pointer;border:1px solid var(--linha)}
.hist img:hover{border-color:var(--laranja)}
.carregando{position:absolute;inset:0;background:#0A1320cc;display:grid;place-items:center;z-index:5;text-align:center}
.spin{width:36px;height:36px;border-radius:50%;border:3px solid var(--linha);border-top-color:var(--laranja);animation:g 0.9s linear infinite;margin:0 auto 10px}
@keyframes g{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}}
.nota{font-size:12px;color:var(--suave);background:var(--tinta);border:1px solid var(--linha);border-radius:6px;padding:8px 10px;margin-top:8px}
.zoom{font-variant-numeric:tabular-nums;min-width:48px;text-align:center;color:var(--suave)}
#txtEdit{position:absolute;z-index:4;border:1px dashed var(--laranja);background:transparent;outline:0;resize:none;overflow:hidden;padding:0;margin:0;transform-origin:left top}

@media (max-width:900px){
  .editor{grid-template-columns:52px 1fr;grid-template-rows:52px 1fr 90px 46vh}
  .lateral{grid-row:4;grid-column:1/-1}
  .paginas{grid-column:1/-1}
}