:root {
  --bg: #f4f9fc !important;
  --panel: #ffffff !important;
  --panel-strong: #edf6fb !important;
  --ink: #17324d !important;
  --muted: #647b91 !important;
  --line: #d6e5f0 !important;
  --accent: #3e9ed6 !important;
  --orange: #6b83d6 !important;
  --sky-soft: #e6f3fb !important;
  --danger: #c85f70 !important;
  --success: #3d9a77 !important;
}

:root[data-theme="dark"] {
  --bg: #101d2a !important;
  --panel: #172b3d !important;
  --panel-strong: #203b52 !important;
  --ink: #edf7ff !important;
  --muted: #aac1d2 !important;
  --line: #31526a !important;
  --accent: #78c8f2 !important;
  --orange: #a8baff !important;
  --sky-soft: #203b52 !important;
  --danger: #ff9daa !important;
  --success: #86d7b4 !important;
}

html, body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: 'Space Grotesk', Arial, sans-serif !important;
}

body {
  background-image:
    radial-gradient(circle at 10% 0%, rgba(126, 201, 239, .22), transparent 28rem),
    radial-gradient(circle at 100% 80%, rgba(164, 188, 246, .16), transparent 30rem) !important;
}

a { color: var(--ink) !important; }
a:hover { color: var(--accent) !important; }

.card, .panel, main.card, .legal-body, .entry, .request-card,
.changelog-card, .account-menu nav, table {
  background: rgba(255, 255, 255, .88) !important;
  border-color: var(--line) !important;
  box-shadow: 0 20px 60px rgba(38, 91, 125, .11) !important;
  border-radius: 20px !important;
}

.card, main.card, .panel, .legal-body { padding: 28px !important; }
.grid { gap: 22px !important; }
.topbar, header { border-color: var(--line) !important; }
.topbar { border-color: var(--line) !important; }
.wordmark, .logo, .mark, .eyebrow, .meta-tag, .text-link { color: var(--accent) !important; }
.meta-tag, .status:not(:empty) {
  background: var(--sky-soft, #e6f3fb) !important;
  border-color: #c9e4f3 !important;
}

h1, h2, h3, h4 { color: var(--ink) !important; }
p, li, label, small, .muted, .intro, .description { color: var(--muted) !important; }
.status, .request-meta, .fineprint { color: var(--muted) !important; }
form { gap: 14px !important; }

input, textarea, select {
  background: #f8fcfe !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  border-radius: 10px !important;
}

button, .button {
  border-radius: 10px !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}

button[type="submit"], .button-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(62, 158, 214, .2) !important;
}

button[type="submit"]:hover, .button-primary:hover {
  background: #2f8fc8 !important;
  transform: translateY(-1px);
}

button:not(.theme-toggle):not(#resend):not(.is-copied), .button {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

#resend {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--accent) !important;
  font: inherit;
  font-size: 13px;
  text-align: left;
  box-shadow: none !important;
}

#resend:hover {
  background: transparent !important;
  color: #2f8fc8 !important;
  text-decoration: underline;
}

#resend:disabled {
  opacity: .55;
  cursor: wait;
}

.copy-button:hover {
  background: #2f8fc8 !important;
}

.copy-button.is-copied,
.copy-button.is-copied:hover {
  border-color: #2f7d5f !important;
  background: #2f7d5f !important;
  color: #fff !important;
}

:root[data-theme="dark"] .copy-button.is-copied,
:root[data-theme="dark"] .copy-button.is-copied:hover {
  border-color: var(--success) !important;
  background: var(--success) !important;
  color: #10202f !important;
}

:root[data-theme="dark"] .copy-button {
  color: #10202f !important;
}

:root[data-theme="dark"] .copy-button:hover {
  background: #9ad6f7 !important;
}

.passkey-prompt {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-strong);
}

.passkey-prompt h2 {
  margin: 0 0 8px;
}

.passkey-prompt p {
  margin-bottom: 16px;
}

.passkey-prompt button {
  width: 100%;
}

.passkey-remind {
  margin-top: 10px;
  border: 0 !important;
  background: transparent !important;
  color: var(--accent) !important;
  box-shadow: none !important;
  font-size: 13px;
}

.passkey-remind:hover {
  text-decoration: underline;
}

.passkey-status {
  margin-top: 10px;
}

pre, code, .endpoint-label {
  background: #eaf5fb !important;
  color: #245a7b !important;
  border-color: #d2e8f3 !important;
  border-radius: 12px !important;
}

.request-card, .changelog-card {
  background: rgba(255, 255, 255, .86) !important;
  border-color: var(--line) !important;
  border-radius: 16px !important;
}

table, th, td { border-color: var(--line) !important; }
th { color: var(--accent) !important; }
td { color: var(--muted) !important; }
.script-row, .item, .section-heading { border-color: var(--line) !important; }
.script-row:hover { border-color: var(--accent) !important; }

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .legal-body,
:root[data-theme="dark"] .entry,
:root[data-theme="dark"] .request-card,
:root[data-theme="dark"] .changelog-card,
:root[data-theme="dark"] .account-menu nav,
:root[data-theme="dark"] table {
  background: rgba(23, 43, 61, .94) !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] pre,
:root[data-theme="dark"] code,
:root[data-theme="dark"] .endpoint-label {
  background: #203b52 !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

footer, .footer { color: var(--muted) !important; }
footer a, .footer a { color: var(--accent) !important; }

.theme-toggle {
  position: fixed;
  right: 22px;
  bottom: 18px;
  z-index: 10;
  margin: 0 !important;
  padding: 7px 11px !important;
  border: 1px solid #c9e4f3 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .9) !important;
  color: #245a7b !important;
  box-shadow: 0 8px 24px rgba(38, 91, 125, .14);
  font: 11px 'DM Mono', monospace !important;
}

:root[data-theme="dark"] .theme-toggle {
  border-color: #47728d !important;
  background: #203b52 !important;
  color: #dff3ff !important;
}

.loading-indicator {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 9px;
  transform: translate(-50%, -140%);
  padding: 8px 13px;
  border: 1px solid #c9e4f3;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #245a7b;
  box-shadow: 0 8px 24px rgba(38, 91, 125, .14);
  font: 11px 'DM Mono', monospace;
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  pointer-events: none;
}

.loading-indicator.visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.loading-indicator::before {
  width: 9px;
  height: 9px;
  border: 2px solid #b9dced;
  border-top-color: var(--accent);
  border-radius: 50%;
  content: '';
  animation: loading-spin .8s linear infinite;
}

:root[data-theme="dark"] .loading-indicator {
  border-color: #47728d;
  background: rgba(32, 59, 82, .96);
  color: #dff3ff;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 700px) {
  .theme-toggle {
    right: 12px;
    bottom: 12px;
  }
  .loading-indicator {
    top: 10px;
    max-width: calc(100vw - 150px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}