/* Semantic tokens — light defaults; dark overrides in html[data-theme="dark"] */
:root {
  color-scheme: light;
  --bg-page: #f5f5f5;
  --bg-nav: #1a1a2e;
  --border-nav: transparent;
  --text-on-nav: #ffffff;
  --link-nav: #cccccc;
  --link-nav-hover: #ffffff;
  --text-primary: #333333;
  --text-muted: #6b7280;
  --bg-card: #ffffff;
  --border-card: #e5e7eb;
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-contrast: #ffffff;
  --full-bleed-page: #0a0f1a;
  --full-bleed-nav: #0a0f1a;
  --full-bleed-nav-border: rgba(56, 189, 248, 0.12);
  --modal-backdrop: rgba(0, 0, 0, 0.5);
  --alert-success-bg: #d1fae5;
  --alert-success-text: #065f46;
  --alert-error-bg: #fee2e2;
  --alert-error-text: #991b1b;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --wallet-row-bg: #f9fafb;
}

/* Dark fallbacks for tokens not overridden by inline theme JSON */
html[data-theme="dark"] {
  color-scheme: dark;
  --alert-success-bg: #064e3b;
  --alert-success-text: #a7f3d0;
  --alert-error-bg: #7f1d1d;
  --alert-error-text: #fecaca;
  --wallet-row-bg: #0f172a;
  --modal-backdrop: rgba(0, 0, 0, 0.72);
  --input-bg: #0f172a;
  --input-border: #475569;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
}

.nav {
  background: var(--bg-nav);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border-nav);
}

.nav-brand {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-on-nav);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  min-width: 0;
}

/* Natural aspect ratio: cap height only, width follows the asset (no squishing). */
.nav-brand > img {
  height: 32px;
  width: auto;
  max-height: 32px;
  display: block;
  flex-shrink: 0;
}

.nav-brand-text {
  min-width: 0;
  line-height: 1.2;
}

/* Two logo assets: stacked in one grid cell so width matches the visible image. */
.nav-brand-logos {
  display: inline-grid;
  grid-template: 32px / auto;
  align-items: center;
  justify-items: start;
  flex-shrink: 0;
}

.nav-brand-logos .site-logo {
  grid-area: 1 / 1;
  height: 32px;
  width: auto;
  max-height: 32px;
  display: none;
  object-fit: contain;
  object-position: left center;
}

/* Default before/without data-theme: assume light appearance (matches theme script initial). */
.nav-brand-logos .site-logo--light {
  display: block;
}

.nav-brand-logos .site-logo--dark {
  display: none;
}

html[data-theme="light"] .nav-brand-logos .site-logo--dark {
  display: none;
}

html[data-theme="light"] .nav-brand-logos .site-logo--light {
  display: block;
}

html[data-theme="dark"] .nav-brand-logos .site-logo--light {
  display: none;
}

html[data-theme="dark"] .nav-brand-logos .site-logo--dark {
  display: block;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.nav-links a {
  color: var(--link-nav);
  text-decoration: none;
  font-size: 0.9rem;
}

.nav-links a:hover {
  color: var(--link-nav-hover);
}

.nav-links a.btn,
.nav-links .btn {
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  padding: 0.5rem 1rem;
  border-radius: 6px;
}

.nav-links a.btn:hover,
.nav-links .btn:hover {
  background: var(--accent-hover);
  color: var(--accent-contrast, #fff);
}

/* Account page: light / dark / system appearance toggles */
.appearance-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

button.appearance-opt {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid var(--border-card);
  background: var(--wallet-row-bg);
  color: var(--text-primary);
}

button.appearance-opt:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

/* Selected state: keep body text color for contrast (neon fill + contrast pair was hard to read in light mode). */
button.appearance-opt--active {
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-card));
  color: var(--text-primary);
  border: 2px solid var(--accent);
  font-weight: 600;
  padding: calc(0.5rem - 1px) calc(1rem - 1px);
}

button.appearance-opt--active:hover {
  background: color-mix(in srgb, var(--accent) 28%, var(--bg-card));
  color: var(--text-primary);
  border-color: var(--accent-hover);
}

.main {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.card {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  margin-bottom: 1rem;
  border: 1px solid var(--border-card);
}

.card h2 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 1rem;
  background: var(--input-bg);
  color: var(--text-primary);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.9;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

.form-group select {
  cursor: pointer;
}

.form-group input:disabled,
.input-disabled {
  opacity: 0.85;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--input-bg) 88%, var(--text-muted)) !important;
}

/* Chat / standalone text fields used outside .form-group */
input.chat-input,
textarea.chat-textarea {
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-primary);
}

input.chat-input::placeholder,
textarea.chat-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.9;
}

input.chat-input:focus,
textarea.chat-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Autofill: match surface in light and dark */
.form-group input:-webkit-autofill,
.form-group textarea:-webkit-autofill,
input.chat-input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  transition: background-color 9999s ease-out;
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
}

.btn {
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
}

.btn:hover {
  background: var(--accent-hover);
  color: var(--accent-contrast, #fff);
}

.btn-danger {
  background: #dc2626;
  color: #fff;
}

.btn-danger:hover {
  background: #b91c1c;
  color: #fff;
}

.btn-secondary {
  background: #6b7280;
  color: #fff;
}

.alert {
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.alert-success {
  background: var(--alert-success-bg);
  color: var(--alert-success-text);
}

.alert-error {
  background: var(--alert-error-bg);
  color: var(--alert-error-text);
}

.wallet-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: var(--wallet-row-bg);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.wallet-address {
  font-family: monospace;
  font-size: 0.9rem;
}

.hidden {
  display: none !important;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

body.body-full-bleed {
  background: var(--full-bleed-page);
  overflow-x: hidden;
}

body.body-full-bleed .nav {
  background: var(--full-bleed-nav);
  border-bottom: 1px solid var(--full-bleed-nav-border);
  width: 100%;
  margin: 0;
}

.main.main-full-bleed {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.login-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}