.cf-toolbar,
.cf-actions,
.cf-job-actions,
.cf-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cf-toolbar {
  justify-content: space-between;
  margin-bottom: 12px;
}
.cf-toolbar p {
  flex: 1;
  min-width: 200px;
}
.cf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 18px;
}
.cf-card {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 20px;
  background: var(--panel);
}
.cf-title {
  justify-content: space-between;
}
.cf-title h3 {
  margin: 0;
  font-size: 18px;
}
.cf-card p,
.cf-card code,
.cf-job pre {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cf-worker {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 18px;
}
.cf-state {
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 20px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
}
.cf-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}
.cf-metric {
  font-size: 12px;
  color: var(--muted);
}
.cf-metric strong {
  display: block;
  font-size: 16px;
  color: var(--text);
  margin-top: 6px;
}
.cf-actions > * {
  flex: 1 0 115px;
  min-height: 42px;
  white-space: nowrap;
  text-align: center;
}
.cf-actions a {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  text-decoration: none;
}
.cf-error {
  color: var(--danger, #d37575);
}
.cf-guide,
.cf-settings {
  margin-top: 18px;
}
.cf-settings input {
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0;
}
.cf-settings label {
  display: block;
  margin-top: 10px;
}
.cf-job {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}
.cf-job pre {
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
}
.cf-job-actions {
  margin-top: 10px;
}
.cf-job-actions button {
  min-height: 40px;
  white-space: nowrap;
}
.cf-card summary {
  cursor: pointer;
  font-size: 13px;
}
.cf-job p {
  margin: 8px 0;
}
.cf-card .model-meta {
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 600px) {
  .cf-card {
    padding: 16px;
  }
  .cf-toolbar > button {
    width: 100%;
  }
  .cf-actions > * {
    flex-basis: calc(50% - 10px);
    font-size: 13px;
  }
  .cf-job-actions > * {
    flex: 1;
  }
  .cf-grid {
    gap: 14px;
  }
}

.cf-domain-field {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 10px 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
}
.cf-domain-field input {
  width: 0;
  flex: 1;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.cf-domain-suffix {
  flex: none;
  padding: 10px;
  color: var(--muted);
  font-size: 14px;
  background: var(--panel-2);
}
.cf-starting {
  color: var(--primary);
  font-size: 13px;
  line-height: 1.6;
}
.cf-settings > button {
  min-height: 42px;
  white-space: nowrap;
}
.cf-device-name {
  font-weight: 600;
  margin: 12px 0 4px;
}
.cf-history {
  margin-top: 22px;
  border-top: 1px dashed var(--line-soft);
  padding-top: 16px;
}
.cf-history > summary {
  color: var(--muted);
  font-weight: 500;
}
.cf-job-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cf-job-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cf-job-time {
  font-size: 11px;
  color: var(--muted);
  flex-basis: 100%;
}
.cf-job-state {
  color: var(--muted);
  font-size: 11px;
}
.cf-current-jobs {
  margin-top: 22px;
}
.cf-current-jobs h4 {
  font-size: 13px;
  margin: 0;
}
.cf-history .cf-job {
  font-size: 12px;
  border-color: var(--line-soft);
  padding: 12px;
  background: var(--panel-2);
  border-radius: 8px;
}
.cf-history .cf-job strong {
  font-weight: 500;
}
.cf-log {
  margin-top: 10px;
}
.cf-log summary {
  color: var(--muted);
}
.cf-log pre {
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font:
    11px/1.6 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
}
.cf-worker {
  margin-bottom: 18px;
}
.gh-auth {
  min-width: 0;
  margin: 18px 0;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--panel-2);
}
.gh-auth p {
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.6;
}
.gh-auth .op-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gh-auth button,
.gh-auth .op-login-link {
  min-height: 42px;
  white-space: normal;
  word-break: keep-all;
  flex: 1 1 140px;
}
.gh-auth .gh-repo-ok {
  color: var(--muted);
}
.gh-auth .gh-repo-error {
  color: var(--danger, #d37575);
}
.gh-auth .op-device-code {
  box-sizing: border-box;
  width: 100%;
  max-width: 220px;
  text-align: center;
  font:
    600 20px/1.5 ui-monospace,
    monospace;
  letter-spacing: 2px;
}

.cf-updates {
  border-block: 1px solid var(--line-soft);
  padding: 1rem 0;
  margin: 1rem 0;
  min-width: 0;
}
.cf-updates button {
  margin: 0.4rem 0.4rem 0.4rem 0;
  white-space: normal;
  min-height: 42px;
}
.cf-node {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.cf-update-plan {
  padding: 0.75rem;
  margin-top: 0.75rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.cf-updates pre,
.cf-job pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 22rem;
  overflow: auto;
}
.cf-updates ul {
  padding-left: 1.25rem;
  overflow-wrap: anywhere;
}
.cf-version {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.cf-studio-settings > button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* One selected PC, with everyday controls before maintenance settings. */
.cf-view .view-title {
  margin: 0;
}
.cf-view .view-title p {
  margin-bottom: 0;
}
.cf-view #cfNotice:empty {
  display: none;
}
.cf-grid {
  display: block;
}
.cf-pc-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.cf-pc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 6px;
  padding: 16px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
}
.cf-pc[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.cf-pc strong {
  font-size: 15px;
}
.cf-pc span,
.cf-pc small {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.cf-card {
  padding: 24px;
}
.cf-worker {
  margin: 6px 0 18px;
}
.cf-state {
  font-weight: 600;
}
.cf-launch {
  margin: 18px 0;
  padding: 22px;
  border-radius: 12px;
  background: var(--panel-2);
}
.cf-launch h4 {
  font-size: 20px;
  margin: 18px 0 8px;
}
.cf-steps {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.cf-steps li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  counter-increment: step;
}
.cf-steps li + li:before {
  content: "›";
  color: var(--muted);
  margin-right: 5px;
}
.cf-steps li:after {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  order: -1;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  font-weight: 600;
}
.cf-steps .is-done:after {
  content: "✓";
  color: var(--primary);
}
.cf-steps .is-current {
  color: var(--text);
  font-weight: 600;
}
.cf-steps .is-current:after {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--panel);
}
.cf-actions {
  justify-content: flex-start;
  margin-top: 18px;
}
.cf-actions > * {
  flex: 0 1 auto;
  min-width: 140px;
  min-height: 44px;
  box-sizing: border-box;
  font-weight: 600;
}
.cf-actions .cf-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}
.cf-actions .cf-primary:visited {
  color: var(--primary-text);
}
.cf-runtime-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.cf-runtime-actions button {
  min-height: 40px;
}
.cf-runtime-actions p {
  flex-basis: 100%;
  margin: 0;
}
.cf-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 20px 0;
  max-width: 650px;
}
.cf-metric {
  border-left: 3px solid var(--line-soft);
  padding-left: 14px;
}
.cf-manage {
  margin-top: 24px;
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
}
.cf-card .cf-manage > summary {
  font-size: 15px;
  font-weight: 600;
}
.cf-manage-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.cf-manage-body > .model-meta {
  margin: 0 0 2px;
}
.cf-manage-body > details {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 16px;
  margin: 0;
}
.cf-card .cf-manage-body > details > summary {
  font-size: 14px;
  font-weight: 600;
}
.cf-manage .cf-updates {
  border: 0;
  margin: 0;
  padding-top: 14px;
}
.cf-manage .cf-updates > h4 {
  display: none;
}
.cf-manage .gh-auth {
  margin-bottom: 0;
}
.cf-settings label {
  max-width: 560px;
}
.cf-current-jobs {
  padding: 18px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.cf-current-jobs h4 {
  font-size: 14px;
}
.cf-current-jobs .cf-job:first-child {
  border-top: 0;
  margin-top: 8px;
  padding-top: 8px;
}
.cf-job-head {
  gap: 10px;
}
.cf-job-state {
  font-size: 12px;
  border-radius: 5px;
  padding: 4px 7px;
  background: var(--panel);
}
.cf-review {
  box-sizing: border-box;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 20px 80px #0004;
}
.cf-review::backdrop {
  background: #0008;
}
.cf-review-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cf-review h3 {
  margin: 0;
  font-size: 20px;
}
.cf-review p {
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.cf-review-target {
  font-weight: 600;
  color: var(--primary);
}
.cf-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 24px 0 12px;
  flex-wrap: wrap;
}
.cf-review button {
  min-height: 42px;
}
.cf-review .model-meta {
  font-size: 12px;
  color: var(--muted);
}
.cf-review #cfReviewMessage {
  font-size: 13px;
}
.cf-review #cfReviewMessage:empty {
  display: none;
}
.cf-review [hidden] {
  display: none;
}
@media (min-width: 1100px) {
  .cf-card {
    padding: 28px;
  }
  .cf-launch {
    padding: 24px;
  }
  .cf-manage-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }
  .cf-manage-body > p,
  .cf-version-settings {
    grid-column: 1/-1;
  }
  .cf-manage-body > details {
    margin-top: 0;
  }
  .cf-node {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 16px;
    align-items: center;
  }
  .cf-node > p,
  .cf-node > details {
    grid-column: 1/-1;
  }
}
@media (max-width: 760px) {
  .cf-pc-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .cf-card {
    padding: 18px;
  }
  .cf-launch {
    padding: 16px;
  }
  .cf-launch h4 {
    font-size: 18px;
  }
  .cf-actions > * {
    flex: 1 1 140px;
    white-space: normal;
  }
  .cf-runtime-actions button {
    flex: 1 1 auto;
  }
  .cf-review {
    padding: 18px;
  }
  .cf-review-actions > * {
    flex: 1;
  }
  .cf-manage-body > details {
    padding: 14px;
  }
}

.cf-unavailable {
  margin: 20px 0;
  padding: 20px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.cf-unavailable h4 {
  margin: 0 0 10px;
  font-size: 17px;
}
.cf-error {
  color: var(--red);
}
.cf-view .cf-pc:hover:not(:disabled) {
  background: var(--panel-2);
}
.cf-view .cf-pc[aria-pressed="true"] {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--text);
}

.cf-domain-ownership {
  overflow-wrap: anywhere;
}

