@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --bs-primary: #1fbf75;
  --bs-primary-rgb: 31, 191, 117;
  --qn-ink: #0f1419;
  --qn-steel: #1b232c;
  --qn-mist: #e6edf3;
  --qn-lime: #7df9b4;
}

body {
  font-family: 'Manrope', 'Segoe UI', Tahoma, sans-serif;
  background:
    radial-gradient(1200px 560px at 85% -10%, rgba(125, 249, 180, 0.18), transparent 60%),
    radial-gradient(980px 480px at -10% 20%, rgba(31, 191, 117, 0.16), transparent 62%),
    linear-gradient(160deg, #f4f8fb 0%, #edf3f8 100%);
  color: var(--qn-ink);
}

.bg-light {
  background-color: transparent !important;
}

.navbar {
  background: linear-gradient(135deg, #0e141b 0%, #18232f 58%, #223142 100%) !important;
  border-bottom: 1px solid rgba(125, 249, 180, 0.24);
  box-shadow: 0 14px 38px rgba(9, 15, 20, 0.38);
}

.navbar-brand {
  font-family: 'Teko', 'Arial Narrow', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.045em;
  color: #f4fff9 !important;
  text-shadow: 0 0 14px rgba(125, 249, 180, 0.32);
}

.navbar .text-white {
  color: #d4e3f0 !important;
}

.card {
  border-radius: 16px;
  border: 1px solid rgba(16, 24, 33, 0.08);
  box-shadow: 0 16px 36px rgba(19, 30, 40, 0.09) !important;
  backdrop-filter: blur(2px);
}

.card-header {
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}

.btn-primary {
  border-color: #1aa764;
  background: linear-gradient(135deg, #1ab36b 0%, #139356 100%);
  box-shadow: 0 8px 18px rgba(26, 167, 100, 0.28);
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: #149758;
  background: linear-gradient(135deg, #179c5e 0%, #0f834d 100%);
}

.btn-outline-primary {
  border-color: #1ab36b;
  color: #11814b;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #0c2216;
  border-color: #1ab36b;
  background: rgba(125, 249, 180, 0.3);
}

.badge.bg-primary,
.text-bg-primary {
  background: #1ab36b !important;
}

.text-primary {
  color: #11814b !important;
}

.form-control,
.form-select,
.input-group-text {
  border-color: rgba(16, 24, 33, 0.15);
  border-radius: 11px;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(26, 167, 100, 0.6);
  box-shadow: 0 0 0 0.25rem rgba(31, 191, 117, 0.2);
}

.table {
  --bs-table-striped-bg: rgba(13, 22, 30, 0.025);
}

.breadcrumb-item a {
  color: #0f8f53;
}