*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body, 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}
#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
input, select, textarea { font: inherit; }
img { max-width: 100%; display: block; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== Confirm Modal ===== */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 16px);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.15s ease;
}
.confirm-modal {
  background: var(--color-surface, #1a1d24);
  border: 1px solid var(--color-border, #2a2d35);
  border-radius: 12px;
  padding: var(--space-6, 24px);
  max-width: 400px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: slideUp 0.2s ease;
}
.confirm-modal-title {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 600;
  margin-bottom: var(--space-3, 12px);
}
.confirm-modal-message {
  color: var(--color-text-muted, #888);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
  margin-bottom: var(--space-5, 20px);
  white-space: pre-line;
}
.confirm-modal-actions {
  display: flex;
  gap: var(--space-3, 12px);
  justify-content: flex-end;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Page view transition — fade + subtle lift on route change */
.view-transition {
  animation: viewEnter 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Lazy loader spinner */
.lazy-loader {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lazy-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-border, rgba(255,255,255,0.1));
  border-top-color: var(--color-primary, #d4af37);
  border-radius: 50%;
  animation: lazySpin 600ms linear infinite;
}
@keyframes lazySpin {
  to { transform: rotate(360deg); }
}

/* ===== Error Boundary Fallback ===== */
.error-boundary-fallback {
  padding: 48px 24px;
  text-align: center;
  max-width: 500px;
  margin: 80px auto;
}
.error-boundary-fallback h2 {
  margin-bottom: 12px;
  font-size: 1.25rem;
}
.error-boundary-fallback p {
  color: var(--color-text-muted, #888);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ===== Self-hosted Fonts ===== */
@font-face {
  font-family: 'Clash Display';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/clash-display-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Clash Display';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/clash-display-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Clash Display';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/clash-display-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/satoshi-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/satoshi-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/satoshi-700.woff2') format('woff2');
}

/* ===== Shared Components ===== */

/* ── LoadingSpinner ── */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 12px);
  padding: var(--space-6, 24px);
}
.loading-state-sm { padding: var(--space-3, 12px); }
.loading-state-lg { padding: var(--space-10, 40px); }
.loading-text {
  color: var(--color-text-muted, #888);
  font-size: var(--text-sm, 0.875rem);
}
.loading-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--color-border, #333);
  border-top-color: var(--color-primary, #d4a843);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-lg { width: 28px; height: 28px; border-width: 3px; }
.spinner-light {
  border-color: rgba(255,255,255,0.3);
  border-top-color: #fff;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── EmptyState ── */
.empty-state {
  text-align: center;
  padding: var(--space-8, 32px) var(--space-4, 16px);
}
.empty-state-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3, 12px);
  opacity: 0.6;
}
.empty-state-title {
  font-size: var(--text-lg, 1.125rem);
  font-weight: 600;
  color: var(--color-text, #eee);
  margin-bottom: var(--space-2, 8px);
}
.empty-state-message {
  color: var(--color-text-muted, #888);
  font-size: var(--text-sm, 0.875rem);
  margin-bottom: var(--space-4, 16px);
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ── TabBar ── */
.tab-bar {
  display: flex;
  gap: var(--space-1, 4px);
  border-bottom: 1px solid var(--color-border, #333);
  margin-bottom: var(--space-5, 20px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-bar-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: var(--color-text-muted, #888);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.tab-bar-item:hover { color: var(--color-text, #eee); }
.tab-bar-item--active {
  color: var(--color-primary, #d4a843);
  border-bottom-color: var(--color-primary, #d4a843);
}
.tab-bar-icon { font-size: 1.1em; }
.tab-bar-count {
  font-size: var(--text-xs, 0.75rem);
  background: var(--color-surface-2, #1a1a1a);
  border-radius: var(--radius-full, 100px);
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.tab-bar--compact .tab-bar-item {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: var(--text-xs, 0.75rem);
}
.tab-bar--pill {
  border-bottom: none;
  gap: var(--space-2, 8px);
}
.tab-bar--pill .tab-bar-item {
  border-bottom: none;
  border-radius: var(--radius-full, 100px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
}
.tab-bar--pill .tab-bar-item--active {
  background: var(--color-primary, #d4a843);
  color: #000;
}

/* ── StatusBadge ── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-full, 100px);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.status-badge--sm { font-size: 0.65rem; padding: 1px 7px; }
.status-badge--neutral { background: var(--color-surface-2, #1a1a1a); color: var(--color-text-muted, #888); }
.status-badge--success { background: rgba(34,197,94,0.12); color: #22c55e; }
.status-badge--warning { background: rgba(234,179,8,0.12); color: #eab308; }
.status-badge--error { background: rgba(239,68,68,0.12); color: #ef4444; }
.status-badge--info { background: rgba(59,130,246,0.12); color: #3b82f6; }
.status-badge--gold { background: rgba(212,168,67,0.12); color: var(--color-primary, #d4a843); }
.status-badge-icon { font-size: 0.9em; }

/* ── StatCard ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-5, 20px);
}
.stat-card {
  background: var(--color-surface, #111);
  border: 1px solid var(--color-border, #333);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4, 16px);
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.stat-card-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-1, 4px);
  opacity: 0.7;
}
.stat-card-label {
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #888);
  margin-bottom: var(--space-1, 4px);
}
.stat-card-value {
  font-size: var(--text-xl, 1.25rem);
  font-weight: 700;
  color: var(--color-text, #eee);
}
.stat-card--primary .stat-card-value { color: var(--color-primary, #d4a843); }
.stat-card--success .stat-card-value { color: #22c55e; }
.stat-card--warning .stat-card-value { color: #eab308; }
.stat-card--error .stat-card-value { color: #ef4444; }
.stat-card-sub {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted, #888);
  margin-top: var(--space-1, 4px);
}