/* ============================================================
   BATISTART — painel de controle
   ============================================================ */

:root{
  --navy:  #16297b;
  --red:   #d8232a;
  --gold:  #f9c013;

  --bg:    #0a1020;
  --bg-2:  #101a30;
  --bg-3:  #16233f;
  --linha: rgba(255,255,255,.10);
  --linha-forte: rgba(255,255,255,.20);
  --tx:    #eef2fa;
  --tx-2:  rgba(238,242,250,.60);
  --tx-3:  rgba(238,242,250,.38);

  --display: "Bebas Neue","Haettenschweiler",Impact,sans-serif;
  --body: "Outfit","Segoe UI",system-ui,sans-serif;
  --raio: 10px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  min-height:100vh;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--body);
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}

/* ---------------- topo ---------------- */

.topo{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:14px 26px;
  background:rgba(10,16,32,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha);
}
.topo-marca{ display:flex; align-items:center; gap:14px; }
.topo-logo{ width:44px; height:44px; border-radius:50%; flex:none; }
.topo-titulo{ font-family:var(--display); font-size:26px; letter-spacing:.10em; line-height:1; }
.topo-sub{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-2); margin-top:5px; }

.topo-acoes{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

.estado{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); opacity:0; transition:opacity 240ms;
  margin-right:4px;
}
.estado.on{ opacity:1; }

