/* ====== Base Nosedive – Starrise ====== */
:root{
  --bg-1:#fdebf6;
  --bg-2:#efe6ff;
  --txt:#23252d;
  --muted:#6b7080;
  --chip:#ffffff;
  --chip-border:rgba(0,0,0,.08);
  --ok:#1f9d55;
  --danger:#d64545;
  --shadow:0 10px 25px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --grad:linear-gradient(90deg,#ff7eb3 0%,#a66efe 100%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--txt);
  background: radial-gradient(1200px 800px at 50% -10%, var(--bg-1), var(--bg-2));
  font: 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

/* ====== Topbar ====== */
.topbar{
  position: sticky;
  top: 14px;
  z-index: 100;
  display:flex;
  justify-content:center;
  padding: 0 16px;
  pointer-events: none; /* só os filhos recebem clique */
}
.nav{
  pointer-events:auto;
  display:inline-flex;
  gap:6px;
  padding:6px;
  border-radius:16px;
  background: var(--grad);
  box-shadow: var(--shadow);
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 12px;
  border-radius:12px;
  text-decoration:none;
  color:#fff;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.15);
  transition: transform .08s ease, background .15s ease, opacity .2s ease;
  will-change: transform;
}
.chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.18); }
.chip.muted{ opacity:.85; }
.chip.primary{ background: rgba(0,0,0,.18); }
.chip.danger{ background: rgba(214,69,69,.22); }
.chip .bell{ margin-left:2px }

/* ====== Estrutura de página ====== */
.page{
  padding: 96px 16px 48px 16px; /* espaço por causa da topbar */
  min-height: calc(100vh - 96px);
}
.container{ max-width: 1080px; margin: 0 auto; }
.titulo{ margin:0 0 6px 0; font-size: 28px; line-height:1.2; }
.sub{ margin:0 0 18px 0; color:var(--muted) }

/* ====== Grid e Cards ====== */
.grid{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap:16px;
}
.card{
  grid-column: span 12;
  background:#fff;
  border:1px solid var(--chip-border);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:16px;
}
@media (min-width: 720px){
  .card{ grid-column: span 4; }
}
.card-titulo{ margin:4px 0 8px 0; font-size:18px }
.card-desc{ margin:0; color:var(--muted) }
.lista{ margin:8px 0 0 18px; padding:0 }
.lista li{ margin:4px 0 }

/* ====== Form padrão (usado no /entrar também) ====== */
.form-row{display:flex;flex-direction:column;gap:6