:root {
  --tinta: #10263b; --tinta-2: #35506a; --tinta-3: #5b7288; --azul: #1733b4; --ceu: #4db8e8;
  --fundo: #f3f6fa; --cartao: #fff; --borda: #e3e8ef; --erro: #b42318; --raio: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e6eef6; --tinta-2: #b4c4d4; --tinta-3: #8aa0b5; --azul: #8fb0ff; --ceu: #4db8e8;
    --fundo: #0d1622; --cartao: #142233; --borda: #23364b; --erro: #ff8a7a;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tinta); background: var(--fundo); }
.olho { margin: 0; color: var(--tinta-3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
button, input { font: inherit; color: inherit; }
.botao { border: 0; border-radius: 10px; padding: 11px 16px; background: var(--azul); color: #fff; font-weight: 600; cursor: pointer; }
.botao:disabled { opacity: .6; cursor: progress; }
.botao-leve { border: 1px solid var(--borda); background: var(--cartao); color: var(--tinta-2); border-radius: 10px; padding: 7px 12px; cursor: pointer; }
.botao-leve:hover { border-color: var(--ceu); }
:focus-visible { outline: 2px solid var(--ceu); outline-offset: 2px; }

/* Hub */
.topo { max-width: 1160px; margin: 0 auto; padding: 32px 16px 8px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.topo h1 { margin: 4px 0 0; font-size: 28px; letter-spacing: -.01em; }
.topo .total { margin: 2px 0 0; color: var(--tinta-3); font-size: 14px; }
.grade { max-width: 1160px; margin: 0 auto; padding: 16px 16px 56px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
a.cartao { display: flex; flex-direction: column; background: var(--cartao); border-radius: var(--raio); overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--borda); box-shadow: 0 1px 2px rgba(16,38,59,.06); transition: border-color .15s, transform .15s, box-shadow .15s; }
a.cartao:hover { border-color: var(--ceu); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16,38,59,.10); }
.cartao .capa { aspect-ratio: 3 / 2; background: linear-gradient(135deg, #dfe8f3, #c6d6ea); }
.cartao .capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartao .corpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cartao h2 { margin: 0; font-size: 17px; line-height: 1.3; color: var(--azul); }
.cartao p { margin: 0; color: var(--tinta-2); font-size: 14px; }
.cartao small { margin-top: auto; padding-top: 8px; color: var(--tinta-3); font-size: 12px; }
.vazio { color: var(--tinta-3); }

/* Entrar */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.entrar form { width: min(380px, 100%); background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 28px 24px; box-shadow: 0 8px 32px rgba(16,38,59,.08); display: grid; gap: 14px; }
.entrar h1 { margin: 2px 0 0; font-size: 22px; }
.entrar label { display: grid; gap: 6px; font-size: 14px; color: var(--tinta-2); }
.entrar input { border: 1px solid var(--borda); border-radius: 10px; padding: 11px 12px; background: var(--fundo); }
.entrar .erro { margin: 0; min-height: 1.5em; color: var(--erro); font-size: 14px; }