:root {
  --navy: #223367;
  --azul: #064F78;
  --azul-claro: #7FB4DD;
  --preto: #0A0A0B;
  --off-white: #F4F5F7;
  --dourado: #E3B23C;
  --fonte-titulo: "Montserrat", system-ui, sans-serif;
  --fonte-corpo: "Inter", system-ui, sans-serif;
  --fonte-numero: "Oswald", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--preto);
}

body {
  background: var(--preto);
  color: var(--off-white);
  font-family: var(--fonte-corpo);
  padding: 24px;
}

h1 { font-family: var(--fonte-titulo); font-size: 22px; margin-bottom: 4px; }
.sub { color: var(--azul-claro); font-size: 14px; margin-bottom: 24px; }

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.cartao { background: var(--navy); border-radius: 12px; padding: 20px; }
.cartao .rotulo { font-size: 13px; color: var(--azul-claro); }
.cartao .numero { font-family: var(--fonte-numero); font-size: 40px; line-height: 1.1; }
.cartao.vip { background: var(--navy); border: 1px solid var(--dourado); }
.cartao.vip .numero { color: var(--dourado); }

table { width: 100%; border-collapse: collapse; margin-top: 24px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--azul); }
th { font-family: var(--fonte-titulo); font-size: 13px; color: var(--azul-claro); }

.ritmo { margin-top: 24px; padding: 16px; border-radius: 12px; background: var(--azul); }
.ritmo.atras { background: #7A2E2E; }
.nota { margin-top: 24px; font-size: 13px; color: #8C9BB8; }
#login { max-width: 320px; margin: 80px auto; text-align: center; }
input, button { padding: 10px; border-radius: 8px; border: none; font-size: 15px; }
button { background: var(--azul-claro); color: var(--preto); cursor: pointer; margin-top: 8px; width: 100%; }

#estado-sync {
  display: none;
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  background: #4A3B14;
  color: var(--dourado);
  font-size: 13px;
}

#erro-login {
  color: #E37C7C;
}

@media (max-width: 480px) {
  body { padding: 16px; }
  .cartao .numero { font-size: 32px; }
}