#database-network-switcher {
  display: grid;
  gap: 18px;
  overflow: hidden;
}

.database-network-toolbar,
.database-network-tabs,
.database-network-meta,
.database-matrix-rules {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.database-network-toolbar {
  justify-content: space-between;
}

.database-network-tab {
  appearance: none;
  border: 1px solid rgba(124, 149, 255, .25);
  border-radius: 12px;
  background: rgba(12, 19, 42, .72);
  color: #aebbdc;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 11px 18px;
}

.database-network-tab.active {
  border-color: #51d6ff;
  background: linear-gradient(135deg, rgba(44, 117, 255, .34), rgba(44, 222, 193, .18));
  color: #fff;
}

.database-network-depth {
  display: grid;
  gap: 5px;
  color: #b7c4e4;
  font-size: .82rem;
}

.database-network-depth select {
  min-width: 130px;
}

.database-network-meta span,
.database-matrix-rules span {
  border: 1px solid rgba(124, 149, 255, .18);
  border-radius: 999px;
  background: rgba(9, 16, 36, .58);
  color: #b7c4e4;
  padding: 7px 11px;
  font-size: .78rem;
}

.database-matrix-rules span.active {
  border-color: rgba(57, 221, 175, .42);
  color: #81f0ca;
}

.database-network-tree,
.database-network-tree ul {
  display: flex;
  justify-content: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.database-network-tree {
  justify-content: flex-start;
  overflow: auto;
  padding: 8px 4px 22px;
}

.database-network-tree > li {
  min-width: 100%;
}

.database-network-tree li {
  display: grid;
  justify-items: center;
  gap: 14px;
  position: relative;
}

.database-network-tree ul {
  align-items: flex-start;
  min-width: max-content;
}

.database-network-node {
  display: grid;
  gap: 5px;
  min-width: 178px;
  max-width: 220px;
  border: 1px solid rgba(90, 136, 255, .34);
  border-radius: 15px;
  background: linear-gradient(155deg, rgba(16, 28, 60, .97), rgba(8, 14, 31, .98));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
  padding: 13px 15px;
}

.database-network-node.root {
  border-color: rgba(61, 224, 181, .58);
}

.database-network-node strong {
  color: #fff;
}

.database-network-node span,
.database-network-node small {
  color: #9faed0;
}

.database-network-node em {
  color: #65ddff;
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.database-network-empty {
  border: 1px dashed rgba(124, 149, 255, .25);
  border-radius: 12px;
  color: #7583a8;
  min-width: 135px;
  padding: 10px;
  text-align: center;
}

@media (max-width: 760px) {
  .database-network-toolbar { align-items: stretch; flex-direction: column; }
  .database-network-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .database-network-tab { width: 100%; }
  .database-network-tree { justify-content: flex-start; }
}