/* KalliLab custom.css
   Cyber-dark look with electric cyan accents */

:root {
  --kalilab-bg-1: #0d1117;
  --kalilab-bg-2: #0f1923;
  --kalilab-bg-3: #071018;
  --kalilab-primary: #00b4d8;
  --kalilab-primary-2: #0077b6;
  --kalilab-text: #e6f7ff;
  --kalilab-muted: #8fb8c7;
  --kalilab-border: rgba(0, 180, 216, 0.18);
  --kalilab-glow: 0 0 18px rgba(0, 180, 216, 0.16);
}

body {
  background:
    radial-gradient(circle at top left, rgba(0, 180, 216, 0.12), transparent 26%),
    radial-gradient(circle at top right, rgba(0, 119, 182, 0.14), transparent 22%),
    linear-gradient(135deg, var(--kalilab-bg-1) 0%, var(--kalilab-bg-2) 48%, var(--kalilab-bg-3) 100%) !important;
  color: var(--kalilab-text);
}

#page_container::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at center, black 35%, transparent 100%);
  opacity: 0.35;
}

.group-title,
.services-group .group-name,
.bookmark-group .group-name {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d9f7ff !important;
}

.service,
.bookmark {
  background: linear-gradient(180deg, rgba(15, 25, 35, 0.82) 0%, rgba(13, 17, 23, 0.88) 100%) !important;
  border: 1px solid var(--kalilab-border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), var(--kalilab-glow);
  border-radius: 18px !important;
}

.service:hover,
.bookmark:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 180, 216, 0.34) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34), 0 0 22px rgba(0, 180, 216, 0.22);
}

.service-name,
.bookmark-name,
.information-widget .widget-title,
.information-widget .title {
  color: var(--kalilab-text) !important;
}

.service-description,
.bookmark-description,
.information-widget .description,
p,
span {
  color: var(--kalilab-muted);
}

.status .status-dot {
  box-shadow: 0 0 10px currentColor;
}

.information-widget {
  background: rgba(10, 19, 28, 0.72) !important;
  border: 1px solid rgba(0, 180, 216, 0.14) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

.search-container input,
.quick-launch input {
  background: rgba(8, 15, 24, 0.88) !important;
  border: 1px solid rgba(0, 180, 216, 0.22) !important;
  color: var(--kalilab-text) !important;
  border-radius: 16px !important;
}

.search-container input:focus,
.quick-launch input:focus {
  border-color: rgba(0, 180, 216, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.25), 0 0 18px rgba(0, 180, 216, 0.16) !important;
}

a {
  color: #b8f3ff;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0, 180, 216, 0.65), rgba(0, 119, 182, 0.75));
  border-radius: 999px;
}