:root {
  --bf-bg: #07090f;
  --bf-bg-2: #0b1020;
  --bf-surface: #111726;
  --bf-surface-2: #0d1322;
  --bf-cyan: #00e5ff;
  --bf-violet: #8b5cf6;
  --bf-orange: #ff5c2b;
  --bf-text: #f8fafc;
  --bf-text-dim: #dbeafe;
  --bf-border: rgba(0, 229, 255, 0.24);
}

body#main-page,
body#loginPage {
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 229, 255, 0.18), transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(139, 92, 246, 0.14), transparent 35%),
    linear-gradient(180deg, var(--bf-bg) 0%, var(--bf-bg-2) 55%, var(--bf-bg) 100%);
  color: var(--bf-text);
}

#header {
  border-bottom: 1px solid rgba(0, 229, 255, 0.35);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.08), rgba(139, 92, 246, 0.08));
}

#headerlogo img,
#logo img,
#mobileheader #logo img {
  max-height: 74px;
  width: auto;
  filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.35));
}

/* Reborn login uses #loginPage #logo (not #headerlogo). */
#loginPage #header,
#registerPage #header {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 320px !important;
  height: 110px !important;
}

#loginPage #logo,
#registerPage #logo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 320px !important;
  height: 110px !important;
  margin: 0 auto !important;
  background-image: url('/branding/logo-horizontal-3000x1000.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

#sidebar,
#rightbar,
#topmenu_container,
.box,
.box_headerbox,
div.content,
#content,
#maincontainer {
  border-color: var(--bf-border) !important;
}

.box,
div.content,
#rightbar,
#sidebar {
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.9), rgba(8, 12, 22, 0.9));
}

#loginbox {
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: linear-gradient(180deg, rgba(9, 14, 28, 0.94), rgba(8, 12, 22, 0.94));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

#loginbox h2 {
  color: var(--bf-text);
  letter-spacing: 0.04em;
}

a,
a:visited {
  color: #8be9ff;
}

a:hover,
a:focus {
  color: #ffffff;
}

input[type=text],
input[type=password],
input[type=number],
input[type=url],
select,
textarea {
  background: var(--bf-surface-2);
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: var(--bf-text);
}

button,
input[type=button],
input[type=submit],
.button {
  background: linear-gradient(90deg, var(--bf-cyan), var(--bf-violet));
  color: #08111d !important;
  border: none;
  font-weight: 700;
  text-shadow: none;
}

button:hover,
input[type=button]:hover,
input[type=submit]:hover,
.button:hover {
  background: linear-gradient(90deg, var(--bf-orange), var(--bf-violet));
  color: #ffffff !important;
}

.topmenu_item a span {
  color: var(--bf-text-dim);
}

.topmenu_item a:hover span {
  color: #ffffff;
}

#notification {
  border: 1px solid rgba(255, 92, 43, 0.55);
  background: rgba(14, 20, 30, 0.95);
}

/* Accessibility and keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--bf-cyan);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.2);
}

/* Legibility on data-heavy views */
table,
tr,
td,
th,
label,
.small,
.data,
.stats,
#content,
#rightbar,
#sidebar {
  color: var(--bf-text);
}

/* Mobile refinements */
@media (max-width: 900px) {
  #headerlogo img,
  #logo img,
  #mobileheader #logo img {
    max-height: 56px;
  }

  #header,
  #mobileheader {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  #topmenu_container,
  #content,
  #sidebar,
  #rightbar,
  .box,
  div.content {
    border-width: 1px;
    box-shadow: none !important;
  }
}

@media (max-width: 640px) {
  #loginPage #header,
  #registerPage #header {
    display: block !important;
    width: 260px !important;
    height: 90px !important;
  }

  #loginPage #logo,
  #registerPage #logo {
    display: block !important;
    width: 260px !important;
    height: 90px !important;
  }

  #headerlogo img,
  #logo img,
  #mobileheader #logo img {
    max-height: 48px;
  }

  button,
  input[type=button],
  input[type=submit],
  .button {
    min-height: 40px;
  }

  input[type=text],
  input[type=password],
  input[type=number],
  input[type=url],
  select,
  textarea {
    min-height: 38px;
  }
}

/* Respect users who reduce animations */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}