:root {
  --ng-navy: #0b2d5c;
  --ng-blue: #12489c;
  --ng-orange: #f5851f;
  --ng-orange-dark: #d96f0f;
  --ng-bg: #f5f7fb;
  --ng-gray: #5b6472;
}

body {
  background: var(--ng-bg);
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  color: #23272f;
}

/* Navbar */
.site-navbar {
  background: linear-gradient(90deg, var(--ng-navy), var(--ng-blue));
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.brand-badge {
  background: var(--ng-orange);
  color: #fff;
  font-weight: 700;
  width: 38px; height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.brand-text small { color: #cfe0ff; font-size: 11px; letter-spacing: .04em; }
.navbar .nav-link { color: #e9f0ff !important; font-weight: 500; }
.navbar .nav-link:hover { color: var(--ng-orange) !important; }

/* Hero */
.hero {
  background: radial-gradient(circle at 20% 20%, var(--ng-blue), var(--ng-navy) 70%);
  color: #fff;
  padding: 70px 0 90px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; right: -80px; bottom: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: rgba(245,133,31,.18);
}
.hero h1 { font-weight: 800; }
.hero .lead { color: #d7e4ff; }

.btn-orange {
  background: var(--ng-orange);
  border-color: var(--ng-orange);
  color: #fff;
  font-weight: 600;
}
.btn-orange:hover { background: var(--ng-orange-dark); border-color: var(--ng-orange-dark); color:#fff; }

.btn-navy {
  background: var(--ng-navy);
  border-color: var(--ng-navy);
  color: #fff;
  font-weight: 600;
}
.btn-navy:hover { background: #071f42; border-color: #071f42; color: #fff; }

/* Cards */
.card { border: none; border-radius: 12px; box-shadow: 0 2px 14px rgba(20,30,60,.08); }
.card-header-accent {
  border-radius: 12px 12px 0 0;
  background: var(--ng-navy);
  color: #fff;
  font-weight: 600;
}
.stat-card { border-left: 5px solid var(--ng-orange); }
.stat-card h3 { color: var(--ng-navy); font-weight: 800; margin-bottom: 0; }

.badge-status-pending { background: #f0ad4e; }
.badge-status-approved { background: #2e7d32; }
.badge-status-rejected { background: #c62828; }
.badge-status-suspended { background: #6d6d6d; }

/* Profile avatar */
.avatar-circle {
  width: 90px; height: 90px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--ng-orange);
  background: #dde6f5;
}
.avatar-circle-sm {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--ng-orange);
  background: #dde6f5;
}

/* Forms */
.auth-card { max-width: 480px; margin: 50px auto; }
label.form-label { font-weight: 600; color: var(--ng-navy); }
.form-control:focus, .form-select:focus {
  border-color: var(--ng-blue);
  box-shadow: 0 0 0 .2rem rgba(18,72,156,.15);
}
.captcha-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
  box-shadow: inset 0 1px 2px rgba(11,45,92,.06);
}
.captcha-frame img {
  display: block;
  height: 60px;
  width: auto;
}
.captcha-refresh-btn {
  white-space: nowrap;
}
/* Footer */
.site-footer { background: var(--ng-navy); }
.site-footer a { color: #cfe0ff; text-decoration: none; }
.site-footer a:hover { color: var(--ng-orange); }

.cookie-consent-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 27, 60, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1040;
}

.cookie-consent-modal {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(760px, calc(100% - 24px));
  z-index: 1050;
}

.cookie-consent-modal .text-navy { color: var(--ng-navy); }
.cookie-consent-modal a { color: var(--ng-blue); text-decoration: underline; }
.cookie-consent-modal .btn-navy {
  background: var(--ng-navy);
  border-color: var(--ng-navy);
  color: #fff;
}
.cookie-consent-modal .btn-navy:hover {
  background: #061b3c;
  border-color: #061b3c;
  color: #fff;
}

.site-main { min-height: 65vh; padding-bottom: 30px; }

.table-nielit thead { background: var(--ng-navy); color: #fff; }

.section-title {
  font-weight: 800;
  color: var(--ng-navy);
  border-left: 5px solid var(--ng-orange);
  padding-left: 12px;
  margin-bottom: 20px;
}