:root {
  --petroleo: #0b3b3b; --petroleo-escuro: #062424; --petroleo-medio: #155050;
  --pastel: #a9c6c0; --off: #eef3f0; --dourado: #c9a24b; --dourado-esc: #a5823a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--petroleo-escuro); color: var(--off); min-height: 100vh; }

/* login */
.tela { display: none; } .tela.ativa { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.login-box { background: var(--petroleo); padding: 48px; border-radius: 16px; width: 360px; text-align: center; border: 1px solid rgba(201,162,75,.3); }
.login-box h1 { letter-spacing: 4px; font-weight: 800; } .login-box h1 span, .logo span { color: var(--dourado); }
.login-box p { color: var(--pastel); font-size: 13px; margin: 10px 0 24px; }
.erro { color: #e08a8a; margin-top: 12px; font-size: 13px; }

/* header */
header { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; background: var(--petroleo); border-bottom: 2px solid var(--dourado); position: sticky; top: 0; z-index: 5; }
.logo { font-weight: 800; letter-spacing: 3px; }
nav { display: flex; gap: 8px; }
.nav-btn { background: transparent; border: 1px solid var(--petroleo-medio); color: var(--pastel); padding: 8px 18px; border-radius: 20px; cursor: pointer; font-size: 14px; }
.nav-btn.ativa { background: var(--dourado); color: var(--petroleo-escuro); border-color: var(--dourado); font-weight: 700; }

/* layout */
.aba { display: none; padding: 32px; max-width: 1280px; margin: 0 auto; }
.aba.ativa { display: block; }
h2 { margin-bottom: 16px; font-weight: 700; letter-spacing: 1px; }
h3 { margin-bottom: 12px; color: var(--pastel); font-size: 15px; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.card { background: var(--petroleo); border: 1px solid var(--petroleo-medio); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
label { display: block; font-size: 13px; color: var(--pastel); margin-bottom: 12px; }
input, textarea, select { width: 100%; margin-top: 4px; padding: 10px; background: var(--petroleo-escuro); color: var(--off); border: 1px solid var(--petroleo-medio); border-radius: 8px; font-size: 14px; font-family: inherit; }
input[type=color] { padding: 2px; height: 42px; }
.linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
button { font-family: inherit; }
.btn-primario { width: 100%; padding: 12px; background: var(--dourado); color: var(--petroleo-escuro); font-weight: 700; border: 0; border-radius: 8px; cursor: pointer; font-size: 15px; margin-top: 4px; }
.btn-primario:disabled { opacity: .5; cursor: wait; }
.btn-secundario { padding: 10px 16px; background: transparent; border: 1px dashed var(--dourado); color: var(--dourado); border-radius: 8px; cursor: pointer; margin-top: 8px; }

/* clientes */
.cliente-item { padding: 12px 16px; background: var(--petroleo); border: 1px solid var(--petroleo-medio); border-radius: 10px; margin-bottom: 8px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.cliente-item:hover { border-color: var(--dourado); }
.cliente-item .cores { display: flex; gap: 4px; } .cliente-item .cores i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }

/* preview */
#preview, #grid-posts img { width: 100%; border-radius: 12px; border: 1px solid var(--petroleo-medio); background: #000; }
.status { margin-top: 10px; font-size: 13px; color: var(--dourado); min-height: 20px; }

/* revisão */
.filtros { display: flex; gap: 8px; margin-bottom: 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.post-card { background: var(--petroleo); border: 1px solid var(--petroleo-medio); border-radius: 12px; padding: 12px; }
.post-card .meta { font-size: 12px; color: var(--pastel); margin: 8px 0; }
.post-card .acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.post-card .acoes button { flex: 1; padding: 8px; border: 0; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 700; }
.b-ap { background: #3d7a4f; color: #fff; } .b-de { background: #7a3d3d; color: #fff; }
.b-dl { background: var(--petroleo-medio); color: var(--off); } .b-cp { background: var(--pastel); color: var(--petroleo-escuro); }

/* fila massa */
.fila-item { padding: 10px 14px; border-left: 3px solid var(--petroleo-medio); margin-bottom: 6px; font-size: 13px; background: var(--petroleo-escuro); border-radius: 0 8px 8px 0; }
.fila-item.ok { border-color: #3d7a4f; } .fila-item.rodando { border-color: var(--dourado); } .fila-item.erro { border-color: #7a3d3d; }

@media (max-width: 900px) { .duas-colunas { grid-template-columns: 1fr; } }