:root {
  color-scheme: light dark;
  --brand: #2e3a8c;
  --obsidian: #121620;
  --scarlet: #e63946;
  --orange: #f4a261;
  --alabaster: #f8f9fa;
  --emerald: #2a9d8f;
  --bg: light-dark(#f4f5f8, #0e1118);
  --surface: light-dark(#fff, #171c28);
  --border: light-dark(#e2e8f0, #242d42);
  --text: light-dark(#121620, #e2e8f0);
  /* Slightly deepen the supplied light slate for AA on the muted app canvas. */
  --muted: light-dark(#607087, #94a3b8);
  --accent: light-dark(var(--brand), #aab8ff);
  --soft: light-dark(#e9ecfa, #252e52);
  --success: light-dark(#167568, #61c7b7);
  --success-soft: light-dark(#e3f4ef, #173832);
  --warning: light-dark(#965018, var(--orange));
  --warning-soft: light-dark(#fff0df, #3a291e);
  --critical: light-dark(#c52235, #ff7b86);
  --critical-soft: light-dark(#fde8eb, #3d202c);
  --field-border: light-dark(#8693a6, #61708a);
  --focus: light-dark(var(--brand), #aab8ff);
  --sidebar: light-dark(#1c233d, var(--obsidian));
  font:
    14px/1.5 system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  background: var(--bg);
  color: var(--text);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a,
input,
select,
textarea {
  outline-offset: 4px;
}
button {
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--focus);
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
button,
a.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 5px;
  padding: 9px 12px;
  background: transparent;
}
button:hover,
a:hover {
  color: var(--accent);
}
svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.grow {
  flex: 1;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 12px;
}
.mono,
textarea {
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.online {
  color: var(--success);
}
.warning {
  color: var(--warning);
}
.critical { color: var(--critical); }
.badge.online { background: var(--success-soft); border-color: transparent; border-left: 3px solid var(--emerald); }
.badge.warning { background: var(--warning-soft); border-color: transparent; border-left: 3px solid var(--orange); }
.badge.critical { background: var(--critical-soft); border-color: transparent; border-left: 3px solid var(--scarlet); }
.disabled { color: var(--accent); }
.badge.disabled { background: var(--soft); border-color: transparent; border-left: 3px solid var(--accent); }
.topbar {
  height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
}
.wordmark {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.wordmark svg { color: var(--accent); }
.divider {
  color: var(--border);
}
.environment {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 7px;
}
.icon-button {
  padding: 7px;
  position: relative;
}
.icon-button:hover {
  background: var(--soft);
}
.app-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: calc(100dvh - 97px);
}
#explorer {
  /* Navigation stays dark in both themes. Its local tokens must not inherit
     low-contrast light-theme foregrounds from the main workspace. */
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: #303952;
  --accent: #c3ccff;
  --soft: #2e3a8c;
  --success: #61c7b7;
  --warning: #f4a261;
  --critical: #ff7b86;
  --focus: #c3ccff;
  background: var(--sidebar);
  color: var(--text);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
}
.explorer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--muted);
  padding: 0 10px 14px;
}
.branch {
  margin: 5px 0 18px;
}
.region,
.node {
  position: relative;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 5px;
}
.region {
  font-weight: 500;
}
.branch ul {
  list-style: none;
  margin: 3px 0 0 18px;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--border);
}
.node {
  font-size: 13px;
}
.node-dot {
  font-size: 10px;
  margin-left: auto;
}
.status-icon {
  display: flex;
}
.selected {
  background: var(--soft);
  color: var(--accent);
}
#explorer .selected {
  color: var(--alabaster);
  box-shadow: inset 3px 0 #aab8ff;
}
#explorer a:hover:not(.selected) { background: #202940; }
.empty-branch {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--muted);
}
.explorer-footer {
  margin: 24px 10px 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
}
main {
  min-width: 0;
}
.breadcrumbs {
  padding: 24px 28px 0;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 12px;
}
.page-heading {
  padding: 8px 28px 23px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.heading-copy {
  min-width: 0;
}
.node-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--muted);
  font-size: 11px;
}
.node-identity > .mono { overflow-wrap: anywhere; }
.copy-identity {
  padding: 2px 5px;
  color: var(--accent);
  font-size: 11px;
}
.copy-identity svg { width: 12px; height: 12px; }
.node-identity .copy-feedback { margin: 0; }
h1 {
  font-size: 26px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.025em;
}
h2 {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 20px;
}
.badge {
  display: inline-block;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}
.secondary {
  border: 1px solid var(--border);
  background: var(--surface);
}
.danger {
  border: 1px solid var(--critical);
  background: var(--critical-soft);
  color: var(--critical);
}
.tabbar {
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  display: flex;
  gap: 20px;
}
.tabbar > span {
  padding: 10px 0;
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
}
.content {
  padding: 28px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.metric {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  padding: 14px 16px;
}
.metric > span {
  font-size: 12px;
  color: var(--muted);
}
.metric strong {
  display: block;
  font-size: 20px;
  font-weight: 500;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.metric strong .badge { font-weight: 500; }
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  margin-bottom: 12px;
}
.table-container {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th {
  text-align: left;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
td a {
  display: flex;
  gap: 9px;
  align-items: center;
}
.empty-state {
  padding: 48px 16px;
  text-align: center;
}
.empty-state p {
  font-size: 18px;
  margin: 0 0 5px;
  font-weight: 500;
}
.empty-state span {
  font-size: 13px;
  color: var(--muted);
}
.players-panel {
  margin-top: 28px;
}
.players-scroll {
  max-height: min(440px, 48dvh);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.players-scroll thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}
.players-scroll td {
  vertical-align: top;
}
.external-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
}
.external-link svg {
  width: 13px;
  height: 13px;
}
.provider-note {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
.player-state {
  padding: 24px 16px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.player-state p {
  margin: 0 0 4px;
  font-weight: 500;
}
.player-state span {
  color: var(--muted);
  font-size: 12px;
}
.player-state.offline {
  margin-bottom: 12px;
  border-color: var(--warning);
  background: var(--warning-soft);
}
.player-state.critical {
  border-color: var(--critical);
  background: var(--critical-soft);
}
.players-end {
  margin: 10px 0 0;
  text-align: center;
}
.details {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  margin: 0;
}
.details dt,
.details dd {
  margin: 0;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.details dt {
  color: var(--muted);
}
.details dd {
  text-align: right;
}
.statusbar {
  min-height: 33px;
  border-top: 1px solid var(--border);
  padding: 7px 18px;
  display: flex;
  gap: 18px;
  color: var(--muted);
  font-size: 11px;
  background: var(--surface);
}
label {
  display: block;
  font-size: 12px;
  margin-bottom: 16px;
}
input,
select,
textarea {
  display: block;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--field-border);
  border-radius: 5px;
  padding: 10px 12px;
  margin-top: 7px;
}
textarea {
  font-size: 12px;
  resize: vertical;
}
button.primary,
a.primary {
  background: var(--brand);
  color: var(--alabaster);
  border: 1px solid light-dark(var(--brand), #8190d8);
  font-weight: 500;
}
button.primary:hover:not(:disabled), a.primary:hover { background: #3949a3; }
form .primary {
  width: 100%;
  margin-top: 5px;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--muted);
  margin: 0 0 10px;
}
[x-cloak] {
  display: none !important;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #0008;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 30px;
  width: min(480px, 100%);
  max-height: 90dvh;
  overflow: auto;
  box-shadow: 0 20px 80px #0003;
}
.modal:has(.bootstrap-setup) {
  width: min(760px, 100%);
}
.setup-command-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
}
.setup-command {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.setup-command code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.copy-command { flex: 0 0 auto; }
.copy-command svg { width: 14px; height: 14px; }
.copy-feedback { min-height: 1.5em; margin: 5px 0 0; }
.artifact-feedback { min-height: 1.5em; color: var(--accent); }
.modal-close {
  position: absolute;
  right: 10px;
  top: 10px;
}
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-panel {
  width: min(360px, 100%);
}
.login-panel .wordmark {
  margin-bottom: 44px;
}
.login-panel h1 {
  margin-bottom: 28px;
}
.login-panel > p.small {
  margin-top: 24px;
}
#notice {
  position: fixed;
  bottom: 45px;
  right: 20px;
  background: var(--surface);
  border: 1px solid var(--warning);
  border-radius: 5px;
  padding: 12px 18px;
  max-width: 90vw;
  z-index: 30;
}
#notice[data-severity="critical"] { border-color: var(--critical); }
:root:not([data-tooltips-dismissed]) [data-tip]:hover:after,
:root:not([data-tooltips-dismissed]) [data-tip]:focus-visible:after {
  content: attr(data-tip);
  position: absolute;
  top: 100%;
  right: 0;
  background: #121620;
  color: #f8f9fa;
  border: 1px solid #61708a;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 40;
}
.appearance {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.appearance select {
  width: auto;
  margin: 0;
  padding: 7px 8px;
  font-size: 12px;
  background: var(--surface);
}
.login > .appearance { position: absolute; top: 24px; right: 24px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 800px) {
  .app-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .content {
    padding: 20px;
  }
  .metric {
    padding: 14px;
  }
  .metrics {
    gap: 8px;
  }
  .metric strong {
    font-size: 25px;
  }
  .page-heading,
  .breadcrumbs {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 580px) {
  .app-layout {
    grid-template-columns: 1fr;
  }
  .topbar {
    padding: 0 15px;
    gap: 10px;
  }
  .environment {
    display: none;
  }
  .topbar > .divider, .topbar > .muted { display: none; }
  .appearance { gap: 5px; }
  .appearance > svg { display: none; }
  #explorer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
  }
  .branch {
    min-width: 0;
    margin: 0 0 10px;
  }
  .branch ul { margin-left: 5px; padding-left: 7px; }
  .region, .node { padding: 8px 5px; }
  .region > span { overflow-wrap: anywhere; }
  .explorer-heading {
    grid-column: 1 / -1;
    padding-bottom: 4px;
  }
  .explorer-footer {
    display: none;
  }
  .page-heading {
    flex-wrap: wrap;
  }
  .metrics {
    gap: 6px;
  }
  .metric {
    padding: 10px;
  }
  .metric strong {
    font-size: 22px;
  }
  .metric > span {
    font-size: 11px;
  }
  .content {
    padding: 16px;
  }
  .statusbar {
    flex-wrap: wrap;
  }
  .details {
    font-size: 12px;
  }
}
.node > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.node-dot {
  flex-shrink: 0;
}
@media (pointer: coarse) {
  button,
  .node,
  .region {
    min-height: 44px;
  }
  input,
  select,
  textarea {
    font-size: 16px;
  }
}
.access-grants {
  max-height: 16rem;
  overflow: auto;
}
.modal form + .section-heading {
  margin-top: 1.25rem;
}
.access-grant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
}
.access-grant > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}