:root {
  --fundo: #14182b;
  --cartao: #1e2440;
  --cartao2: #272e52;
  --texto: #eef0f8;
  --suave: #9aa3c7;
  --destaque: #7c8cff;
  --erro: #ff6b6b;
  --aviso: #f5c451;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 24px) 16px calc(env(safe-area-inset-bottom) + 32px);
}

h1 { font-size: 28px; margin: 0; }
.suave { color: var(--suave); font-size: 15px; margin: 2px 0 0; }

.topo { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }

.itens { display: grid; gap: 12px; }

.item {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--cartao);
  border-radius: 16px;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}
.item:active { background: var(--cartao2); }
.item img { width: 54px; height: 54px; border-radius: 13px; flex: none; }
.item h2 { font-size: 19px; margin: 0; }
.item .extra { color: var(--aviso); font-size: 14px; margin-top: 2px; }
.item .seta { margin-left: auto; color: var(--suave); font-size: 22px; }

.v10 {
  width: 54px; height: 54px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: #0f2a22; color: #3ecf8e; font-weight: 800; font-size: 20px;
}

button, input {
  font: inherit;
  width: 100%;
  border-radius: 12px;
  padding: 13px 14px;
}
input {
  background: var(--cartao2);
  color: var(--texto);
  border: 1px solid #39416e;
  margin: 6px 0 14px;
}
button {
  border: 0;
  background: var(--destaque);
  color: #0d1020;
  font-weight: 700;
  cursor: pointer;
}
button.discreto { width: auto; padding: 8px 14px; background: var(--cartao2); color: var(--suave); font-weight: 500; font-size: 15px; }

.entrar { max-width: 360px; padding-top: calc(env(safe-area-inset-top) + 12vh); }
.entrar h1 { margin-bottom: 4px; }
.entrar form { margin-top: 26px; }
label { font-size: 15px; color: var(--suave); }
.erro { background: #4a2030; color: #ffd0d6; padding: 12px; border-radius: 12px; font-size: 15px; margin-top: 18px; }