:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #16211d;
  background: #eef4f0;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 20% 10%, #d8eee2 0, transparent 36rem),
    #eef4f0;
}

.card {
  width: min(100%, 28rem);
  padding: clamp(2rem, 6vw, 3rem);
  border: 1px solid #d8e2dc;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 1.25rem 4rem rgb(25 54 40 / 10%);
}

.eyebrow {
  margin: 0 0 .75rem;
  color: #397154;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 8vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.intro {
  margin: 1rem 0 2rem;
  color: #52615a;
  line-height: 1.6;
}

label {
  display: block;
  margin-bottom: .5rem;
  font-weight: 700;
}

input, select, button {
  width: 100%;
  min-height: 3.2rem;
  border-radius: .7rem;
  font: inherit;
}

input, select {
  padding: 0 .9rem;
  border: 1px solid #a8b8af;
  outline: none;
}

input:focus, select:focus {
  border-color: #176b45;
  box-shadow: 0 0 0 .2rem #d8eee2;
}

button {
  margin-top: 1rem;
  border: 0;
  padding: .75rem 1rem;
  color: #fff;
  background: #176b45;
  font-weight: 750;
  cursor: pointer;
}

button:hover { background: #105737; }
button:disabled { cursor: wait; opacity: .6; }
button.secondary { color: #176b45; background: #e3f1e9; }

.status {
  min-height: 1.5rem;
  margin: 1rem 0 0;
  color: #9b302c;
  line-height: 1.5;
}

.fine-print {
  margin: 1.5rem 0 0;
  color: #718078;
  font-size: .82rem;
  line-height: 1.5;
}

.success {
  width: min(100%, 80rem);
  text-align: center;
}

.dashboard-page {
  display: block;
  min-height: 100vh;
  padding: 0;
}

.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  justify-content: flex-end;
  min-height: 4rem;
  padding: .7rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid #d8e2dc;
  background: rgb(255 255 255 / 94%);
  backdrop-filter: blur(.75rem);
}

.session-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #52615a;
}

.session-info button {
  width: auto;
  min-height: 2.5rem;
  margin: 0;
  padding: .5rem .85rem;
  color: #46514c;
  background: #e5e9e7;
}

.session-info button:hover {
  color: #26312c;
  background: #d5dbd8;
}

.session-info .status {
  min-height: 0;
  margin: 0;
}

.session-info a {
  color: #176b45;
}

#dashboard-main {
  margin: 2rem auto;
}

.bridge-main {
  margin: 2rem auto;
}

.contributor-panel {
  text-align: left;
}

.contributor-panel > h1 {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
}

.contributor-name {
  max-width: 28rem;
  margin-top: 1.5rem;
}

.contributor-name p {
  margin: .45rem 0 0;
  color: #718078;
  font-size: .82rem;
  line-height: 1.5;
}

.readiness-status {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 2rem 0;
  padding: 1.25rem;
  border: 1px solid #d8e2dc;
  border-radius: .9rem;
  background: #f8faf9;
}

.readiness-status[hidden] {
  display: none;
}

.readiness-status h2 {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
}

.readiness-status p,
.setup-help p {
  margin: 0;
  color: #52615a;
  line-height: 1.55;
}

.readiness-indicator {
  flex: 0 0 auto;
  width: .85rem;
  height: .85rem;
  margin-top: .25rem;
  border-radius: 50%;
  background: #829189;
}

.readiness-indicator.checking {
  animation: readiness-pulse 1s ease-in-out infinite alternate;
}

.readiness-indicator.ready { background: #17834f; }
.readiness-indicator.warning { background: #d2760c; }
.readiness-indicator.error { background: #b73832; }

.setup-help {
  margin: 1rem 0;
  padding: 1.25rem;
  border-radius: .9rem;
  background: #fff6e9;
}

.setup-help h2 {
  margin: 0 0 .75rem;
  font-size: 1.1rem;
}

.setup-help ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  line-height: 1.75;
}

.setup-help code {
  padding: .12rem .3rem;
  border-radius: .25rem;
  background: #f1e6d6;
}

#retry-readiness {
  width: auto;
  padding-inline: 1rem;
}

.contribution-toggle {
  width: auto;
  padding-inline: 1rem;
  background: #17834f;
}

.slot-dashboard + .contribution-toggle {
  margin-top: 1.5rem;
}

.contribution-toggle:hover {
  background: #116b40;
}

.contribution-toggle.active {
  background: #b73832;
}

.contribution-toggle.active:hover {
  background: #922b27;
}

.slot-dashboard {
  margin-top: 2rem;
  text-align: left;
}

.slot-dashboard[hidden] {
  display: none;
}

.slot-dashboard-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}

