:root {
  --fundo: #ffffff;
  --lateral: #fafafa;
  --linha: #ececec;
  --texto: #141414;
  --suave: #8a8a8a;
  --muito-suave: #b9b9b9;
  --cartao: #ffffff;
  --hover: #f2f2f2;
  --preto: #111111;
  --verde: #22a55a;
  --raio: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 Inter, system-ui, sans-serif; color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- login ---------- */
.login { position: fixed; inset: 0; display: grid; place-items: center; background: var(--lateral); padding: 16px; }
.login form { width: 100%; max-width: 340px; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 32px; display: grid; gap: 12px; }
.login p { margin: 0 0 8px; color: var(--suave); }
.login small { color: #c0392b; min-height: 1em; }

/* ---------- casca ---------- */
.app { display: grid; grid-template-columns: 220px 1fr; height: 100vh; }
.lateral { background: var(--lateral); border-right: 1px solid var(--linha); display: flex; flex-direction: column; padding: 18px 12px; overflow-y: auto; }
.marca { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 6px; padding: 0 8px 18px; letter-spacing: -.01em; }
.marca-ico { font-size: 11px; }
.seletor-cliente { display: grid; gap: 4px; padding: 0 6px 10px; }
.seletor-cliente small { font-size: 10px; letter-spacing: .08em; color: var(--muito-suave); padding-left: 4px; }
.seletor-cliente select { padding: 7px 9px; font-weight: 500; background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-size: 11px; background: var(--hover); border-radius: 20px; padding: 2px 9px; color: #555; }
.refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.refs div { position: relative; aspect-ratio: 4/5; border-radius: 6px; overflow: hidden; background: #f3f3f3; }
.refs img { width: 100%; height: 100%; object-fit: cover; }
.refs button { position: absolute; top: 4px; right: 4px; border: 0; background: rgba(255,255,255,.9); border-radius: 50%; width: 22px; height: 22px; cursor: pointer; }
.abas-modal { display: flex; gap: 16px; border-bottom: 1px solid var(--linha); }
.abas-modal button { background: none; border: 0; padding: 6px 0 9px; color: var(--suave); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas-modal button.ativo { color: var(--texto); border-color: var(--texto); }
.lateral nav { display: grid; gap: 1px; }
.lateral nav small { font-size: 10px; letter-spacing: .08em; color: var(--muito-suave); padding: 14px 10px 6px; }
.lateral nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; color: #555; }
.lateral nav a i { font-style: normal; width: 16px; text-align: center; color: var(--muito-suave); }
.lateral nav a:hover { background: var(--hover); }
.lateral nav a.ativo { background: #ededed; color: var(--texto); font-weight: 500; }
.lateral .rodape { margin-top: auto; padding-top: 20px; }
main { overflow-y: auto; min-width: 0; }
.pagina { padding: 36px 44px 60px; max-width: 1280px; }
.pagina h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.02em; }
.pagina .sub { color: var(--suave); margin: 0 0 24px; font-size: 13px; }
.topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }

/* ---------- elementos ---------- */
.btn { background: var(--preto); color: #fff; border: 0; border-radius: 8px; padding: 9px 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.btn:hover { opacity: .88; }
.btn.claro { background: #fff; color: var(--texto); border: 1px solid var(--linha); }
.btn.claro:hover { background: var(--hover); opacity: 1; }
.btn.mini { padding: 5px 9px; font-size: 12px; border-radius: 6px; }
.btn.perigo { background: #fff; color: #c0392b; border: 1px solid #f0d0cc; }
.btn:disabled { opacity: .4; cursor: default; }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; border: 1px solid var(--linha); border-radius: 8px; padding: 9px 11px; background: #fff; outline: none; }
input:focus, select:focus, textarea:focus { border-color: #bdbdbd; }
textarea { resize: vertical; min-height: 90px; }
label.campo { display: grid; gap: 5px; font-size: 12px; color: var(--suave); }
.abas { display: flex; gap: 22px; border-bottom: 1px solid var(--linha); margin-bottom: 22px; align-items: center; flex-wrap: wrap; }
.abas button { background: none; border: 0; padding: 8px 0 11px; color: var(--suave); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas button.ativo { color: var(--texto); border-color: var(--texto); }
.abas .busca { margin-left: auto; width: 220px; border: 0; padding: 6px 0; text-align: right; }
.rotulo { font-size: 10px; letter-spacing: .08em; color: var(--muito-suave); text-transform: uppercase; margin: 22px 0 10px; }
.vazio { border: 1px dashed var(--linha); border-radius: var(--raio); padding: 40px; text-align: center; color: var(--suave); }

/* grade de peças */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; }
.peca { cursor: pointer; }
.peca .miniatura { aspect-ratio: 4/5; background: #f3f3f3; border-radius: 6px; overflow: hidden; position: relative; border: 1px solid var(--linha); }
.peca .miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.peca .miniatura.quadrado { aspect-ratio: 1; }
.peca .miniatura.story { aspect-ratio: 9/16; }
.selo { position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 7px; border-radius: 20px; background: #fff; color: var(--texto); font-weight: 600; }
.selo.publicado { background: var(--verde); color: #fff; }
.selo.pronto { background: #111; color: #fff; }
.peca h3 { font-size: 13px; font-weight: 500; margin: 10px 0 2px; }
.peca p { font-size: 11px; color: var(--suave); margin: 0; }
.peca:hover .miniatura { outline: 2px solid #111; outline-offset: 2px; }

/* cartões e listas */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cartao { border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; background: var(--cartao); }
.cartao h3 { margin: 10px 0 6px; font-size: 14px; font-weight: 600; }
.cartao p { margin: 0 0 14px; color: var(--suave); font-size: 12.5px; }
.cartao .ico { color: var(--muito-suave); font-size: 18px; }
.cartao.link { cursor: pointer; }
.cartao.link:hover { border-color: #cfcfcf; }
.linhas { display: grid; }
.linha { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--linha); }
.linha .tit { flex: 1; min-width: 0; }
.linha .tit b { font-weight: 500; display: block; }
.linha .tit span { color: var(--suave); font-size: 12px; }
.linha .meta { color: var(--muito-suave); font-size: 12px; white-space: nowrap; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 8px; }
.numero { border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.numero b { font-size: 26px; font-weight: 600; display: block; letter-spacing: -.02em; }
.numero span { color: var(--suave); font-size: 12px; }
.cores-mini { display: flex; gap: 4px; }
.cores-mini span { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }

/* menu suspenso */
.suspenso { position: relative; }
.suspenso-lista { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--linha); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.08); padding: 6px; z-index: 30; min-width: 230px; }
.suspenso-lista button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.suspenso-lista button:hover { background: var(--hover); }
.suspenso-lista button span { display: block; font-size: 11px; color: var(--suave); }

/* modal e aviso */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal-caixa { background: #fff; border-radius: 14px; width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto; padding: 26px; display: grid; gap: 14px; }
.modal-caixa h2 { margin: 0; font-size: 18px; font-weight: 600; }
.modal-caixa .acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dica { font-size: 12px; color: var(--suave); background: var(--lateral); border-radius: 8px; padding: 10px 12px; }
.aviso { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #111; color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 200; font-size: 13px; }

/* ---------- editor ---------- */
.editor { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; }
.ed-topo { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.ed-topo .titulo { border: 0; font-weight: 600; font-size: 15px; width: auto; min-width: 120px; flex: 1; padding: 6px; }
.ed-topo .estado { color: var(--muito-suave); font-size: 12px; }
.ed-corpo { display: grid; grid-template-columns: 64px 1fr 280px; min-height: 0; }
.ferramentas { border-right: 1px solid var(--linha); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; }
.ferramentas button { width: 46px; height: 46px; border: 0; background: none; border-radius: 8px; cursor: pointer; display: grid; place-items: center; font-size: 17px; color: #444; }
.ferramentas button small { display: block; font-size: 9px; color: var(--suave); }
.ferramentas button:hover { background: var(--hover); }
.palco { background: #efefef; overflow: auto; min-height: 0; display: grid; place-items: center; padding: 30px; min-width: 0; }
.palco .canvas-container { box-shadow: 0 4px 30px rgba(0,0,0,.12); }
.painel { border-left: 1px solid var(--linha); overflow-y: auto; min-height: 0; padding: 14px; display: grid; gap: 14px; align-content: start; }
.painel h4 { margin: 0; font-size: 11px; letter-spacing: .08em; color: var(--muito-suave); font-weight: 600; text-transform: uppercase; }
.painel .grupo { display: grid; gap: 8px; }
.painel .duas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.painel .tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.painel input, .painel select { padding: 7px 9px; font-size: 13px; }
.painel input[type=color] { width: 100%; height: 34px; padding: 2px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; }
.painel textarea { min-height: 70px; font-size: 13px; }
.camadas { display: grid; gap: 2px; }
.camadas div { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.camadas div:hover { background: var(--hover); }
.camadas div.sel { background: #ececec; }
.camadas div span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camadas div button { border: 0; background: none; cursor: pointer; color: var(--suave); padding: 0 2px; }
#painel-props { display: grid; gap: 14px; align-content: start; }
.caixa-ia { display: grid; gap: 8px; background: #f6f4ff; border: 1px solid #e4e0fb; border-radius: 10px; padding: 12px; }
.caixa-ia h4 { color: #5b4bd6 !important; }
.caixa-ia textarea { min-height: 70px; }
.ia-aviso { color: var(--suave); font-size: 11px; }
.anexos { display: flex; flex-wrap: wrap; gap: 6px; }
.anexos:empty { display: none; }
.anexos div { position: relative; width: 52px; height: 52px; border-radius: 6px; overflow: hidden; border: 1px solid var(--linha); }
.anexos img { width: 100%; height: 100%; object-fit: cover; }
.anexos button { position: absolute; top: 1px; right: 1px; border: 0; background: rgba(255,255,255,.9); border-radius: 50%; width: 18px; height: 18px; font-size: 11px; cursor: pointer; padding: 0; }
.trilha { border-top: 1px solid var(--linha); display: flex; gap: 10px; padding: 10px 16px; overflow-x: auto; align-items: center; }
.trilha .slide { flex: none; cursor: pointer; position: relative; }
.trilha .slide img { height: 84px; display: block; border-radius: 4px; border: 2px solid transparent; background: #f3f3f3; }
.trilha .slide.atual img { border-color: #111; }
.trilha .slide b { position: absolute; bottom: 4px; left: 6px; font-size: 10px; background: rgba(255,255,255,.9); padding: 0 4px; border-radius: 3px; }
.trilha .mais { height: 84px; width: 60px; border: 1px dashed #ccc; border-radius: 4px; background: none; cursor: pointer; font-size: 20px; color: var(--suave); flex: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .lateral { flex-direction: row; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .lateral nav { display: flex; }
  .lateral nav small, .marca { display: none; }
  .seletor-cliente { padding: 0 8px 0 0; min-width: 150px; }
  .seletor-cliente small { display: none; }
  .lateral .rodape { margin: 0; padding: 0; }
  .lateral nav a { white-space: nowrap; }
  .pagina { padding: 22px 16px 50px; }
  .ed-corpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .ferramentas { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--linha); overflow-x: auto; justify-content: flex-start; padding: 4px 8px; }
  .painel { border-left: 0; border-top: 1px solid var(--linha); max-height: 40vh; }
  .editor { height: auto; min-height: 100vh; }
}

/* ---------- editor de vídeo ---------- */
.ved { display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(220px, 34vh); height: 100vh; background: #fafafa; }
.ved-meio { display: grid; grid-template-columns: 220px minmax(0, 1fr) 270px; min-height: 0; }
.ved-cenas { border-right: 1px solid var(--linha); overflow-y: auto; background: #fff; }
.ved-cab { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muito-suave); font-weight: 600; position: sticky; top: 0; background: #fff; }
.cena-item { display: grid; grid-template-columns: 54px 1fr; gap: 8px; padding: 6px 10px; cursor: pointer; font-size: 12px; align-items: center; }
.cena-item:hover { background: var(--hover); }
.cena-item.sel { background: #ececec; }
.cena-item small { display: block; color: var(--suave); font-size: 11px; }
.cena-mini { width: 54px; height: 54px; border-radius: 5px; background-size: cover; background-position: center; display: grid; place-items: center; color: #fff; font-size: 14px; }
.ved-previa { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #1b1b1d; min-width: 0; min-height: 0; overflow: hidden; }
.ved-tela { position: relative; min-height: 0; overflow: hidden; }
.ved-tela canvas { position: absolute; box-shadow: 0 6px 30px rgba(0,0,0,.4); background: #000; }
.ved-controles { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 8px; background: #141416; color: #ddd; }
.ved-controles .estado { color: #aaa; }
.ved-controles .btn.claro { background: #2a2a2e; color: #eee; border-color: #3a3a3e; }
.tc { font: 600 13px ui-monospace, Menlo, monospace; color: #e8e8e8; min-width: 78px; text-align: center; }
.ved-props { border-left: 1px solid var(--linha); overflow-y: auto; padding: 14px; display: grid; gap: 10px; align-content: start; background: #fff; }
.ved-props h4 { margin: 0; font-size: 11px; letter-spacing: .08em; color: var(--muito-suave); text-transform: uppercase; }
.ved-props .duas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ved-props input, .ved-props select { padding: 7px 9px; font-size: 13px; }
.ved-props input[type=color] { height: 34px; padding: 2px; }
.ved-props textarea { min-height: 60px; font-size: 13px; }
.ved-linha { display: grid; grid-template-rows: auto minmax(0, 1fr); border-top: 1px solid #2c2c30; background: #1e1e21; color: #ddd; min-height: 0; }
.ved-ferr { display: flex; gap: 6px; align-items: center; padding: 6px 10px; border-bottom: 1px solid #2c2c30; }
.ved-ferr .btn.claro { background: #2a2a2e; color: #eee; border-color: #3a3a3e; }
.ved-ferr .estado { color: #999; }
.ved-tl { overflow: auto; position: relative; }
.tl-interno { position: relative; min-height: 100%; }
.tl-regua, .tl-pista { display: flex; }
.tl-rotulo { width: 130px; flex: none; position: sticky; left: 0; z-index: 3; background: #232327; border-right: 1px solid #333; font-size: 11px; padding: 0 8px; display: flex; align-items: center; gap: 6px; color: #bbb; }
.tl-rotulo b { background: #3a3a42; color: #ddd; border-radius: 3px; padding: 1px 5px; font-size: 10px; }
.tl-mudo { margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 12px; }
.tl-regua { height: 24px; position: sticky; top: 0; z-index: 4; background: #19191c; border-bottom: 1px solid #333; }
.tl-marcas { position: relative; cursor: pointer; }
.tl-marcas span { position: absolute; top: 5px; font: 10px ui-monospace, Menlo, monospace; color: #888; border-left: 1px solid #444; padding-left: 3px; height: 19px; }
.tl-pista { height: 40px; border-bottom: 1px solid #2a2a2e; }
.tl-pista.audio { height: 34px; }
.tl-faixa { position: relative; }
.tl-clipe { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; font-size: 11px; color: #fff; overflow: hidden; cursor: grab; display: flex; align-items: center; padding: 0 8px; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.18); box-sizing: border-box; user-select: none; }
.tl-clipe span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.8); pointer-events: none; }
.tl-clipe.texto { background: #6b5bd6; }
.tl-clipe.audio { background: linear-gradient(180deg, #2a7bd1, #1d5fa6); }
.tl-pista[data-pista="A3"] .tl-clipe { background: linear-gradient(180deg, #1f9e8a, #157564); }
.tl-pista[data-pista="V3"] .tl-clipe { background: #c99a2e; }
.tl-clipe.sel { outline: 2px solid #fff; outline-offset: -1px; z-index: 2; }
.tl-clipe.oculto { opacity: .35; }
.tl-borda { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; }
.tl-borda.esq { left: 0; } .tl-borda.dir { right: 0; }
.tl-borda:hover { background: rgba(255,255,255,.35); }
.tl-cursor { position: absolute; top: 0; bottom: 0; width: 2px; background: #ff4d6d; margin-left: 130px; z-index: 5; pointer-events: none; }
.tl-cursor::before { content: ''; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top-color: #ff4d6d; }
@media (max-width: 900px) {
  .ved { height: auto; grid-template-rows: auto auto auto; }
  .ved-meio { grid-template-columns: 1fr; }
  .ved-cenas { max-height: 160px; }
  .ved-tela { height: 50vh; }
  .ved-linha { height: 300px; }
}