:root {
  --background: #0f2a2e;
  --foreground: #eef4ee;
  --line: #2c5a60;
  --focus: #ffc21a;
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --panel: #14363b;
  --soft: #a9c3c2;
  --alert: #ffc21a;
  --alert-ink: #1a1400;
  --preliminary: #8fd3c7;
  --text-size: 1rem;
  --heading-size: 1.5rem;
  --line-height: 1.5;
  --border: 1px solid var(--line);
  --focus-outline: 2px solid var(--focus);
  --focus-offset: 2px;
  --space-none: 0;
  --space-small: 0.5rem;
  --space: 1rem;
  --space-large: 1.5rem;
  --target-size: 44px;
  --page-width: 82.5rem;
  --form-width: 24rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: var(--space-none);
  background: var(--background);
  color: var(--foreground);
  font: var(--text-size)/var(--line-height) var(--font);
}

.container {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--space);
}

.site-header {
  border-bottom: var(--border);
}

.header-content, nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-small) var(--space);
}

.header-content {
  justify-content: space-between;
  min-height: var(--target-size);
  padding-block: var(--space-small);
}

main {
  padding-block: var(--space-large);
}

h1 {
  margin: var(--space-none) var(--space-none) var(--space);
  font-size: var(--heading-size);
}

p {
  margin: var(--space-none) var(--space-none) var(--space-small);
}

.login-form {
  display: grid;
  justify-items: start;
  gap: var(--space-small);
  max-width: var(--form-width);
}

a, button, input:not([type="hidden"]) {
  min-height: var(--target-size);
  min-width: var(--target-size);
  color: inherit;
  font: inherit;
}

a, button {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-small);
}

button, input {
  border: var(--border);
  background: var(--background);
  padding-block: var(--space-none);
}

