:root {
  --bg: #071120;
  --bg2: #0b1728;
  --panel: #0f1d31;
  --panel2: #10243c;
  --border: #223a59;
  --border2: #294767;
  --text: #f5f8ff;
  --muted: #b9c7da;
  --subtle: #7f93ad;
  --blue: #1787ff;
  --blue2: #0d6efd;
  --green: #39d98a;
  --pink: #ff4fa3;
  --purple: #a855f7;
  --orange: #ff9f1c;
  --red: #ff3b3b;
}

html, body {
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(23,135,255,.12), transparent 35%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.navbar {
  background: rgba(5, 13, 26, .92) !important;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.navbar-brand,
.nav-link {
  color: var(--text) !important;
  font-weight: 700;
}

.nav-link {
  color: var(--muted) !important;
}

.nav-link.active,
.nav-link:hover {
  color: var(--blue) !important;
}

.container-fluid {
  padding: 1.4rem;
}

.card {
  background: linear-gradient(145deg, rgba(17,31,51,.98), rgba(10,24,42,.98));
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  box-shadow: 0 12px 35px rgba(0,0,0,.22);
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5 {
  color: var(--text);
  font-weight: 800;
}

.text-muted,
.card .text-muted {
  color: var(--muted) !important;
}

.kpi-card {
  min-height: 118px;
}

.kpi-value {
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}

.kpi-label {
  color: var(--muted);
  font-weight: 700;
}

.table {
  color: var(--text);
  margin-bottom: 0;
  border-color: var(--border);
}

.table thead th {
  color: var(--muted);
  background: rgba(8,18,32,.7);
  border-color: var(--border);
  font-weight: 800;
}

.table tbody td {
  color: var(--text);
  background: rgba(8,18,32,.35);
  border-color: rgba(47,67,96,.7);
  vertical-align: middle;
}

.table tbody tr:hover td {
  background: rgba(23,135,255,.08);
}

.table a,
.host-link {
  color: var(--pink);
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.table a:hover,
.host-link:hover {
  color: #ff86c1;
  text-decoration: underline;
}

.badge {
  font-weight: 800;
  border-radius: 7px;
  padding: .35rem .55rem;
}

.badge.bg-success {
  background: rgba(57,217,138,.22) !important;
  color: #8ff0bd !important;
}

.badge.bg-secondary {
  background: rgba(127,147,173,.2) !important;
  color: var(--muted) !important;
}

.badge.bg-primary {
  background: rgba(23,135,255,.2) !important;
  color: #80bdff !important;
}

.badge.bg-info {
  background: rgba(168,85,247,.22) !important;
  color: #d4a5ff !important;
}

.btn {
  border-radius: 7px;
  font-weight: 800;
}

.btn-primary {
  background: linear-gradient(180deg, #1f8cff, #0d6efd);
  border-color: #1f8cff;
  box-shadow: 0 8px 18px rgba(13,110,253,.25);
}

.btn-outline-primary {
  border-color: var(--blue);
  color: #79baff;
}

.btn-outline-primary:hover {
  background: var(--blue);
  color: #fff;
}

.btn-outline-danger {
  border-color: var(--red);
  color: var(--red);
}

.btn-secondary {
  background: #33445b;
  border-color: #33445b;
  color: #fff;
}

.form-label,
label {
  color: var(--muted);
  font-weight: 800;
  margin-bottom: .35rem;
}

.form-control,
.form-select {
  background: rgba(7,17,32,.75);
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: 7px;
  min-height: 42px;
}

.form-control:focus,
.form-select:focus {
  background: rgba(7,17,32,.95);
  color: var(--text);
  border-color: var(--blue);
  box-shadow: 0 0 0 .2rem rgba(23,135,255,.22);
}

.form-control::placeholder {
  color: var(--subtle);
}

.form-check-label {
  color: var(--text);
}

pre {
  background: #050b18;
  color: #d7e7ff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  white-space: pre-wrap;
}

code {
  color: var(--green);
}

hr {
  border-color: var(--border);
  opacity: 1;
}

a {
  color: #73b7ff;
}

footer {
  color: var(--muted);
  border-top: 1px solid var(--border);
}

input.kim-input,
select.kim-input,
textarea.kim-input {
  background-color: #071425 !important;
  color: #f8fafc !important;
  border: 1px solid #284766 !important;
}

input.kim-input:focus,
select.kim-input:focus,
textarea.kim-input:focus {
  background-color: #071425 !important;
  color: #ffffff !important;
  border-color: #2f8cff !important;
  box-shadow: 0 0 0 0.15rem rgba(47, 140, 255, 0.25) !important;
}

/* Fix Chrome/Safari autofill yellow */
input.kim-input:-webkit-autofill,
input.kim-input:-webkit-autofill:hover,
input.kim-input:-webkit-autofill:focus,
input.kim-input:-webkit-autofill:active {
  -webkit-text-fill-color: #f8fafc !important;
  box-shadow: 0 0 0 1000px #071425 inset !important;
  -webkit-box-shadow: 0 0 0 1000px #071425 inset !important;
  caret-color: #ffffff !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

input.kim-input::placeholder {
  color: #7f92aa !important;
}