.cf-update-overview {
  margin: 20px 0;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--panel-2);
  min-width: 0;
}
.cf-update-overview > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  cursor: pointer;
}
.cf-update-total,
.cf-update-badge {
  font-size: 12px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.cf-update-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.cf-update-row {
  min-width: 0;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cf-update-row p {
  margin: 0;
  overflow-wrap: anywhere;
}
.cf-update-row button {
  margin-top: auto;
  white-space: normal;
  overflow-wrap: anywhere;
}
.cf-update-row-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cf-update-version {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.cf-update-help {
  font-size: 13px;
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .cf-update-grid {
    grid-template-columns: 1fr;
  }
  .cf-update-overview {
    padding: 14px;
  }
}
.cf-login-diff {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
  font-size: 12px;
}
.cf-login-review details { margin: 12px 0; }

.cf-node-changes { min-width: 0; overflow-wrap: anywhere; }
.cf-node-changes ul { margin: 8px 0; padding-left: 20px; }
.cf-node-changes li { overflow-wrap: anywhere; }
.cf-update-overview > .cf-updates { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
    :root {
      color-scheme: dark;
      --bg: #080b0e;
      --bg-2: #0d1216;
      --panel: #111820;
      --panel-2: #151f28;
      --panel-3: #1a2630;
      --line: #273542;
      --line-soft: rgba(129, 148, 166, .18);
      --text: #eef3f7;
      --muted: #a8b4bf;
      --soft: #7f8d99;
      --dim: #5f6c77;
      --green: #8ee35a;
      --amber: #f2be55;
      --red: #ff7468;
      --cyan: #6fe3d3;
      --blue: #7ba7ff;
      --violet: #b894ff;
      --ink: #071014;
      --shadow: 0 18px 60px rgba(0,0,0,.32);
      --radius: 8px;
    }
    * { box-sizing: border-box; }
    html { background: var(--bg); }
    body {
      margin: 0;
      min-height: 100vh;
      background:
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(0deg, rgba(255,255,255,.02) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(circle at 18% 0%, rgba(111,227,211,.12), transparent 34rem),
        radial-gradient(circle at 84% 12%, rgba(123,167,255,.16), transparent 36rem),
        linear-gradient(180deg, var(--bg-2), var(--bg) 360px),
        var(--bg);
      color: var(--text);
      font-family: "Aptos", "Segoe UI", sans-serif;
      letter-spacing: 0;
    }
    main {
      width: min(1240px, calc(100vw - 32px));
      margin: 0 auto;
      padding: 28px 0 48px;
    }
    header {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
      min-height: 112px;
      padding: 22px 0 26px;
      border-bottom: 1px solid var(--line-soft);
    }
    h1 {
      margin: 0;
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: clamp(32px, 4.3vw, 62px);
      font-weight: 700;
      line-height: .94;
      letter-spacing: 0;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      color: var(--cyan);
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .eyebrow:before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--green);
      box-shadow: 0 0 0 5px rgba(142,227,90,.12);
    }
    .subtitle {
      margin-top: 12px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }
    .toolbar {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    .toolbar:before {
      content: "Control plane";
      display: inline-flex;
      align-items: center;
      height: 38px;
      padding: 0 11px;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      color: var(--soft);
      background: rgba(255,255,255,.03);
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: 12px;
    }
    input, textarea, select {
      width: 220px;
      border: 1px solid var(--line);
      background: rgba(8, 13, 17, .76);
      color: var(--text);
      border-radius: var(--radius);
      padding: 0 11px;
      font: inherit;
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }
    input:focus, textarea:focus, select:focus {
      border-color: rgba(111,227,211,.72);
      box-shadow: 0 0 0 3px rgba(111,227,211,.12);
      background: rgba(9, 16, 21, .96);
    }
    input, select { height: 38px; }
    textarea {
      width: 100%;
      min-height: 116px;
      padding: 11px;
      resize: vertical;
      line-height: 1.45;
    }
    button {
      height: 38px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #eef6f4, #cfe7df);
      color: var(--ink);
      border-radius: var(--radius);
      padding: 0 14px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 8px 22px rgba(0,0,0,.22);
      transition: transform .12s ease, border-color .12s ease, filter .12s ease;
    }
    button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.03); }
    button:active:not(:disabled) { transform: translateY(0); }
    button:disabled {
      cursor: not-allowed;
      opacity: .55;
    }
    button.secondary {
      background: rgba(17,24,32,.72);
      color: var(--text);
      box-shadow: none;
    }
    code {
      color: var(--cyan);
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: .92em;
    }
    .status-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 0 18px;
      color: var(--muted);
      font-size: 13px;
    }
    .dot {
      display: inline-block;
      width: 9px;
      height: 9px;
      border-radius: 999px;
      margin-right: 8px;
      background: var(--dim);
      box-shadow: 0 0 0 4px rgba(116,120,110,.18);
    }
    .dot.ok { background: var(--green); box-shadow: 0 0 0 4px rgba(143,210,74,.17); }
    .dot.warn { background: var(--amber); box-shadow: 0 0 0 4px rgba(240,184,74,.18); }
    .dot.bad { background: var(--red); box-shadow: 0 0 0 4px rgba(232,111,97,.18); }
    .metrics {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      margin: 0 0 16px;
    }
    .metric, .panel {
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
        color-mix(in srgb, var(--panel) 92%, transparent);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .metric {
      min-height: 112px;
      padding: 16px;
      position: relative;
      overflow: hidden;
    }
    .metric:before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--accent, var(--green)) 18%, transparent), transparent 44%);
      pointer-events: none;
    }
    .metric:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
      background: var(--accent, var(--green));
    }
    .metric .label {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      font-family: "Cascadia Mono", "Consolas", monospace;
    }
    .metric .value {
      margin-top: 12px;
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: 36px;
      line-height: 1;
      position: relative;
    }
    .grid {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
      gap: 14px;
      align-items: start;
    }
    .app-layout {
      display: grid;
      grid-template-columns: 216px minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }
    .side-nav {
      position: sticky;
      top: 16px;
      display: grid;
      gap: 6px;
      padding: 12px;
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        rgba(12,18,24,.84);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .side-nav:before {
      content: "NAVIGATION";
      display: block;
      padding: 4px 8px 8px;
      color: var(--dim);
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
    }
    .nav-item {
      width: 100%;
      justify-content: flex-start;
      text-align: left;
      background: transparent;
      color: var(--muted);
      border-color: transparent;
      font-weight: 700;
      box-shadow: none;
      min-height: 40px;
    }
    .nav-item:hover:not(.active) {
      background: rgba(255,255,255,.045);
      color: var(--text);
      transform: none;
    }
    .nav-item.active {
      color: var(--ink);
      background: linear-gradient(180deg, var(--green), #71cb3f);
      border-color: rgba(142,227,90,.8);
    }
    .view {
      display: none;
    }
    .view.active {
      display: block;
    }
    .view-title {
      margin: 0 0 14px;
      padding: 16px;
      border: 1px solid var(--line);
      background:
        linear-gradient(90deg, rgba(111,227,211,.08), transparent 44%),
        color-mix(in srgb, var(--panel) 88%, transparent);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .view-title h2 {
      margin: 0;
      font-size: 20px;
      font-family: "Cascadia Mono", "Consolas", monospace;
    }
    .view-title p {
      margin: 8px 0 0;
      color: var(--muted);
      line-height: 1.45;
    }
    .doc-grid {
      display: grid;
      gap: 14px;
    }
    .doc-card {
      padding: 16px;
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .doc-card h3 {
      margin: 0 0 10px;
      font-size: 16px;
    }
    .doc-card p, .doc-card li {
      color: var(--muted);
      line-height: 1.5;
    }
    .doc-card pre {
      overflow: auto;
      margin: 12px 0 0;
      padding: 12px;
      border: 1px solid var(--line);
      background: #0c0d0b;
      border-radius: 6px;
      color: var(--text);
      line-height: 1.45;
    }
    .tester {
      margin: 0 0 14px;
    }
    .panel h2 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 0;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
      font-family: "Cascadia Mono", "Consolas", monospace;
      text-transform: uppercase;
    }
    .panel h2 span:first-child {
      min-width: 0;
    }
    .panel .view-title {
      border-left: 0;
      border-right: 0;
      border-top: 0;
      border-radius: 8px 8px 0 0;
    }
    .panel .view-title h2 {
      display: block;
      padding: 0;
      border: 0;
      font-size: 20px;
      text-transform: none;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }
    th, td {
      padding: 12px 14px;
      border-bottom: 1px solid var(--line-soft);
      text-align: left;
      vertical-align: middle;
      font-size: 13px;
      overflow-wrap: anywhere;
    }
    th {
      color: var(--muted);
      font-weight: 600;
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: 11px;
      text-transform: uppercase;
    }
    tr:last-child td { border-bottom: 0; }
    .worker-id {
      font-family: "Cascadia Mono", "Consolas", monospace;
      color: var(--text);
      font-weight: 700;
    }
    .model-list {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      min-height: 24px;
      border-radius: 5px;
      padding: 3px 7px;
      background: rgba(111,227,211,.07);
      color: var(--cyan);
      border: 1px solid rgba(111,227,211,.22);
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: 11px;
    }
    .bar {
      height: 8px;
      border-radius: 999px;
      background: #0d0e0c;
      border: 1px solid var(--line);
      overflow: hidden;
      margin-top: 6px;
    }
    .bar span {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--green), var(--amber));
      width: 0%;
    }
    .empty {
      padding: 30px 16px;
      color: var(--muted);
      text-align: center;
      font-size: 13px;
    }
    .request-list {
      display: grid;
      gap: 10px;
      padding: 12px;
    }
    .request {
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--panel-2);
      padding: 12px;
    }
    .request strong {
      display: block;
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: 12px;
      margin-bottom: 8px;
    }
    .request dl {
      display: grid;
      grid-template-columns: 82px 1fr;
      gap: 6px 10px;
      margin: 0;
      font-size: 12px;
    }
    .request dt { color: var(--muted); }
    .request dd { margin: 0; overflow-wrap: anywhere; }
    .test-form {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) 130px 130px 130px auto;
      gap: 12px;
      padding: 16px;
      align-items: end;
    }
    .field {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 12px;
      font-family: "Cascadia Mono", "Consolas", monospace;
      text-transform: uppercase;
    }
    .field input, .field select {
      width: 100%;
      font-family: "Aptos", "Segoe UI", sans-serif;
      text-transform: none;
    }
    .field.prompt {
      grid-column: 1 / -1;
    }
    .help {
      color: var(--soft);
      font-family: "Aptos", "Segoe UI", sans-serif;
      font-size: 12px;
      line-height: 1.35;
      text-transform: none;
    }
    .label-line {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .tip {
      position: relative;
      display: inline-grid;
      place-items: center;
      width: 17px;
      height: 17px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      font-family: "Aptos", "Segoe UI", sans-serif;
      font-size: 11px;
      line-height: 1;
      text-transform: none;
      cursor: help;
    }
    .tip::after {
      content: attr(data-tip);
      position: absolute;
      left: 50%;
      bottom: calc(100% + 8px);
      z-index: 10;
      width: max-content;
      max-width: min(360px, 80vw);
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #11130f;
      color: var(--text);
      box-shadow: 0 12px 32px rgba(0,0,0,.32);
      font-size: 12px;
      line-height: 1.4;
      white-space: normal;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 4px);
      transition: opacity .12s ease, transform .12s ease;
    }
    .tip:hover::after,
    .tip:focus-visible::after {
      opacity: 1;
      transform: translate(-50%, 0);
    }
    .test-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    .test-media {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: stretch;
    }
    .media-box {
      display: grid;
      gap: 10px;
      min-height: 128px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(8, 13, 17, .48);
    }
    .media-box.disabled {
      opacity: .55;
    }
    .media-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: 12px;
      text-transform: uppercase;
    }
    .media-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .media-actions button,
    .media-actions input {
      width: auto;
    }
    .media-preview {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      justify-content: center;
      min-height: 74px;
      border: 1px dashed var(--line);
      border-radius: 6px;
      color: var(--soft);
      font-size: 12px;
      overflow: hidden;
    }
    .media-preview img {
      display: block;
      max-width: 100%;
      max-height: 180px;
      border-radius: 6px;
    }
    .media-preview audio {
      width: min(100%, 520px);
    }
    .media-status {
      color: var(--soft);
      font-size: 12px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 38px;
      color: var(--muted);
      font-size: 13px;
      white-space: nowrap;
    }
    .check input {
      width: 16px;
      height: 16px;
      padding: 0;
      accent-color: var(--green);
    }
    .check-field {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      min-height: 38px;
      color: var(--text);
      font-size: 13px;
    }
    .check-field input {
      width: 16px;
      height: 16px;
      accent-color: var(--green);
    }
    #alignTestPreview { grid-column: 1 / -1; }
    .align-words { grid-column: 1 / -1; display: grid; gap: 10px; }
    .align-words:empty { display: none; }
    .align-chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: 16px; line-height: 1.5; }
    .align-word { padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--text); }
    .align-word.untimed { opacity: .55; border-style: dashed; }
    .align-word.active { background: var(--cyan); border-color: var(--cyan); color: #06201c; }
    .align-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
    .align-table th, .align-table td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; }
    .align-table th { color: var(--muted); font-weight: 500; }
    .output {
      grid-column: 1 / -1;
      min-height: 150px;
      max-height: 360px;
      overflow: auto;
      margin: 0;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #080d11;
      color: var(--text);
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: 13px;
      line-height: 1.45;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .model-row-group {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .model-row-group select {
      flex: 1;
      min-width: 0;
    }
    .compare-models {
      grid-column: 1 / -1;
      display: grid;
      gap: 8px;
    }
    .compare-models:empty {
      display: none;
    }
    .compare-model-row {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .compare-model-row select {
      flex: 1;
      min-width: 0;
      font-family: "Aptos", "Segoe UI", sans-serif;
    }
    .compare-outputs {
      grid-column: 1 / -1;
      display: none;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
      align-items: start;
    }
    .compare-output {
      display: grid;
      gap: 8px;
      min-width: 0;
    }
    .compare-output-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      font-family: "Cascadia Mono", "Consolas", monospace;
    }
    .compare-output-head .model-name {
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .pill {
      color: var(--muted);
      font-size: 12px;
      text-transform: none;
      font-family: "Aptos", "Segoe UI", sans-serif;
    }
    .model-ops {
      margin: 0 0 14px;
    }
    .model-section {
      border-bottom: 1px solid var(--line);
    }
    .model-section:last-child {
      border-bottom: 0;
    }
    .model-section.compact {
      border-bottom: 0;
    }
    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 12px;
      padding: 16px 16px 0;
    }
    .section-head h3 {
      margin: 0;
      color: var(--text);
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: 13px;
      text-transform: uppercase;
    }
    .section-head p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }
    .ops-form {
      display: grid;
      grid-template-columns: minmax(190px, .9fr) minmax(240px, 1.3fr) 130px auto;
      gap: 12px;
      padding: 16px;
      align-items: end;
    }
    .worker-picker {
      grid-template-columns: minmax(280px, 420px) minmax(120px, 160px);
      align-items: end;
    }
    .worker-picker button {
      width: 100%;
    }
    .readonly-notice {
      margin: 14px;
      border: 1px solid rgba(111,227,211,.28);
      background: rgba(111,227,211,.055);
    }
    .routing-form {
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      align-items: end;
    }
    .routing-form .wide {
      grid-column: span 2;
    }
    .routing-form .check-field {
      align-self: end;
    }
    .routing-form button {
      align-self: end;
    }
    .download-form {
      display: grid;
      grid-template-columns: minmax(280px, 1fr) 150px auto;
      gap: 12px;
      padding: 16px;
      align-items: end;
    }
    .hf-search {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto;
      gap: 12px;
      padding: 16px;
      align-items: end;
    }
    .hf-search button,
    .download-form button {
      align-self: end;
      min-width: 66px;
    }
    .hf-results {
      padding: 2px 14px 14px;
      display: grid;
      gap: 10px;
      max-height: 360px;
      overflow: auto;
    }
    .hf-results .empty {
      padding: 16px;
    }
    .hf-result {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) auto;
      gap: 10px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 7px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)),
        var(--panel-2);
      padding: 11px;
    }
    .ops-flags {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      min-height: 38px;
    }
    .models-box {
      padding: 12px;
      display: grid;
      gap: 10px;
    }
    .models-box .error {
      margin: 0;
      display: block;
      white-space: pre-wrap;
      line-height: 1.45;
    }
    .download-box {
      padding: 12px;
      display: grid;
      gap: 10px;
    }
    .slot-ops {
      margin: 0 0 14px;
    }
    .slot-form {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      padding: 16px;
      align-items: end;
      border-bottom: 1px solid var(--line);
    }
    .slot-form .worker-select {
      grid-column: span 2;
    }
    .slot-swap-group {
      display: grid;
      grid-template-columns: repeat(3, minmax(120px, 1fr));
      gap: 12px;
      align-items: end;
      grid-column: span 3;
    }
    .slot-form button {
      align-self: end;
    }
    .slot-body {
      padding: 12px;
    }
    .model-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      align-items: stretch;
      border: 1px solid var(--line);
      border-radius: 7px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)),
        var(--panel-2);
      padding: 12px;
    }
    .model-main {
      min-width: 0;
    }
    details.model-row {
      display: block;
    }
    details.model-row summary {
      cursor: pointer;
      list-style-position: inside;
    }
    details.model-row summary > div {
      display: inline-block;
      width: calc(100% - 24px);
      vertical-align: top;
    }
    .model-title {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: 12px;
      font-weight: 700;
      overflow-wrap: anywhere;
    }
    .model-meta {
      margin-top: 7px;
      color: var(--muted);
      font-size: 12px;
      overflow-wrap: anywhere;
    }
    .model-actions {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(180px, auto);
      gap: 8px;
      align-items: center;
      justify-items: stretch;
      padding-top: 10px;
      border-top: 1px solid var(--line-soft);
      min-width: 0;
    }
    .model-setting {
      display: grid;
      grid-template-columns: auto minmax(86px, 1fr) auto;
      gap: 7px;
      align-items: center;
      padding: 4px 6px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(255,255,255,.025);
    }
    .model-setting span {
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }
    .model-setting input {
      width: 100%;
      min-height: 32px;
      padding: 6px 8px;
    }
    .model-setting button {
      min-width: 56px;
    }
    .model-actions > button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      justify-self: stretch;
      align-self: center;
      width: 100%;
      min-width: 180px;
      min-height: 38px;
      white-space: nowrap;
    }
    .model-action-note {
      grid-column: 1 / -1;
      min-height: 18px;
      color: var(--muted);
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .model-action-note.ok {
      color: var(--green);
    }
    .model-action-note.error {
      color: var(--red);
    }
    .spinner {
      width: 14px;
      height: 14px;
      border-radius: 999px;
      border: 2px solid rgba(238, 234, 218, .22);
      border-top-color: var(--green);
      display: inline-block;
      flex: 0 0 auto;
      animation: spin .8s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .queue-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 7px;
    }
    .queue-tags .tag {
      color: var(--text);
    }
    .log-detail {
      margin-top: 10px;
      border-top: 1px solid var(--line);
      padding-top: 10px;
    }
    .log-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 8px;
      margin: 8px 0;
      color: var(--muted);
      font-size: 12px;
    }
    .log-pre {
      max-height: 260px;
      overflow: auto;
      margin: 8px 0 0;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: rgba(0,0,0,.24);
      color: var(--text);
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 12px;
      line-height: 1.45;
    }
    .stats-toolbar {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 10px;
      padding: 14px;
      border-bottom: 1px solid var(--line);
      align-items: end;
    }
    .stats-toolbar .field {
      grid-column: span 2;
      min-width: 0;
    }
    .stats-toolbar input,
    .stats-toolbar select {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    .stats-toolbar .wide {
      grid-column: span 4;
    }
    .stats-toolbar .date-field {
      grid-column: span 2;
    }
    .stats-toolbar .stats-action {
      grid-column: span 2;
      align-self: end;
      width: 100%;
      min-height: 38px;
    }
    .stats-cards {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding: 14px;
      border-bottom: 1px solid var(--line);
    }
    .stats-card {
      border: 1px solid var(--line);
      border-radius: 7px;
      background: rgba(20, 30, 37, .7);
      padding: 12px;
      min-width: 0;
    }
    .stats-card .label {
      color: var(--muted);
      font-size: 12px;
    }
    .stats-card .value {
      margin-top: 6px;
      font-size: 24px;
      font-weight: 800;
    }
    .stats-section {
      padding: 14px;
      border-bottom: 1px solid var(--line);
    }
    .stats-section:last-child {
      border-bottom: 0;
    }
    .stats-section h3 {
      margin: 0 0 10px;
      font-size: 14px;
    }
    .pager {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
    }
    .pager button {
      min-height: 34px;
      padding: 6px 12px;
    }
    @media (max-width: 980px) {
      .stats-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .stats-toolbar .field,
      .stats-toolbar .wide {
        grid-column: span 1;
      }
      .stats-toolbar .date-field,
      .stats-toolbar .stats-action {
        grid-column: span 2;
      }
      .stats-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    .danger {
      background: rgba(232,111,97,.16);
      color: #ffd6d1;
      border-color: rgba(232,111,97,.45);
      box-shadow: none;
    }
    .error {
      display: none;
      margin: 10px 0 0;
      padding: 10px 12px;
      border: 1px solid rgba(232,111,97,.45);
      background: rgba(232,111,97,.12);
      color: #ffd6d1;
      border-radius: 6px;
      font-size: 13px;
    }
    .auth-panel {
      display: none;
      margin: 0 0 14px;
      padding: 18px;
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        var(--panel);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .auth-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: end;
    }
    .auth-row input {
      width: min(260px, 100%);
    }
    .auth-screen {
      max-width: 520px;
      margin: 8vh auto 0;
    }
    .auth-screen:before {
      content: "GPU RELAY";
      display: inline-block;
      margin: 0 0 14px;
      color: var(--cyan);
      font-family: "Cascadia Mono", "Consolas", monospace;
      font-size: 12px;
      letter-spacing: .08em;
    }
    .auth-screen h2 {
      display: grid;
      grid-template-columns: 1fr;
      align-items: start;
      gap: 8px;
      text-transform: none;
      line-height: 1.25;
    }
    .auth-screen h2 .pill {
      display: block;
      max-width: 100%;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }
    .auth-screen .auth-row {
      display: grid;
      grid-template-columns: 1fr;
      align-items: stretch;
    }
    .auth-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    body:not(.authenticated) header {
      display: none;
    }
    .auth-loading {
      min-height: 70dvh;
      display: grid;
      place-content: center;
      justify-items: center;
      padding: 24px;
      color: var(--muted);
      text-align: center;
    }
    .auth-loading[hidden] { display: none; }
    .views {
      min-width: 0;
    }
    .panel, .metric, .view-title, .doc-card, .side-nav {
      backdrop-filter: blur(10px);
    }
    .chat-thread {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-height: 540px;
      overflow-y: auto;
      padding: 14px;
      background: var(--bg-2);
      border: 1px solid var(--panel-3);
      border-radius: 12px;
      min-height: 200px;
    }
    .chat-msg {
      max-width: 88%;
      padding: 10px 13px;
      border-radius: 12px;
      font-size: 14px;
      line-height: 1.55;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .chat-msg.user {
      align-self: flex-end;
      background: var(--panel-3);
    }
    .chat-msg.assistant {
      align-self: flex-start;
      background: var(--panel-2);
      border: 1px solid var(--panel-3);
    }
    .chat-msg.tool {
      align-self: flex-start;
      background: color-mix(in srgb, var(--panel-2) 80%, transparent);
      border: 1px dashed var(--panel-3);
      font-size: 13px;
      width: 88%;
    }
    .chat-msg.chat-error {
      align-self: stretch;
      background: color-mix(in srgb, #b64545 18%, var(--panel-2));
      border: 1px solid color-mix(in srgb, #b64545 45%, transparent);
    }
    .chat-msg .chat-role {
      display: block;
      font-size: 11px;
      opacity: 0.65;
      margin-bottom: 4px;
      letter-spacing: 0.4px;
    }
    .chat-msg details summary { cursor: pointer; opacity: 0.85; }
    .chat-msg pre {
      margin: 6px 0 0;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 12px;
      opacity: 0.9;
      max-height: 220px;
      overflow-y: auto;
    }
    .chat-input-row {
      display: flex;
      gap: 10px;
      margin-top: 12px;
      align-items: flex-end;
    }
    .chat-input-row textarea {
      flex: 1;
      min-height: 58px;
      resize: vertical;
    }
    .agent-tool-checks {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
      padding: 8px 0;
    }
    .agent-tool-checks label { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
    .agent-config-grid {
      display: grid;
      grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(0, 1fr));
      gap: 12px;
      align-items: end;
      margin-bottom: 10px;
    }
    .chat-spinner {
      display: inline-block;
      width: 13px;
      height: 13px;
      border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
      border-top-color: currentColor;
      border-radius: 50%;
      vertical-align: -2px;
      margin-right: 8px;
      animation: chatspin 0.8s linear infinite;
    }
    @keyframes chatspin {
      to { transform: rotate(360deg); }
    }
    .tool-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px 18px;
      padding: 14px 16px 18px;
      max-width: 992px;
    }
    .tool-form-grid .wide { grid-column: 1 / -1; }
    .tool-form-grid textarea { min-height: 84px; font-family: ui-monospace, monospace; font-size: 12.5px; }
    .tool-form-grid .test-actions { justify-content: flex-start; padding-top: 2px; }
    .http-opts {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px 18px;
    }
    .test-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 120;
      padding: 20px;
    }
    .test-modal-card {
      width: min(680px, 94vw);
      max-height: 82vh;
      display: flex;
      flex-direction: column;
      background: var(--panel);
      border: 1px solid var(--panel-3);
      border-radius: 12px;
      padding: 16px 18px 18px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }
    .test-modal-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: 600;
    }
    .test-modal .output { margin: 0; overflow: auto; max-height: 46vh; }
    .test-modal .field { margin: 0 0 12px; }
    .test-modal textarea { min-height: 80px; font-family: ui-monospace, monospace; font-size: 12.5px; }
    .test-modal-status {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 4px 0 12px;
      font-size: 13px;
      color: var(--muted);
    }
    .tool-section {
      margin-top: 26px;
      padding-top: 18px;
      border-top: 1px solid var(--panel-3);
    }
    [data-view="agent-tools"] table { margin-top: 10px; }
    [data-view="agent-tools"] td button { margin-bottom: 4px; }
    [data-view="agent-tools"] .output { margin: 0 16px 16px; }
    [data-view="agent"] .agent-config-grid { padding: 14px 16px 0; }
    [data-view="agent"] > .field { margin: 16px 16px 0; }
    [data-view="agent"] .chat-thread { margin: 16px 16px 0; }
    [data-view="agent"] .chat-input-row { margin: 12px 16px 16px; }
    .chat-attach-row {
      display: flex;
      gap: 8px;
      align-items: center;
      margin: 10px 16px 0;
      flex-wrap: wrap;
    }
    .chat-msg img.chat-image {
      display: block;
      max-width: 240px;
      max-height: 180px;
      border-radius: 8px;
      margin-top: 8px;
    }
    @media (max-width: 860px) {
      header, .grid, .app-layout, .test-form, .test-media, .ops-form, .download-form, .hf-search, .hf-result, .slot-form, .slot-swap-group, .model-row { grid-template-columns: 1fr; }
      .agent-config-grid, .tool-form-grid, .http-opts { grid-template-columns: 1fr; }
      .routing-form .wide, .slot-form .worker-select, .slot-swap-group { grid-column: auto; }
      .toolbar { justify-content: flex-start; }
      .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .side-nav { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
      th:nth-child(3), td:nth-child(3) { display: none; }
      .test-actions { justify-content: flex-start; }
      .model-actions { grid-template-columns: 1fr; min-width: 0; }
    }
    @media (max-width: 540px) {
      main { width: min(100vw - 20px, 1180px); padding-top: 20px; }
      .metrics { grid-template-columns: 1fr; }
      .side-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      input, select { width: 100%; }
      button { flex: 1; }
      th, td { padding: 10px 9px; }
      h1 { font-size: 40px; }
    }
/* Clear uses the same layout in both modes; the dark palette follows Focus. */
:root {
  color-scheme: light;
  --bg: #fafbfc;
  --bg-2: #f5f6f9;
  --panel: #ffffff;
  --panel-2: #f5f6f9;
  --panel-3: #eef0f5;
  --line: #e3e6ee;
  --line-soft: #e9ebf1;
  --text: #272833;
  --muted: #626775;
  --soft: #697080;
  --dim: #798091;
  --green: #237154;
  --amber: #98611e;
  --red: #b54141;
  --cyan: #5759c5;
  --blue: #4e62ae;
  --violet: #6958b4;
  --ink: #ffffff;
  --primary: #595bd6;
  --primary-text: #ffffff;
  --primary-soft: #eeedfc;
  --primary-line: #d6d5f5;
  --shadow: none;
  --radius: 10px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1c20;
  --bg-2: #18191d;
  --panel: #222328;
  --panel-2: #28292f;
  --panel-3: #2d2e35;
  --line: #393a43;
  --line-soft: #34353c;
  --text: #ececf2;
  --muted: #a4a6b2;
  --soft: #a4a6b2;
  --dim: #9294a3;
  --green: #8dbfa3;
  --amber: #dab880;
  --red: #ed9b9b;
  --cyan: #b0aff4;
  --blue: #a0b4ee;
  --violet: #beb0eb;
  --ink: #24232b;
  --primary: #b0aff4;
  --primary-text: #24232b;
  --primary-soft: #33313f;
  --primary-line: #4b475e;
}
body { background: var(--bg); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif; letter-spacing: -.02em; font-size: 14px; }
main.relay-shell { width: 100%; margin: 0; padding: 0; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
button, a, input, select { touch-action: manipulation; }
/* Explicit author colors also apply to visited links; keep each component's palette. */
a { color: var(--cyan); }
input[type="file"] { height:40px; min-height:40px; padding:0 12px 0 0; line-height:38px; vertical-align:middle; }
input[type="file"]::file-selector-button { box-sizing:border-box; height:38px; margin:0 12px 0 0; padding:0 12px; border:0; border-right:1px solid var(--line); background:var(--panel-2); color:var(--text); font:inherit; vertical-align:top; cursor:pointer; }
input[type="file"]::file-selector-button:hover { background:var(--panel-3); }
.ui-busy::before { content:""; display:inline-block; width:12px; height:12px; margin-right:8px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; animation:spin .8s linear infinite; }
[data-elapsed]:not([data-elapsed=""])::after { content:attr(data-elapsed); display:inline-block; margin-left:10px; font-size:12px; font-weight:400; color:var(--muted); }
@media (prefers-reduced-motion:reduce) { .ui-busy::before { animation:none; border-right-color:currentColor; opacity:.65; } }
button { min-height: 38px; height: auto; padding: 9px 13px; font-size: 12px; font-weight: 550; background: var(--primary); color: var(--primary-text); border-color: var(--primary); box-shadow: none; transition: background .15s ease, border-color .15s ease; }
button:hover:not(:disabled) { transform: none; filter: none; background: color-mix(in srgb, var(--primary) 90%, var(--text)); }
button.secondary { background: var(--panel); color: var(--text); border-color: var(--line); }
button.secondary:hover:not(:disabled) { background: var(--panel-2); }
button.danger { color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--panel)); border-color: color-mix(in srgb, var(--red) 24%, var(--line)); }
button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 70%, var(--panel)); outline-offset: 3px; }
input, select, textarea, input:focus, select:focus, textarea:focus { background: var(--panel); color: var(--text); border-color: var(--line); box-shadow: none; min-width: 0; }
input:focus, textarea:focus { outline:none; }
select:focus { border-color: var(--primary); }
input::placeholder, textarea::placeholder { color: var(--dim); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
input, select { height: 40px; }
input[type="checkbox"], input[type="radio"] { height: auto; }
code { color: var(--cyan); }
.app-header { position: sticky; z-index: 30; top: 0; min-height: 64px; padding: 12px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--panel); border-bottom: 1px solid var(--line-soft); }
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-symbol { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 auto; background: var(--primary); color: var(--primary-text); border-radius: 8px; }
.brand-symbol svg, .nav-group svg { width: 17px; height: 17px; flex: 0 0 auto; }
.app-header h1 { font-family: inherit; font-size: 18px; font-weight: 650; line-height: 1.4; letter-spacing: -.045em; }
.brand-context { margin-left: 14px; border-left: 1px solid var(--line); padding-left: 20px; color: var(--muted); font-size: 12px; }
.toolbar { gap: 8px; }
.toolbar:before, .eyebrow:before, .side-nav:before { display: none; }
.theme-switch { display: inline-flex; gap: 2px; padding: 3px; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.theme-switch .theme-icon { width: 32px; height: 32px; min-height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); }
.theme-switch .theme-icon:hover { background: var(--panel-3); color: var(--text); }
.theme-switch .theme-icon[aria-pressed="true"] { background: var(--panel); color: var(--primary); box-shadow: 0 1px 3px #00000012; }
.theme-switch svg { width: 17px; height: 17px; flex: none; }
.app-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0; align-items: start; }
.side-nav { top: 65px; border: 0; border-right: 1px solid var(--line-soft); border-radius: 0; padding: 25px 14px 20px; min-height: calc(100vh - 65px); background: var(--panel); display: flex; flex-direction: column; gap: 6px; box-shadow: none; }
.nav-group { display: flex; align-items: center; gap: 11px; text-align: left; color: var(--muted); background: transparent; border: 1px solid transparent; padding: 11px 12px; border-radius: 7px; min-height: 43px; width: 100%; font-size: 12px; font-weight: 500; }
.nav-group:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
.nav-group.active { color: var(--cyan); background: var(--primary-soft); font-weight: 600; }
.model-status-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.model-status-badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 20px; padding: 5px 9px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.model-status-badge:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.model-status-badge[data-tone="ok"] { color: var(--green); }
.model-status-badge[data-tone="error"] { color: var(--red); }
.model-status-notice { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); font-size: 13px; line-height: 1.7; }
.model-status-notice p { margin: 6px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.model-status-notice details { margin-top: 12px; font-size: 12px; }
.model-status-notice summary { cursor: pointer; color: var(--soft); }
@media (max-width: 640px) {
  .model-picker-head { flex-direction: column; align-items: flex-start; }
}
.side-profile { margin-top: auto; padding-top: 40px; }
.side-profile button { background: transparent; color: var(--text); border-color: var(--line); display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 12px 10px; }
.profile-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--cyan); background: var(--primary-soft); }
.profile-avatar svg { width: 15px; height: 15px; }
.profile-caption { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.views { padding: 20px 30px 38px; min-width: 0; width: 100%; max-width: 1580px; margin: 0 auto; }
.status-line { font-size: 11px; padding: 0 0 18px; gap: 10px; }
.dot, .dot.ok, .dot.warn, .dot.bad { width: 6px; height: 6px; box-shadow: none; }
.view-tabs { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 0 14px; margin: 0 0 22px; border-bottom: 1px solid var(--line-soft); }
.view-tabs .nav-item { color: var(--muted); font-weight: 500; width: auto; min-height: 35px; font-size: 12px; padding: 8px 13px; border-radius: 7px; border: 1px solid transparent; background: transparent; }
.view-tabs .nav-item:hover { background: var(--panel-2); color: var(--text); }
.view-tabs .nav-item.active { color: var(--cyan); background: var(--primary-soft); border-color: transparent; }
.panel, .metric, .view-title, .doc-card, .side-nav { backdrop-filter: none; }
.view-title { margin: 0 0 25px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.view-title h2, .panel .view-title h2 { padding: 0; border: 0; font-family: inherit; text-transform: none; font-size: 25px; line-height: 1.4; letter-spacing: -.05em; font-weight: 650; }
.view-title p { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.7; }
.panel.view { padding-top: 0; background: transparent; border: 0; }
.panel.view > h2, .panel.view > .ops-form, .panel.view > .model-section, .panel.view > .stats-toolbar, .panel.view > .models-box, .panel.view > .download-box, .panel.view > .test-form, .panel.view > .test-media, .panel.view > .test-actions, .panel.view > .field { background: var(--panel); }
.panel.view > h2 { border: 1px solid var(--line-soft); border-radius: 10px 10px 0 0; }
.panel, .metric, .doc-card { background: var(--panel); border-color: var(--line-soft); box-shadow: none; }
.panel h2, .section-head h3, .metric .label, .metric .value, .compare-output-head, .worker-id, .slot-id, .eyebrow { font-family: inherit; }
.panel h2 { font-size: 13px; text-transform: none; font-weight: 600; padding: 18px 20px; }
.metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.metric { min-height: 117px; padding: 19px 21px; }
.metric:before, .metric:after { display: none; }
.metric .label { font-size: 12px; text-transform: none; }
.metric .value { margin-top: 14px; font-size: 29px; font-weight: 600; line-height: 1.3; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.doc-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.doc-card { min-width: 0; }
.doc-card code { overflow-wrap: anywhere; }
.doc-card p, .doc-card li { font-size: 13px; line-height: 1.7; }
.doc-card pre, .output, .log-pre { background: var(--bg-2); color: var(--text); border-color: var(--line); border-radius: 8px; }
.text-result { display:grid; grid-column:1 / -1; gap:6px; min-width:0; }
.text-output-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; color:var(--muted); font-size:12px; }
.text-output-tools strong { color:var(--text); }
.text-output-copy { margin-left:auto; min-height:30px; padding:4px 10px; }
.text-copy-feedback:not(:empty) { flex-basis:100%; overflow-wrap:anywhere; }
[data-view="test"] .playground-thinking { grid-column:1 / -1; }
.section-head { padding: 20px 20px 0; }
.section-head h3 { font-size: 13px; text-transform: none; }
.section-head p, .readonly-notice { font-size: 12px; line-height: 1.7; }
.ops-form, .download-form, .hf-search, .test-form { padding: 20px; gap: 16px; }
.field, .field .label-line { color: var(--muted); font-size: 12px; }
.empty { font-size: 12px; line-height: 1.8; padding: 28px 20px; color: var(--muted); }
table { background: var(--panel); font-size: 12px; }
th { background: var(--panel-2); color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; }
th, td { padding: 15px 17px; border-color: var(--line-soft); vertical-align: top; }
td { color: var(--text); font-size: 12px; line-height: 1.6; }
.tag { background: var(--panel-2); color: var(--muted); border-color: var(--line); border-radius: 5px; font-family: inherit; padding: 3px 7px; font-size: 10px; line-height: 1.5; }
.bar { background: var(--panel-3); height: 4px; box-shadow: none; }
.bar span { background: var(--primary); }
.worker-id { font-size: 10px; color: var(--muted); line-height: 1.7; }
.model-row, .hf-result, .model-setting, .slot-card, .request-card { background: var(--panel); border-color: var(--line-soft); }
.model-id, .model-name { color: var(--text); }
.field, .media-head, .model-title, .request strong { font-family: inherit; }
.media-box, .stats-card { background: var(--panel-2); border-color: var(--line-soft); }
.ops-flags, .test-flags { font-size: 12px; }
.readonly-notice { background: var(--primary-soft); border-color: var(--primary-line); color: var(--text); }
.tip { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 18px; width: 18px; min-width: 18px; max-width: 18px; height: 18px; min-height: 18px; max-height: 18px; padding: 0; border-radius: 50%; vertical-align: middle; color: var(--muted); border-color: var(--line); background: var(--panel); }
.tip:after { display: none; left: var(--tip-left, 50%); width: min(360px, 80vw); max-width: none; background: var(--panel-2); color: var(--text); border-color: var(--line); box-shadow: 0 6px 24px color-mix(in srgb, var(--text) 12%, transparent); }
.tip:hover:after, .tip:focus-visible:after { display: block; }
.error { background: color-mix(in srgb, var(--red) 7%, var(--panel)); color: var(--red); border-color: color-mix(in srgb, var(--red) 24%, var(--line)); font-size: 12px; line-height: 1.7; }
.mobile-nav-toggle { display: none; }
.side-nav-toggle { display:none; }
@media (min-width:861px) {
  .side-nav .side-nav-toggle { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-height:32px; padding:6px 10px; margin-bottom:8px; font-size:11px; color:var(--muted); background:transparent; border-color:transparent; }
  .side-nav-toggle svg { width:18px; height:18px; flex-shrink:0; }
  body.nav-collapsed .app-layout { grid-template-columns:64px minmax(0,1fr); }
  body.nav-collapsed .side-nav { padding-inline:8px; }
  body.nav-collapsed .side-nav-toggle, body.nav-collapsed .nav-group { justify-content:center; padding-inline:8px; }
  body.nav-collapsed .side-nav-toggle svg { transform:rotate(180deg); }
  body.nav-collapsed .side-nav-toggle span, body.nav-collapsed .nav-group > span, body.nav-collapsed .side-profile button > span:last-child { display:none; }
  body.nav-collapsed .side-profile button { justify-content:center; padding-inline:6px; }
}
.auth-screen { max-width: 1050px; width: calc(100% - 48px); margin: max(35px, 8vh) auto 35px; padding: 0; display: grid; grid-template-columns: 1.05fr 1fr; min-height: 650px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 15px; box-shadow: 0 8px 40px color-mix(in srgb, var(--text) 4%, transparent); background: var(--panel); }
.auth-screen:before { display: none; }
.auth-story { display: flex; flex-direction: column; padding: 36px 40px; background: var(--primary-soft); }
.auth-brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: 17px; font-weight: 650; letter-spacing: -.045em; }
.auth-story h3 { font-size: 36px; font-weight: 600; letter-spacing: -.055em; line-height: 1.45; margin: 80px 0 0; }
.auth-story > p { margin: 18px 0 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
.auth-network { display: flex; align-items: center; justify-content: space-between; position: relative; margin: 42px 0; height: 130px; gap: 12px; }
.auth-network:before { content: ""; position: absolute; width: 90%; height: 1px; background: var(--primary-line); left: 5%; transform: rotate(18deg); }
.network-gpu { font-size: 11px; padding: 12px 14px; border-radius: 9px; background: var(--panel); color: var(--muted); border: 1px solid var(--primary-line); position: relative; }
.network-gpu:first-child { margin-bottom: 60px; }
.network-gpu:last-child { margin-top: 60px; }
.network-relay { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid var(--primary-line); border-radius: 17px; background: var(--panel); color: var(--cyan); position: relative; flex-shrink: 0; }
.network-relay svg { width: 29px; height: 29px; }
.auth-story-foot { margin-top: auto; color: var(--muted); font-size: 11px; }
.auth-form { position: relative; padding: 96px 50px 35px; display: flex; flex-direction: column; justify-content: center; }
.auth-theme { position: absolute; top: 22px; right: 24px; }
.auth-screen .auth-form h2 { font-family: inherit; padding: 0; font-size: 25px; font-weight: 650; letter-spacing: -.05em; border: 0; color: var(--text); margin: 0; }
.auth-description { color: var(--muted); font-size: 12px; line-height: 1.8; margin: 10px 0 24px; }
.auth-row, .auth-screen .auth-row { display: grid; grid-template-columns: 1fr; gap: 20px; }
.auth-row input, .auth-row button { width: 100%; }
.auth-row .field { gap: 9px; }
.auth-row input { height: 44px; }
.auth-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
.auth-actions button { min-height: 43px; }
.auth-actions #registerBtn { background: transparent; color: var(--cyan); border: 0; margin-top: 4px; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 43px; }
.password-toggle { position: absolute; right: 5px; top: 5px; border: 0; background: transparent; color: var(--muted); width: 34px !important; min-height: 34px; padding: 8px; border-radius: 6px; }
.password-toggle:hover:not(:disabled) { background: var(--panel-2); }
.password-toggle svg { width: 16px; height: 16px; }
.auth-message { margin: 0 0 18px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.auth-message:empty { display: none; }
.auth-message.is-error { color: var(--red); padding: 11px 13px; background: color-mix(in srgb, var(--red) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--red) 28%, var(--line)); border-radius: 8px; }
.auth-message.is-pending { color: var(--cyan); background: var(--primary-soft); border: 1px solid var(--primary-line); padding: 16px; border-radius: 9px; }
.auth-hint { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 11px; line-height: 1.8; }
.auth-form #authReturn { margin-top: 12px; }
.auth-form .auth-copyright { margin-top: auto; padding-top: 28px; font-size: 10px; color: var(--soft); text-align: center; }
@media (min-width: 1600px) { .views { padding: 24px 46px 45px; } }
@media (max-width: 1000px) {
  .app-layout { grid-template-columns: 185px minmax(0, 1fr); }
  .views { padding: 20px; }
  .metrics { gap: 10px; }
  .metric { padding: 17px; }
  .brand-context { margin-left: 8px; padding-left: 14px; }
  .auth-form { padding: 90px 32px 30px; }
  .auth-story { padding: 35px 30px; }
}
@media (max-width: 860px) {
  .app-layout { display: block; }
  .side-nav { display: none; min-height: 0; position: static; border: 0; border-bottom: 1px solid var(--line); padding: 18px; grid-template-columns: 1fr 1fr; }
  body.nav-open .side-nav { display: grid; }
  .side-profile { grid-column: 1 / -1; }
  .side-profile { padding: 12px 0 0; }
  .side-profile button { width: auto; }
  .mobile-nav-toggle { display: inline-flex; gap: 6px; align-items: center; }
  .mobile-nav-toggle svg { width: 16px; height: 16px; }
  .brand-context { display: none; }
  .app-header { flex-wrap: wrap; padding: 12px 18px; position: static; }
  .view-title h2, .panel .view-title h2 { font-size: 24px; }
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-story h3 { font-size: 30px; }
  .auth-story { padding: 30px 24px; }
  .auth-form { padding: 80px 27px 28px; }
  th:nth-child(3), td:nth-child(3) { display: table-cell; }
}
@media (max-width: 600px) {
  .app-header { gap: 12px; }
  .app-header h1 { font-size: 16px; }
  .toolbar { flex-wrap: wrap; justify-content: flex-end; width: 100%; }
  .toolbar button { flex: 0 0 auto; padding: 8px 11px; min-height: 35px; font-size: 11px; }
  .toolbar .theme-switch { margin-right: auto; }
  .views { padding: 18px 14px 30px; }
  .status-line { flex-wrap: wrap; font-size: 10px; padding-bottom: 18px; }
  .view-tabs { gap: 4px; margin-bottom: 20px; padding-bottom: 12px; }
  .view-tabs .nav-item { flex: 0 0 auto; font-size: 11px; padding: 9px 10px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric { padding: 15px; min-height: 108px; }
  .metric .value { font-size: 25px; }
  .metric .label { font-size: 11px; }
  .panel h2 { padding: 16px; }
  .ops-form, .download-form, .hf-search, .test-form { padding: 16px; }
  .stats-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-toolbar .field, .stats-toolbar .wide { grid-column: auto; }
  .agent-config-grid, .test-form, .test-media, .ops-form, .worker-picker, .download-form, .hf-search, .slot-form, .slot-swap-group, .model-row { grid-template-columns: 1fr; }
  .routing-form .wide { grid-column: auto; }
  button { flex: 0 1 auto; }
  input, select, textarea { font-size: 16px; }
  th, td { padding: 13px; }
  .auth-screen { width: calc(100% - 28px); margin: 24px auto; grid-template-columns: 1fr; min-height: 650px; }
  .auth-story { display: none; }
  .auth-form { padding: 98px 27px 28px; }
  .auth-description { margin-bottom: 22px; }
  .auth-form h2 { font-size: 24px; }
  .theme-switch .theme-icon { width: 36px; height: 36px; min-height: 36px; }
  .auth-actions button { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* API key policy forms share the existing Clear/Focus tokens. */
.key-policy-form { display:grid; gap:16px; margin:16px 0; }
.key-policy-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:12px; align-items:end; }
.key-policy-fields .field, .key-policy-fields select, .key-policy-fields input { min-width:0; width:100%; box-sizing:border-box; }
.key-policy-form > button { justify-self:start; }
.key-card-heading { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.key-card { overflow-wrap:anywhere; }
#apiKeySecret { overflow-wrap:anywhere; }
.key-policy-edit { margin-top:12px; }
.key-policy-edit summary { cursor:pointer; font-size:12px; color:var(--muted); }
.key-scopes { grid-column:1/-1; min-width:0; margin:0; padding:16px; border:1px solid var(--line); border-radius:12px; }
.key-scopes legend { padding:0 6px; font-size:13px; font-weight:600; }
.scope-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.scope-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px; margin-bottom:12px; }
.scope-option { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:13px; }
.key-scopes .scope-option input { width:16px; height:16px; flex:0 0 16px; margin:2px 0 0; accent-color:var(--primary); }
.scope-option span { min-width:0; }
.scope-option strong { font-size:13px; font-weight:600; }
.scope-option small, .key-scopes > small { display:block; color:var(--muted); font-size:12px; line-height:1.6; }
.key-messages-fields { grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:12px; }
.key-messages-fields[hidden] { display:none; }
.scope-badges { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.scope-badge { border:1px solid var(--line); border-radius:6px; padding:3px 8px; color:var(--muted); font-size:11px; line-height:1.5; }
.messages-defaults-card { border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:24px; }
.sampling-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:12px 0}
.sampling-grid .prompt{grid-column:1/-1}.sampling-profile{width:100%;min-width:0;padding:12px;border:1px solid var(--line);border-radius:10px}
.sampling-profile summary,.sampling-options summary{cursor:pointer}.sampling-profile [role=status]{display:block;margin-top:8px;overflow-wrap:anywhere}
.sampling-options{grid-column:1/-1;padding:12px;border:1px solid var(--line);border-radius:10px;min-width:0}.sampling-options textarea,.sampling-profile textarea{min-height:64px}
.mm-view [hidden], .mm-gpu [hidden] { display: none !important; }
.playground-thinking { margin:12px 0; padding:10px 12px; border:1px solid var(--line-soft); border-radius:8px; color:var(--muted); }
.playground-thinking summary { cursor:pointer; font-size:12px; }
.playground-thinking pre { max-height:240px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.6; }
.mm-view, .mm-gpu { min-width: 0; }
.mm-toolbar, .mm-heading, .mm-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mm-toolbar { margin-bottom: 14px; align-items: end; }
.mm-toolbar .field { flex: 1 1 260px; max-width: 500px; }
.mm-toolbar button, .mm-actions button { min-width:max-content; white-space:nowrap; flex-shrink:0; }
.mm-view .field, .mm-gpu .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-size: 12px; color: var(--muted); }
.mm-view input, .mm-view select, .mm-gpu select { width: 100%; min-width: 0; box-sizing: border-box; }
.mm-heading { justify-content: space-between; margin-bottom: 16px; }
.mm-heading h3 { margin: 0; font-size: 16px; }
.mm-muted { color: var(--muted); font-size: 12px; line-height: 1.65; }
.mm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin: 18px 0; }
.mm-card { padding: 18px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; background: var(--panel); }
.mm-card h3 { margin: 0 0 8px; font-size: 15px; }
.mm-card p { margin: 8px 0 14px; font-size: 12px; line-height: 1.6; }
.mm-card code, .mm-card strong, .mm-card p { overflow-wrap: anywhere; }
.mm-card code { font-size: 12px; }
#mmNotice:empty { display: none; }
#mmLibrary .mm-library-card { display: flex; flex-direction: column; gap: 18px; }
#mmLibrary .mm-card-info { display: grid; justify-items: start; gap: 8px; min-width: 0; }
#mmLibrary .mm-card-info h3 { margin: 0; line-height: 1.4; }
#mmLibrary .mm-card-info code { line-height: 1.5; }
#mmLibrary .mm-card-info p { margin: 4px 0 0; }
#mmLibrary .mm-card-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#mmLibrary .mm-pill { margin: 0; }
#mmLibrary .mm-card-controls { display: grid; gap: 12px; min-width: 0; margin-top: auto; }
#mmLibrary .mm-card-controls:empty { display: none; }
#mmLibrary .mm-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 115px), 1fr)); gap: 8px; }
#mmLibrary .sampling-profile-host { min-width: 0; }
#mmLibrary .sampling-profile > summary { padding: 0; line-height: 20px; }
#mmLibrary .sampling-profile[open] > summary { margin-bottom: 12px; }
#mmLibrary:has(.sampling-profile[open]) { align-items: start; }
.mm-pill { display: inline-block; font-size: 11px; color: var(--muted); border: 1px solid var(--line); padding: 3px 8px; border-radius: 20px; margin: 6px 5px 2px 0; }
.mm-pill[data-up=true] { background: var(--primary-soft); color: var(--cyan); }
.mm-editor { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--bg); margin: 18px 0; }
.mm-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mm-vllm, .mm-wide, .mm-advanced { grid-column: 1 / -1; }
.mm-advanced .mm-form { margin-top: 16px; }
.mm-view summary, .mm-gpu summary { cursor: pointer; padding: 10px 0; font-size: 13px; }
.mm-search-results { display: grid; gap: 8px; max-height: 250px; overflow: auto; margin-bottom: 16px; }
.mm-search-results button { text-align: left; overflow-wrap: anywhere; }
.mm-work { margin-top: 18px; }
.mm-job { border-top: 1px solid var(--line-soft); padding: 14px 0; }
.mm-job p { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.mm-job pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; max-height: 260px; overflow: auto; }
.mm-error { color: var(--red); }
.mm-gpu { margin-bottom: 28px; }
.mm-gpu-state { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.mm-gpu-state .mm-card { padding: 14px; font-size: 12px; }
.mm-gpu-state strong { display: block; margin: 7px 0; font-size: 14px; overflow-wrap: anywhere; }
.mm-gpu-state .mm-device-info, .mm-vram-card { grid-column: 1 / -1; }
.mm-vram-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 14px; margin: 10px 0; }
.mm-vram-device { display: grid; gap: 7px; min-width: 0; }
.mm-vram-values { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.mm-vram-device progress { width: 100%; height: 9px; accent-color: var(--primary); }
.mm-vram-card[data-stale=true] progress { opacity: .45; }
@media(max-width: 760px) { .mm-form { grid-template-columns: repeat(2, minmax(0,1fr)); } .mm-gpu-state { grid-template-columns: 1fr; } .mm-toolbar .field { flex-basis:100%; max-width:none; } }
@media(max-width: 480px) { .mm-form { grid-template-columns: 1fr; } .mm-editor { padding: 14px; } .mm-toolbar button { flex: 1 1 auto; } }
.mm-view > .panel, #mmLLMContent > .panel { padding: 20px; }
.mm-inventory .mm-card + .mm-card { margin-top: 10px; }
.mm-inventory pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow: auto; font-size: 11px; }
@media(max-width:480px) { .mm-view > .panel, #mmLLMContent > .panel { padding: 14px; } }
.device-identity{margin-bottom:20px;border:1px solid var(--line-soft);border-radius:12px;padding:16px}.device-identity>summary{font-weight:600;cursor:pointer}.device-name-form{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:16px 0}.device-name-form .field{flex:1 1 230px;min-width:0}.device-name-form input,.device-name-form select{width:100%;box-sizing:border-box}.device-name-form button{min-height:42px;white-space:nowrap}.mm-device-info span{display:block;margin-top:8px;overflow-wrap:anywhere}.device-identity .model-meta{overflow-wrap:anywhere}@media(max-width:600px){.device-name-form>button{width:100%}}

/* A screen that is still being filled says so; it never shows an empty list as if nothing existed. */
.mm-loading { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; }
.mm-load { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.mm-load[hidden] { display: none; }
.mm-load button, .mm-loading button, .mm-card > button { min-height: 30px; padding: 4px 12px; }
#mmNativeHint { overflow-wrap: anywhere; }
.strata-dashboard-card{grid-column:1/-1;display:flex;flex-direction:column;gap:12px;min-width:0}
.strata-dashboard-card h3,.strata-dashboard-card p{margin:0}
.strata-dashboard-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.strata-dashboard-open{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border-radius:10px;text-decoration:none;min-height:42px;background:var(--primary);color:var(--primary-text);font-size:13px;font-weight:600}
.strata-dashboard-note{font-size:13px;line-height:1.6}
.strata-dashboard-form{display:grid;gap:14px;margin-top:16px}
.strata-dashboard-form label{display:grid;gap:8px}
.strata-dashboard-host{display:flex;align-items:center;gap:8px;max-width:480px;min-width:0}
.strata-dashboard-host input{min-width:0;flex:1;width:100%}
.strata-dashboard-host span{flex-shrink:0}
.strata-dashboard-card details{margin-top:4px}
.media-view [hidden] {
  display: none !important;
}
.media-input-images {display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;min-width:0;}
.media-input-image {padding:8px 12px;border:1px solid var(--line);border-radius:8px;overflow-wrap:anywhere;max-width:100%;box-sizing:border-box;font-size:12px;}
.media-view {
  min-width: 0;
}
.media-view > .panel,
.media-view > #mediaPlayHome > .panel {
  padding: 20px;
}
.media-view > .panel + .panel {
  margin-top: 18px;
}
.media-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 18px;
  margin: 20px 0;
}
.media-wide {
  grid-column: 1/-1;
}
.media-view .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
}
.media-view input,
.media-view select,
.media-view textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.media-actions {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.media-actions button {
  white-space: normal;
}
.media-actions .field {
  flex: 1 1 180px;
  max-width: 420px;
}
.media-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
  background: var(--panel);
  margin: 16px 0;
}
.media-card h3 {
  margin: 0 0 12px;
}
.media-card p {
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.media-card code {
  overflow-wrap: anywhere;
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}
.media-muted,
.media-view small {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}
.media-notice {
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.media-error {
  color: var(--danger, #dc7979);
}
.media-pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 350px;
  overflow: auto;
  font-size: 12px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.media-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
.media-preview img,
.media-card img {
  display: block;
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  border-radius: 8px;
}
.media-preview audio,
.media-card audio {
  width: 100%;
  max-width: 100%;
}
.media-card .media-actions {
  margin-bottom: 0;
}
.media-card pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.media-type-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.media-type-tabs button {
  min-width: 52px;
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
  transition: none;
}
.media-type-tabs button:hover:not(:disabled) {
  background: var(--panel-2);
}
.media-type-tabs button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-text);
  border-color: var(--primary);
  font-weight: 700;
}
.media-type-tabs button[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--primary);
}
@media (max-width: 520px) {
  .media-view > .panel,
  .media-view > #mediaPlayHome > .panel {
    padding: 16px;
  }
  .media-actions button {
    flex: 1 1 auto;
  }
  .media-card {
    padding: 16px;
  }
  .media-form {
    gap: 16px;
  }
  .media-actions {
    gap: 12px;
  }
}

