:root {
  --azul: #0060A5; --azul2: #1E88D9; --amarelo: #FFE600; --fundo: #F2FAFC; --texto: #3d4650; --titulo: #0b2a45;
  --card: #fff; --linha: #dde8ee; --verde: #1d8a4e; --verde-bg: #e3f6ea; --vermelho: #c0392b; --vermelho-bg: #fdeaea; --cinza: #6b7a8a;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'DM Sans', system-ui, sans-serif; color: var(--texto); background: var(--fundo); font-size: 15px; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; color: var(--titulo); margin: 0 0 .4em; }
h1 em, h2 em { color: var(--azul); font-style: normal; }
a { color: var(--azul); }
[hidden] { display: none !important; }

header { display: flex; align-items: center; gap: 24px; padding: 10px 24px; background: #fff; border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 5; }
.logo { height: 40px; }
nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
nav a { text-decoration: none; padding: 8px 14px; border-radius: 999px; color: var(--titulo); font-weight: 500; }
nav a.ativa { background: var(--azul); color: #fff; }
main { max-width: 1280px; margin: 0 auto; padding: 24px 16px 60px; }

.card { background: var(--card); border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 60, 110, .07); padding: 18px 20px; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.rotulo { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--azul); font-weight: 700; }
.sub { color: var(--cinza); font-size: 13px; }

.btn { text-decoration: none; display: inline-block; border: 0; border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; background: var(--azul); color: #fff; }
.btn.amarelo { background: var(--amarelo); color: var(--titulo); }
.btn.claro { background: #e8f1f7; color: var(--azul); }
.btn.link { background: none; color: var(--azul); padding: 6px 8px; }
.btn.perigo { background: var(--vermelho-bg); color: var(--vermelho); }
.btn:disabled { opacity: .5; cursor: default; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.monitor h3 { font-size: 18px; margin-bottom: 2px; cursor: pointer; }
.preco { font-size: 28px; font-weight: 700; color: var(--titulo); margin: 10px 0 2px; }
.preco small { font-size: 13px; font-weight: 500; color: var(--cinza); }
.delta { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.delta.baixou { background: var(--verde-bg); color: var(--verde); }
.delta.subiu { background: var(--vermelho-bg); color: var(--vermelho); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cinza); }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cinza); }
.status.ok::before { background: var(--verde); } .status.erro::before { background: var(--vermelho); } .status.pausado::before { background: #c9a500; }
.status.rodando::before { background: var(--azul2); animation: pulsar 1s infinite; }
@keyframes pulsar { 50% { opacity: .3; } }
.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: #e8f1f7; color: var(--azul); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { position: sticky; top: 0; background: #f7fbfd; color: var(--titulo); font-weight: 700; cursor: pointer; white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.baixou { background: var(--verde-bg); color: var(--verde); font-weight: 700; }
td.subiu { background: var(--vermelho-bg); color: var(--vermelho); font-weight: 700; }
.tabela { max-height: 70vh; overflow: auto; border-radius: 10px; border: 1px solid var(--linha); background: #fff; }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; align-items: end; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--titulo); }
input, select, textarea { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid #c9d8e2; border-radius: 8px; background: #fff; color: var(--texto); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul2); border-color: transparent; }
.check { flex-direction: row; align-items: center; font-weight: 500; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login form { width: min(360px, 100%); display: flex; flex-direction: column; gap: 12px; }
.logo-login { width: 140px; align-self: center; }
.erro { color: var(--vermelho); font-size: 13px; min-height: 1em; margin: 0; }

dialog { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100% - 32px)); box-shadow: 0 10px 40px rgba(0, 0, 0, .2); }
dialog::backdrop { background: rgba(11, 42, 69, .4); }
dialog form { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.trecho { display: grid; grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr auto; gap: 8px; align-items: end; }
.mudanca { white-space: pre-line; font-size: 12px; color: var(--titulo); }
.grafico { position: relative; height: 280px; }
.aviso { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--titulo); color: #fff; padding: 10px 18px; border-radius: 999px; z-index: 20; }
.vazio { text-align: center; padding: 40px; color: var(--cinza); }
.stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.stats .card { padding: 12px 16px; min-width: 140px; }
.stats b { display: block; font-size: 22px; color: var(--titulo); }

@media (max-width: 700px) {
  header { padding: 8px 12px; gap: 10px; flex-wrap: wrap; }
  .trecho { grid-template-columns: 1fr 1fr; }
}