body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0f0f1a;
  color: #e5e5e5;
}

.gradient-bg {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
}

.card {
  background: #1a1a2e;
  border: 1px solid #2a2a40;
  border-radius: 12px;
  transition: transform .2s, box-shadow .2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(99,102,241,.25);
}

.btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: opacity .2s;
}
.btn-primary:hover { opacity: .9; }

.btn-secondary {
  background: #2a2a40;
  color: #e5e5e5;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  border: 1px solid #3a3a55;
}

.star { color: #fbbf24; }
.star-empty { color: #3a3a55; }

.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(99,102,241,.15);
  color: #a5b4fc;
}

.input {
  width: 100%;
  padding: 12px 16px;
  background: #1a1a2e;
  border: 1px solid #2a2a40;
  border-radius: 8px;
  color: #e5e5e5;
  outline: none;
  transition: border-color .2s;
}
.input:focus { border-color: #6366f1; }

.badge-status {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge-pending   { background: rgba(251,191,36,.15); color: #fbbf24; }
.badge-confirmed { background: rgba(34,197,94,.15);  color: #22c55e; }
.badge-completed { background: rgba(99,102,241,.15); color: #a5b4fc; }
.badge-cancelled { background: rgba(239,68,68,.15);  color: #ef4444; }

.spinner {
  width: 40px; height: 40px;
  border: 3px solid #2a2a40;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }