:root {
  --hooktest-accent: #126a52;
  --hooktest-accent-soft: rgba(18, 106, 82, 0.12);
  --hooktest-panel-border: rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] {
  --hooktest-accent: #59c5a7;
  --hooktest-accent-soft: rgba(89, 197, 167, 0.18);
  --hooktest-panel-border: rgba(255, 255, 255, 0.08);
}

html {
  font-size: 15px;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, var(--hooktest-accent-soft), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 28%),
    var(--bs-body-bg);
}

.app-shell,
.auth-shell {
  color: var(--bs-body-color);
}

.brand-mark {
  color: var(--hooktest-accent);
  font-size: 1.05rem;
  text-transform: uppercase;
}

.btn-primary {
  --bs-btn-bg: var(--hooktest-accent);
  --bs-btn-border-color: var(--hooktest-accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--hooktest-accent) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--hooktest-accent) 88%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--hooktest-accent) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--hooktest-accent) 80%, black);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--hooktest-accent) 22%, transparent);
}

.app-header {
  background-color: color-mix(in srgb, var(--bs-body-bg) 82%, transparent);
}

.hero-panel,
.panel-card,
.metric-card,
.auth-card,
.endpoint-box,
.empty-state {
  border: 1px solid var(--hooktest-panel-border);
  background-color: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-tertiary-bg));
  border-radius: 1.25rem;
}

.hero-panel,
.panel-card,
.metric-card,
.empty-state {
  padding: 1.5rem;
}

.compact-card {
  min-width: 18rem;
}

.panel-card-header {
  padding: 1.5rem 1.5rem 0;
}

.panel-card-body {
  padding: 1.5rem;
}

.auth-container {
  width: min(34rem, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 5rem 0;
}

.auth-brand {
  padding-top: 1rem;
}

.auth-card {
  backdrop-filter: blur(10px);
}

.eyebrow {
  color: var(--hooktest-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.endpoint-box {
  padding: 0.9rem 1rem;
}

.endpoint-box code {
  font-size: 0.95rem;
  word-break: break-all;
}

.code-block {
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  background-color: color-mix(in srgb, var(--bs-tertiary-bg) 82%, transparent);
  font-size: 0.86rem;
  max-height: 18rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.table > :not(caption) > * > * {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.accordion-button:not(.collapsed) {
  background-color: var(--hooktest-accent-soft);
  color: var(--bs-body-color);
}

.footer-shell {
  background-color: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
}

@media (max-width: 767.98px) {
  .hero-panel,
  .panel-card,
  .metric-card,
  .empty-state {
    padding: 1.1rem;
  }

  .panel-card-header,
  .panel-card-body {
    padding: 1.1rem;
  }

  .auth-container {
    padding: 2.5rem 0;
  }
}