/* Staffly "deep space" theme. Loaded after styles.css. Soft, rounded, calm.
   Staffly Bot is violet, Staffly Link is cyan. Everything else is built from these tokens. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #07070d; --panel: #0d0d16; --panel2: #12121d; --line: rgba(255, 255, 255, 0.09); --line2: rgba(255, 255, 255, 0.17);
  --ink: #eef0ff; --muted: #9a9cb4; --text-faint: #6c7299;
  --accent: #8b7cff; --accent-ink: #0b0a1f; --bot: #8b7cff; --link: #3ed8f2; --link-ink: #04202a;
  --ok: #4ade9c; --warn: #fbbf5c; --bad: #ff7388;
  --red: var(--accent); --red-2: #a99eff; --red-dim: #5b4fd0; --red-soft: rgba(139, 124, 255, 0.16);
  --radius: 12px; --radius-sm: 8px; --r-card: 12px; --r-pill: 8px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --glow-bot: 0 0 0 1px rgba(139, 124, 255, .5);
  --glow-link: 0 0 0 1px rgba(62, 216, 242, .5);
}
html { background: var(--bg); }
body.space {
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(139, 124, 255, .16), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--bg);
  background-attachment: fixed; font-family: var(--sans);
}
body.space h1, body.space h2, body.space h3 { font-family: var(--display); letter-spacing: -0.028em; font-weight: 600; }

/* Header: a flat bar with a hairline under it */
body.space .site-header { position: sticky; top: 0; background: rgba(7, 7, 13, .86); border: 0; border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0; }
body.space .site-header > .wrap { width: min(1160px, 100%); height: auto; padding: 0 20px; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
body.space .bar { height: 58px; }
body.space .brand { font-family: var(--display); }
body.space .brand-logo { border-radius: 9px; }
body.space .nav-links a { border-radius: 6px; padding: 8px 12px; }
body.space .nav-links a:hover, body.space .nav-links a[aria-current="page"] { background: rgba(255, 255, 255, .06); color: var(--ink); }
body.space .btn-nav { border-radius: var(--r-pill); }
body.space .btn-nav.primary, body.space button.primary { background: var(--accent); color: var(--accent-ink); }
body.space .menubtn { border-radius: 8px; background: transparent; }
@media (max-width: 820px) {
  body.space .nav-links.open { background: rgba(10, 10, 18, .98); border: 1px solid var(--line); border-radius: 12px; top: 62px; left: 12px; right: 12px; padding: 10px; }
}

/* Buttons */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: var(--r-pill); font: 600 15.5px var(--sans); border: 1px solid transparent; transition: transform .15s, box-shadow .2s, background .2s; white-space: nowrap; cursor: pointer; }
.sp-btn:hover { text-decoration: none; filter: brightness(1.1); }
.sp-btn img { width: 22px; height: 22px; border-radius: 6px; }
.sp-btn.bot { background: var(--bot); color: var(--accent-ink); box-shadow: var(--glow-bot); }
.sp-btn.link { background: var(--link); color: var(--link-ink); box-shadow: var(--glow-link); }
.sp-btn.ghost { background: rgba(255, 255, 255, .05); color: var(--ink); border-color: var(--line2); }
.sp-btn.ghost:hover { background: rgba(255, 255, 255, .09); }

/* Cards */
.sp-card { background: rgba(255, 255, 255, .025); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; }
.sp-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; border: 1px solid var(--line2); color: var(--muted); background: rgba(255, 255, 255, .04); }
.sp-tag.bot { color: #c9c2ff; border-color: rgba(139, 124, 255, .45); background: rgba(139, 124, 255, .12); }
.sp-tag.link { color: #aeeefa; border-color: rgba(62, 216, 242, .45); background: rgba(62, 216, 242, .1); }
.sp-eyebrow { font: 600 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--link); margin-bottom: 14px; }

/* Footer */
body.space .site-footer { border-top: 1px solid var(--line); background: rgba(7, 8, 23, .6); margin-top: 40px; }
body.space .foot-cols a:not(.brand):hover { color: var(--link); }
@media (prefers-reduced-motion: reduce) { .sp-btn { transition: none; } .sp-btn:hover { transform: none; } }
body.space .nav-actions .ghost, body.space .nav-actions .btn-nav { white-space: nowrap; }
@media (max-width: 560px) { body.space .nav-actions #logoutBtn { display: none; } }