.media-execution {padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--bg);margin:4px 0 8px;min-width:0;overflow-wrap:anywhere;}
.media-execution h3 {margin:0 0 12px;}.media-execution p {margin:10px 0;line-height:1.6;}
.media-link-button {display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 13px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text);background:var(--panel);font-size:12px;font-weight:550;line-height:1.5;}
.media-link-button:hover {background:var(--panel-2);}
.media-execution .media-actions {margin-top:16px;gap:10px;}

.media-execution {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:start;}
.media-execution .media-execution-actions {justify-content:flex-end;align-items:center;max-width:440px;margin:0;}
.media-execution-content {min-width:0;}
.media-connection {display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border:1px solid var(--line);border-radius:20px;font-size:12px;font-weight:600;}
.media-connection::before {content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.media-connection[data-state="ready"] {color:var(--green);border-color:color-mix(in srgb,var(--green) 25%,var(--line));background:color-mix(in srgb,var(--green) 6%,var(--panel));}
.media-connection[data-state="required"] {color:var(--amber);}
.media-form .media-form {margin:0;}
.media-form > .media-actions {margin:0;}
.media-notice:empty {display:none;}
.media-lora-options {display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;}
.media-lora-section h3 {margin:0 0 8px;}
.media-lora-section p {margin:8px 0;}
.media-input-image {display:flex;flex-direction:column;gap:8px;padding:10px;}
.media-input-image[draggable="true"] {cursor:grab;}
.media-input-image img {width:100%;height:110px;object-fit:contain;background:var(--panel-2);border-radius:6px;}
.media-input-image .media-reference-name {font-size:12px;overflow-wrap:anywhere;}
.media-input-image .media-reference-actions {display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:auto;}
.media-reference-actions button {min-width:28px;min-height:28px;padding:3px 7px;font-size:12px;}
.media-input-image.drag-over {outline:2px solid var(--primary);outline-offset:2px;}
.media-input-image .media-muted {margin:0;font-size:11px;}
@media(max-width:760px) {.media-execution {grid-template-columns:1fr;}.media-execution .media-execution-actions {max-width:none;width:100%;}.media-execution-actions button {flex:0 1 auto;}}

.media-lora-option {display:grid;grid-template-columns:minmax(0,1fr) 90px;align-items:center;gap:16px;flex:1 1 320px;max-width:560px;padding:12px;border:1px solid var(--line);border-radius:8px;}
.media-lora-toggle {display:flex;align-items:center;gap:10px;min-width:0;font-size:13px;color:var(--text);cursor:pointer;}
.media-view .media-lora-toggle input[type="checkbox"] {width:16px;height:16px;flex:0 0 16px;margin:0;}
.media-lora-toggle span {overflow-wrap:anywhere;}
.voice-panel { grid-column: 1 / -1; display: grid; gap: 10px; border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--panel) 92%, transparent); }
.voice-panel[hidden] { display: none; }
.voice-panel h3 { margin: 0; font-size: 14px; }
.voice-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.voice-caps li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; }
.voice-caps li > strong { min-width: 7.5em; }
.voice-status { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-soft); font-size: 12px; }
.voice-status[data-status="available"] { color: var(--green, #3fb27f); border-color: currentColor; }
.voice-status[data-status="not_exposed"], .voice-status[data-status="needs_checkpoint"] { color: var(--amber, #d6a23a); border-color: currentColor; }
.voice-status[data-status="unmeasured"] { color: var(--amber, #d6a23a); border-style: dashed; border-color: currentColor; }
.voice-status[data-status="unsupported"] { color: var(--muted); }
.voice-tags { display: grid; gap: 6px; }
.voice-tags[hidden] { display: none; }
.voice-tag-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.voice-tag-group > span { min-width: 4.5em; color: var(--muted); font-size: 12px; }
.voice-tags button { padding: 2px 10px; font-size: 12px; }
.voice-tags button[data-measured="true"] { border-color: var(--green, #3fb27f); }
.voice-tags button[aria-pressed="true"] { outline: 2px solid var(--accent, currentColor); outline-offset: 1px; }
#ttsInstructionsHint[data-warn="true"] { color: var(--amber, #d6a23a); }
.voice-caps small { color: var(--muted); flex-basis: 100%; }
.voice-library > summary { cursor: pointer; font-weight: 600; }
.voice-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.voice-list li { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 10px; font-size: 13px; }
.voice-list .voice-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.voice-list .voice-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.voice-list .voice-actions button { padding: 3px 10px; font-size: 12px; }
.voice-list .voice-compat { color: var(--muted); font-size: 12px; }
.voice-list .voice-compat[data-ok="true"] { color: var(--green, #3fb27f); }
.voice-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.voice-forms fieldset { display: grid; gap: 8px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.voice-forms fieldset[disabled] { opacity: .55; }
.voice-forms input[type="text"], .voice-forms textarea, .voice-forms select { width: 100%; box-sizing: border-box; }

/* ---- 음성 Playground: one screen for speech recognition and synthesis ---- */
.voice-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; padding: 20px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; }
.voice-pick .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 13px; color: var(--muted); text-transform: none; }
.voice-pick select { width: 100%; min-width: 0; box-sizing: border-box; }
.voice-model-choice { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.voice-model-choice select { flex: 1; }
.voice-model-choice .mc-selected { flex: 0 0 auto; max-width: 45%; }
.mc-selected[hidden] { display: none; }
.mc-selected button { white-space: nowrap; min-height: 40px; padding: 8px 12px; }
.mc-selected small { display: block; margin-top: 6px; overflow-wrap: anywhere; }
.mc-selected small[hidden] { display: none; }
#voiceControl > .mc-flowbox:not(:empty) { margin-bottom: 12px; }
@media (max-width: 520px) {
  .voice-model-choice { flex-direction: column; align-items: stretch; }
  .voice-model-choice .mc-selected { max-width: none; }
  .mc-selected button { width: 100%; }
}
.voice-avail { grid-column: 1 / -1; display: grid; gap: 4px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 12px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.voice-avail[data-state="empty"] { border-style: dashed; }
.voice-avail button { padding: 2px 10px; min-height: 28px; font-size: 12px; margin-left: 6px; }
.voice-warn { color: var(--amber, #b7791f); }
.voice-pane { margin-top: 14px; min-width: 0; }
.voice-pane[hidden] { display: none; }
.voice-pane > h2, .voice-pane > .test-form { background: var(--panel); }
.voice-pane > h2 { border: 1px solid var(--line-soft); border-radius: 10px 10px 0 0; }
.voice-view [hidden] { display: none !important; }
.voice-pane.media-view .media-form { margin-top: 0; }
/* The task, PC and model are chosen at the top of the screen: the form of the registered model does not repeat them. */
.voice-pane [data-voice-hide] { display: none; }
.voice-avail details { margin: 0; }
.voice-avail summary { cursor: pointer; list-style: none; }
.voice-avail summary::-webkit-details-marker { display: none; }
.voice-avail summary::after { content: " ▸"; color: var(--muted); }
.voice-avail details[open] > summary::after { content: " ▾"; }

/* The selected PC/model and the existing request clock remain visible below the app header. */
.voice-context { position: sticky; top: var(--voice-top, 65px); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 3px 12px #0000000a; min-width: 0; }
.voice-context-info { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; min-width: 0; flex: 1; font-size: 12px; }
.voice-context-info strong { color: var(--primary); }
#voiceContextModel { grid-column: 1 / -1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#voiceContextPC { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
#voiceContextRequest { grid-column: 1 / -1; color: var(--amber, #b7791f); overflow-wrap: anywhere; }
.voice-context-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.voice-context-tools .pill { font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; }
.voice-context-tools button { min-height: 32px; padding: 5px 10px; font-size: 12px; white-space: nowrap; }
.voice-availability { grid-column: 1 / -1; min-width: 0; font-size: 12px; }
.voice-availability > summary, .voice-details > summary { cursor: pointer; font-weight: 600; }
.voice-availability .voice-avail { margin-top: 10px; }
.voice-workspace { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; min-width: 0; }
.voice-input-card, .voice-result-card { display: grid; gap: 16px; min-width: 0; border: 1px solid var(--line-soft); border-radius: 12px; padding: 20px; background: var(--panel); scroll-margin-top: calc(var(--voice-top, 65px) + var(--voice-context-height, 90px) + 16px); }
.voice-workspace h3 { margin: 0; font-size: 14px; }
.voice-workspace .field { display: grid; gap: 8px; min-width: 0; text-transform: none; font-family: inherit; }
.voice-workspace input, .voice-workspace select, .voice-workspace textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.voice-workspace textarea { min-height: 80px; resize: vertical; }
.voice-workspace #ttsTestInput { min-height: 128px; }
.voice-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.voice-details { min-width: 0; border-top: 1px solid var(--line-soft); padding-top: 12px; font-size: 12px; }
.voice-details > :not(summary) { margin-top: 12px; }
.voice-workspace .test-actions { justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
.voice-workspace .voice-panel { padding: 0; border: 0; background: none; min-width: 0; }
.voice-workspace .voice-forms { grid-template-columns: minmax(0, 1fr); }
.voice-workspace .output { margin: 0; min-width: 0; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.voice-workspace .media-preview { margin: 0; min-width: 0; }
.voice-workspace audio { width: 100%; max-width: 100%; }
.voice-workspace .test-media { padding: 0; grid-template-columns: minmax(0, 1fr); }
.voice-pane #mediaPrompt, .voice-pane #mediaPreview, #voicePicker { scroll-margin-top: calc(var(--voice-top, 65px) + var(--voice-context-height, 90px) + 16px); }
@media (min-width: 1200px) {
  .voice-workspace { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr); }
  .voice-result-card { position: sticky; top: calc(var(--voice-top, 65px) + var(--voice-context-height, 90px) + 16px); }
}
@media (max-width: 760px) {
  .voice-context { align-items: stretch; flex-direction: column; gap: 8px; padding: 10px 12px; }
  .voice-context-info { font-size: 11px; }
  .voice-context-tools { justify-content: flex-start; }
  .voice-context-tools .pill { margin-right: auto; }
  .voice-input-card, .voice-result-card { padding: 16px; }
}
.voice-view .mc-flowbox { scroll-margin-top: calc(var(--voice-top, 65px) + var(--voice-context-height, 90px) + 16px); }
.voice-context-tools { min-width: 0; max-width: 60%; }
.voice-context-tools .pill { max-width: 100%; }
@media (max-width: 760px) { .voice-context-tools { max-width: none; } }
.voice-input-label { display: flex; justify-content: space-between; gap: 12px; }
.voice-input-label small { font-weight: 400; }
.voice-options-grid > .field:has(+ .field[hidden]) { grid-column: 1 / -1; }
.lic { display: grid; gap: 4px; min-width: 0; margin-top: 6px; }
.lic-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.lic-name { font-size: 12px; overflow-wrap: anywhere; }
.lic-terms, .lic-when { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.lic-pill { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.4; padding: 2px 9px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; cursor: help; }
.lic-pill.lic-allowed { color: var(--green); border-color: var(--green); }
.lic-pill.lic-conditional { color: var(--amber); border-color: var(--amber); }
.lic-pill.lic-noncommercial { color: var(--red); border-color: var(--red); }
.lic-gap { color: var(--amber); }
.lic-pill.lic-partial { white-space: normal; }
/* 모델 관리 패널: Playground 안에서 선택한 GPU의 모델을 불러오고 내리는 곳 */
.mc-host { grid-column: 1 / -1; min-width: 0; text-transform: none; font-family: inherit; }
.mc-host[hidden] { display: none; }
.mc-panel { border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 14px; background: var(--panel); min-width: 0; }
.mc-panel > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.mc-body { display: grid; gap: 12px; margin-top: 12px; min-width: 0; }
.mc-body .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 13px; color: var(--muted); text-transform: none; }
.mc-body select { width: 100%; min-width: 0; box-sizing: border-box; }
.mc-status p, .mc-list p { margin: 0 0 6px; overflow-wrap: anywhere; }
.mc-list { display: grid; gap: 8px; min-width: 0; }
.mc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; min-width: 0; }
.mc-info { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.mc-info strong, .mc-info code { overflow-wrap: anywhere; }
.mc-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.mc-actions small { flex-basis: 100%; text-align: right; overflow-wrap: anywhere; }
.mc-actions button, .mc-flow button { min-height: 32px; padding: 5px 12px; }
.mc-flow { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2, var(--panel)); min-width: 0; }
.mc-flow-body { display: grid; gap: 8px; min-width: 0; }
.mc-flow-body p { margin: 0; overflow-wrap: anywhere; }
.mc-flow.mc-failed { border-color: var(--red); }
.mc-flow.mc-done { border-color: var(--green, var(--primary)); }
@media (max-width: 520px) {
  .mc-row { grid-template-columns: minmax(0, 1fr); }
  .mc-actions button { flex: 1 1 auto; }
}
.generated-view > .panel { padding:20px; }
.generated-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.generated-controls .field { min-width:150px; max-width:260px; }
.generated-check { display:inline-flex; align-items:center; gap:8px; font-size:13px; }
.generated-check input { width:16px; height:16px; margin:0; }
.generated-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:18px; margin:18px 0; }
.generated-card { border:1px solid var(--border); border-radius:12px; padding:14px; min-width:0; }
.generated-card img { display:block; width:100%; aspect-ratio:1; object-fit:contain; border-radius:8px; background:var(--bg); }
.generated-card p { overflow-wrap:anywhere; font-size:13px; line-height:1.6; }
.generated-card .generated-prompt { white-space:pre-wrap; max-height:8em; overflow:auto; }
.generated-card .generated-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.generated-actions button { white-space:nowrap; }
.generated-sharing { border-top:1px solid var(--border); margin-top:14px; padding-top:12px; display:flex; flex-direction:column; gap:10px; }
.generated-sharing .generated-actions { margin-top:0; }
.generated-sharing label { display:flex; flex-direction:column; gap:6px; font-size:13px; }
.generated-sharing input, .generated-sharing select { width:100%; min-width:0; box-sizing:border-box; }
.generated-share-state { font-weight:600; margin:0; }
.generated-share-note { margin:0; }
.generated-share-url { font-size:12px; }
@media(max-width:480px) { .generated-view > .panel {padding:14px;} }

.generated-card video {width:100%;max-height:360px;object-fit:contain;border-radius:8px;background:var(--bg);}
.op-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  min-height: 620px;
}
.op-inline-job { padding: 14px; margin: 8px 12px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); min-width: 0; }
.op-inline-job p, .op-inline-job small { overflow-wrap: anywhere; }
.op-inline-job pre { max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; padding: 10px; background: var(--bg); border-radius: 6px; }
.op-attachment-row, .op-attachment-links { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0; min-width: 0; }
.op-attachment-row span, .op-attachment-links a { overflow-wrap: anywhere; min-width: 0; }
.op-tool[data-status="awaiting_approval"], .op-tool[data-status="queued"] { border-color: var(--primary); }
.op-sessions {
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  background: var(--bg);
}
.op-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.op-row h3 {
  margin: 0;
  font-size: 14px;
}
.op-sessions h3 {
  font-size: 12px;
  color: var(--muted);
}
.op-sessions button {
  max-width: 100%;
}
.op-session {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 7px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 12px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.op-session.active {
  background: var(--primary-soft);
  color: var(--cyan);
}
.op-sessions .op-session:hover:not(:disabled) {
  background: var(--panel-2);
  color: var(--text);
}
.op-sessions .op-session.active,
.op-sessions .op-session.active:hover:not(:disabled) {
  background: var(--primary-soft);
  color: var(--cyan);
}
.op-session small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
}
.op-workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.op-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.op-controls label,
.op-control,
.op-card label {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.op-controls select,
.op-card input,
.op-card select {
  width: 100%;
  padding: 9px;
}
.op-chat {
  flex: 1;
  min-height: 330px;
  max-height: 65vh;
  overflow: auto;
  overscroll-behavior: auto;
  padding: 20px;
}
.op-welcome {
  text-align: center;
  max-width: 500px;
  margin: 60px auto;
}
.op-spark {
  color: var(--cyan);
  font-size: 32px;
}
.op-welcome h3 {
  font-size: 24px;
  font-weight: 550;
  letter-spacing: -0.05em;
}
.op-welcome p,
.op-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.op-prompts {
  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 22px 0;
}
.op-link {
  border: 0;
  background: transparent;
  color: var(--cyan);
}
.op-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.85;
  font-size: 13px;
  margin: 0 0 18px;
  padding: 12px 15px;
  border-radius: 9px;
  background: var(--bg);
  max-width: 100%;
}
.op-configuration {
  border-bottom: 1px solid var(--line-soft);
}
.op-configuration > summary {
  padding: 13px 20px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
}
.op-configuration > summary span {
  margin-left: 10px;
  font-size: 11px;
  color: var(--muted);
}
.op-configuration .op-controls {
  border: 0;
  padding-top: 4px;
}
.op-chat {
  padding: 26px clamp(16px, 3vw, 42px);
  scroll-behavior: auto;
}
.op-chat .op-message {
  white-space: normal;
  margin: 0 auto 26px;
  max-width: 900px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.8;
}
.op-chat .op-message.user {
  width: fit-content;
  max-width: min(88%, 800px);
  margin-right: 0;
  padding: 12px 18px;
  border-radius: 16px 16px 4px 16px;
  background: var(--primary-soft);
}
.op-message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.op-speaker {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.op-speaker:before {
  content: "✦";
  color: var(--primary);
  margin-right: 7px;
}
.op-chat .op-copy {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  min-height: 28px;
  padding: 4px 7px;
  border-radius: 5px;
}
.op-chat .op-copy:hover {
  color: var(--text);
  background: var(--panel-2);
}
.op-markdown {
  min-width: 0;
  overflow-wrap: anywhere;
}
.op-markdown > :first-child {
  margin-top: 0;
}
.op-markdown > :last-child {
  margin-bottom: 0;
}
.op-markdown p {
  margin: 0 0 1em;
}
.op-markdown h1,
.op-markdown h2,
.op-markdown h3,
.op-markdown h4 {
  display: block;
  color: var(--text);
  padding: 0;
  border: 0;
  margin: 1.5em 0 0.6em;
  line-height: 1.5;
  letter-spacing: -0.02em;
}
.op-markdown h1 {
  font-size: 22px;
}
.op-markdown h2 {
  font-size: 19px;
}
.op-markdown h3 {
  font-size: 16px;
}
.op-markdown ul,
.op-markdown ol {
  padding-left: 1.6em;
  margin: 0.7em 0 1em;
}
.op-markdown li {
  padding-left: 0.2em;
  margin: 0.35em 0;
}
.op-markdown li > p {
  margin: 0.3em 0;
}
.op-markdown a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.op-markdown code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.88em;
  background: var(--panel-2);
  padding: 0.15em 0.35em;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
}
.op-chat .op-markdown pre {
  padding: 0;
  max-height: 420px;
  white-space: pre;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  font-size: 12px;
  overflow: auto;
}
.op-markdown pre code {
  display: block;
  min-width: max-content;
  border: 0;
  background: transparent;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.7;
}
.op-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  left: 0;
  padding: 5px 9px 5px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  background: var(--panel-2);
}
.op-markdown blockquote {
  border-left: 3px solid var(--primary);
  margin: 1em 0;
  padding: 8px 16px;
  background: var(--primary-soft);
  border-radius: 0 7px 7px 0;
}
.op-markdown hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.5em 0;
}
.op-markdown img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.op-table-scroll {
  overflow: auto;
  max-width: 100%;
  margin: 1em 0;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.op-markdown table {
  width: 100%;
  margin: 0;
  font-size: 12px;
}
.op-markdown th,
.op-markdown td {
  white-space: normal;
  min-width: 90px;
  padding: 9px 12px;
  line-height: 1.6;
}
.op-thought {
  margin: 0 auto 20px;
  max-width: 900px;
  border-left: 2px solid var(--line);
  padding: 0 0 0 14px;
  color: var(--muted);
}
.op-thought > summary {
  cursor: pointer;
  font-size: 12px;
  padding: 5px 0;
}
.op-thought-body {
  font-size: 12px;
  line-height: 1.8;
  margin-top: 8px;
}
.op-tool {
  max-width: 900px;
  margin: 0 auto 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  overflow: hidden;
}
.op-tool-head {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  padding: 11px 13px;
  font-size: 12px;
}
.op-tool-head::-webkit-details-marker {
  display: none;
}
.op-tool-icon {
  color: var(--primary);
  font-size: 15px;
}
.op-tool-label {
  font-weight: 550;
}
.op-tool-hint {
  flex: 1;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.op-tool-status {
  margin-left: auto;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
}
.op-tool[data-status="completed"] .op-tool-status {
  color: var(--green);
}
.op-tool[data-status="running"] { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.op-tool[data-status="running"] .op-tool-status { color: var(--primary); }
.op-job-progress { display: grid; gap: 5px; margin: 12px 0; padding: 12px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 7%, var(--panel)); min-width: 0; }
.op-progress-title { font-size: 13px; overflow-wrap: anywhere; }
.op-progress-meta, .op-progress-log { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.op-job-progress .op-progress-note { margin: 0; font-size: 12px; color: var(--muted); }
.op-job-progress .op-progress-preview { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 65px; overflow: auto; font-size: 11px; }
.op-activity { display: flex; align-items: center; gap: 10px; width: 100%; flex-shrink: 0; border: 0; border-block: 1px solid var(--line-soft); border-radius: 0; padding: 10px 14px; text-align: left; background: color-mix(in srgb, var(--primary) 7%, var(--panel)); color: var(--text); }
button.op-activity:hover:not(:disabled), button.op-activity:active:not(:disabled) { background: var(--primary-soft); color: var(--text); }
.op-activity > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; flex: 1; }
.op-activity strong { font-size: 12px; overflow-wrap: anywhere; }
.op-activity small { font-size: 10px; color: var(--muted); overflow-wrap: anywhere; }
.op-activity #opActivityTransfer { color:var(--text); font-size:11px; }
.op-activity progress { width:min(100%, 480px); height:5px; accent-color:var(--primary); }
#opActivityFile { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.op-activity-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.op-run-activity { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; width: fit-content; max-width: 100%; min-height: 42px; padding: 10px 14px; margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--primary-soft); color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
.op-run-activity::before { flex-shrink: 0; color: var(--primary); }
.op-run-activity[data-elapsed]::after { font-size: 11px; color: var(--muted); }
.op-hf-progress { display: grid; gap: 8px; margin-block: 12px; }
.op-hf-progress p { margin: 0; }
.op-hf-progress progress { display: block; width: 100%; height: 8px; accent-color: var(--primary); }
.op-activity[data-job] .op-activity-dot { width: 12px; height: 12px; border: 2px solid var(--primary); border-right-color: transparent; background: transparent; animation: spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .op-activity[data-job] .op-activity-dot { animation: none; border-right-color: var(--primary); } }
.op-activity-link { color: var(--primary); font-size: 11px; white-space: nowrap; }
.op-tool[data-status="failed"] {
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
}
.op-tool[data-status="failed"] .op-tool-status,
.op-tool-error {
  color: var(--red);
}
.op-tool-data,
.op-tool-error {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
}
.op-tool-data summary {
  cursor: pointer;
  color: var(--muted);
}
.op-tool-data pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 280px;
  overflow: auto;
  font-size: 11px;
  line-height: 1.7;
}
.op-tool-download {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line-soft);
}
.op-download-link,
.op-download-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  text-decoration: none;
}
.op-download-link:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--text);
}
.op-download-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.op-download-icon { flex-shrink: 0; color: var(--primary); font-size: 16px; }
.op-download-label { flex-shrink: 0; font-weight: 550; }
.op-download-name { min-width: 0; overflow-wrap: anywhere; }
.op-tool-inventory {
  padding: 2px 14px 12px;
}
.op-tool-worker {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
}
.op-tool-worker span,
.op-tool-worker small {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.op-notice {
  margin: 12px auto 20px;
  max-width: 900px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel-2);
  overflow-wrap: anywhere;
}
.op-notice.is-error {
  color: var(--red);
  border-left: 3px solid var(--red);
}
.op-turn-limit strong { display: block; color: var(--text); }
.op-turn-limit p { margin: 8px 0; }
.op-turn-limit .op-tool-data { margin: 0; }
.op-markdown .hljs-keyword,
.op-markdown .hljs-selector-tag {
  color: var(--primary);
}
.op-markdown .hljs-string,
.op-markdown .hljs-attr {
  color: var(--green);
}
.op-markdown .hljs-number,
.op-markdown .hljs-literal {
  color: var(--cyan);
}
.op-markdown .hljs-comment {
  color: var(--muted);
}
@media (max-width: 640px) {
  .op-configuration > summary span {
    display: none;
  }
  .op-chat .op-message {
    font-size: 13px;
    margin-bottom: 20px;
  }
  .op-chat .op-message.user {
    max-width: 94%;
    padding: 11px 14px;
  }
  .op-tool-worker {
    grid-template-columns: 1fr auto;
  }
  .op-tool-worker span {
    grid-row: 2;
    grid-column: 1 / -1;
  }
}
.op-message.user {
  margin-left: 12%;
  background: var(--primary-soft);
}
.op-message.tool_start,
.op-message.tool_result,
.op-message.reasoning,
.op-message.usage {
  font-size: 11px;
  color: var(--muted);
  padding: 6px 12px;
  background: transparent;
  border-left: 2px solid var(--line);
  border-radius: 0;
}
.op-message summary {
  cursor: pointer;
}
.op-message pre {
  white-space: pre-wrap;
  font-size: 11px;
  max-height: 240px;
  overflow: auto;
  color: var(--muted);
}
.op-message.error,
.op-message.failed {
  color: var(--red);
}
.op-composer {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line-soft);
}
.op-composer textarea {
  width: 100%;
  resize: vertical;
  min-height: 75px;
  max-height: 240px;
  border: 0;
  background: transparent;
  box-sizing: border-box;
  padding: 5px 0 14px;
}
.op-muted {
  font-size: 10px;
  color: var(--muted);
}
.op-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.op-error {
  color: var(--red);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.op-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.op-card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 22px;
  border-radius: 11px;
  margin-bottom: 18px;
  min-width: 0;
}
.op-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
}
.op-card label {
  margin-bottom: 15px;
}
.op-card a:not(.op-login-link) {
  font-size: 11px;
  display: inline-block;
  margin-top: 18px;
  color: var(--cyan);
}
.op-badge {
  font-size: 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 9px;
  color: var(--muted);
}
.op-badge.connected {
  color: var(--green);
  border-color: var(--green);
}
.op-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 800px;
}
.op-profile-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.op-profile-form label {
  margin: 0;
}
.op-profile-form button {
  align-self: end;
}
.op-job {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
  padding: 22px;
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}
.op-job h3 {
  font-size: 15px;
  margin: 0;
}
.op-job p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}
.op-job pre {
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 11px;
  background: var(--bg);
  padding: 12px;
  border-radius: 6px;
}
.op-profile {
  padding: 15px 0;
  border-top: 1px solid var(--line-soft);
}
.op-profile strong {
  font-size: 13px;
}
.op-profile p {
  font-size: 11px;
  margin: 5px 0 12px;
}
.op-empty {
  padding: 50px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 1100px) {
  .op-layout {
    grid-template-columns: 170px minmax(0, 1fr);
  }
  .op-controls {
    grid-template-columns: 1fr 1fr;
  }
  .op-profile-form {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .op-layout {
    grid-template-columns: 1fr;
    min-height: 650px;
  }
  .op-sessions {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 175px;
    overflow: auto;
  }
  .op-sessions #opSessions {
    display: flex;
    gap: 6px;
    overflow: auto;
  }
  .op-session {
    flex: 0 0 160px;
    width: 160px;
  }
  .op-controls {
    padding: 12px;
    gap: 8px;
  }
  .op-chat {
    padding: 12px;
    max-height: 65vh;
  }
  .op-welcome {
    margin: 35px auto;
  }
  .op-welcome h3 {
    font-size: 20px;
  }
  .op-composer {
    padding: 12px;
  }
  .op-account-grid,
  .op-profile-form {
    grid-template-columns: 1fr;
  }
  .op-card,
  .op-job {
    padding: 16px;
  }
  .op-message.user {
    margin-left: 6%;
  }
  .op-controls select {
    max-width: 100%;
  }
}

.op-control-heading {
  display: flex;
  align-items: center;
  min-height: 20px;
  gap: 6px;
}
.op-help-toggle {
  --help-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 var(--help-size);
  width: var(--help-size);
  min-width: var(--help-size);
  max-width: var(--help-size);
  height: var(--help-size);
  min-height: var(--help-size);
  max-height: var(--help-size);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}
.op-help-toggle:hover,
.op-help-toggle:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
}
.op-help-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(300px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  box-sizing: border-box;
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 8px 28px #0002;
  font-size: 12px;
  line-height: 1.7;
}
.op-help-popover p {
  margin: 6px 0 0;
}
.op-help-state {
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
}
.op-settings-actions {
  padding: 8px 20px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--muted);
}
.op-settings-actions button {
  font-size: 11px;
  padding: 6px 10px;
}
.op-controls [hidden],
.op-settings-actions[hidden],
.op-settings-actions [hidden] {
  display: none;
}
@media (max-width: 720px) {
  .op-settings-actions {
    padding: 8px 12px;
  }
  .op-help-toggle {
    --help-size: 24px;
  }
  .op-control-heading {
    min-height: 24px;
  }
}
.op-context {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px 0;
  font-size: 11px;
  color: var(--muted);
}
.op-auth-form {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.op-auth-form strong {
  font-size: 13px;
}
.op-auth-form details {
  margin-top: 12px;
  font-size: 11px;
}
.op-auth-form input[type="file"] {
  font-size: 11px;
}
.op-delegate {
  border-top: 1px solid var(--line);
  padding: 12px 20px;
  font-size: 12px;
}
.op-delegate summary {
  color: var(--cyan);
  cursor: pointer;
}
.op-delegate-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.op-delegate-controls label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  font-size: 11px;
  color: var(--muted);
}
.op-delegate select {
  width: 100%;
  padding: 8px;
}
.op-delegate textarea {
  width: 100%;
  margin: 12px 0;
  resize: vertical;
}
.op-delegations {
  margin: 0 auto 26px;
  max-width: 900px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  overflow-wrap: anywhere;
}
.op-delegations > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}
.op-delegations[open] > summary {
  margin-bottom: 10px;
}
.op-child {
  padding: 12px;
  margin: 8px 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
}
.op-child p {
  color: var(--muted);
  line-height: 1.7;
}
.op-child pre {
  white-space: pre-wrap;
  max-height: 200px;
  overflow: auto;
  font-size: 11px;
}
.op-child button {
  font-size: 11px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .op-delegate-controls {
    grid-template-columns: 1fr;
  }
  .op-context,
  .op-delegate {
    padding: 12px;
  }
}
.op-login-command {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--bg);
  padding: 10px;
  border-radius: 6px;
  font-size: 10px;
}