.slot-dashboard-heading h2,
.slot-dashboard-heading p {
  margin: 0;
}

.slot-dashboard-heading p {
  color: #718078;
  font-size: .85rem;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(15rem, 1fr));
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .35rem;
}

.inference-slot {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d8e2dc;
  border-radius: .8rem;
  background: #fff;
}

.slot-status {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 4.2rem;
  padding: .8rem;
  border-bottom: 1px solid #d8e2dc;
  background: #f5f7f6;
}

.slot-status-dot {
  flex: 0 0 auto;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: #829189;
}

.slot-status div {
  display: grid;
  gap: .15rem;
}

.slot-number {
  color: #718078;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.slot-status strong {
  font-size: .86rem;
}

.slot-status.connecting .slot-status-dot { background: #3971a5; }
.slot-status.generating .slot-status-dot {
  background: #17834f;
  animation: readiness-pulse .7s ease-in-out infinite alternate;
}
.slot-status.completed .slot-status-dot { background: #17834f; }
.slot-status.error .slot-status-dot { background: #b73832; }

.inference-slot section {
  padding: .8rem;
  border-bottom: 1px solid #e2e8e4;
}

.inference-slot section:last-child {
  border-bottom: 0;
}

.inference-slot h3 {
  margin: 0 0 .45rem;
  color: #52615a;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.slot-parameters {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .35rem;
  min-height: 2.4rem;
  max-height: 9rem;
  overflow: auto;
  color: #718078;
  font-size: .72rem;
}

.parameter-pill {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #d8e2dc;
  border-radius: 999px;
  background: #f3f8f5;
}

.parameter-pill strong,
.parameter-pill span {
  padding: .24rem .45rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parameter-pill strong {
  color: #176b45;
  background: #e3f1e9;
}

.parameter-pill span {
  color: #46514c;
}

.inference-slot pre {
  min-height: 2.4rem;
  max-height: 9rem;
  margin: 0;
  overflow: auto;
  color: #26312c;
  font: .75rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.inference-slot .slot-response-section {
  background: #fbfcfb;
}

.inference-slot [data-slot-response] {
  min-height: 8rem;
}

@keyframes readiness-pulse {
  to { opacity: .35; }
}
.admin-panel {
  margin: 2rem 0;
  padding: 0;
  border: 1px solid #d8e2dc;
  border-radius: .9rem;
  overflow: hidden;
  text-align: left;
}

.api-key-panel {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border-bottom: 1px solid #d8e2dc;
}

.api-key-panel h2,
.api-key-panel p {
  margin: 0;
}

.api-key-panel p {
  margin-top: .3rem;
  color: #718078;
  font-size: .82rem;
}

.api-key-panel code {
  font-size: .78rem;
}

.api-key-controls {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) repeat(5, auto);
  gap: .5rem;
}

.api-key-controls button {
  width: auto;
  min-height: 3.2rem;
  margin: 0;
}

.warning-button {
  color: #7a4100;
  background: #ffead1;
}

.warning-button:hover {
  color: #fff;
  background: #c56800;
}

.load-test-status {
  min-height: 1.25rem;
  margin: 0;
  color: #52615a;
  font-size: .82rem;
}

.worker-monitor {
  padding: 1.25rem;
  border-bottom: 1px solid #d8e2dc;
}

.worker-monitor-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.worker-monitor-heading h2,
.worker-monitor-heading p {
  margin: 0;
}

.worker-monitor-heading p {
  margin-top: .3rem;
  color: #718078;
  font-size: .82rem;
}

.worker-monitor-heading button {
  width: auto;
  min-height: 2.5rem;
  margin: 0;
}

.worker-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(7rem, 1fr));
  gap: .6rem;
  margin: 0 0 1rem;
}

.worker-summary div {
  padding: .75rem;
  border: 1px solid #d8e2dc;
  border-radius: .65rem;
  background: #f8faf9;
}

.worker-summary dt {
  color: #718078;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.worker-summary dd {
  margin: .25rem 0 0;
  color: #176b45;
  font-size: 1.15rem;
  font-weight: 750;
}

.worker-identity {
  display: grid;
  gap: .2rem;
}

.worker-identity small,
.worker-platform small {
  display: block;
  color: #718078;
}

.worker-slots {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.worker-slot {
  padding: .25rem .45rem;
  border-radius: 999px;
  color: #52615a;
  background: #e5e9e7;
  font-size: .72rem;
  white-space: nowrap;
}

.worker-slot.busy {
  color: #fff;
  background: #176b45;
}

.leaderboard-panel {
  padding: 1.25rem;
  border-bottom: 1px solid #d8e2dc;
}

.bridge-leaderboard {
  margin-top: 2rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid #d8e2dc;
  border-bottom: 0;
  text-align: left;
}

.leaderboard-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}

.leaderboard-heading h2,
.leaderboard-heading p {
  margin: 0;
}

.leaderboard-heading p {
  margin-top: .3rem;
  color: #718078;
  font-size: .82rem;
}

.leaderboard-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.leaderboard-heading button {
  width: auto;
  min-height: 2.5rem;
  margin: 0;
}

.leaderboard-heading button.danger {
  color: #8b2525;
  background: #f8e6e6;
}

.leaderboard-heading button.danger:hover {
  color: #fff;
  background: #9b302c;
}

.admin-panel h2 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
}

.admin-panel h2:not(:first-child) { margin-top: 1.75rem; }
.admin-panel label:not(:first-child) { margin-top: 1rem; }
select {
  width: 100%;
  min-height: 6.8rem;
  padding: .5rem;
  border: 1px solid #a8b8af;
  background: #fff;
}

.role-select {
  min-width: 9rem;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0 .9rem;
}

.create-row {
  background: #f3f8f5;
}

.create-row input {
  min-width: 10rem;
}

.row-actions {
  white-space: nowrap;
}

.row-actions .table-action {
  margin-right: .4rem;
  margin-bottom: .25rem;
}

.row-actions .table-action:last-child {
  margin-right: 0;
}

.table-action.danger {
  color: #8b2525;
  background: #f8e6e6;
}

.table-action.warning {
  color: #7a4100;
  background: #ffead1;
}

.table-action.warning:hover {
  color: #fff;
  background: #c56800;
}

.table-action.danger:hover {
  color: #fff;
  background: #9b302c;
}

#admin-status:empty {
  display: none;
}

