/* ============================================================
   Ai vem o Vampiro — Chrome compartilhado (Landing/Dashboard/Criar)
   ============================================================ */

/* páginas roláveis (sobrescreve o overflow:hidden do theme.css) */
html.site, body.site { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body.site { background: var(--bg-0); }

.bg-ambient, .bg-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.bg-ambient { background: var(--scene-ambient); }
.bg-vignette { background: var(--vignette); mix-blend-mode: multiply; }

/* ---------------- TOP NAV ---------------- */
.topnav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 34px;
  background: linear-gradient(var(--bg-0), color-mix(in oklab, var(--bg-0) 60%, transparent));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topnav-actions { display: flex; align-items: center; gap: 16px; }

.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.logo-mark {
  width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0;
  border: 1px solid var(--accent-dim); border-radius: 50%;
  color: var(--accent); font-weight: 700; font-size: 15px; letter-spacing: .03em;
  background: radial-gradient(circle at 50% 30%, var(--glow), transparent 70%);
  box-shadow: 0 0 18px var(--glow) inset;
}
.logo-text { font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.logo-lg .logo-mark { width: 52px; height: 52px; font-size: 19px; }
.logo-lg .logo-text { font-size: 21px; }

/* ---------------- THEME SWITCH ---------------- */
.theme-switch {
  display: flex; align-items: center; gap: 4px;
  padding: 4px; border: 1px solid var(--line); border-radius: 100px; background: var(--bg-1);
}
.theme-switch-label { margin: 0 8px 0 6px; color: var(--ink-mute); }
.theme-opt {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 100px;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 500; letter-spacing: .02em;
  color: var(--ink-soft); transition: all var(--t-fast);
}
.theme-opt:hover { color: var(--ink); }
.theme-opt.active { background: var(--bg-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 0 14px var(--glow); }
.theme-switch.compact .theme-opt { padding: 8px; }
.theme-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.dot-gold   { background: #c9a24b; color: #c9a24b; }
.dot-purple { background: #9a63d8; color: #9a63d8; }
.dot-noir   { background: #d4302f; color: #d4302f; }

/* ---------------- BUTTONS ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: var(--radius);
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: .03em;
  text-decoration: none; cursor: pointer; transition: all var(--t-fast);
  border: 1px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--bg-0); }
.btn-primary:hover { background: var(--accent-bright); box-shadow: 0 0 22px var(--glow); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent-dim); background: var(--bg-1); color: var(--accent-bright); }
.btn-blood { background: var(--blood); color: #f4e8e6; }
.btn-blood:hover { background: var(--blood-bright); box-shadow: 0 0 22px rgba(var(--blood-rgb), .45); transform: translateY(-1px); }
.btn-lg { padding: 16px 30px; font-size: 15px; }
.btn-block { width: 100%; }

/* dots */
.dots { display: inline-flex; gap: 4px; }
.dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-raised); transition: all var(--t-fast); }
.dot.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 5px var(--glow); }

.section-eyebrow { color: var(--accent); letter-spacing: .28em; }

/* footer */
.site-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line-soft);
  padding: 40px 34px; margin-top: 60px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  color: var(--ink-mute); font-size: 12px;
}
.site-footer .footer-links { display: flex; gap: 22px; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }