:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --border: #d8dde4;
  --border-strong: #b6bdc7;
  --ink: #1f2937;
  --muted: #6b7280;
  --accent: #1e5fbf;
  --accent-ink: #ffffff;
  --ok: #2f7d3a;
  --bad: #b3261e;
  --warn-bg: #fff4d4;
  --code-bg: #f0f2f5;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.45 -apple-system, "Segoe UI", system-ui, Arial, sans-serif; }

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: var(--card); border-bottom: 1px solid var(--border);
}
header .brand { font-size: 16px; }
header .brand .version { color: var(--muted); margin-left: 8px; font-size: 12px; }
header .pill { margin-left: 6px; }

main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 80px; }

h2 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 18px 20px; margin-bottom: 16px; }
.card.narrow { max-width: 360px; margin: 60px auto; }

.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 12px; }

.tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.tab {
  background: var(--card); border: 1px solid var(--border); border-bottom-color: transparent;
  padding: 8px 14px; border-radius: 6px 6px 0 0; font: inherit; cursor: pointer; color: var(--ink);
}
.tab.active { background: var(--card); border-color: var(--border); position: relative; top: 1px; font-weight: 600; }

label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
label.checkline { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; color: var(--ink); }
input[type="text"], input[type="password"], input[type="email"], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: 4px; font: inherit; background: white; margin-top: 4px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}

button { font: inherit; cursor: pointer; }
button.primary {
  background: var(--accent); color: var(--accent-ink); border: none;
  padding: 8px 16px; border-radius: 4px; font-weight: 600;
}
button.primary:disabled { background: #aab2bd; cursor: not-allowed; }
button.secondary {
  background: white; color: var(--ink); border: 1px solid var(--border-strong);
  padding: 6px 12px; border-radius: 4px;
}
button.secondary.small { padding: 3px 8px; font-size: 12px; }

form.stacked label { display: block; }
form.stacked button { margin-top: 6px; }

.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.inline-form input, .inline-form select { width: auto; flex: 1 1 200px; margin: 0; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
table.grid th { color: var(--muted); font-weight: 600; background: var(--code-bg); }
table.grid td.small, table.grid .small { font-size: 12px; color: var(--muted); }
table.grid tr.bad-row td { background: #fff2f1; }

.pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; background: #eaeef3; color: var(--ink); border: 1px solid var(--border);
}
.pill.ok  { background: #dff3e1; border-color: #9bd0a4; color: var(--ok); }
.pill.bad { background: #fde2e0; border-color: #e9a8a3; color: var(--bad); }

.reveal {
  background: var(--warn-bg); border: 1px solid #e0b400; padding: 12px;
  border-radius: 6px; margin: 0 0 14px;
}
.reveal-head { font-weight: 600; margin-bottom: 6px; }
.reveal-token { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.reveal-token code {
  background: white; padding: 6px 10px; border-radius: 4px;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  word-break: break-all; flex: 1 1 auto; border: 1px solid var(--border);
}

.toast {
  position: fixed; right: 16px; bottom: 16px; padding: 10px 14px; border-radius: 6px;
  background: var(--ink); color: white; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  max-width: 360px;
}
.toast.ok  { background: var(--ok); }
.toast.bad { background: var(--bad); }

code {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  background: var(--code-bg); padding: 1px 5px; border-radius: 3px; font-size: 12px;
}
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }

/* ── Email settings tab additions ── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-bottom: 18px;
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.ok-text  { color: #16a34a; }
.bad-text { color: #dc2626; }