html, body {
  background: #020617;
  color: #e2e8f0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

.card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

input, select, textarea, button {
  font-family: inherit;
  color-scheme: dark;
}

input.field, select.field, textarea.field {
  background: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  width: 100%;
}
input.field::placeholder { color: #64748b; }

.btn-primary {
  background: #2563eb;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: #1d4ed8; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background: #1e293b;
  color: #e2e8f0;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  border: 1px solid #334155;
  cursor: pointer;
}
.btn-secondary:hover { background: #334155; }

/* Status badges */
.badge { display:inline-flex; align-items:center; padding:.25rem .625rem; border-radius:9999px; font-size:.75rem; font-weight:500; }
.badge-0 { background:#d1fae5; color:#065f46; }
.badge-1 { background:#fef3c7; color:#92400e; }
.badge-2 { background:#dbeafe; color:#1e40af; }
.badge-3 { background:#e0e7ff; color:#3730a3; }
.badge-4 { background:#ede9fe; color:#5b21b6; }
.badge-5 { background:#e2e8f0; color:#1e293b; }
.badge-6 { background:#fee2e2; color:#991b1b; }
.badge-7 { background:#fecaca; color:#7f1d1d; }

/* Toast */
#toast-host { position: fixed; top: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 9999; }
.toast { padding: .75rem 1rem; border-radius: .5rem; min-width: 240px; font-size: .875rem; color: #f1f5f9; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: slideIn .2s ease; }
.toast.info { background: #1e293b; border: 1px solid #334155; }
.toast.success { background: #065f46; border: 1px solid #047857; }
.toast.error { background: #7f1d1d; border: 1px solid #991b1b; }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* Sidebar/Topbar */
.sidebar { width: 15rem; background: #0f172a; border-right: 1px solid #1e293b; min-height: 100vh; padding: 1rem; display: none; flex-direction: column; }
.sidebar a.nav-item { display:flex; align-items:center; gap:.75rem; padding:.5rem .75rem; border-radius:.5rem; color:#cbd5e1; font-size:.875rem; text-decoration:none; }
.sidebar a.nav-item:hover { background: rgba(30,41,59,.6); }
.sidebar a.nav-item.active { background: #1e293b; color: white; }
@media (min-width: 768px) { .sidebar { display: flex; } }

.topbar { display:flex; align-items:center; justify-content:space-between; padding: 1rem 1.5rem; background:#0f172a; border-bottom:1px solid #1e293b; }

.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; padding: 1.5rem; background:#020617; }

/* Wallet button */
.wallet-btn {
  background: #2563eb; color: white; padding: .5rem 1rem; border-radius: .5rem;
  font-size: .875rem; font-weight: 500; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
}
.wallet-btn:hover { background: #1d4ed8; }
.wallet-btn.connected { background: #1e293b; border: 1px solid #334155; }

/* Timeline */
.timeline { position: relative; border-left: 1px solid #1e293b; margin-left: .75rem; padding-left: 0; list-style: none; }
.timeline li { margin-left: 1.5rem; margin-bottom: 1.5rem; position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -1.875rem; top: .375rem;
  width: .75rem; height: .75rem; border-radius: 50%;
  background: #3b82f6; box-shadow: 0 0 0 4px #020617;
}