@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  --font: 'Roboto', system-ui, -apple-system, sans-serif;
  --bg-body: #eef1f6;
  --bg-surface: #ffffff;
  --bg-surface-2: #f7f8fb;
  --bg-hover: #e9eef8;
  --border: #d5dbe6;
  --text: #1c2333;
  --text-muted: #64748b;
  --accent: #4b6bfb;
  --accent-soft: #e8edff;
  --btn-bg: #ffffff;
  --btn-border: #cdd5e3;
  --btn-text: #334155;
  --btn-hover-bg: #f3f6fc;
  --btn-hover-border: #9eb0d4;
  --input-bg: #ffffff;
  --shadow: rgba(15, 23, 42, 0.08);
  --overlay: rgba(15, 23, 42, 0.4);
  --log-cmd: #15803d;
  --log-err: #b91c1c;
  --log-resp: #047857;
  --online: #65a83a;
  --offline: #d9534f;
}

[data-theme="dark"] {
  --bg-body: #0e1016;
  --bg-surface: #181b24;
  --bg-surface-2: #1f2430;
  --bg-hover: #2a3142;
  --border: #343b4a;
  --text: #e8ecf3;
  --text-muted: #9aa3b5;
  --accent: #6b8cff;
  --accent-soft: #252d45;
  --btn-bg: #222733;
  --btn-border: #3d4658;
  --btn-text: #d5dbe7;
  --btn-hover-bg: #2c3344;
  --btn-hover-border: #5a6a88;
  --input-bg: #141820;
  --shadow: rgba(0, 0, 0, 0.45);
  --overlay: rgba(0, 0, 0, 0.62);
  --log-cmd: #4ade80;
  --log-err: #f87171;
  --log-resp: #34d399;
  --online: #8fd45a;
  --offline: #ef6b6b;
}

body {
  font-family: var(--font);
  background: var(--bg-body);
  color: var(--text);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
}

.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn.active:hover:not(:disabled) {
  filter: brightness(1.06);
}