/* Painel v2 — mesmo visual do publicador legado (public/index.html da raiz): tokens, raios, abas, drop zone, grade. */
:root {
  --bg: #f6f5f3; --card: #fff; --ink: #1c1b1a; --muted: #6f6b66; --line: #e4e1dc;
  --accent: #d62976; --accent-ink: #fff; --ok: #1f8a4c; --err: #c0392b; --soft: #f1eee9;
  --warn: #9a6700; --info: #2f6db3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141312; --card: #1e1d1b; --ink: #f1efec; --muted: #a29d96; --line: #33312e;
    --accent: #ee4f95; --soft: #282624; --ok: #3fb66f; --err: #e5675a; --warn: #d6a43a; --info: #6aa5e8;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
main.narrow { max-width: 420px; padding-top: 12vh; }
header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
h1 { font-size: 20px; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 18px 0 8px; color: var(--muted); font-weight: 600; }
a { color: var(--accent); }
#who { color: var(--muted); font-size: 14px; display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: baseline; }
#who b { color: var(--ink); }
#who .linkbtn { color: var(--accent); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.card + .card { margin-top: 16px; }
[hidden] { display: none !important; }

/* navegação entre telas (pílulas do legado) */
.views { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.views a { border: 1px solid var(--line); background: var(--card); color: var(--muted); padding: 8px 16px; border-radius: 99px; font-weight: 600; text-decoration: none; }
.views a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* abas de tipo */
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: var(--soft); padding: 4px; border-radius: 10px; margin: 18px 0; }
.tabs button { border: 0; background: transparent; color: var(--muted); padding: 9px 4px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; }

/* upload */
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 26px 16px; text-align: center; cursor: pointer; color: var(--muted); transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--soft); }
.drop strong { color: var(--ink); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 14px; }
.thumb { position: relative; aspect-ratio: 4/5; border-radius: 10px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .n { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 1px 7px; border-radius: 99px; }
.thumb .tools { position: absolute; bottom: 6px; right: 6px; display: flex; gap: 4px; }
.thumb .tools button { border: 0; width: 26px; height: 26px; border-radius: 99px; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 13px; line-height: 1; }
.thumb .bar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--accent); width: 0; transition: width .2s; }
.thumb.done .bar { background: var(--ok); }
.thumb .fail { position: absolute; inset: 0; background: rgba(0,0,0,.72); color: #fff; font-size: 12px; padding: 30px 8px 8px; overflow: auto; }
.thumb .fail b { color: #ff9b8f; display: block; }

/* formulários */
label.field { display: block; margin-top: 18px; font-weight: 600; font-size: 14px; }
label.field:first-child { margin-top: 0; }
textarea, input[type=number], input[type=text], input[type=password], input[type=datetime-local], select {
  width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font: inherit; }
select.inline, input.inline { width: auto; margin-top: 0; padding: 7px 10px; font-size: 14px; }
textarea { min-height: 120px; resize: vertical; }
.count { text-align: right; color: var(--muted); font-size: 12px; margin-top: 4px; }
.count.over { color: var(--err); font-weight: 600; }
.row { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.row.tight { margin-top: 10px; gap: 8px; }
.row .grow { flex: 1; min-width: 160px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.small-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 7px 12px; border-radius: 8px; font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block; }
.small-btn:disabled { opacity: .5; cursor: not-allowed; }
.small-btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--line)); }
.small-btn.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); font-weight: 600; }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
.btn-main { width: 100%; margin-top: 22px; padding: 14px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.btn-main:disabled { opacity: .45; cursor: not-allowed; }
.when { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin-top: 12px; }
.when input { flex: 1; min-width: 190px; margin-top: 0; }
.when .small-btn { padding: 10px 16px; }

/* mensagens */
.msg { margin-top: 14px; border-radius: 10px; padding: 10px 14px; font-size: 14px; background: var(--soft); }
.msg:empty { display: none; }
.msg.err { color: var(--err); background: color-mix(in srgb, var(--err) 10%, var(--card)); }
.msg.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--card)); }
.msg.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--card)); }
.msg ul { margin: 4px 0 0; padding-left: 18px; }
.msg a { font-weight: 700; }
.notice { background: var(--soft); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.notice b, .notice strong { color: var(--ink); }
.notice ol { margin: 6px 0 0; padding-left: 20px; }
.notice code { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; color: var(--ink); font-size: 13px; }
.empty { text-align: center; color: var(--muted); padding: 30px 0; }
.muted { color: var(--muted); }
.err-text { color: var(--err); }

/* log de eventos (caixa monoespaçada do legado) */
.logbox { margin-top: 18px; background: var(--soft); border-radius: 10px; padding: 12px 14px; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; max-height: 520px; overflow: auto; }
.logbox:empty { display: none; }
.logbox .ev { padding: 2px 0; }
.logbox .t { color: var(--muted); }
.logbox .info { color: var(--info); font-weight: 600; }
.logbox .warn { color: var(--warn); font-weight: 600; }
.logbox .error { color: var(--err); font-weight: 600; }
.logbox .ok { color: var(--ok); font-weight: 600; }
.logbox details { margin: 2px 0 4px 2ch; color: var(--muted); }
.logbox summary { cursor: pointer; }

/* status */
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: .03em; background: var(--soft); color: var(--muted); white-space: nowrap; }
.badge.s-scheduled { color: var(--info); background: color-mix(in srgb, var(--info) 14%, var(--card)); }
.badge.s-creating, .badge.s-processing, .badge.s-publishing { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--card)); }
.badge.s-published { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--card)); }
.badge.s-failed { color: var(--err); background: color-mix(in srgb, var(--err) 14%, var(--card)); }

