:root {
  --orion-bg-0: #050a17;
  --orion-bg-1: #0b1430;
  --orion-panel: rgba(18, 29, 57, 0.95);
  --orion-line: rgba(146, 176, 240, 0.30);
  --orion-text: #edf3ff;
  --orion-muted: #a8bce8;
  --orion-ok: #66e38d;
  --orion-bad: #ff7f92;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

html {
  background: var(--orion-bg-0) !important;
}

body {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
  color: var(--orion-text);
  font-family:  Space Grotesk, Segoe UI, sans-serif !important;
  background:
    radial-gradient(1200px 560px at 5% -20%, rgba(65, 215, 255, 0.16), transparent 62%),
    radial-gradient(900px 520px at 95% -20%, rgba(125, 139, 255, 0.14), transparent 62%),
    linear-gradient(180deg, var(--orion-bg-0) 0%, var(--orion-bg-1) 55%, var(--orion-bg-0) 100%) !important;
  background-attachment: fixed;
  overflow-x: hidden;
}

header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--orion-line);
  background: rgba(6, 10, 22, 0.92);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.36);
}

#header-menu.home-menu {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

#header-menu .pure-menu-heading {
  flex: 0 0 auto;
  color: #fff !important;
  font-family: Orbitron, Space Grotesk, sans-serif !important;
  font-size: 28px !important;
  letter-spacing: 0.6px;
  padding: 8px 8px !important;
  line-height: 1.15 !important;
}

#header-menu ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 1 auto;
  flex-wrap: wrap;
  overflow: visible;
  white-space: normal;
  scrollbar-width: thin;
  row-gap: 6px;
}

#header-menu ul::-webkit-scrollbar {
  height: 6px;
}

#header-menu ul::-webkit-scrollbar-thumb {
  background: rgba(125, 139, 255, 0.55);
  border-radius: 999px;
}

#header-menu li {
  float: none !important;
  display: block !important;
  flex: 0 0 auto !important;
}

#header-menu li a {
  display: inline-flex !important;
  align-items: center;
  color: var(--orion-muted) !important;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 9px 12px !important;
  line-height: 1.2 !important;
  text-decoration: none;
  transition: all 0.14s ease;
}

#header-menu li a:hover {
  color: #fff !important;
  background: rgba(65, 215, 255, 0.12) !important;
}

#header-menu li.pure-menu-selected a {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(65, 215, 255, 0.34), rgba(125, 139, 255, 0.30)) !important;
  border-color: rgba(65, 215, 255, 0.46) !important;
}

main {
  width: min(1480px, 96vw) !important;
  margin: 16px auto 22px auto !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--orion-text) !important;
  position: relative;
  z-index: 1;
}

footer {
  width: min(1480px, 96vw);
  margin: 0 auto 18px auto;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--orion-line);
  background: rgba(10, 16, 31, 0.88);
  color: var(--orion-muted);
  text-align: center;
}

a {
  color: #9dd8ff;
}

a:hover {
  color: #fff;
}

.orionCard {
  background: linear-gradient(180deg, var(--orion-panel), rgba(10, 16, 33, 0.96)) !important;
  border: 1px solid var(--orion-line);
  border-radius: 12px;
  padding: 14px;
  overflow-x: auto;
}

.orionTitle {
  margin: 0 0 8px 0;
  color: #fff;
  font-size: 1.25em;
}

.orionMuted {
  color: var(--orion-muted);
}

.statusUp,
.statusDown {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
}

.statusUp {
  color: #03210d !important;
  background: var(--orion-ok);
}

.statusDown {
  color: #2b0208 !important;
  background: var(--orion-bad);
}

table,
.pure-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

main .pure-table {
  min-width: 860px;
}

table th,
table td,
.pure-table th,
.pure-table td {
  border: 1px solid rgba(166, 187, 232, 0.20) !important;
  padding: 8px 10px !important;
  word-break: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

table th,
.pure-table th {
  background: rgba(9, 16, 31, 0.95) !important;
  color: #fff !important;
}

table td,
.pure-table td {
  background: rgba(9, 15, 29, 0.88) !important;
  color: var(--orion-text) !important;
}

.pure-table-odd td {
  background: rgba(12, 20, 39, 0.92) !important;
}

input,
select,
textarea,
.form-control {
  background: rgba(8, 14, 26, 0.94) !important;
  color: #fff !important;
  border: 1px solid rgba(167, 188, 236, 0.34) !important;
  border-radius: 8px !important;
  padding: 8px 10px;
}

button,
.btn {
  background: linear-gradient(135deg, #41d7ff, #7d8bff) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 12px;
  cursor: pointer;
}

main,
main * {
  color: var(--orion-text);
}

main p,
main li,
main span,
main label,
main strong,
main em,
main small,
main pre,
main code,
main td,
main th,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  color: var(--orion-text) !important;
}

main .orionMuted {
  color: var(--orion-muted) !important;
}

main .mono {
  font-family: JetBrains Mono, Consolas, monospace;
  overflow-wrap: anywhere;
}

main svg text,
main .nv-noData,
main .highcharts-no-data,
main .highcharts-no-data text,
main .nvd3 text,
main .nvd3 .tick text,
main .nvd3 .legend text,
main .highcharts-title,
main .highcharts-axis-labels text,
main .highcharts-data-label text,
main .highcharts-axis-title,
main .highcharts-legend-item text {
  fill: var(--orion-text) !important;
  color: var(--orion-text) !important;
}

@media (max-width: 1100px) {
  #header-menu.home-menu {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  #header-menu .pure-menu-heading {
    width: 100%;
    text-align: left;
    font-size: 24px !important;
  }

  #header-menu ul {
    width: 100%;
    padding-bottom: 4px !important;
    row-gap: 4px;
  }

  main {
    width: 98vw !important;
  }

  .orionCard {
    padding: 12px;
  }
}

@media (max-width: 700px) {
  #header-menu.home-menu {
    padding: 6px 8px !important;
  }

  #header-menu .pure-menu-heading {
    font-size: 20px !important;
    line-height: 1.2 !important;
    padding: 6px 4px !important;
  }

  #header-menu li a {
    padding: 8px 10px !important;
    font-size: 14px !important;
  }

  main {
    width: 99vw !important;
    margin-top: 10px !important;
  }

  footer {
    width: 99vw;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  table th,
  table td,
  .pure-table th,
  .pure-table td {
    padding: 7px 8px !important;
    font-size: 14px !important;
  }
}