:root {
  --breu: #07070B; --carvao: #0E0E15; --fumaca: #16161F;
  --areia: #F2EDE4; --areia-meia: rgba(242,237,228,.66); --areia-fina: rgba(242,237,228,.54);
  --fio: rgba(242,237,228,.12); --fio-forte: rgba(242,237,228,.22);
  --champanhe: #EDD8AC; --ouro: #C9A227; --bronze: #8A6A2F;
  --grad: linear-gradient(110deg, #F7E9C8, #E3C489 45%, #B98C3C);
  --serifa: 'Instrument Serif', Georgia, serif;
  --corpo: 'Instrument Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --lento: cubic-bezier(.22,.61,.36,1);
  --margem: clamp(1rem, 3.5vw, 3rem);
  --largura: 1240px;
  --rotulo: .68rem; --entalhe: .16em;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--breu); color: var(--areia); font-family: var(--corpo); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
::selection { background: rgba(201,162,39,.35); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* topo */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--margem); border-bottom: 1px solid var(--fio); position: sticky; top: 0; background: rgba(7,7,11,.86); backdrop-filter: blur(10px); z-index: 5; }
.marca { display: inline-flex; align-items: center; gap: .6rem; }
.marca .nome { font-family: var(--serifa); font-size: 1.45rem; letter-spacing: -.01em; }
.sigla { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 17px; flex: none; }
.sigla i { display: block; width: 2.5px; border-radius: 2px; background: var(--champanhe); }
.sigla i:nth-child(1) { height: 6px; } .sigla i:nth-child(2) { height: 13px; } .sigla i:nth-child(3) { height: 17px; } .sigla i:nth-child(4) { height: 9px; }
.menu { display: flex; align-items: center; gap: clamp(.9rem, 2.5vw, 1.8rem); }
.menu a { font-size: .9rem; color: var(--areia-meia); white-space: nowrap; transition: color .35s var(--lento); }
.menu a:hover { color: var(--areia); }
.menu a.destaque { color: var(--champanhe); }

.app { flex: 1; width: 100%; max-width: var(--largura); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--margem) 3rem; }
.rodape { padding: 1.2rem var(--margem); border-top: 1px solid var(--fio); color: var(--areia-fina); font-size: .78rem; }

/* tipografia */
h1 { font-family: var(--serifa); font-weight: 400; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .6rem; }
h1 em, .grad { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-family: var(--serifa); font-weight: 400; font-size: 1.5rem; margin: 0 0 .5rem; letter-spacing: -.01em; }
.rotulo { font-family: var(--mono); font-size: var(--rotulo); letter-spacing: var(--entalhe); text-transform: uppercase; color: var(--ouro); }
.sub { color: var(--areia-meia); margin: 0 0 1.6rem; max-width: 62ch; line-height: 1.5; }
.mudo { color: var(--areia-fina); }
.mono { font-family: var(--mono); font-size: .78rem; }

