:root {
  --bg: #f5f7f6;
  --surface: #ffffff;
  --ink: #17232b;
  --ink-2: #4a5a63;
  --line: #d5dedb;
  --accent: #0b7d8c;
  --accent-ink: #085e69;
  --ok: #2e7d32;
  --off: #b9561c;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 "Segoe UI", system-ui, sans-serif; }
a { color: var(--accent-ink); }

.topo { display: flex; align-items: center; gap: 1.5rem; padding: .6rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.topo .marca { font-weight: 700; text-decoration: none; color: var(--ink); }
.topo .menu a { margin-right: 1rem; text-decoration: none; }
.topo .empresa { color: var(--ink-2); }
.topo .usuario { margin-left: auto; color: var(--ink-2); display: flex; gap: .8rem; align-items: center; }

.conteudo { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.5rem; display: grid; gap: 1.2rem; }
.cartao { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1.2rem 1.4rem; }
.cartao.login { max-width: 380px; margin: 4rem auto; }
h1 { font-size: 1.4rem; margin: 0 0 .8rem; }
h1 small { font-size: .85rem; color: var(--ink-2); font-weight: 400; margin-left: .6rem; }
h2 { font-size: 1.1rem; margin: 0 0 .8rem; }

form { display: grid; gap: .7rem; max-width: 480px; }
label { display: grid; gap: .25rem; font-size: .9rem; color: var(--ink-2); }
input, select { padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 4px; font: inherit; color: var(--ink); background: var(--surface); }
button { padding: .5rem .9rem; border: 0; border-radius: 4px; background: var(--accent); color: #fff; font: inherit; cursor: pointer; justify-self: start; }
button:hover { background: var(--accent-ink); }
td form { display: inline; }
td button { padding: .25rem .6rem; font-size: .85rem; }

table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
td.num { font-variant-numeric: tabular-nums; }
.mono { font-family: Consolas, monospace; font-size: .9em; }

.estado { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; color: #fff; }
.estado.online { background: var(--ok); }
.estado.offline { background: var(--off); }

.aviso { padding: .6rem .9rem; border-left: 3px solid var(--accent); background: #d9eef1; border-radius: 0 4px 4px 0; }
.erro { padding: .6rem .9rem; border-left: 3px solid var(--off); background: #f6e6dc; border-radius: 0 4px 4px 0; }
.erro:empty { display: none; }
.erro ul { margin: 0; padding-left: 1.2rem; }

/* midias e playlists */
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem 2rem; align-items: start; }
.campos { display: grid; gap: .7rem; }
form.larga { max-width: none; }
.rotulo { font-size: .9rem; color: var(--ink-2); }
label.linha { display: flex; align-items: center; gap: .5rem; color: var(--ink); }
label.linha input[type=checkbox] { width: auto; }
.dica { font-size: .85rem; color: var(--ink-2); margin: 0; }
.previa video { width: 120px; height: 68px; object-fit: cover; background: #000; border-radius: 4px; display: block; }
.player-previa { width: 100%; max-width: 480px; background: #000; border-radius: 6px; }
.detalhes { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; font-size: .93rem; margin: 1rem 0 0; }
.detalhes dt { color: var(--ink-2); }
.detalhes dd { margin: 0; }
tr.inativa td { color: var(--ink-2); }
table.itens input.curto { width: 5rem; }
table.itens input[type=datetime-local] { width: 11.5rem; }
table.itens select { padding: .3rem .4rem; }
td.acoes { white-space: nowrap; }
td.acoes button { padding: .2rem .5rem; margin-right: .15rem; }
.barra { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
button.perigo { background: var(--off); }
button.destaque { background: var(--accent-ink); font-weight: 600; }
.estado.pendente { background: #b9871c; margin-left: .4rem; }