body {
  background: linear-gradient(135deg, #07111f 0%, #0f172a 45%, #111827 100%);
  color: #f8fafc;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  width: 270px;
  min-height: 100vh;
  background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(10,16,28,0.98));
  border-right: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  box-shadow: 18px 0 40px rgba(2, 6, 23, 0.35);
}

.sidebar-brand {
  padding: 0.85rem 0.9rem;
  border-radius: 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.sidebar .nav-link {
  color: #cbd5e1;
  border-radius: 0.8rem;
  padding: 0.75rem 0.95rem;
  transition: all 0.2s ease;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
  background: linear-gradient(90deg, rgba(16,185,129,0.24), rgba(6,182,212,0.16));
  color: #ffffff;
  transform: translateX(3px);
}

.content-area {
  flex: 1;
  background: transparent;
}

.navbar {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.2);
}

.card {
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.1rem;
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.24);
}

.table {
  color: #f8fafc;
}

.table thead th {
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: #94a3b8;
  font-weight: 600;
}

.table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

.form-control,
.form-select {
  background: rgba(255,255,255,0.04);
  color: #f8fafc;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.8rem;
}

.form-control:focus,
.form-select:focus {
  background: rgba(255,255,255,0.07);
  color: #ffffff;
  border-color: #34d399;
  box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
}

.btn-primary {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #10b981;
  border-radius: 0.8rem;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #34d399, #10b981);
  border-color: #34d399;
}

.btn-outline-success,
.btn-success,
.btn-outline-danger,
.btn-outline-light {
  border-radius: 0.8rem;
}

.alert {
  border: none;
  border-radius: 0.95rem;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.12);
}

.alert-success {
  background: rgba(16,185,129,0.16);
  color: #d1fae5;
}

.alert-danger {
  background: rgba(248,113,113,0.16);
  color: #fee2e2;
}

.bg-secondary {
  background: rgba(15,23,42,0.9) !important;
}

.text-muted {
  color: #cbd5e1 !important;
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card .h1,
.card .h2,
.card .h3,
.card .h4,
.card .h5,
.card .h6,
.card strong,
.card .list-group-item {
  color: #f8fafc;
}

.card .badge.bg-warning {
  color: #ffffff !important;
}

.card .list-group-item small,
.card .text-light,
.card .text-muted,
.dashboard-hero .text-light,
.dashboard-hero .text-muted {
  color: #e2e8f0 !important;
}

.card .list-group-item {
  border-color: rgba(255,255,255,0.14);
}

.page-title {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-surface {
  background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(6,182,212,0.12));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.4rem;
  box-shadow: 0 25px 60px rgba(2, 6, 23, 0.26);
}

.feature-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.2rem;
  padding: 1.25rem;
}

.preview-card {
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.3rem;
  padding: 1.25rem;
}

.stat-pill {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 0.75rem 1rem;
}

.dashboard-hero {
  background: linear-gradient(135deg, rgba(16,185,129,0.16), rgba(6,182,212,0.11));
  border: 1px solid rgba(255,255,255,0.08);
}

@media (max-width: 991px) {
  .sidebar {
    position: fixed;
    z-index: 1030;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease-in-out;
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .content-area {
    min-height: 100vh;
  }
}