body {
  background: #090a0f;
  color: #e1e1e1; 
  font-family: 'Segoe UI', sans-serif;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* navbar */
.navbar {
  background: rgba(12, 12, 15, 0.9); 
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
  backdrop-filter: saturate(180%) blur(8px);
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.25rem;
  color: #f0e8d5; 
}

.nav-link {
  color: #aaaeb4;
  transition: color 0.3s ease;
}
.nav-link:hover,
.nav-link:focus {
  color: #f0e8d5;
}

/* dropdown */
.dropdown-menu {
  background: #121214;
  border: 1px solid rgba(240, 232, 213, 0.3);
}
.dropdown-item {
  color: #bbbfc5;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.dropdown-item:hover {
  background: rgba(240, 232, 213, 0.2);
  color: #f0e8d5;
}

/* card */
.card {
  background: rgba(15, 15, 19, 0.85);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 15px 3px rgba(244, 230, 174, 0.1),
    inset 0 -2px 8px 0 rgba(244, 230, 174, 0.15);
  overflow: hidden;
}
.card-header {
  background: linear-gradient(
    90deg,
    rgba(244, 230, 174, 0.2) 0%,
    rgba(244, 230, 174, 0.05) 100%
  );
  color: #f4e6ae;
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
  letter-spacing: 1.2px;
}

/* table */
.table {
  width: 100%;
  border-spacing: 0 6px;
  font-size: 14px;
  color: #d0d0d0;
  background: transparent;
  
}

.table thead th {
  background: #18181c;
  color: #f4e6ae;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid rgba(244, 230, 174, 0.4);
  padding: 12px 15px;
}

.table tbody tr {
  background: #121217;
  border-radius: 12px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.table tbody tr:hover {
  background: rgba(244, 230, 174, 0.15);
  box-shadow:
    inset 0 0 10px rgba(244, 230, 174, 0.3),
    0 0 12px rgba(244, 230, 174, 0.15);
}

.table tbody td {
  padding: 12px 15px;
  border: none;
  color: #d6d4c9;
  vertical-align: middle;
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .navbar-brand {
    font-size: 1rem;
  }

  .table {
    font-size: 12px;
  }

  .table td, .table th {
    white-space: normal;
    word-wrap: break-word;
    padding: 10px 8px;
  }
}