:root { --card-bg:#fff; --muted:#6b7280; }

* { box-sizing:border-box; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  margin:0; background:#f3f4f6; color:#111827;
}

/* Header */
header { padding:24px 16px 8px; text-align:center; }
h1 { margin:0 0 6px; font-size: clamp(20px, 3vw, 32px); }
.sub { color: var(--muted); font-size: 14px; }

/* Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 16px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }

/* Card */
.card { min-width: 0; background: var(--card-bg); border-radius:14px; box-shadow: 0 6px 20px rgba(0,0,0,.06); padding:18px; margin-bottom: 20px; }
.card h2 { margin:0 0 12px; font-size:18px; }

/* Flex helpers */
.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.spacer { flex:1; }

/* Buttons */
.btn { appearance:none; border:0; border-radius:10px; padding:8px 12px; background:#111827; color:#fff; cursor:pointer; font-weight:600; }
.btn.ghost { background:#e5e7eb; color:#111827; }
.btn.small { padding:6px 10px; font-size:12px; }

/* Pills & chips */
.pill { border-radius:999px; padding:6px 10px; background:#f3f4f6; color:#111827; display:inline-flex; align-items:center; gap:8px; }
.status-dot { width:10px; height:10px; border-radius:50%; background:#9CA3AF; display:inline-block; }
.ok .status-dot { background:#10B981; }
.bad .status-dot { background:#EF4444; }
.chip { font-size:12px; padding:4px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; }

/* Inputs & notices */
.notice { color: var(--muted); font-size:12px; }
input[type="text"], input[type="password"], select {
  padding:8px; border:1px solid #e5e7eb; border-radius:8px;
}

/* Utility */
.hidden { display:none; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* Optional: color/preview box used on automation page */
.color-box { width:36px; height:24px; border-radius:6px; border:1px solid #e5e7eb; }

/* Segmented control (automation page) */
.seg { display:inline-flex; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
.seg button { background:#fff; color:#111; border:0; padding:6px 10px; }
.seg button.active { background:#111827; color:#fff; }

.top-menu {
  background:#111827;
  padding:10px 20px;
}
.top-menu ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:20px;
}
.top-menu a {
  color:white;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
}
.top-menu a:hover {
  text-decoration:underline;
}

/* Top menu wrapper */
.top-menu { padding: 8px 0; }

/* Center the buttons and add even spacing */
.top-menu__row { justify-content: center; gap: 8px; }

/* Active page: make the ghost button look “primary” */
.btn.ghost.is-active {
  background: #111827;
  color: #fff;
  outline: 2px solid #111827; /* subtle emphasis */
}

/* Keyboard focus ring (accessible) */
.top-menu a.btn:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 2px;
}