:root { --bg:#0b1020; --card:#121a33; --text:#e8ecff; --muted:#9aa6d6; --accent:#7c5cff; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--text); }
.container { max-width: 980px; margin: 0 auto; padding: 24px; }
.topbar { padding: 18px 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; }
h1 { margin:0 0 6px; font-size: 22px; }
.muted { color: var(--muted); margin:0; }
.grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.card { display:block; padding: 16px; border-radius: 14px; background:var(--card); border: 1px solid rgba(255,255,255,0.08); color: var(--text); text-decoration:none; font-weight: 600; }
.card:hover { border-color: rgba(124,92,255,0.6); box-shadow: 0 0 0 3px rgba(124,92,255,0.15); }

/* Botões seguem tema */
:root {
  --btn-bg: var(--btn-bg, var(--accent));
  --btn-text: var(--btn-text, #ffffff);
  --btn-hover-bg: var(--btn-hover-bg, color-mix(in srgb, var(--accent) 85%, #ffffff 15%));
  --btn-hover-text: var(--btn-hover-text, #ffffff);
}
.btn,
.btn-primary,
.btn-theme {
  background-color: var(--btn-bg) !important;
  border-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
}
.btn:hover,
.btn-primary:hover,
.btn-theme:hover {
  background-color: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text) !important;
}
.btn-outline-primary,
.btn-outline-theme {
  color: var(--btn-bg) !important;
  border-color: var(--btn-bg) !important;
  background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-theme:hover {
  background: color-mix(in srgb, var(--btn-bg) 18%, transparent) !important;
  color: var(--btn-text) !important;
  border-color: var(--btn-bg) !important;
}
.btn-close { filter: invert(80%); }