:root {
  --fundo: #f7f3ec; --cartao: #fffdf8; --texto: #2b2a26; --muted: #7a7468; --linha: #e6dfd2;
  --musgo: #4a5a3a; --musgo-claro: #e7ecdf; --terra: #a86b3c; --mel: #e8b24a; --erro: #b3412e; --ok: #3f7a3a;
  --raio: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #1c1b18; --cartao: #262520; --texto: #ece6da; --muted: #a39c8e; --linha: #3a372f;
    --musgo: #9db584; --musgo-claro: #2f3628; --terra: #d0935f; --mel: #e8b24a; --erro: #e07a66; --ok: #8fc488;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--musgo); }
.muted { color: var(--muted); }
small { font-size: .85em; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

/* login */
body.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.caixa-login { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 28px; width: min(360px, 100%); text-align: center; display: grid; gap: 12px; }
.caixa-login label { text-align: left; }
.erro { color: var(--erro); margin: 0; }

/* topo */
header { position: sticky; top: 0; z-index: 5; background: var(--fundo); border-bottom: 1px solid var(--linha); }
.topo { max-width: 1040px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.cota { flex: 1; min-width: 160px; max-width: 320px; margin-left: auto; font-size: .82rem; color: var(--muted); }
.barra { height: 7px; background: var(--linha); border-radius: 9px; overflow: hidden; margin-top: 3px; }
.barra > i { display: block; height: 100%; background: var(--musgo); width: 0; transition: width .4s; }
.barra.alta > i { background: var(--erro); }
nav { max-width: 1040px; margin: 0 auto; padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; }
nav button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 10px; font: inherit; color: var(--muted); cursor: pointer; white-space: nowrap; }
nav button.ativo { color: var(--texto); border-color: var(--musgo); font-weight: 600; }

main { max-width: 1040px; margin: 0 auto; padding: 18px 16px 60px; }
.aba { display: none; }
.aba.ativa { display: block; }

/* cartões */
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.cartao > p:first-of-type { margin-top: 0; }
.cartao form { display: grid; gap: 10px; }
.ferr-topo { display: flex; gap: 10px; align-items: flex-start; }
.ferr-topo .emo { font-size: 1.6rem; line-height: 1; }
details summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
details[open] summary { margin-bottom: 8px; }
details > div { display: grid; gap: 10px; }

label { display: grid; gap: 4px; font-size: .9rem; font-weight: 600; }
label .dica { font-weight: 400; color: var(--muted); font-size: .82rem; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; flex-wrap: wrap; }
label.check .dica { flex-basis: 100%; padding-left: 26px; margin-top: -4px; }
input, select, textarea { font: inherit; color: var(--texto); background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: 9px 11px; width: 100%; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--musgo); }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--musgo); outline-offset: 1px; }

.btn { background: var(--musgo); color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; }
@media (prefers-color-scheme: dark) { .btn { color: #1c1b18; } }
.btn:disabled { opacity: .5; cursor: default; }
.btn.sec { background: transparent; color: var(--texto); border: 1px solid var(--linha); }
.btn.peq { padding: 6px 10px; font-size: .85rem; }
.btn.perigo { background: var(--erro); }
.acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.custo { font-size: .85rem; color: var(--muted); }

/* agora */
#agora { margin-bottom: 18px; }
#agora.vazio { display: none; }
.agora-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
pre.log { background: #1d1c19; color: #e9e3d6; border-radius: 10px; padding: 12px; font: 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace; max-height: 340px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 10px 0 0; }
.pilula { display: inline-block; font-size: .78rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--musgo-claro); color: var(--musgo); }
.pilula.erro, .pilula.parada, .pilula.interrompida, .pilula.cancelada { background: color-mix(in srgb, var(--erro) 15%, transparent); color: var(--erro); }
.pilula.rodando, .pilula.na.fila { background: color-mix(in srgb, var(--mel) 25%, transparent); color: var(--terra); }
.pilula.demo { background: var(--linha); color: var(--muted); }

/* lista de relatórios */
.lista { display: grid; gap: 10px; }
.item { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.item .info { flex: 1; min-width: 200px; }
.item .titulo { font-weight: 600; }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros button { border: 1px solid var(--linha); background: var(--cartao); border-radius: 99px; padding: 5px 12px; font: inherit; font-size: .88rem; cursor: pointer; color: var(--texto); }
.filtros button.ativo { background: var(--musgo); border-color: var(--musgo); color: #fff; }

/* ajustes */
.duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.secao { margin-bottom: 18px; }
.chaves { display: grid; gap: 6px; }
.chaves div { display: flex; gap: 8px; align-items: center; }

/* agenda */
.dias { display: flex; gap: 4px; flex-wrap: wrap; }
.dias label { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 34px; border: 1px solid var(--linha); border-radius: 8px; cursor: pointer; font-weight: 500; }
.dias input { display: none; }
.dias label:has(input:checked) { background: var(--musgo); border-color: var(--musgo); color: #fff; }

.aviso { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--texto); color: var(--fundo); padding: 10px 16px; border-radius: 10px; max-width: calc(100% - 32px); box-shadow: 0 6px 24px rgba(0,0,0,.2); z-index: 20; }
.aviso.erro { background: var(--erro); color: #fff; }
.oculto { display: none !important; }
ul.ajuda { padding-left: 1.1em; }
ul.ajuda li { margin-bottom: 6px; }
.cartao.destaque { border: 2px solid var(--musgo); margin-bottom: 8px; }
.cartao.destaque form { max-width: 560px; }
h3.sub { margin: 22px 0 10px; color: var(--muted); font-weight: 600; font-size: .95rem; }