:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  --azul: #001d52;
  --azul-2: #092e69;
  --fundo: #06142d;
  --cartao: #0d2853;
  --linha: rgba(233, 243, 255, .16);
  --texto: #fff;
  --suave: #b7cbe5;
  --dourado: #deaf56;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--texto); background: radial-gradient(circle at 80% 0, #123b78 0, transparent 34rem), var(--fundo); }
.topo { min-height: 64px; padding: 12px clamp(18px, 4vw, 52px); display: flex; align-items: center; gap: 18px; background: var(--azul); border-bottom: 1px solid var(--linha); }
.marca { color: white; text-decoration: none; font-size: 1.45rem; font-weight: 900; }
.topo span { color: var(--suave); }
.voltar { margin-left: auto; color: white; text-decoration: none; padding: 9px 13px; border: 1px solid var(--linha); border-radius: 9px; }
main { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: clamp(32px, 6vw, 72px) 0; }
.intro { max-width: 680px; margin-bottom: 30px; }
.rotulo { margin: 0 0 10px; color: var(--dourado); font-size: .75rem; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0 0 12px; font-size: clamp(2rem, 6vw, 3.7rem); line-height: .98; letter-spacing: -.04em; }
h2 { margin: 0; font-size: 1.1rem; }
p { color: var(--suave); line-height: 1.55; }
.area { display: grid; gap: 20px; }
.cartao { padding: clamp(18px, 4vw, 30px); border: 1px solid var(--linha); border-radius: 18px; background: rgba(13, 40, 83, .88); box-shadow: 0 24px 70px rgba(0, 0, 0, .22); }
.campo, .acesso label { display: grid; gap: 8px; font-weight: 700; }
select, input[type="password"] { width: 100%; min-height: 46px; padding: 10px 12px; color: white; background: #071c3c; border: 1px solid var(--linha); border-radius: 10px; font: inherit; }
.envio { display: grid; justify-items: center; gap: 7px; margin-top: 20px; padding: 34px 18px; border: 2px dashed rgba(222, 175, 86, .6); border-radius: 14px; background: rgba(0, 29, 82, .45); cursor: pointer; text-align: center; }
.envio[data-arrastando="sim"] { border-color: white; background: var(--azul-2); }
.envio input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.envio .icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--dourado); color: #201401; font-size: 1.7rem; }
.envio small { color: var(--suave); }
.status { min-height: 24px; margin: 14px 0 0; }
.status[data-tipo="erro"] { color: #ff9b9b; }
.lista-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.atualizar, .acesso button { border: 0; border-radius: 9px; padding: 10px 14px; color: #211604; background: var(--dourado); font: 700 .9rem/1 inherit; cursor: pointer; }
.acesso form { display: grid; gap: 14px; }
#lista { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
#lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 14px; border: 1px solid var(--linha); border-radius: 11px; background: rgba(0, 14, 40, .35); }
#lista strong { overflow-wrap: anywhere; }
#lista small { color: var(--suave); }
.vazio { margin: 18px 0 0; }
[hidden] { display: none !important; }
@media (max-width: 560px) { .topo span { display: none; } .voltar { font-size: .84rem; } main { padding-top: 34px; } }