:root {
  --portal-bg: #0a0f1c;
  --portal-bg-alt: #121826;
  --portal-surface: #112d4e;
  --portal-surface-soft: #0b1f3a;
  --portal-border: rgba(154, 164, 178, 0.18);
  --portal-text-primary: #e6edf3;
  --portal-text-secondary: #9aa4b2;
  --portal-accent: #3a86ff;
  --portal-accent-2: #00d4ff;
}

.brand-title {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  background: linear-gradient(90deg,#3a86ff,#00d4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.navbar .brand-title,
.portal-footer .brand-title {
  font-size: 1.2rem;
}

html, body {
  background: radial-gradient(circle at 0% 0%, rgba(58, 134, 255, 0.1), transparent 36%), var(--portal-bg);
  color: var(--portal-text-primary);
}

a { color: var(--portal-accent-2); }
a:hover { color: #7de9ff; }

.container, .container-fluid { position: relative; }

.navbar,
.navbar-blur,
.portal-navbar {
  background: rgba(10, 15, 28, 0.9) !important;
  border-bottom: 1px solid var(--portal-border) !important;
  backdrop-filter: blur(10px);
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .btn,
.offcanvas-title,
.list-group-item,
.dropdown-item,
.form-label,
th,
td,
label,
p,
h1, h2, h3, h4, h5, h6,
legend {
  color: var(--portal-text-primary) !important;
}

.text-secondary,
.small.text-secondary,
.form-text,
.text-muted,
.text-body-secondary {
  color: var(--portal-text-secondary) !important;
}

.card,
.modal-content,
.offcanvas,
.list-group-item,
.accordion-item,
.table,
.dropdown-menu,
.toast,
.alert,
.input-group-text,
.popover,
.tooltip-inner,
pre,
code {
  background: linear-gradient(160deg, rgba(11, 31, 58, 0.95), rgba(18, 24, 38, 0.96)) !important;
  border: 1px solid var(--portal-border) !important;
  color: var(--portal-text-primary) !important;
  box-shadow: none !important;
}

.card,
.modal-content,
.offcanvas,
.accordion-item,
.dropdown-menu {
  border-radius: 14px;
}

.btn {
  border-radius: 10px;
  border-color: rgba(58, 134, 255, 0.4);
}

.btn-primary,
.btn-success,
.btn-info {
  background: linear-gradient(120deg, var(--portal-accent), var(--portal-accent-2)) !important;
  color: #06101f !important;
  border: 0 !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-light {
  color: var(--portal-text-primary) !important;
  border-color: rgba(154, 164, 178, 0.35) !important;
}

.btn:hover,
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.nav-link:hover,
.list-group-item-action:hover {
  box-shadow: 0 0 0 1px rgba(58, 134, 255, 0.5), 0 0 18px rgba(0, 212, 255, 0.2) !important;
}

.form-control,
.form-select,
.form-check-input,
textarea,
input {
  background-color: rgba(11, 31, 58, 0.75) !important;
  border: 1px solid var(--portal-border) !important;
  color: var(--portal-text-primary) !important;
}
.form-control::placeholder,
textarea::placeholder { color: rgba(154, 164, 178, 0.82) !important; }

.table,
.table > :not(caption) > * > * {
  --bs-table-bg: transparent;
  --bs-table-color: var(--portal-text-primary);
  --bs-table-border-color: var(--portal-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(58, 134, 255, 0.06);
  color: var(--portal-text-primary);
}

.accordion-button,
.page-link,
.nav-tabs .nav-link,
.nav-pills .nav-link {
  background: rgba(11, 31, 58, 0.65) !important;
  color: var(--portal-text-primary) !important;
  border-color: var(--portal-border) !important;
}

.accordion-button:not(.collapsed),
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.page-item.active .page-link,
.list-group-item.active {
  background: rgba(58, 134, 255, 0.18) !important;
  color: #eaf6ff !important;
  border-color: rgba(58, 134, 255, 0.45) !important;
}

.badge,
.alert-success,
.alert-danger,
.alert-warning,
.alert-info {
  border: 1px solid var(--portal-border);
}

hr, .border, .border-top, .border-bottom, .border-start, .border-end {
  border-color: var(--portal-border) !important;
}

footer,
.portal-footer {
  background: rgba(10, 15, 28, 0.95) !important;
  border-top: 1px solid var(--portal-border) !important;
}

.bg-light,
.bg-white,
.bg-body,
.bg-body-tertiary,
.bg-secondary-subtle {
  background: transparent !important;
}