#admin-status:not(:empty) {
  margin: 0;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #d8e2dc;
}

.field-hint {
  margin: .4rem 0 0;
  color: #718078;
  font-size: .78rem;
}

.table-scroll {
  margin: 0;
  overflow-x: visible;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}

th, td {
  padding: .7rem .55rem;
  border-bottom: 1px solid #d8e2dc;
  text-align: left;
  vertical-align: middle;
}

th button, .table-action {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: .35rem .5rem;
  white-space: nowrap;
}

th button {
  color: #176b45;
  background: transparent;
}

th button[data-sort] {
  padding: .35rem .9rem;
}

#user-table tbody tr:not(.create-row) td:first-child {
  padding-left: 1.45rem;
}

#user-table tbody td:nth-child(3),
#user-table tbody td:nth-child(4) {
  padding-left: 1.45rem;
}

th button[data-sort]::after {
  content: "↕";
  display: inline-block;
  margin-left: .35rem;
  color: #829189;
  font-size: .8em;
}

th button[data-sort][data-direction="ascending"]::after {
  content: "↑";
  color: #176b45;
}

th button[data-sort][data-direction="descending"]::after {
  content: "↓";
  color: #176b45;
}

th button:hover {
  color: #105737;
  background: #e3f1e9;
}

th button:focus-visible {
  color: #105737;
  background: #e3f1e9;
  outline: 2px solid #176b45;
  outline-offset: 2px;
}

.table-action {
  font-size: .75rem;
}

.heading-controls {
  display: flex;
  align-items: center;
  gap: .15rem;
}

.filter-toggle {
  position: relative;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border-radius: .35rem;
}

.filter-toggle::before {
  content: "";
  position: absolute;
  top: .48rem;
  left: .45rem;
  width: 0;
  height: 0;
  border-left: .45rem solid transparent;
  border-right: .45rem solid transparent;
  border-top: .55rem solid currentColor;
}

.filter-toggle::after {
  content: "";
  position: absolute;
  top: .92rem;
  left: .78rem;
  width: .24rem;
  height: .4rem;
  background: currentColor;
}

.filter-toggle.active {
  color: #fff;
  background: #176b45;
}

.column-filter {
  min-width: 8rem;
  min-height: 2.2rem;
  margin-top: .4rem;
  padding-inline: .55rem;
  font-size: .78rem;
}

.column-filter[hidden] {
  display: none;
}

@media (max-width: 48rem) {
  .success {
    padding-inline: 1.25rem;
  }

  .table-scroll {
    overflow-x: auto;
  }

  .worker-summary {
    grid-template-columns: repeat(2, minmax(7rem, 1fr));
  }
}

.check {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: .25rem auto 1.25rem;
  border-radius: 50%;
  color: #fff;
  background: #176b45;
  font-size: 2rem;
  font-weight: 800;
}