:root {
  --bg: #101623;
  --bg-soft: #182235;
  --surface: #141c2c;
  --surface-alt: #1f293c;
  --surface-soft: #172035;
  --ink: #f3f7ff;
  --ink-muted: #9bb0d0;
  --text-strong: #e9efff;
  --muted: #a2b0c8;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --brand: #5f8cff;
  --brand-strong: #9ab9ff;
  --brand-soft: #24354f;
  --accent: #ff8b61;
  --success: #6bd18c;
  --danger: #ff8c94;
  --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.24);
  --shadow-lift: 0 16px 34px rgba(0, 0, 0, 0.32);
}

:root[data-theme="light"] {
  --bg: #edf2ff;
  --bg-soft: #f5f7ff;
  --surface: #ffffff;
  --surface-alt: #f8fbff;
  --surface-soft: #f5f1ff;
  --ink: #122031;
  --ink-muted: #4f4f78;
  --text-strong: #24364f;
  --muted: #4f4f78;
  --line: #cfc9ef;
  --line-strong: #b9b0e2;
  --brand: #2f5bff;
  --brand-strong: #1f3dc4;
  --brand-soft: #e4e8ff;
  --accent: #ff6a2b;
  --success: #0f8f63;
  --danger: #c83255;
  --shadow-soft: 0 10px 26px rgba(35, 32, 91, 0.12);
  --shadow-lift: 0 16px 34px rgba(35, 32, 91, 0.18);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 9% 0%, rgba(47, 91, 255, 0.14) 0%, rgba(47, 91, 255, 0) 34%),
    radial-gradient(circle at 88% 12%, rgba(255, 106, 43, 0.14) 0%, rgba(255, 106, 43, 0) 36%),
    var(--bg);
}

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(0, 95, 224, 0.22);
  outline-offset: 2px;
}

.page-shell,
.page {
  max-width: 860px;
  margin: 0 auto;
}

.hero {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--surface-soft) 0%, var(--surface) 100%);
  box-shadow: var(--shadow-soft);
}

.subtitle {
  margin: 4px 0 0;
  color: var(--text-strong);
  font-size: 0.88rem;
  font-weight: 700;
}

@media (max-width: 760px) {
  .page-shell,
  .page {
    max-width: none;
  }

  .site-header-account {
    min-width: 0;
    justify-content: stretch;
    flex-grow: 1; /* Allow account button to take remaining space */
  }

  /* NEW: Ensure the actions span the full width on mobile */
  .site-header-actions {
    width: 100%;
    justify-content: space-between;
  }
}

.site-footer {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: 32px 16px 100px; /* The 100px bottom padding ensures the sticky CTA doesn't cover the text */
}

.site-footer p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted); /* Uses your existing muted text color */
  line-height: 1.5;
}

.site-footer a {
  color: var(--brand); /* Uses your existing brand color for the link */
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}