:root {
  --bg: #060d18;
  --panel: #0d1726;
  --panel2: #12233a;
  --line: #263b58;
  --text: #f4f8ff;
  --muted: #93a8c1;
  --green: #58aaff;
  --lime: #8dceff;
  --red: #ff7f92;
  --shadow: 0 24px 80px rgba(0, 8, 24, .42);
}

body {
  background:
    radial-gradient(circle at 82% -10%, rgba(35, 112, 199, .24), transparent 34rem),
    radial-gradient(circle at 20% 110%, rgba(27, 76, 145, .16), transparent 38rem),
    var(--bg);
}

.sidebar,
.mobile-head {
  background: rgba(6, 13, 24, .96);
}

.brand-mark,
button,
.details-button {
  background: linear-gradient(145deg, #93d5ff, #438fe8);
  color: #06101e;
  box-shadow: 0 10px 28px rgba(60, 145, 235, .2);
}

.sidebar nav a.active {
  box-shadow: inset 3px 0 #58aaff;
}

.pulse {
  background: #62b4ff;
  box-shadow: 0 0 0 5px rgba(88, 170, 255, .12);
}

.metrics article,
.login-card {
  background: linear-gradient(145deg, #12233a, #0d1726);
}

th,
th:first-child {
  background: #0a1422;
}

td:first-child {
  background: #0d1726;
}

tbody tr:not(.details-row):hover td,
tbody tr:not(.details-row):hover td:first-child {
  background: #142842;
}

.details-row td {
  background: #091321 !important;
}

.detail-grid div {
  background: #12233a;
}

.status.ok {
  color: #74bdff;
  background: rgba(88, 170, 255, .1);
}

.tags span {
  border-color: #52759e !important;
  color: #c1dcf8 !important;
}

.icon-button {
  background: #182b44;
  color: var(--text);
}

.hint::after {
  background: #172b45;
  border-color: #38597c;
}

.hint::before {
  border-bottom-color: #38597c;
}

input {
  background: #081321;
}

input:focus {
  border-color: #58aaff;
  box-shadow: 0 0 0 3px rgba(88, 170, 255, .12);
}

.faq-article {
  width: 100%;
  max-width: none;
}

.faq-article h2,
.faq-article .lead,
.faq-article p,
.parameter-list {
  max-width: none;
}

.faq-article pre {
  background: #07111f;
}

.faq-note {
  border-color: rgba(88, 170, 255, .38);
  background: rgba(88, 170, 255, .08);
}

.mobile-nav {
  display: none;
}

@media (max-width: 760px) {
  .workspace {
    padding-bottom: 72px;
  }

  .mobile-nav {
    position: fixed;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(9, 19, 33, .96);
    box-shadow: 0 16px 50px rgba(0, 5, 16, .5);
    backdrop-filter: blur(18px);
  }

  .mobile-nav a {
    display: grid;
    place-items: center;
    gap: 2px;
    padding: 7px 4px;
    border-radius: 11px;
    color: var(--muted);
    font-size: 10px;
    text-decoration: none;
  }

  .mobile-nav a span {
    font-size: 16px;
  }

  .mobile-nav a.active {
    color: var(--text);
    background: #162c47;
  }
}