:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090b18;
  color: #f8fafc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  width: 420px;
  min-height: 560px;
  background:
    radial-gradient(circle at 15% 0%, rgba(109, 40, 217, .42), transparent 38%),
    radial-gradient(circle at 95% 15%, rgba(37, 99, 235, .22), transparent 35%),
    #090b18;
}

button, input, select { font: inherit; }

.app { padding: 20px; }

.brand {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.brand h1 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.brand p { margin: 3px 0 0; color: #a5b4fc; font-size: 12px; }

.moon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #22d3ee, #7c3aed 58%, #c026d3);
  box-shadow: 0 0 28px rgba(124, 58, 237, .55);
  position: relative;
}

.moon::after {
  content: "";
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #111329;
  top: -2px;
  right: -3px;
}

.pill {
  padding: 6px 9px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 999px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, .72);
  font-size: 11px;
}

.pill.online {
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, .55);
  background: rgba(88, 28, 135, .35);
}

.card {
  padding: 15px;
  margin-bottom: 12px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 16px;
  background: rgba(15, 23, 42, .78);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
}

label { display: block; margin-bottom: 9px; color: #cbd5e1; font-size: 12px; font-weight: 700; }
.url-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

input, select {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 11px;
  outline: none;
  background: rgba(2, 6, 23, .8);
  color: #f8fafc;
}

input { min-width: 0; padding: 11px 12px; font-size: 12px; }
select { padding: 12px; }
input:focus, select:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, .14); }
select:disabled, input:disabled { opacity: .58; }

button { border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }

.secondary {
  padding: 0 12px;
  border-radius: 11px;
  background: rgba(124, 58, 237, .24);
  color: #ddd6fe;
  font-weight: 700;
}

.secondary:hover:not(:disabled) { background: rgba(124, 58, 237, .38); }
.refresh-config {
  width: 100%;
  margin-top: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(96, 165, 250, .28);
  border-radius: 11px;
  background: rgba(30, 64, 175, .16);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 800;
}
.refresh-config:hover:not(:disabled) { background: rgba(30, 64, 175, .28); }
.hint { margin: 8px 0 0; color: #64748b; font-size: 10px; }
.subscription-info { margin-top: 10px; color: #94a3b8; font-size: 11px; }

.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-title { color: #e2e8f0; font-size: 12px; font-weight: 800; }
.diagnostics-hint { margin-top: 4px; line-height: 1.35; }
.probe-button {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(139, 92, 246, .32);
  border-radius: 9px;
  background: rgba(124, 58, 237, .18);
  color: #ddd6fe;
  font-size: 10px;
  font-weight: 800;
}
.probe-button:hover:not(:disabled) { background: rgba(124, 58, 237, .32); }
.probe-list {
  display: grid;
  gap: 6px;
  max-height: 230px;
  margin-top: 12px;
  padding-right: 3px;
  overflow-y: auto;
  scrollbar-color: rgba(139, 92, 246, .5) transparent;
  scrollbar-width: thin;
}
.probe-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 10px;
  background: rgba(2, 6, 23, .46);
}
.probe-row.selected { border-color: rgba(139, 92, 246, .5); background: rgba(76, 29, 149, .16); }
.probe-name { overflow: hidden; color: #e2e8f0; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.probe-protocol { display: block; margin-top: 2px; color: #64748b; font-size: 9px; font-weight: 600; }
.probe-value { min-width: 78px; text-align: right; color: #94a3b8; font-size: 10px; font-weight: 800; }
.probe-value.good { color: #86efac; }
.probe-value.medium { color: #fde68a; }
.probe-value.slow { color: #fdba74; }
.probe-value.offline { color: #fda4af; }
.probe-value.testing { color: #c4b5fd; }
.probe-empty { padding: 8px 0 2px; color: #64748b; font-size: 10px; line-height: 1.4; }
.probe-updated { margin-top: 8px; color: #64748b; font-size: 9px; text-align: right; }

.message {
  padding: 11px 12px;
  margin: 12px 0;
  border: 1px solid rgba(251, 113, 133, .4);
  border-radius: 12px;
  background: rgba(136, 19, 55, .24);
  color: #fecdd3;
  font-size: 11px;
  line-height: 1.45;
}

.message.ok {
  border-color: rgba(34, 197, 94, .35);
  background: rgba(20, 83, 45, .22);
  color: #bbf7d0;
}

.connect {
  width: 100%;
  min-height: 58px;
  margin-top: 8px;
  border-radius: 16px;
  color: white;
  background: linear-gradient(135deg, #6d28d9, #8b5cf6 55%, #2563eb);
  box-shadow: 0 15px 35px rgba(109, 40, 217, .3);
  font-size: 15px;
  font-weight: 800;
}

.connect.connected { background: linear-gradient(135deg, #be123c, #e11d48); box-shadow: 0 15px 35px rgba(190, 18, 60, .24); }
.power { margin-right: 6px; }

footer {
  display: flex;
  justify-content: space-between;
  padding: 16px 2px 0;
  color: #64748b;
  font-size: 10px;
}