.btn{
  font-family:var(--body); font-size:13px; font-weight:600;
  letter-spacing:.08em;
  padding:.65em 1.15em;
  border-radius:999px; border:1px solid transparent;
  cursor:pointer;
  transition:background 180ms, border-color 180ms, color 180ms, transform 140ms;
}
.btn:active{ transform:translateY(1px); }
.btn-cheio{ background:var(--red); color:#fff; }
.btn-cheio:hover{ background:#ef2f36; }
.btn-linha{ background:transparent; color:var(--gold); border-color:var(--gold); }
.btn-linha:hover{ background:rgba(249,192,19,.12); }
.btn-fantasma{ background:transparent; color:var(--tx-2); border-color:var(--linha-forte); }
.btn-fantasma:hover{ color:var(--tx); border-color:var(--tx-2); }

/* ---------------- estrutura ---------------- */

.corpo{ display:flex; align-items:flex-start; }

.menu{
  position:sticky; top:79px;
  width:206px; flex:none;
  padding:26px 0 26px 26px;
  display:flex; flex-direction:column; gap:2px;
  height:calc(100vh - 79px);
}
.menu a{
  display:block;
  padding:.62em .95em;
  border-radius:8px;
  color:var(--tx-2); text-decoration:none;
  font-size:14px; font-weight:500;
  border-left:2px solid transparent;
  transition:background 160ms, color 160ms, border-color 160ms;
}
.menu a:hover{ color:var(--tx); background:rgba(255,255,255,.04); }
.menu a.ativo{ color:var(--gold); background:rgba(249,192,19,.09); border-left-color:var(--gold); }
.menu-rodape{ margin-top:auto; padding-top:16px; border-top:1px solid var(--linha); }
.menu-abrir{ color:var(--gold) !important; font-weight:600 !important; }

.conteudo{
  flex:1; min-width:0;
  padding:26px 34px 120px;
  max-width:1120px;
}

section{
  padding:26px 0 34px;
  border-bottom:1px solid var(--linha);
  scroll-margin-top:96px;
}
section:last-child{ border-bottom:0; }

h2{
  font-family:var(--display); font-weight:400;
  font-size:34px; letter-spacing:.08em;
  margin-bottom:6px;
}
h3{
  font-size:14px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
  margin:34px 0 8px;
}
.ajuda{ color:var(--tx-2); font-size:14px; line-height:1.55; max-width:70ch; margin-bottom:18px; }
.espaco{ margin-top:18px; }

/* ---------------- campos ---------------- */

.grade2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.grade3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.campo-largo{ grid-column:1 / -1; }

.campo{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.campo > span{
  font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--tx-2);
}
.campo small{ font-size:12px; color:var(--tx-3); line-height:1.5; }
.campo small b{ color:var(--gold); font-weight:600; }

input[type=text], input[type=number], textarea, select{
  width:100%;
  font-family:var(--body); font-size:15px;
  color:var(--tx);
  background:var(--bg-2);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:.68em .85em;
  transition:border-color 160ms, background 160ms;
}
input:focus, textarea:focus, select:focus{
  outline:0; border-color:var(--gold); background:var(--bg-3);
}
textarea{ resize:vertical; min-height:72px; line-height:1.45; }

.cor-linha{ display:flex; gap:9px; align-items:center; }
input[type=color]{
  width:52px; height:42px; flex:none;
  padding:0; border:1px solid var(--linha); border-radius:9px;
  background:var(--bg-2); cursor:pointer;
}
.cor-linha input[type=text]{ font-family:ui-monospace,Consolas,monospace; text-transform:lowercase; }

/* ---------------- temas ---------------- */

.temas{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.tema{
  cursor:pointer;
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:12px;
  background:var(--bg-2);
  transition:border-color 160ms, transform 140ms;
}
.tema:hover{ transform:translateY(-2px); }
.tema.sel{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; }
.tema-amostra{
  height:56px; border-radius:7px; margin-bottom:10px;
  display:flex; align-items:flex-end; gap:5px; padding:8px;
}
.tema-amostra i{ display:block; width:16px; height:16px; border-radius:50%; }
.tema-nome{ font-size:13px; font-weight:600; }
.tema-desc{ font-size:11.5px; color:var(--tx-3); margin-top:3px; line-height:1.45; }

/* ---------------- prévia ---------------- */

.previa{ margin-top:22px; }
.previa-tela{
  aspect-ratio:16/9; max-width:560px;
  border-radius:var(--raio); overflow:hidden;
  border:1px solid var(--linha);
  padding:20px;
  display:flex; flex-direction:column;
  background:#06101f;
}
.previa-marca{ font-family:var(--display); font-size:26px; letter-spacing:.1em; line-height:1; }
.previa-marca i{ font-style:normal; }
.previa-sub{ font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; margin-top:7px; opacity:.62; }
.previa-regua{ height:3px; width:120px; margin-top:14px; border-radius:2px; }
.previa-fotos{ margin-top:auto; display:flex; gap:6px; height:56%; }
.previa-fotos div{ flex:1; border-radius:3px; background-size:cover; background-position:center 38%; }
.previa + small, .previa small{ display:block; margin-top:9px; font-size:12px; color:var(--tx-3); }

/* ---------------- opções ---------------- */

.opcoes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.opcao{
  display:flex; align-items:flex-start; gap:13px;
  padding:14px 16px;
  background:var(--bg-2);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  cursor:pointer;
  transition:border-color 160ms;
}
.opcao:hover{ border-color:var(--linha-forte); }
.opcao-txt{ flex:1; min-width:0; }
.opcao-nome{ font-weight:600; font-size:14.5px; }
.opcao-desc{ font-size:12.5px; color:var(--tx-3); margin-top:3px; line-height:1.5; }

/* interruptor */
.chave{
  position:relative; flex:none;
  width:42px; height:24px; border-radius:999px;
  background:rgba(255,255,255,.14);
  transition:background 200ms;
  margin-top:2px;
}
.chave::after{
  content:""; position:absolute;
  top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff;
  transition:transform 200ms var(--ease);
}
input[type=checkbox]{ position:absolute; opacity:0; width:0; height:0; }
input[type=checkbox]:checked + .chave{ background:var(--red); }
input[type=checkbox]:checked + .chave::after{ transform:translateX(18px); }
input[type=checkbox]:focus-visible + .chave{ box-shadow:0 0 0 2px var(--gold); }

.radios{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.radio{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px;
  background:var(--bg-2); border:1px solid var(--linha);
  border-radius:var(--raio); cursor:pointer;
  transition:border-color 160ms, background 160ms;
}
.radio.sel{ border-color:var(--gold); background:rgba(249,192,19,.07); }
.radio-bola{
  flex:none; width:18px; height:18px; margin-top:2px;
  border-radius:50%; border:2px solid var(--linha-forte);
  transition:border-color 160ms;
}
.radio.sel .radio-bola{ border-color:var(--gold); border-width:6px; }

/* ---------------- listas de texto ---------------- */

.lista{ display:flex; flex-direction:column; gap:12px; }
.item{
  position:relative;
  background:var(--bg-2);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:15px 15px 15px 46px;
}
.item-num{
  position:absolute; left:0; top:0; bottom:0; width:34px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:17px;
  color:var(--tx-3);
  border-right:1px solid var(--linha);
}
.item-grade{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.item-grade .campo-largo{ grid-column:1 / -1; }
.item-acoes{
  display:flex; gap:6px; justify-content:flex-end; margin-top:10px;
}
.mini{
  background:transparent; border:1px solid var(--linha);
  color:var(--tx-2); border-radius:7px;
  width:30px; height:28px; cursor:pointer;
  font-size:13px; line-height:1;
  transition:border-color 150ms, color 150ms, background 150ms;
}
.mini:hover{ color:var(--tx); border-color:var(--tx-2); }
.mini.perigo:hover{ color:#fff; background:var(--red); border-color:var(--red); }

.lista-simples .item{ padding:10px 10px 10px 46px; display:flex; align-items:center; gap:10px; }
.lista-simples .item input{ flex:1; }
.lista-simples .item-acoes{ margin-top:0; }

.btn-add{ margin-top:12px; }

/* ---------------- cenas ---------------- */

.cenas-grade{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.cena{
  background:var(--bg-2); border:1px solid var(--linha);
  border-radius:var(--raio); padding:15px 16px;
  transition:opacity 200ms, border-color 160ms;
}
.cena.off{ opacity:.42; }
.cena-topo{ display:flex; align-items:flex-start; gap:13px; }
.cena-nome{ font-weight:600; font-size:14.5px; }
.cena-desc{ font-size:12.5px; color:var(--tx-3); margin-top:3px; line-height:1.5; }
.cena-corte{
  display:inline-block; margin-top:7px;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:.25em .6em; border-radius:999px;
  border:1px solid var(--linha-forte); color:var(--tx-3);
}
.cena-corte.sem{ color:#7fe0a0; border-color:rgba(127,224,160,.45); }
.cena-ctrl{ display:flex; gap:16px; margin-top:14px; }
.cena-ctrl label{ flex:1; display:flex; flex-direction:column; gap:5px; }
.cena-ctrl span{ font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--tx-3); }
.cena-ctrl .valor{ color:var(--gold); font-weight:600; }
input[type=range]{
  width:100%; accent-color:var(--red);
  background:transparent; cursor:pointer;
}

/* ---------------- fotos ---------------- */

.barra-fotos{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-bottom:16px;
  position:sticky; top:79px; z-index:5;
  padding:12px 0;
  background:var(--bg);
}
.barra-fotos .sep{ width:1px; height:22px; background:var(--linha); }
.conta{ font-size:13px; color:var(--tx-2); margin-left:auto; }

.fotos-grade{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(112px, 1fr));
  gap:9px;
}
.foto{
  position:relative;
  aspect-ratio:3/4;
  border-radius:8px; overflow:hidden;
  border:2px solid transparent;
  cursor:grab;
  background:var(--bg-2);
  transition:border-color 150ms, opacity 180ms, transform 140ms;
}
.foto img{
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  pointer-events:none;
}
.foto.inativa{ opacity:.25; }
.foto.inativa::after{
  content:"oculta";
  position:absolute; inset:auto 0 0 0;
  background:rgba(0,0,0,.72); color:#fff;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  text-align:center; padding:3px 0;
}
.foto.arrastando{ opacity:.35; }
.foto.alvo{ border-color:var(--gold); transform:scale(1.05); }
.foto-num{
  position:absolute; top:4px; left:4px;
  background:rgba(0,0,0,.66); color:#fff;
  font-size:10px; font-weight:600;
  padding:2px 5px; border-radius:5px;
  pointer-events:none;
}
.foto-forma{
  position:absolute; top:4px; right:4px;
  width:9px; height:9px; border-radius:2px;
  pointer-events:none;
}
.foto-forma.tall{ background:var(--gold); }
.foto-forma.square{ background:#7fe0a0; }
.foto-forma.wide{ background:var(--red); }

@media (max-width: 900px){
  .menu{ display:none; }
  .conteudo{ padding:20px 18px 100px; }
  .grade2, .grade3, .opcoes, .cenas-grade, .temas, .radios, .item-grade{
    grid-template-columns:minmax(0,1fr);
  }
}