body { font-family: 'Inter', sans-serif; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
.card { background: #1e293b; border: 1px solid #334155; border-radius: 0.75rem; }
.nav-item {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  font-size: 0.8125rem; font-weight: 500; color: #64748b;
  text-decoration: none; transition: all 0.12s;
}
.nav-item:hover { background: #1e293b; color: #cbd5e1; }
.nav-active { background: #1e293b; color: #a78bfa; }
.btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.5rem 1rem; border-radius: 0.5rem;
  font-size: 0.8125rem; font-weight: 500; cursor: pointer;
  border: none; transition: all 0.12s; text-decoration: none;
}
.btn-primary { background: #7c3aed; color: white; }
.btn-primary:hover { background: #6d28d9; }
.btn-secondary { background: #1e293b; color: #cbd5e1; border: 1px solid #334155; }
.btn-secondary:hover { background: #293548; }
.btn-danger { background: transparent; color: #f87171; border: 1px solid #450a0a; }
.btn-danger:hover { background: #450a0a40; }
.btn-sm { padding: 0.3rem 0.625rem; font-size: 0.75rem; }
input, select, textarea {
  background: #0f172a; border: 1px solid #334155; border-radius: 0.5rem;
  color: #cbd5e1; padding: 0.5rem 0.75rem; font-size: 0.8125rem;
  outline: none; transition: border-color 0.12s; font-family: inherit;
}
input:focus, select:focus, textarea:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px #7c3aed22; }
select option { background: #1e293b; }
.page-header {
  padding: 1.25rem 1.25rem 0.875rem;
  border-bottom: 1px solid #1e293b;
}
.page-header h1 { font-size: 1.125rem; font-weight: 600; color: #f1f5f9; }
.page-header p { font-size: 0.8125rem; color: #64748b; margin-top: 0.125rem; }
.page-body { padding: 1.25rem; }
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  font-size: 0.6rem; font-weight: 500; color: #64748b;
  text-decoration: none; transition: color 0.12s; flex: 1;
}
.bottom-nav-item .icon { font-size: 1.2rem; line-height: 1; }
.bottom-nav-item.nav-active { color: #a78bfa; }
.bottom-nav-item:hover { color: #cbd5e1; }
.demo-banner {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid rgba(167, 139, 250, 0.35);
  background: rgba(46, 16, 101, 0.92);
  backdrop-filter: blur(12px);
  padding: 0.4rem 1rem;
  text-align: center;
  font-size: 0.7rem;
  color: #ddd6fe;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block; width: 0.75rem; height: 0.75rem;
  border-radius: 9999px; border: 2px solid #fbbf24;
  border-top-color: transparent; animation: spin 0.7s linear infinite;
}