:root {
  --papel: #f4efe6;
  --tinta: #1c1915;
  --marca: #0f6e6b;
  --marca-escura: #0a4f4d;
  --card: #fffdf9;
  --linha: #e4d9c8;
  --erro: #9b2c2c;
  --sombra: 0 18px 40px rgba(28, 25, 21, 0.08);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--tinta);
  background: var(--papel);
}
.fundo {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 10% 10%, #f7d7a8 0, transparent 28%),
    radial-gradient(circle at 90% 0%, #b7e0dc 0, transparent 32%);
  pointer-events: none;
}
main {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}
.topo, .marca, .abas, .linha {
  display: flex;
  align-items: center;
}
.topo { justify-content: space-between; margin-bottom: 28px; }
.marca { gap: 12px; }
.selo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--marca);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.marca small, #email-user, .vazio { color: #6d645a; }
.card {
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--sombra);
}
.abas { gap: 8px; margin-bottom: 16px; }
.aba, .ghost, .primario, .icone {
  border: 0;
  cursor: pointer;
  font: inherit;
}
.aba {
  background: transparent;
  padding: 8px 12px;
  border-radius: 999px;
  color: #6d645a;
}
.aba.ativa { background: #e7f4f3; color: var(--marca-escura); font-weight: 650; }
form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; font-size: 0.92rem; }
input[type="email"], input[type="password"], input[type="text"], #titulo, #nome {
  width: 100%;
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  background: #fff;
}
.primario {
  background: var(--marca);
  color: white;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 650;
}
.primario:hover { background: var(--marca-escura); }
.ghost {
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 8px 14px;
}
.erro { color: var(--erro); margin: 0; }
.saudacao h1 { margin: 0 0 4px; font-size: 1.7rem; }
.saudacao { margin-bottom: 16px; }
.linha { gap: 10px; }
.linha input { flex: 1; }
#lista { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 12px 14px;
}
.item.feito .texto { text-decoration: line-through; color: #8a8176; }
.texto { flex: 1; }
.icone {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f3ece3;
}
.check { border: 2px solid var(--marca); background: white; }
.item.feito .check { background: var(--marca); color: white; }
@media (max-width: 640px) {
  .linha { flex-direction: column; align-items: stretch; }
}