.op-context span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.op-device-login {
  padding: 14px;
  margin: 14px 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.7;
}
.op-device-code {
  width: 100%;
  min-width: 0;
  font: 600 23px monospace;
  letter-spacing: 3px;
  text-align: center;
  margin: 8px 0 14px;
}
.op-auth-form .op-actions {
  align-items: center;
}
.op-auth-form .op-actions > button,
.op-auth-form .op-actions > .op-login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 0 13px;
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.3;
  white-space: nowrap;
}
.op-auth-form .op-login-link {
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-text);
  text-decoration: none;
}
.op-auth-form .op-login-link:hover {
  background: color-mix(in srgb, var(--primary) 90%, var(--text));
}
.op-codex-auth .op-note {
  overflow-wrap: anywhere;
}
.op-codex-auth select {
  max-width: 100%;
  width: 100%;
}

/* Keep one message scroll area, with the composer always inside the workspace. */
.views:has([data-view="op-chat"].active) { padding-bottom:0; }
#opChatError:empty { display:none; }
.op-scroll-stage { min-height:var(--op-expanded-height,0px); }
.op-layout { position:relative; height:max(440px,var(--op-height,78dvh)); min-height:0; }
@media (min-width:861px) {
  body.nav-collapsed .op-layout { grid-template-columns:clamp(240px,22vw,280px) minmax(0,1fr); }
}
.op-workspace { min-height:0; overflow:hidden; }
.op-sessions { min-height:0; overflow:auto; }
#opSessionSearch { width:100%; box-sizing:border-box; margin:12px 0 4px; padding:9px; font-size:12px; }
.op-session-filters { display:flex; gap:4px; margin:6px 0 10px; }
.op-session-filters button { flex:1; min-width:0; min-height:32px; padding:5px 8px; font-size:12px; }
.op-session-filters button[aria-pressed="true"] { background:var(--panel-3); color:var(--text); border-color:var(--violet); }
.op-conversation-bar { display:flex; align-items:center; gap:10px; padding:10px 18px; border-bottom:1px solid var(--line-soft); min-height:42px; box-sizing:border-box; flex-shrink:0; }
.op-conversation-bar strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.op-mobile-only { display:none; }
.op-context { padding:8px 18px 0; flex-shrink:0; }
.op-configuration { flex-shrink:0; max-height:45%; overflow:auto; }
.op-configuration > summary { padding:10px 18px; }
.op-chat-area { position:relative; min-height:80px; flex:1; display:flex; }
.op-chat { min-height:0; max-height:none; width:100%; box-sizing:border-box; overflow-anchor:none; }
.op-history-loading { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:8px; max-width:calc(100% - 24px); padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); box-shadow:0 2px 10px #0001; font-size:12px; }
.op-latest { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); box-shadow:0 3px 15px #0003; font-size:11px; }
.op-latest[hidden] { display:none; }
.op-delegate { flex-shrink:0; margin:0; padding:9px 18px; max-height:180px; overflow:auto; }
.op-composer { padding:8px 18px 10px; flex-shrink:0; }
.op-pending { padding:8px 18px; flex:0 1 auto; min-height:0; max-height:170px; overflow:auto; border-top:1px solid var(--border); }
.op-pending > p { margin:3px 0 6px; }
.op-pending-item { padding:6px 0; border-top:1px solid var(--border); }
.op-pending-text { white-space:pre-wrap; overflow-wrap:anywhere; max-height:60px; overflow:auto; font-size:13px; }
.op-pending .op-actions { margin-top:4px; }
.op-pending button { white-space:nowrap; padding:5px 9px; min-height:32px; font-size:12px; }
.op-composer textarea { min-height:36px; max-height:120px; height:36px; resize:none; padding:8px 0; font-size:14px; line-height:20px; overflow-y:hidden; }
.op-composer .op-attachment-row { margin:0 0 3px; }
.op-composer .op-attachment-row button { min-height:30px; padding:4px 8px; font-size:11px; }
.op-composer .op-attachment-row > button { white-space:nowrap; flex-shrink:0; }
#opAttachmentNames { display:flex; flex-basis:100%; flex-wrap:wrap; gap:5px; max-height:80px; overflow:auto; }
#opAttachmentNames:empty { display:none; }
.op-attachment-chip { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:2px 4px 2px 7px; border:1px solid var(--line-soft); border-radius:6px; box-sizing:border-box; }
.op-attachment-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.op-composer .op-attachment-chip button { min-height:24px; min-width:24px; padding:2px; flex-shrink:0; }
#opRunState { max-width:65%; line-height:1.5; }
.op-inline-job > strong { display:none; }
.op-inline-job > small { display:block; margin-top:8px; }
.op-inline-job .op-command-details, .op-inline-job .op-output-details { margin:10px 0; }
.op-inline-job details > summary { cursor:pointer; font-size:12px; color:var(--muted); }
.op-inline-job pre { max-height:220px; white-space:pre; overflow-wrap:normal; }
.op-job-result-note { font-size:12px; line-height:1.7; }
.op-tool-raw { margin:0 12px 12px; border-top:1px solid var(--line-soft); padding-top:8px; }
.op-tool-raw > summary { color:var(--muted); font-size:11px; cursor:pointer; }
@media(max-width:720px) {
  .op-layout { display:block; height:max(360px,var(--op-height,78dvh)); border-radius:10px; }
  .op-layout[data-keyboard="true"] { height:var(--op-height,60dvh); }
  .op-layout[data-keyboard="true"] .op-chat-area { min-height:40px; }
  .op-layout[data-keyboard="true"] .op-context,
  .op-layout[data-keyboard="true"] .op-configuration,
  .op-layout[data-keyboard="true"] .op-settings-actions,
  .op-layout[data-keyboard="true"] .op-delegate { display:none; }
  .op-workspace { height:100%; }
  .op-mobile-only { display:inline-flex; }
  .op-sessions { display:none; position:absolute; inset:0; z-index:12; max-height:none; border:0; padding:14px; }
  .op-layout[data-history-open="true"] .op-sessions { display:block; }
  .op-sessions #opSessions { display:block; overflow:visible; }
  .op-sessions .op-session { width:100%; }
  .op-conversation-bar { padding:8px 10px; }
  .op-conversation-bar button { font-size:11px; min-height:32px; padding:6px 8px; }
  .op-context { padding:6px 10px 0; gap:6px; font-size:10px; }
  .op-configuration > summary { padding:8px 10px; }
  .op-chat { padding:12px 10px; }
  .op-composer { padding:6px 10px max(8px,env(safe-area-inset-bottom)); }
  .op-composer textarea { font-size:16px; }
  .op-composer .op-row { gap:6px; flex-wrap:nowrap; }
  .op-composer .op-actions button { padding:8px 12px; min-height:36px; font-size:12px; }
  .op-delegate { padding:8px 10px; }
  #opRunState { max-width:58%; font-size:10px; }
  .op-inline-job { margin:6px; padding:10px; }
}