/* agenda */
.day { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: capitalize; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.day:first-child { margin-top: 0; }
.item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; }
.item .mini { width: 64px; aspect-ratio: 4/5; border-radius: 8px; background: var(--soft) center/cover no-repeat; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--muted); text-transform: uppercase; overflow: hidden; }
.item .top { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; font-size: 14px; }
.item .time { font-weight: 700; font-variant-numeric: tabular-nums; }
.item .cap { font-size: 13px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.item .error { font-size: 13px; color: var(--err); margin-top: 4px; overflow-wrap: anywhere; }
.item .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.item .acts .small-btn { font-size: 13px; padding: 5px 10px; }
#agList { margin-top: 14px; }
.editor { margin-top: 10px; background: var(--soft); border-radius: 10px; padding: 12px; }
.editor textarea { min-height: 90px; }

/* publicados (grade do legado) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 16px; }
.post { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: var(--card); }
.post.gone { opacity: .6; }
.post .img { aspect-ratio: 4/5; background: var(--soft) center/cover no-repeat; position: relative; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.post .img img.thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post .kind { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: .03em; }
.post .flag { position: absolute; top: 8px; right: 8px; }
.post .body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post .date { font-size: 12px; color: var(--muted); }
.post .cap { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; overflow-wrap: anywhere; }
.post .acts { display: flex; gap: 6px; margin-top: auto; }
.post .acts a, .post .acts button { flex: 1; text-align: center; text-decoration: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 7px 4px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.post .acts a[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.post .acts button:disabled { opacity: .45; cursor: not-allowed; }
.post .acts .del { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--line)); }

/* contas */
.clients { list-style: none; margin: 0; padding: 0; }
.clients li { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.clients li:last-child { border-bottom: 0; }
.clients .name { flex: 1; font-weight: 600; min-width: 120px; overflow-wrap: anywhere; }
.clients input { flex: 1; min-width: 140px; margin-top: 0; }
table.accts { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
/* uma tabela por cliente: colunas fixas para os grupos alinharem */
table.accts { table-layout: fixed; margin-top: 0; }
table.accts th:nth-child(1) { width: 26%; } table.accts th:nth-child(2) { width: 24%; }
table.accts th:nth-child(3) { width: 8%; } table.accts th:nth-child(4) { width: 14%; }
table.accts th:nth-child(5) { width: 12%; }
table.accts select { width: 100%; }
table.accts th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.accts td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.accts tr:last-child td { border-bottom: 0; }
table.accts td.user { font-weight: 700; overflow-wrap: anywhere; }
table.accts select { margin-top: 0; padding: 6px 8px; font-size: 14px; }
table.accts tr.off td.user { color: var(--muted); text-decoration: line-through; }
@media (max-width: 640px) {
  table.accts thead { display: none; }
  table.accts, table.accts tbody, table.accts tr, table.accts td { display: block; width: 100%; }
  table.accts tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  table.accts td { border: 0; padding: 4px 0; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
  table.accts td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 600; }
  table.accts td.user::before { content: none; }
  table.accts td select { max-width: 60%; }
}

/* diálogo de confirmação */
dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); padding: 20px; width: min(440px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h2 { margin-bottom: 8px; }
dialog p { margin: 8px 0; font-size: 14px; }
dialog .warnbox { background: color-mix(in srgb, var(--warn) 12%, var(--card)); color: var(--warn); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 600; }
dialog #cfTypeBox { margin-top: 12px; }
dialog .btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
dialog .btns .go { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
dialog .btns .go.danger { background: var(--err); border-color: var(--err); color: #fff; }

@media (max-width: 420px) {
  main { padding: 16px 12px 48px; }
  .card { padding: 16px 14px; }
  .views a { padding: 7px 12px; font-size: 14px; }
  .tabs button { font-size: 13px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .post .acts { flex-wrap: wrap; }
}