.button {
  display:inline-flex;
  gap:20px;
  justify-content:center;
  align-items:center;
  background:var(--brand);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  padding:12px 19px;
  color:#fff;
  font-size:14px;
  font-weight:600;
  white-space:nowrap
}
.button:hover {
  filter:brightness(.96);
  text-decoration:none
}
.button.secondary {
  background:var(--surface);
  border-color:var(--border);
  color:var(--ink)
}
.button.small {
  padding:8px 14px
}
.text-button {
  border:0;
  background:none;
  padding:0;
  color:var(--brand);
  font-size:13px
}
.danger {
  color:var(--down)
}
.actions {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap
}
.panel {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow)
}
.panel p {
  color:var(--muted)
}
.pill {
  display:inline-flex;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:30px;
  padding:5px 11px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap
}
.wordmark {
  color:var(--ink);
  display:inline-flex;
  gap:2px;
  align-items:center;
  font-size:20px;
  font-weight:720;
  letter-spacing:-.7px
}
.wordmark:hover {
  text-decoration:none
}
.wordmark>span:not(.logo-mark) {
  font-weight:400
}
.wordmark.small {
  font-size:14px;
  letter-spacing:-.3px
}
.logo-mark {
  position:relative;
  background:var(--brand);
  color:white;
  border-radius:10px;
  width:33px;
  height:33px;
  text-align:center;
  font-size:30px;
  line-height:26px;
  font-weight:600;
  margin-right:9px
}
.logo-mark span {
  position:absolute;
  color:#a7f3d0;
  font-size:22px;
  right:5px;
  top:4px
}
.tenant-card {
  display:block;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:27px;
  color:var(--ink);
  box-shadow:var(--shadow)
}
a.tenant-card:hover {
  border-color:var(--brand);
  text-decoration:none
}
.tenant-card h2,.tenant-card h3 {
  margin:19px 0 8px
}
.tenant-card p {
  color:var(--muted);
  font-size:13px
}
.campus-icon {
  display:inline-grid;
  place-items:center;
  font-size:24px;
  color:var(--brand);
  width:44px;
  height:44px;
  background:var(--canvas);
  border:1px solid var(--border);
  border-radius:13px
}
.card-link {
  display:block;
  margin-top:25px;
  color:var(--brand);
  font-size:13px;
  font-weight:650
}
.status-banner {
  display:flex;
  gap:22px;
  align-items:center;
  border:1px solid color-mix(in srgb,currentColor 15%,transparent);
  border-radius:var(--radius);
  padding:28px;
  background:var(--unknown-bg);
  color:#526179
}
.status-banner.up {
  background:var(--up-bg);
  color:#106b54
}
.status-banner.down {
  background:var(--down-bg);
  color:#a52334
}
.status-banner.degraded {
  background:var(--degraded-bg);
  color:#875600
}
.status-banner.maintenance {
  background:var(--maintenance-bg);
  color:#6451b1
}
.status-banner h2 {
  font-size:22px;
  margin-bottom:7px
}
.status-banner p {
  margin:0;
  font-size:13px
}
.status-banner>.pill {
  margin-left:auto;
  color:var(--ink)
}
.status-symbol {
  font-size:25px;
  display:grid;
  place-items:center;
  min-width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid currentColor
}
.service-card {
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius);
  margin-bottom:18px;
  overflow:hidden
}
.service-heading {
  padding:24px 25px;
  display:flex;
  justify-content:space-between;
  gap:20px
}
.service-heading h3 {
  margin-bottom:7px
}
.service-heading p {
  font-size:13px;
  color:var(--muted);
  margin:0
}
.subscribe-link {
  font-size:12px;
  font-weight:650;
  white-space:nowrap
}
.monitor-row {
  border-top:1px solid var(--border);
  padding:20px 25px
}
.monitor-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:17px;
  font-size:13px
}
.monitor-heading strong {
  font-weight:550
}
.vantage {
  font-size:10px;
  color:var(--muted);
  border:1px solid var(--border);
  border-radius:5px;
  padding:3px 6px;
  margin-left:8px
}
.dot {
  display:inline-block;
  height:7px;
  width:7px;
  min-width:7px;
  background:currentColor;
  border-radius:50%;
  margin-right:7px
}
.status-text {
  display:flex;
  align-items:center;
  white-space:nowrap;
  font-size:12px;
  font-weight:600
}
.up {
  color:var(--up)
}
.degraded {
  color:var(--degraded)
}
.down {
  color:var(--down)
}
.maintenance {
  color:var(--maintenance)
}
.unknown,.paused {
  color:var(--unknown)
}
.history {
  display:flex;
  gap:3px;
  height:25px
}
.history-bar {
  flex:1;
  border:0;
  padding:0;
  border-radius:3px;
  background:currentColor;
  min-width:2px;
  opacity:.85
}
.history-bar:hover,.history-bar:focus-visible {
  opacity:1
}
.history-axis {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:7px;
  font-size:10px;
  color:var(--muted)
}
.history-scale {
  text-align:right
}
.monitor-link {
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--brand);
  text-underline-offset:3px
}
.monitor-link:hover,.monitor-link:focus-visible {
  color:var(--brand)
}
.history-detail {
  margin:9px 0 0;
  font-size:12px;
  color:var(--ink)
}
.refresh-toolbar {
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
  margin:22px 0 0
}
.refresh-choice {
  min-width:170px
}
.refresh-choice label {
  font-size:12px
}
.refresh-toolbar>[data-refresh-summary] {
  padding-bottom:11px
}
.history-caption {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  margin-top:8px;
  gap:10px
}
.category-label {
  font-size:11px;
  text-transform:uppercase;
  color:var(--muted);
  letter-spacing:.12em;
  font-weight:700;
  margin:24px 0 10px
}
.legend {
  list-style:none;
  padding:0;
  margin:20px 0
}
.legend li {
  font-size:12px;
  margin:9px 0;
  display:flex;
  align-items:center;
  color:var(--muted)
}
.legend .dot {
  width:8px;
  height:8px
}
.maintenance-item {
  border-top:1px solid var(--border);
  padding:16px 0
}
.maintenance-item p {
  font-size:12px;
  margin:7px 0
}
.notice {
  padding:14px 18px;
  background:var(--up-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  margin-bottom:20px
}
.notice.error {
  background:var(--down-bg)
}
.notice.warning {
  background:var(--degraded-bg)
}
.list-row {
  padding:17px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--border)
}
.list-row p {
  margin:0;
  font-size:12px
}
.empty {
  grid-column:1/-1;
  padding:36px
}
.stat-card {
  padding:22px
}
.stat-card strong {
  display:block;
  font-size:29px;
  letter-spacing:-1px
}
.stat-card span {
  font-size:12px;
  color:var(--muted)
}
.form h1 {
  font-size:32px
}
.form p {
  margin-bottom:21px
}
.form .actions {
  margin-top:28px
}
.setup-panel {
  margin-bottom:28px
}
.setup-panel h2 {
  font-size:20px
}
.setup-panel p:last-child {
  margin-bottom:0
}
.password-requirements {
  list-style:none;
  padding:0;
  margin:12px 0 8px;
  color:var(--muted)
}
.password-requirements li {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:7px 0
}
.password-requirements li.is-met {
  color:var(--success-text)
}
.password-rule-icon {
  flex:0 0 1em;
  font-weight:700
}
.password-check-summary {
  font-size:12px;
  color:var(--muted)
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}