:root {
  --bg: #1c1f24;
  --panel: #262a31;
  --border: #3a3f47;
  --text: #e7e9ec;
  --muted: #8d95a0;
  --accent: #4aa3ff;
  --green: #00b050;
  --yellow: #d4a217;
  --red: #c93434;
}
html, body { background: var(--bg); color: var(--text); font-family: -apple-system, "Segoe UI", sans-serif; margin: 0; }
a { color: var(--accent); }
.login-page, .users-page, .me-page { display: grid; place-items: center; padding: 4rem; }
form { display: grid; gap: 0.75rem; min-width: 320px; background: var(--panel);
       padding: 1.5rem; border-radius: 6px; border: 1px solid var(--border); }
label { display: grid; gap: 0.25rem; font-size: 0.875rem; }
input { background: #131519; border: 1px solid var(--border); color: var(--text);
        padding: 0.5rem; border-radius: 4px; font-size: 0.95rem; }
button { background: var(--accent); color: #fff; border: 0; padding: 0.6rem 1rem;
         border-radius: 4px; cursor: pointer; font-weight: 600; }
button:hover { filter: brightness(1.1); }
button.danger { background: var(--red); }
.users-table { width: 100%; border-collapse: collapse; background: var(--panel); }
.users-table th, .users-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; }
#error { color: #ff8080; font-size: 0.875rem; min-height: 1.2em; }
#tooltip {
  position: fixed;
  background: #111418;
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  pointer-events: none;
  z-index: 999;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
#tooltip dt { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; }
#tooltip dd { margin: 0; }
.port:hover circle { stroke: var(--accent); stroke-width: 2; }