:root {
  color: #1d2939;
  background: #eef2f4;
  font-family: "Segoe UI", Candara, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; }

.monitor { max-width: 1200px; margin: 0 auto; padding: 48px 28px; }

header, .list-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

h1, h2, p { margin-top: 0; }

h1 { margin-bottom: 0; font-size: 32px; font-weight: 650; }

h2 { font-size: 20px; }

.eyebrow { margin-bottom: 8px; color: #087f5b; font-size: 14px; font-weight: 700; text-transform: uppercase; }

.sign-in-panel { max-width: 460px; margin-top: 48px; padding: 28px; border: 1px solid #d0d7de; border-radius: 6px; background: #ffffff; }

.button { border: 0; border-radius: 4px; padding: 10px 16px; color: #ffffff; background: #087f5b; font: inherit; font-weight: 600; cursor: pointer; }

.button.secondary { color: #1d2939; background: #ffffff; border: 1px solid #aab7c4; }

.contact-count-link { padding: 0; border: 0; color: #087f5b; background: transparent; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

#users-panel { margin-top: 42px; }

.logging-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #d0d7de; }

.logging-controls h2 { margin: 0 12px 0 0; }

.logging-controls select { min-width: 140px; padding: 9px 12px; border: 1px solid #aab7c4; border-radius: 4px; background: #ffffff; color: inherit; font: inherit; }

#refresh-log-level { width: 42px; height: 42px; padding: 0; font-size: 24px; }

#log-level-status { flex-basis: 100%; margin: 0; color: #667085; font-size: 14px; overflow-wrap: anywhere; }

#log-level-status.error { color: #b42318; }

.button:disabled, .logging-controls select:disabled { opacity: .55; cursor: not-allowed; }

#updated-at { color: #667085; font-size: 14px; }

.table-wrap { overflow-x: auto; border: 1px solid #d0d7de; border-radius: 6px; background: #ffffff; }

table { width: 100%; border-collapse: collapse; text-align: left; }

th, td { padding: 14px 16px; border-bottom: 1px solid #e4e7ec; white-space: nowrap; }

th { color: #475467; background: #f8fafb; font-size: 13px; text-transform: uppercase; }

tbody tr:last-child td { border-bottom: 0; }

.error { margin-top: 24px; color: #b42318; font-weight: 600; }

.contacts-dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 24px; border: 1px solid #98a2b3; border-radius: 6px; color: #1d2939; }

.contacts-dialog::backdrop { background: rgb(29 41 57 / 45%); }

.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.dialog-heading h2 { margin-bottom: 16px; }

.contact-details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; padding: 16px 0; border-top: 1px solid #e4e7ec; }

.contact-details dt { color: #475467; font-weight: 700; }

.contact-details dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .monitor { padding: 28px 16px; }
  header { align-items: flex-start; }
  h1 { font-size: 27px; }
}