/* botões */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.15rem; border-radius: 999px; border: 1px solid var(--fio-forte); background: transparent; cursor: pointer; font-size: .9rem; transition: border-color .3s var(--lento), background .3s var(--lento), color .3s; }
.btn:hover { border-color: var(--champanhe); }
.btn.principal { background: var(--grad); color: #1a1408; border-color: transparent; font-weight: 600; }
.btn.principal:hover { filter: brightness(1.05); }
.btn.pequeno { padding: .4rem .8rem; font-size: .8rem; }
.btn.perigo:hover { border-color: #b8563f; color: #e0a596; }
.btn[disabled] { opacity: .45; cursor: default; }
.acoes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* cartões / formulários */
.cartao { background: var(--carvao); border: 1px solid var(--fio); border-radius: 14px; padding: 1.3rem 1.4rem; }
.grade { display: grid; gap: 1rem; }
.grade.duas { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo > .rotulo { margin-bottom: .1rem; }
input[type=text], input[type=number], input[type=password], select, textarea { background: var(--breu); border: 1px solid var(--fio-forte); border-radius: 9px; padding: .65rem .8rem; color: var(--areia); outline: none; width: 100%; transition: border-color .3s var(--lento); }
input:focus, select:focus, textarea:focus { border-color: var(--ouro); }
input::placeholder { color: var(--areia-fina); }
.linha { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--fio-forte); font-size: .82rem; cursor: pointer; user-select: none; transition: all .25s var(--lento); background: transparent; color: var(--areia-meia); }
.chip.on { border-color: var(--ouro); color: var(--champanhe); background: rgba(201,162,39,.1); }
.chip.termo { color: var(--areia); border-color: var(--ouro); }
.chip .x { color: var(--areia-fina); }
.opcao { display: flex; gap: .55rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--fio); border-radius: 10px; cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--ouro); background: rgba(201,162,39,.07); }
.opcao input { margin-top: .2rem; accent-color: var(--ouro); }
.opcao small { display: block; color: var(--areia-fina); font-size: .78rem; margin-top: .15rem; }
.presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.dica { color: var(--areia-fina); font-size: .8rem; }
.erro { color: #e0a596; font-size: .85rem; }
.sugestoes { position: absolute; z-index: 4; background: var(--fumaca); border: 1px solid var(--fio-forte); border-radius: 9px; margin-top: 2px; width: 100%; max-height: 220px; overflow: auto; }
.sugestoes div { padding: .45rem .8rem; cursor: pointer; font-size: .88rem; }
.sugestoes div:hover { background: rgba(242,237,228,.06); }
.relativo { position: relative; }

/* lista de análises */
.lista { display: grid; gap: .8rem; }
.item { display: grid; grid-template-columns: 1fr auto; gap: .8rem 1.2rem; align-items: center; padding: 1rem 1.2rem; }
.item h3 { font-family: var(--serifa); font-weight: 400; font-size: 1.25rem; margin: 0 0 .25rem; }
.item .meta { color: var(--areia-fina); font-size: .8rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.badge { display: inline-block; padding: .18rem .55rem; border-radius: 999px; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--fio-forte); color: var(--areia-meia); white-space: nowrap; }
.badge.ok { border-color: rgba(237,216,172,.5); color: var(--champanhe); }
.badge.nao { color: var(--areia-fina); }
.badge.indef { border-color: rgba(138,106,47,.7); color: #d7b56b; }
.badge.rodando { border-color: rgba(201,162,39,.6); color: var(--champanhe); animation: pulsa 1.6s infinite; }
.badge.erro { border-color: rgba(184,86,63,.7); color: #e0a596; }
@keyframes pulsa { 50% { opacity: .55; } }

/* progresso */
.progresso { display: grid; gap: .5rem; margin: 1rem 0 1.4rem; }
.barra { height: 4px; background: var(--fio); border-radius: 2px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--grad); width: 0; transition: width .6s var(--lento); }
.resumo { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: .6rem 0 1.2rem; }
.resumo b { font-family: var(--serifa); font-weight: 400; font-size: 1.7rem; margin-right: .3rem; }
.resumo span { color: var(--areia-fina); font-size: .82rem; }

/* filtros e tabela */
.filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .9rem; }
.filtros input, .filtros select { width: auto; min-width: 9rem; padding: .5rem .7rem; }
.tabela { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tabela th { text-align: left; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--areia-fina); padding: .5rem .6rem; border-bottom: 1px solid var(--fio-forte); cursor: pointer; white-space: nowrap; }
.tabela td { padding: .7rem .6rem; border-bottom: 1px solid var(--fio); vertical-align: top; }
.tabela tr.ok td:first-child { box-shadow: inset 3px 0 0 var(--ouro); }
.tabela .n { color: var(--areia-fina); width: 2rem; }
.tabela .r { text-align: right; white-space: nowrap; }
.tabela .peq { color: var(--areia-fina); font-size: .78rem; margin-top: .2rem; line-height: 1.35; }
.tabela .obs { max-width: 32ch; }
.tabela a.ext { color: var(--champanhe); font-size: .8rem; }
.tabela .corrigir { font-size: .75rem; color: var(--areia-fina); cursor: pointer; text-decoration: underline dotted; }
.tabela .aviso { color: #d7b56b; }
.corrige { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.corrige select, .corrige input { padding: .3rem .5rem; font-size: .8rem; width: auto; }
.vazio { padding: 2rem; text-align: center; color: var(--areia-fina); }
.tabela-envolve { overflow-x: auto; }

/* login */
.login { max-width: 420px; margin: 8vh auto 0; }
.login h1 { font-size: 2.4rem; }

@media (max-width: 720px) {
  .item { grid-template-columns: 1fr; }
  .tabela { font-size: .8rem; }
}
@media print {
  body { background: #fff; color: #111; }
  .topo, .rodape, .filtros, .acoes, .corrigir, .corrige, .btn { display: none !important; }
  .cartao { border: none; background: none; padding: 0; }
  .tabela td, .tabela th { border-color: #ccc; color: #111; }
  .tabela .peq, .tabela .n, .mudo { color: #555; }
  .badge { color: #111; border-color: #999; }
  h1 em, .grad { color: #7a5a10; background: none; -webkit-text-fill-color: initial; }
  .tabela tr.ok td:first-child { box-shadow: inset 3px 0 0 #2e8b57; }
}