.op-history-notice { display:flex; align-items:center; gap:10px; padding:8px 12px; font-size:12px; color:var(--red); flex-shrink:0; }
.op-history-notice[hidden], .op-catalog-state[hidden] { display:none; }
.op-history-notice span { flex:1; min-width:0; overflow-wrap:anywhere; }
.op-history-notice button { font-size:11px; padding:6px 9px; }
.op-catalog-state { padding:0 18px 10px; margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
#opSessions .op-session[hidden] { display:none; }
@media(max-width:720px) { .op-catalog-state { padding:0 10px 8px; } }
.pgc-layout { display:grid; grid-template-columns:230px minmax(0,1fr); min-height:500px; height:max(500px,72dvh); border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel); }
.pgc-sidebar { display:flex; flex-direction:column; gap:12px; padding:16px; border-right:1px solid var(--line-soft); min-height:0; min-width:0; background:var(--bg); }
.pgc-sidebar > input { width:100%; }
.pgc-sidebar > small { font-size:10px; color:var(--muted); }
.pgc-history { flex:1; overflow:auto; min-height:0; }
.pgc-history button { display:block; width:100%; min-height:55px; padding:10px; margin-bottom:5px; text-align:left; background:transparent; color:var(--text); border:1px solid transparent; }
.pgc-history button[aria-current="true"] { background:var(--primary-soft); border-color:var(--primary-line); }
.pgc-history button:hover { background:var(--panel-2); color:var(--text); }
.pgc-history button strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.pgc-history button small { display:block; margin-top:5px; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.pgc-workspace { display:flex; flex-direction:column; min-width:0; min-height:0; }
.pgc-heading { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--line-soft); }
.pgc-heading input { flex:1; width:0; font-weight:600; border:0; background:transparent; }
.pgc-heading button { flex-shrink:0; }
.pgc-settings { flex:0 0 auto; max-height:38%; overflow:auto; border-bottom:1px solid var(--line-soft); }
.pgc-settings > summary { padding:12px 18px; font-size:12px; color:var(--muted); cursor:pointer; }
.pgc-config { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0 18px 16px; }
.pgc-config select, .pgc-config input, .pgc-config textarea { width:100%; }
.pgc-config textarea { min-height:65px; }
.pgc-system, .pgc-config .sampling-options { grid-column:1/-1; }
.pgc-messages { flex:1; min-height:80px; overflow:auto; padding:20px; }
.pgc-message { max-width:850px; margin:0 auto 22px; min-width:0; }
.pgc-message[data-role="user"] { width:fit-content; max-width:90%; margin-right:0; padding:12px 16px; background:var(--primary-soft); border-radius:12px; }
.pgc-message-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px; color:var(--muted); font-size:11px; }
.pgc-message-head button { margin-left:auto; min-height:28px; padding:4px 8px; }
.pgc-message-body { font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
.pgc-message-body pre { overflow:auto; padding:12px; background:var(--bg); border-radius:8px; }
.pgc-message-body table { display:block; max-width:100%; overflow:auto; }
.pgc-message[data-role="user"] .pgc-message-body { white-space:pre-wrap; }
.pgc-message details { color:var(--muted); font-size:12px; margin-bottom:10px; }
.pgc-message details pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.pgc-message-note { margin-top:8px; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.pgc-composer { padding:12px 18px 16px; border-top:1px solid var(--line-soft); }
.pgc-composer textarea { width:100%; min-height:60px; max-height:160px; resize:vertical; }
.pgc-composer .op-row { margin-top:8px; }
#pgcState { font-size:11px; color:var(--muted); }
#pgcError { flex-shrink:0; margin:8px 18px; }
#pgcError:not([hidden]) { display:block; }
@media (max-width:720px) {
  .pgc-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); height:max(650px,85dvh); }
  .pgc-sidebar { border-right:0; border-bottom:1px solid var(--line-soft); padding:12px; gap:8px; max-height:185px; }
  .pgc-sidebar .pgc-history { min-height:45px; }
  .pgc-sidebar > small { display:none; }
  .pgc-config { padding-inline:12px; gap:10px; }
  .pgc-messages { padding:14px 12px; }
  .pgc-heading, .pgc-composer { padding:10px 12px; }
  .pgc-config select, .pgc-config input, .pgc-config textarea, .pgc-composer textarea { font-size:16px; }
}
.tm-view {
  min-width: 0;
}
.tm-view .panel {
  margin-bottom: 16px;
  padding: 22px;
}
.tm-view h3 {
  margin: 0 0 14px;
  font-size: 14px;
}
.tm-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.tm-heading h3 {
  margin: 0;
}
.tm-heading > div {
  min-width: 0;
}
.tm-meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.tm-notice {
  font-size: 12px;
  color: var(--muted);
  padding: 0 0 12px;
  white-space: pre-line;
}
.tm-notice:empty {
  display: none;
}
.tm-devices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}
.tm-device {
  display: block;
  text-align: left;
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  padding: 17px !important;
  min-width: 0;
}
.tm-device[aria-pressed="true"] {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 1px var(--primary-line);
}
.tm-device strong {
  display: block;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.tm-device .tm-meta {
  display: block;
}
.tm-state {
  font-size: 11px;
  color: var(--green);
}
.tm-state.stale {
  color: var(--amber);
}
.tm-state.offline {
  color: var(--muted);
}
.tm-toolbar {
  display: flex;
  gap: 14px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.tm-toolbar .field {
  min-width: 160px;
}
.tm-toolbar select {
  max-width: 100%;
}
.tm-toolbar > .tm-meta {
  margin-left: auto;
}
.tm-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.tm-kpi {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  min-width: 0;
}
.tm-kpi span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.tm-kpi strong {
  display: block;
  font-size: 23px;
  font-weight: 600;
  margin: 8px 0;
  letter-spacing: -0.05em;
}
.tm-chart-toolbar {
  margin: 24px 0 16px;
}
.tm-chart-toolbar h3 {
  margin-bottom: 6px;
}
.tm-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 12px 0 20px;
}
.tm-charts .panel {
  margin: 0;
  min-width: 0;
}
.tm-chart-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}
.tm-chart-head h3 {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  overflow-wrap: anywhere;
}
.tm-chart-head strong {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.tm-chart-value {
  min-height: 40px;
  font-size: 11px;
}
.tm-chart-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.tm-chart-choice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  overflow-wrap: anywhere;
  min-width: 0;
}
.tm-chart-choice:has(input:checked) {
  background: var(--primary-soft);
  border-color: var(--primary-line);
}
.tm-chart-choice input {
  width: 16px;
  height: 16px;
  min-height: 0;
  flex: none;
  margin: 1px 0 0;
}
.tm-chart-choice small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}
.tm-chart-settings .tm-actions {
  margin-top: 16px;
  padding-top: 16px;
}
@media (min-width: 1440px) {
  .tm-charts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .tm-charts {
    grid-template-columns: minmax(0, 1fr);
  }
  .tm-chart-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 440px) {
  .tm-chart-choices {
    grid-template-columns: minmax(0, 1fr);
  }
}
.tm-chart {
  height: 190px;
  margin: 16px 0 8px;
  position: relative;
}
.tm-chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  outline-offset: 3px;
}
.tm-chart text {
  fill: var(--muted);
  font-size: 11px;
}
.tm-chart .tm-axis {
  stroke: var(--line);
  stroke-width: 1;
}
.tm-chart .tm-line {
  stroke: var(--primary);
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.tm-chart .tm-maximum {
  stroke: var(--muted);
  opacity: 0.4;
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.tm-chart .tm-cursor {
  stroke: var(--primary);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.tm-chart .empty {
  padding: 70px 12px;
}
.tm-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tm-columns > .panel {
  min-width: 0;
}
.tm-rows {
  margin-top: 16px;
}
.tm-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 0;
  font-size: 12px;
  min-width: 0;
}
.tm-row > span:first-child {
  color: var(--muted);
  overflow-wrap: anywhere;
  min-width: 0;
}
.tm-row > span:last-child {
  text-align: right;
  overflow-wrap: anywhere;
  min-width: 0;
}
.tm-service {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}
.tm-service strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.tm-service .tm-heading {
  gap: 8px;
}
.tm-event {
  display: grid;
  grid-template-columns: 138px 58px 1fr;
  gap: 12px;
  font-size: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.tm-event > span:last-child {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.tm-event time {
  color: var(--muted);
}
.tm-event .error,
.tm-event .warning {
  display: inline;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: var(--amber);
}
.tm-event .error {
  color: var(--red);
}
.tm-storage-total {
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 20px 0 12px;
}
.tm-storage-total strong {
  font-size: 27px;
  letter-spacing: -0.04em;
}
.tm-progress {
  height: 8px;
  background: var(--panel-3);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}
.tm-progress > span {
  height: 100%;
  display: block;
  background: var(--primary);
  border-radius: 8px;
}
.tm-storage-kinds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.tm-storage-kind {
  padding: 16px;
  background: var(--panel-2);
  border-radius: 8px;
  min-width: 0;
}
.tm-storage-kind strong {
  display: block;
  font-size: 17px;
  margin: 6px 0;
}
.tm-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0;
}
.tm-fields input {
  width: 100%;
}
.tm-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.tm-check input {
  width: 16px;
  height: 16px;
  min-height: 0;
}
.tm-config > .tm-heading {
  margin: 16px 0;
}
.tm-actions {
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .tm-columns {
    grid-template-columns: 1fr;
  }
  .tm-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tm-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .tm-view .panel {
    padding: 16px;
  }
  .tm-devices {
    grid-template-columns: 1fr;
  }
  .tm-toolbar > .tm-meta {
    width: 100%;
    margin-left: 0;
  }
  .tm-toolbar .field {
    flex: 1;
    min-width: 0;
  }
  .tm-toolbar select {
    width: 100%;
  }
  .tm-kpi {
    padding: 14px;
  }
  .tm-kpi strong {
    font-size: 20px;
  }
  .tm-fields,
  .tm-storage-kinds {
    grid-template-columns: 1fr;
  }
  .tm-chart-panel .field {
    min-width: 0;
    width: 100%;
  }
  .tm-event {
    grid-template-columns: 1fr 58px;
    gap: 6px;
  }
  .tm-event > span:last-child {
    grid-column: 1/-1;
  }
  .tm-storage-total strong {
    font-size: 23px;
  }
}

.tm-capacity {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.tm-capacity .tm-progress {
  height: 5px;
  margin: 10px 0 6px;
}
.tm-capacity strong {
  font-size: 12px;
}
.tm-capacity .tm-heading {
  gap: 8px;
}
.kb-title,
.kb-editor-heading,
.kb-actions,
.kb-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.kb-title {
  justify-content: space-between;
}
.kb-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 550px;
}
.kb-sidebar {
  padding: 20px;
  border-right: 1px solid var(--line-soft);
  min-width: 0;
}
.kb-sidebar .field {
  margin-bottom: 12px;
}
.kb-sidebar form {
  display: flex;
  align-items: end;
  gap: 8px;
}
.kb-sidebar form .field {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.kb-sidebar form button {
  flex: none;
  padding: 9px;
}
.kb-archived {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  margin: 14px 0;
}
.kb-archived input {
  width: auto;
}
.kb-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 60vh;
  overflow: auto;
  margin: 14px -8px;
}
.kb-list button {
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  white-space: normal;
  overflow-wrap: anywhere;
  flex: none;
}
.kb-list button[aria-current="true"] {
  background: var(--primary-soft);
  border-color: var(--primary-line);
}
.kb-list small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}
.kb-main {
  padding: 24px;
  min-width: 0;
}
.kb-main form > * + * {
  margin-top: 16px;
}
.kb-main .field {
  text-transform: none;
}
.kb-main input,
.kb-main select,
.kb-main textarea {
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
}
.kb-main textarea {
  resize: vertical;
  line-height: 1.75;
  font-family: inherit;
}
.kb-main [hidden] {
  display: none;
}
.kb-meta {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.kb-mode button[aria-pressed="true"] {
  background: var(--primary-soft);
  border-color: var(--primary-line);
  color: var(--primary);
}
.kb-preview {
  min-height: 240px;
  line-height: 1.85;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.kb-preview p {
  margin: 6px 0;
  white-space: pre-wrap;
}
.kb-preview h3,
.kb-preview h4,
.kb-preview h5 {
  margin: 22px 0 10px;
}
.kb-preview li {
  margin-left: 20px;
  white-space: pre-wrap;
}
.kb-revision {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.kb-revision summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}
.kb-revision pre {
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.7;
}
@media (max-width: 720px) {
  .kb-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .kb-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    padding: 16px;
  }
  .kb-list {
    max-height: 200px;
  }
  .kb-main {
    padding: 16px;
  }
  .kb-title {
    align-items: flex-start;
  }
  .kb-title .op-help-toggle {
    flex: 0 0 var(--help-size);
  }
}
.al-view [hidden] {
  display: none !important;
}
.al-view .field {
  text-transform: none;
  font-family: inherit;
}
.al-view input,
.al-view select {
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
}
.al-view kbd {
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 5px;
  font: inherit;
  font-size: 11px;
  background: var(--panel);
  margin: 0 1px;
}
.al-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.al-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 560px;
}
.al-sidebar {
  padding: 18px;
  border-right: 1px solid var(--line-soft);
  min-width: 0;
}
.al-sidebar-head,
.al-row,
.al-head,
.al-title,
.al-inline,
.al-savebar,
.al-picker-head,
.al-manual {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.al-sidebar-head {
  justify-content: space-between;
  margin-bottom: 12px;
}
.al-create {
  display: grid;
  gap: 10px;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.al-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.al-list,
.al-deleted {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.al-list {
  max-height: 55vh;
  overflow: auto;
}
.al-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  white-space: normal;
  overflow-wrap: anywhere;
  font-weight: 450;
}
.al-item:hover:not(:disabled) {
  background: var(--panel-2, var(--primary-soft));
}
.al-item[aria-current="true"] {
  background: var(--primary-soft);
  border-color: var(--primary-line);
  color: var(--text);
}
.al-item strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.al-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.al-kindtag {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.al-fold {
  margin-top: 16px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.al-fold summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}
.al-deleted li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.al-deleted small {
  display: block;
  color: var(--muted);
}
.al-kind-table {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.al-kind-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.al-kind-row span {
  overflow-wrap: anywhere;
}
.al-kind-row small {
  display: block;
  color: var(--muted);
}
.al-detail {
  padding: 22px 24px;
  min-width: 0;
}
.al-head {
  justify-content: space-between;
  margin-bottom: 8px;
}
.al-title h3 {
  margin: 0;
  font-size: 20px;
  overflow-wrap: anywhere;
}
.al-dirty {
  font-size: 11px;
  color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line));
  border-radius: 999px;
  padding: 1px 8px;
}
.al-inline {
  align-items: end;
  margin: 8px 0;
}
.al-inline .field {
  flex: 1;
  min-width: 180px;
}
.al-meta {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.al-section {
  margin: 22px 0 8px;
  font-size: 13px;
}
.al-conflict,
.al-warning {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  margin: 12px 0;
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line));
  background: color-mix(in srgb, var(--amber) 8%, var(--panel));
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.6;
}
.al-models {
  list-style: none;
  margin: 8px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: none;
}
.al-model {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  position: relative;
}
.al-model.dragging {
  opacity: 0.35;
}
.al-model.grabbed {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-line);
}
.al-model.drop-before {
  box-shadow: 0 -4px 0 -1px var(--primary);
}
.al-model.drop-after {
  box-shadow: 0 4px 0 -1px var(--primary);
}
.al-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  margin: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  background: var(--panel);
}
.al-grip {
  width: 34px;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  user-select: none;
}
.al-grip:hover:not(:disabled) {
  background: var(--primary-soft);
  color: var(--text);
}
.al-grip[aria-pressed="true"] {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--text);
}
.al-grip::before {
  content: "";
  width: 12px;
  height: 18px;
  background-image: radial-gradient(currentColor 1.4px, transparent 1.6px);
  background-size: 6px 6px;
  background-position: 0 0;
}
.dragging-active .al-grip {
  cursor: grabbing;
}
.al-pos {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}
.al-model-main {
  min-width: 0;
}
.al-model-id {
  font-family: "Cascadia Mono", "Consolas", monospace;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.al-model-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.al-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.al-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dim);
  flex: none;
}
[data-state="up"] > .al-dot {
  background: var(--green);
}
[data-state="busy"] > .al-dot {
  background: var(--amber);
}
[data-state="held"] > .al-dot {
  background: var(--violet);
}
[data-state="circuit_open"] > .al-dot {
  background: var(--red);
}
[data-state="absent"] > .al-dot,
[data-state="unfit"] > .al-dot {
  background: transparent;
  border: 2px solid var(--dim);
}
.al-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  color: var(--muted);
}
.al-badge {
  color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line));
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
}
.al-badge.bad {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
}
.al-model-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.al-model-actions button {
  min-height: 34px;
  min-width: 34px;
  padding: 4px 8px;
}
.al-wait {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.al-savebar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  justify-content: space-between;
  margin-top: 20px;
  padding: 12px 0;
  background: var(--panel);
  border-top: 1px solid var(--line-soft);
}
.al-preview {
  font-size: 13px;
  line-height: 1.7;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.al-preview.pending {
  opacity: 0.55;
}
.al-preview strong {
  font-family: "Cascadia Mono", "Consolas", monospace;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.al-history {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}
.al-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}
.al-event small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.al-picker {
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}
.al-picker::backdrop {
  background: rgba(0, 0, 0, 0.45);
}
.al-picker-form {
  display: grid;
  gap: 12px;
  padding: 18px;
  max-height: calc(100vh - 32px);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
}
.al-picker-head {
  justify-content: space-between;
}
.al-picker-head h3 {
  margin: 0;
}
.al-picker-list {
  overflow: auto;
  min-height: 120px;
  max-height: 46vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.al-picker-group {
  margin: 8px 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.al-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.al-manual {
  align-items: end;
}
.al-manual .field {
  flex: 1;
  min-width: 200px;
}
@media (max-width: 720px) {
  .al-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .al-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    padding: 14px;
  }
  .al-list {
    max-height: 210px;
  }
  .al-detail {
    padding: 16px 14px;
  }
  .al-model {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "grip main"
      "actions actions";
  }
  .al-model .al-grip {
    grid-area: grip;
  }
  .al-model .al-pos {
    display: none;
  }
  .al-model .al-model-main {
    grid-area: main;
  }
  .al-model .al-model-actions {
    grid-area: actions;
    justify-content: flex-end;
  }
  .al-wait {
    grid-template-columns: minmax(0, 1fr);
  }
  .al-savebar {
    flex-direction: column;
    align-items: stretch;
  }
  .al-savebar .al-row {
    justify-content: flex-end;
  }
  .al-event {
    grid-template-columns: minmax(0, 1fr);
  }
}
.api-docs { min-width: 0; }
.api-docs-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.api-docs-nav a { color: var(--muted); font-size: 12px; text-decoration: none; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.api-docs-nav a:hover { color: var(--text); background: var(--panel-2); }
.api-docs-nav a:focus-visible, .api-table-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.api-reference { min-width: 0; overflow-wrap: anywhere; }
.api-reference h3 { margin: 32px 0 14px; scroll-margin-top: 90px; font-size: 18px; }
.api-reference > h3:first-child { margin-top: 0; }
.api-reference p { line-height: 1.85; max-width: 100ch; }
.api-reference pre { max-width: 100%; overflow-x: auto; white-space: pre; line-height: 1.65; }
.api-reference code { font-size: 12px; }
.api-reference pre code { overflow-wrap: normal; }
.api-table-wrap { max-width: 100%; overflow-x: auto; margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; }
.api-reference table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.api-reference th, .api-reference td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.7; }
.api-reference th { font-weight: 600; color: var(--text); }
.api-reference tr:last-child td { border-bottom: 0; }
.api-endpoints { border-top: 1px solid var(--line); padding: 14px 0; }
.api-endpoints summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.api-endpoints table { min-width: 680px; }
.api-endpoints td:first-child { white-space: nowrap; }
.api-endpoints td:nth-child(2) { width: 38%; }
@media (max-width: 600px) {
  .api-reference { padding: 16px; }
  .api-reference h3 { font-size: 16px; scroll-margin-top: 150px; }
  .api-docs-nav { gap: 6px; }
  .api-docs-nav a { font-size: 11px; }
}
.api-docs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.api-docs-actions button { display: inline-flex; align-items: center; gap: 7px; }
.api-docs-actions svg { width: 16px; height: 16px; flex: none; }
.api-docs-link { display: inline-flex; align-items: center; min-height: 38px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); text-decoration: none; font-size: 12px; }
.api-docs-link:hover { background: var(--panel-2); }
.api-docs-copy-status { font-size: 12px; color: var(--muted); line-height: 1.7; }
.api-docs-copy-status:empty { display: none; }
.api-docs-copy-fallback { padding: 16px; margin-bottom: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.api-docs-copy-fallback summary { cursor: pointer; margin-bottom: 12px; }
.api-docs-copy-fallback label { display: block; font-size: 12px; color: var(--muted); }
.api-docs-copy-fallback textarea { display: block; width: 100%; max-width: 100%; margin: 8px 0 12px; padding: 12px; font: 12px/1.7 ui-monospace, monospace; resize: vertical; }
.api-docs-topics { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.api-docs-topics button { min-height:40px; padding:9px 15px; }
.api-docs-topics button[aria-selected=true] { background:var(--primary); color:var(--primary-text); border-color:var(--primary); }
.api-docs-topics button:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.api-docs-selection { color:var(--muted); font-size:12px; line-height:1.8; margin:0 0 18px; }
.api-reference { padding:24px; }
.api-reference li { margin:8px 0; line-height:1.8; }
.api-reference pre { margin:16px 0 22px; padding:16px; border-radius:10px; background:var(--panel-2); }
.api-reference h3:not(:first-child) { padding-top:12px; border-top:1px solid var(--line); }
@media(max-width:600px) { .api-reference { padding:16px; } .api-docs-topics button { flex:1 0 28%; } }
.worker-panel-actions { display:flex; align-items:center; gap:12px; }
.worker-panel-actions button { padding:6px 12px; min-height:32px; font-size:12px; }
.service-worker-intro { padding:16px 20px; margin:0; color:var(--muted); font-size:12px; line-height:1.7; border-bottom:1px solid var(--line); }
.service-worker-name { font-weight:600; color:var(--text); }
.service-worker-state { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.service-worker-state .tag { margin:0; }
.service-worker-state button { min-height:32px; padding:6px 10px; font-size:12px; }
.service-worker-sub { display:block; color:var(--muted); font-size:11px; line-height:1.6; margin-top:5px; }
.service-online { color:var(--green, #208667); }
.connections-view.active { display:grid; gap:20px; }
.connections-view > .view-title { margin-bottom:4px; }
.connections-view .panel > h2 { margin-bottom:0; }
.connection-list { padding:8px 20px; }
.connection-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--line-soft); font-size:12px; }
.connection-row:last-child { border-bottom:0; }
.connection-info { min-width:0; overflow-wrap:anywhere; }
.connection-state { min-width:0; max-width:55%; text-align:right; overflow-wrap:anywhere; }
.connection-state .tag { margin:0; white-space:normal; }
.connection-help { margin:0; color:var(--muted); }
.connections-readonly { margin:0; padding:0 20px 20px; color:var(--muted); font-size:12px; }
.worker-setup-body { padding:20px; display:grid; gap:24px; }
.worker-setup-body p { line-height:1.7; font-size:12px; }
.worker-setup-body h3 { display:flex; align-items:center; gap:8px; font-size:14px; margin:0 0 8px; }
.setup-step { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:0 0 24px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line); font-size:12px; }
.setup-command { display:flex; align-items:center; gap:8px; padding:12px; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; }
.setup-command code { overflow-wrap:anywhere; line-height:1.7; font-size:11px; flex:1; }
.setup-command button { flex-shrink:0; }
.setup-code-row { display:flex; align-items:center; gap:8px; margin-top:8px; }
.setup-code-row input { min-width:0; flex:1; width:0; font-family:ui-monospace,monospace; letter-spacing:2px; text-transform:uppercase; }
#workerPairingPreview { border:1px solid var(--line); border-radius:10px; padding:16px; margin-top:16px; }
#workerPairingPreview[hidden] { display:none; }
.worker-binding-option { display:flex; align-items:flex-start; gap:8px; margin:12px 0; font-size:12px; overflow-wrap:anywhere; }
.worker-binding-option input { width:16px; min-height:16px; height:16px; flex:0 0 16px; margin:2px 0 0; }
.worker-device-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; overflow-wrap:anywhere; }
.worker-device-row > div { min-width:0; }
.worker-device-row button { flex-shrink:0; }
.worker-device-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }
.worker-device-info { flex:1; }
.worker-device-info .tag { display:inline-block; margin:8px 0 0; white-space:normal; }
.worker-migration-notice { padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.worker-migration-notice[hidden] { display:none; }
.worker-migration-notice button { display:block; margin-top:10px; }
#workerPairingPreview > button { margin-top:16px; }
#workerPairingNotice { margin:0; color:var(--muted); }
#workerPairingNotice.error { color:var(--red); }
@media(max-width:600px) { .worker-setup-body{padding:16px}.service-worker-intro{padding:16px}.worker-panel-actions{gap:8px}.setup-code-row button{padding:10px}.worker-panel-actions span{font-size:11px}.connection-list{padding:4px 16px}.connection-row{flex-direction:column;align-items:flex-start;gap:8px}.connection-state{max-width:100%;text-align:left}.connections-readonly{padding:0 16px 16px}.worker-device-row{align-items:flex-start;flex-direction:column;gap:12px;padding:16px 0}.worker-device-actions{justify-content:flex-start}.setup-command{align-items:flex-start} }
/* Shared information hierarchy and spacing, following Tping's quiet panels. */
.view-title {
  margin-bottom: 24px;
}
.view-title p {
  max-width: 780px;
  line-height: 1.8;
}
.panel {
  border-radius: 12px;
}
.panel > h2 {
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
}
.metric {
  border-radius: 12px;
  min-height: 140px;
}
.metric .value {
  margin-top: 10px;
  font-size: clamp(27px, 3vw, 36px);
}
.metric-caption {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  margin-top: 6px;
}
#workers {
  padding: 0 20px 20px;
}
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.fleet-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}
.fleet-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fleet-card-head > strong {
  font-size: 16px;
  letter-spacing: -0.025em;
}
.fleet-state {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.fleet-state:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 5px;
  background: currentColor;
}
.fleet-card[data-tone="ready"] .fleet-state {
  color: var(--green);
}
.fleet-card[data-tone="waiting"] .fleet-state {
  color: var(--yellow, var(--muted));
}
.fleet-host {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fleet-card > .worker-id {
  font-weight: 400;
  overflow-wrap: anywhere;
}
.fleet-model {
  margin-top: 12px;
}
.fleet-model > span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 7px;
}
.fleet-model > strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.fleet-load {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 11px;
}
.fleet-load b {
  color: var(--text);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  margin-left: 5px;
}
.fleet-limit,
.fleet-load small {
  color: var(--muted);
  font-size: 10px;
}
.fleet-load-bar {
  height: 4px;
  background: var(--line-soft);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 9px;
}
.fleet-load-bar > span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
  transition: width 0.2s;
}
.fleet-details {
  margin-top: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-2);
  overflow: hidden;
}
.fleet-details > summary {
  cursor: pointer;
  min-height: 44px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.fleet-details[open] > summary {
  border-bottom: 1px solid var(--line-soft);
}
.fleet-details > summary:hover {
  background: var(--panel-3);
}
.fleet-details > summary:focus-visible {
  outline-offset: -3px;
}
.fleet-table {
  overflow-x: auto;
}
.fleet-table table {
  min-width: 850px;
}
.models-box,
.table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.field,
.model-row-group,
.model-row-group select {
  min-width: 0;
}
.field input,
.field select,
.field textarea {
  max-width: 100%;
}
.test-form {
  min-width: 0;
}
.test-media,
.media-box,
.media-actions {
  min-width: 0;
}
.media-actions input[type="file"] {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
tbody tr:hover {
  background: var(--panel-2);
}
.empty {
  color: var(--muted);
  line-height: 1.8;
}
.op-context {
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.op-composer {
  background: var(--panel);
}
.op-composer textarea {
  font-size: 14px;
  line-height: 1.7;
}
.op-sessions {
  padding-top: 20px;
}
.op-session {
  border-radius: 8px;
}
.tm-device {
  white-space: normal;
}
.tm-view strong {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.op-message.commentary {
  color: var(--soft, var(--text));
}
@media (max-width: 1200px) and (min-width: 901px) {
  .fleet-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .fleet-grid {
    grid-template-columns: 1fr;
  }
  .fleet-card {
    padding: 16px;
  }
  .fleet-host {
    margin-bottom: 10px;
  }
  .view-title {
    margin-bottom: 18px;
  }
}
@media (max-width: 640px) {
  #workers {
    padding: 0 16px 16px;
  }
  .test-form,
  .test-media {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fleet-load-bar > span {
    transition: none;
  }
}
[data-view="image-api"] { min-width: 0; }
[data-view="image-api"] .op-auth-form { min-width: 0; margin-block: 1rem; }
[data-view="image-api"] pre {
  max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere;
  word-break: break-word; padding: 1rem; border-radius: 12px;
  background: var(--surface-2, rgba(127, 127, 127, .08));
}
[data-view="image-api"] code { overflow-wrap: anywhere; }
[data-view="image-api"] .op-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
[data-view="image-api"] .field + .field,
[data-view="image-api"] .field + .op-actions { margin-top: 1rem; }
[data-view="image-api"] .image-size-fields:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
[data-view="image-api"] .image-size-fields .field { margin-top: 0; min-width: 0; }
[data-view="image-api"] .op-error, #imageGenerationStatus { white-space: pre-line; overflow-wrap: anywhere; }
[data-view="image-api"] button, [data-view="image-api"] .op-login-link { white-space: nowrap; }
[data-view="image-api"] input, [data-view="image-api"] textarea, [data-view="image-api"] select { max-width: 100%; }
#imagePreview { display: grid; justify-items: start; gap: .75rem; }
.image-history-card { min-width: 0; margin-block: .75rem; padding: 1rem; border: 1px solid var(--border, #7775); border-radius: 12px; overflow-wrap: anywhere; }
.image-history-prompt { white-space: pre-wrap; max-height: 10rem; overflow: auto; }