input:not([type="hidden"]) {
  width: 100%;
  padding-inline: var(--space-small);
  margin-bottom: var(--space-small);
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

html { font-variant-numeric: tabular-nums; }
a { text-underline-offset: 3px; }
::selection { background: var(--alert); color: var(--alert-ink); }
.site-name { font-size: 1.25rem; font-weight: 700; }
.sub, .key, .demo { color: var(--soft); }
.demo { background: var(--panel); padding: .5rem 1rem; }
.filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-block: 1rem; }
.filters label { display: grid; gap: .25rem; flex: 1 1 160px; min-width: 0; }
.filters button { margin-bottom: .5rem; }
summary { min-height: var(--target-size); min-width: var(--target-size); font: inherit; }
summary { display: list-item; cursor: pointer; padding-block: .7rem; font-size: .875rem; }
.filters .checkbox { display: flex; align-items: center; }
.checkbox input { width: 44px; }
button:hover, a:hover { background: var(--panel); }
nav a[aria-current] { color: var(--foreground); text-decoration-color: var(--alert); text-decoration-thickness: 3px; }
section { margin-block: 1.5rem 2.5rem; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
caption { text-align: left; font-size: 1.25rem; font-weight: 700; padding-bottom: .5rem; }
th { text-align: left; color: var(--soft); font-size: .875rem; padding: .5rem .875rem; border-bottom: 2px solid var(--line); }
th[scope=row] { color: var(--foreground); font-size: 1rem; font-weight: 600; border-bottom: var(--border); }
td { padding: .75rem .875rem; border-bottom: var(--border); font-size: 1.375rem; font-weight: 600; }
td, th { overflow-wrap: anywhere; vertical-align: top; }
td small, th small { display: block; font-size: .8125rem; font-weight: 400; color: var(--soft); }
td ul { margin: .25rem 0; padding-left: 1rem; font-size: .8125rem; font-weight: 400; color: var(--soft); }
td[data-quality=preliminary] { color: var(--preliminary); }
td[data-state=unknown], td[data-state=partial], .error { background: var(--alert); color: var(--alert-ink); }
td[data-state=unknown] small, td[data-state=unknown] ul, td[data-state=partial] small, td[data-state=partial] ul { color: var(--alert-ink); }
.error { padding: 1rem; }
.bottom { background: var(--panel); padding: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.key { margin-top: 1rem; font-size: .875rem; }
@media (max-width: 680px) {
  .container { padding-inline: .75rem; }
  .header-content { justify-content: start; }
  nav { gap: .25rem; }
  th, td { padding: .625rem .5rem; }
  td { font-size: 1.125rem; }
  .filters label { flex-basis: 100%; }
  .filters button { width: 100%; justify-content: center; }
}

fieldset { min-width: 0; border: var(--border); padding: .5rem; }
.filters .radio { display: flex; align-items: center; gap: .5rem; }
.radio input:not([type="hidden"]) { width: 44px; margin: 0; }

[data-quality=preliminary] { color: var(--preliminary); }
[data-state=unknown], [data-state=partial] { background: var(--alert); color: var(--alert-ink); }
[data-state=unknown] small, [data-state=partial] small { color: var(--alert-ink); }
.board td { padding: 0; }
.board td > div { padding: .6rem .75rem; }
.board td > div + div { border-top: var(--border); }
.board details { font-size: .8125rem; }
.board summary { font-size: .75rem; }
.board th:first-child { width: 30%; }
@media (max-width: 600px) {
 .board td > div { padding: .5rem; }
 .board td, .board th[scope=row] { font-size: .875rem; }
 .board summary { overflow-wrap: normal; }
}
.flash { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; background: var(--alert); color: var(--alert-ink); padding: .75rem 1rem; }
.agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.agent-panel, .agent-confirm, .agent-event { border: var(--border); padding: 1rem; overflow-wrap: anywhere; }
.agent-panel h2 { margin-top: 0; }
.agent-form { display: grid; gap: .5rem; margin-block: 1rem; max-width: 36rem; }
.agent-form label { display: grid; }
.agent-form button, .agent-confirm button { white-space: normal; text-align: left; }
:is(.agent-panel, .agent-confirm, .agent-queue) dt { color: var(--soft); }
:is(.agent-panel, .agent-confirm, .agent-queue) dd { margin: 0 0 .75rem; overflow-wrap: anywhere; }


.settings-form { display: grid; gap: .75rem; max-width: 42rem; }
.settings-form label { display: grid; gap: .25rem; min-width: 0; }
.settings-form button { justify-self: start; }
.repricer-settings dl { margin: 1rem 0; overflow-wrap: anywhere; }
.repricer-settings dt { color: var(--soft); } .repricer-settings dd { margin: 0 0 .5rem; }
.setting-row { border-bottom: var(--border); }


.settings-choice .choice-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .25rem; }
.settings-choice label.radio { display: flex; align-items: center; gap: .5rem; }
.settings-choice label.radio input { flex: 0 0 44px; margin: 0; }
.filters .settings-choice { flex: 1 1 20rem; }
.history-section td { font-size: 1rem; font-weight: 400; }
.history-section td > span { white-space: pre-wrap; }
.history-section th { width: 40%; }
.history-section th a { display: flex; }
.signal-scroll { max-width: 100%; overflow-x: auto; }
.payout-scroll { max-width: 100%; overflow-x: auto; }
.payout-scroll table { min-width: 76rem; }
.signal-table { min-width: 76rem; }
.signal-table th[scope=row] { min-width: 12rem; }

.site-header { position: relative; z-index: 2; }
.header-content { justify-content: space-between; padding-block: .25rem; }
.site-menu > summary, .nav-group > summary { font-size: 1rem; padding: .625rem .5rem; }
.site-menu[open] > nav { position: absolute; top: 100%; inset-inline: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem .75rem; max-height: calc(100dvh - 60px); overflow-y: auto; background: var(--panel); border-bottom: var(--border); }
.nav-group { min-width: 0; }
.nav-links { display: flex; flex-direction: column; padding: .25rem .5rem .5rem; }
.nav-group:has(a[aria-current]) > summary { color: var(--focus); }
.site-menu nav form { padding: .5rem; }
.filter-panel { border-bottom: var(--border); margin-block: .5rem 1rem; }
.filter-panel > summary { font-size: 1rem; }
.filters .radio input { appearance: none; position: relative; flex: 0 0 44px; border: 0; background: transparent; }
.filters .radio input::before { content: ""; position: absolute; width: 18px; height: 18px; top: 13px; left: 13px; border: 2px solid var(--soft); border-radius: 50%; }
.filters .radio input:checked::after { content: ""; position: absolute; width: 8px; height: 8px; top: 18px; left: 18px; border-radius: 50%; background: var(--focus); }
.empty-state td { color: var(--soft); background: none; font-size: 1rem; font-weight: 400; padding: .75rem; }
.scope-details > summary { font-size: .8125rem; }
.comparison-details { margin-block: 1rem; }
.comparison-details > summary { font-size: 1rem; }
.agent-grid { display: block; }
.agent-panel { border: 0; border-bottom: var(--border); margin: 0; padding: 0; }
.agent-panel > summary { padding: .75rem .25rem; font-size: 1rem; }
.agent-panel > summary strong { display: inline; }
.agent-panel > summary span { display: block; }
.agent-panel > summary span, .agent-panel small { color: var(--soft); font-size: .875rem; }
.agent-panel small { display: block; }
.agent-panel > dl, .agent-panel > p, .agent-panel > form, .agent-panel > .agent-action { margin-inline: .5rem; }
.agent-queue, .agent-history, .agent-stop-all { margin-block: 1rem; border-bottom: var(--border); }
.agent-queue > summary, .agent-history > summary, .agent-stop-all > summary, .agent-action > summary { font-size: 1rem; }
@media (min-width: 681px) {
  .site-menu > summary { display: none; }
  .site-menu::details-content, .filter-panel::details-content { display: contents; content-visibility: visible; }
  .site-menu > nav, .site-menu[open] > nav { display: flex; position: static; flex-direction: row; align-items: center; gap: .5rem; max-height: none; overflow: visible; padding: 0; background: none; border: 0; }
  .site-menu nav form { padding: 0; }
  .nav-group { position: relative; }
  .nav-links { position: absolute; top: 100%; left: 0; z-index: 3; width: 16rem; background: var(--panel); border: var(--border); }
  .filter-panel { border: 0; }
  .filter-panel > summary { display: none; }
}