@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

.turbo-progress-bar {
  background-color: var(--ck-accent);
}

:root {
  --ck-bg: #080b14;
  --ck-bg-strong: #0d1117;
  --ck-surface: #111827;
  --ck-surface-soft: #151d2e;
  --ck-surface-hover: #1a2332;
  --ck-line: #1e293b;
  --ck-line-strong: #334155;
  --ck-text: #e2e8f0;
  --ck-muted: #8b9ab5;
  --ck-dim: #64748b;
  --ck-accent: #06b6d4;
  --ck-accent-soft: rgba(6, 182, 212, 0.1);
  --ck-accent-hover: #22d3ee;
  --ck-success: #2dd4a8;
  --ck-success-soft: rgba(45, 212, 168, 0.1);
  --ck-danger: #f87171;
  --ck-danger-soft: rgba(248, 113, 113, 0.1);
  --ck-warning: #e0a458;
  --ck-warning-soft: rgba(224, 164, 88, 0.1);
  --ck-info: #06b6d4;
  --ck-info-soft: rgba(6, 182, 212, 0.1);
  --ck-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  --ck-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ck-radius: 6px;
  --ck-radius-lg: 10px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
  line-height: 1.5;
  scrollbar-gutter: stable;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.ck-app {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ck-bg);
  color: var(--ck-text);
  font-family: var(--ck-sans);
  font-size: 1rem;
}

body.ck-app > main {
  flex: 1;
}

a {
  color: inherit;
}

pre,
code {
  font-family: var(--ck-mono);
}

pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

code {
  padding: 0.15em 0.4em;
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: 3px;
  font-size: 0.85em;
  color: var(--ck-accent);
}

form.inline-block,
form.button_to {
  display: inline-block;
  margin: 0;
}

.ck-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
}

.ck-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--ck-line);
  background: rgba(8, 11, 20, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
}

.ck-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.ck-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ck-mono);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ck-accent);
}

.ck-brand img {
  display: block;
}

.ck-topbar__copy {
  display: none;
}

.ck-nav,
.ck-actions,
.ck-toolbar,
.ck-inline,
.ck-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.ck-actions {
  justify-content: flex-end;
  flex-shrink: 0;
}

.ck-toolbar__spacer {
  flex: 1;
  min-width: 1rem;
}

.ck-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
  font-family: var(--ck-mono);
  font-size: 0.8rem;
  color: var(--ck-dim);
}

.ck-breadcrumb a {
  color: var(--ck-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.ck-breadcrumb a:hover {
  color: var(--ck-accent);
}

.ck-breadcrumb li + li::before {
  content: '/';
  margin-right: 0.35rem;
  color: var(--ck-dim);
}

.ck-main {
  padding: 1.75rem 0 4rem;
}

.ck-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.ck-step,
.ck-kicker,
.ck-minor-label,
.ck-label {
  margin: 0;
  font-family: var(--ck-mono);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ck-dim);
}

.ck-kicker + .ck-results-table {
  margin-top: 0.45rem;
}

.ck-title,
.ck-section-title,
.ck-card-title,
.ck-item-title {
  margin: 0;
  font-family: var(--ck-mono);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ck-text);
}

.ck-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  margin-right: 0.75rem;
}

.ck-section-title {
  font-size: 1.35rem;
}

.ck-card-title,
.ck-item-title {
  font-size: 1.15rem;
}

.ck-lead,
.ck-copy,
.ck-meta-copy,
.ck-note,
.ck-hint {
  margin: 0.35rem 0 0;
  color: var(--ck-muted);
  font-family: var(--ck-sans);
}

.ck-lead {
  max-width: 56rem;
  font-size: 1.05rem;
}

.ck-copy,
.ck-meta-copy,
.ck-note,
.ck-hint {
  font-size: 0.95rem;
  line-height: 1.6;
}

.ck-note {
  margin-top: 0.5rem;
}

.ck-link {
  text-decoration: none;
  color: var(--ck-text);
  transition: color 0.15s;
}

.ck-link:hover {
  color: var(--ck-accent);
}

.ck-disclosure-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0.5rem 0 0;
  font-family: var(--ck-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ck-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.ck-disclosure-toggle:hover,
.ck-disclosure-toggle:focus-visible {
  color: var(--ck-accent);
  outline: none;
}

.ck-disclosure-toggle::after {
  content: " ↓";
  display: inline-block;
  margin-left: 0.25rem;
  transition: transform 0.15s;
}

.ck-disclosure-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.ck-list {
  display: grid;
  gap: 0.5rem;
}

.ck-list--compact {
  gap: 0.35rem;
}

.ck-grid {
  display: grid;
  gap: 0.75rem;
}

.ck-grid--sidebar {
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 0.8fr);
}

.ck-grid--cards,
.ck-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ck-grid--spaced,
.ck-card--spaced,
.ck-empty--spaced {
  margin-top: 2rem;
}

.ck-card,
.ck-result-card,
.ck-empty {
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-lg);
  background: var(--ck-surface);
}

.ck-card,
.ck-result-card {
  padding: 1.5rem;
}

.ck-empty {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.15rem;
  color: var(--ck-muted);
  font-family: var(--ck-mono);
  font-size: 0.95rem;
  border-style: dashed;
}

.ck-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.ck-split--tight {
  align-items: center;
  margin-bottom: 0.75rem;
}

.ck-stack {
  display: grid;
  gap: 1.5rem;
}

.ck-chip,
.ck-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-family: var(--ck-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ck-chip {
  background: var(--ck-surface-soft);
  border: 1px solid var(--ck-line);
  color: var(--ck-muted);
}

.ck-chip--publish {
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
tr:hover .ck-chip--publish {
  opacity: 0.5;
}
.ck-chip--publish:hover {
  opacity: 1 !important;
  border-color: var(--ck-accent);
  color: var(--ck-accent);
}

.ck-chip--soft {
  background: var(--ck-accent-soft);
  border-color: rgba(6, 182, 212, 0.2);
  color: var(--ck-accent);
}

.ck-chip--warning {
  background: var(--ck-warning-soft);
  border-color: rgba(224, 164, 88, 0.3);
  color: var(--ck-warning);
}

.ck-chip--danger {
  background: var(--ck-danger-soft);
  border-color: rgba(248, 113, 113, 0.3);
  color: var(--ck-danger);
}

.ck-chip--done {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.3);
  color: var(--ck-success);
}

.ck-badge--high {
  background: var(--ck-success-soft);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: var(--ck-success);
}

.ck-badge--medium {
  background: var(--ck-warning-soft);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: var(--ck-warning);
}

.ck-badge--low {
  background: var(--ck-danger-soft);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--ck-danger);
}

.ck-badge--pending {
  background: var(--ck-surface-soft);
  border: 1px solid var(--ck-line);
  color: var(--ck-dim);
}

.ck-badge--running {
  background: var(--ck-info-soft);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: var(--ck-info);
  animation: ck-pulse 2s ease-in-out infinite;
}

@keyframes ck-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.ck-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--ck-radius);
  text-decoration: none;
  font-family: var(--ck-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ck-magic-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  color: var(--ck-warning);
}

.ck-button:hover {
  transform: translateY(-1px);
}

.ck-button:focus-visible {
  outline: 2px solid var(--ck-accent);
  outline-offset: 2px;
}

.ck-button--primary {
  background: var(--ck-accent);
  color: #080b14;
}

.ck-button--primary:hover {
  background: var(--ck-accent-hover);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.25);
}

.ck-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.ck-button:disabled:hover {
  transform: none;
  box-shadow: none;
}

.ck-button--secondary {
  background: transparent;
  border-color: var(--ck-line-strong);
  color: var(--ck-muted);
}

.ck-button--secondary:hover {
  border-color: var(--ck-accent);
  color: var(--ck-accent);
}

.ck-button--success {
  background: transparent;
  border-color: var(--ck-line-strong);
  color: var(--ck-muted);
}

.ck-button--success:hover {
  border-color: var(--ck-accent);
  color: var(--ck-accent);
}

.ck-button--danger {
  background: transparent;
  border-color: var(--ck-line-strong);
  color: var(--ck-muted);
}

.ck-button--danger:hover {
  background: var(--ck-danger-soft);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--ck-danger);
}

.ck-button--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ck-dim);
  padding: 0.35rem 0.65rem;
}

.ck-button--ghost:hover {
  color: var(--ck-muted);
  background: var(--ck-surface);
}

.ck-login {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.ck-login__card {
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 380px;
}

.ck-login__brand {
  font-family: var(--ck-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ck-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0 0 2rem;
}

.ck-login__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ck-login__submit {
  width: 100%;
  margin-top: 0.5rem;
}

.ck-provider-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ck-provider-card {
  display: block;
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
}

.ck-provider-card:hover {
  border-color: var(--ck-line-strong);
  background: var(--ck-surface-hover);
}

.ck-provider-card__header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 1rem 0.35rem;
}

.ck-provider-card__name {
  font-family: var(--ck-mono);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ck-text);
}

.ck-provider-card__key {
  font-family: var(--ck-mono);
  font-size: 0.7rem;
  color: var(--ck-dim);
  letter-spacing: 0.02em;
}

.ck-provider-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  padding: 0 1rem 0.75rem;
  font-size: 0.75rem;
  color: var(--ck-muted);
}

.ck-form-card__models {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  max-width: 36rem;
}

.ck-form-card__footer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ck-form-card__footer-header > div:first-child {
  flex: 1;
  min-width: 0;
}

.ck-form-card__footer-header .ck-icon-btn {
  flex-shrink: 0;
}

.ck-form-card__models .ck-discovery-bar {
  padding: 0 0 0.25rem;
  border-top: none;
  background: none;
}

.ck-discovery-bar {
  padding: 0.4rem 1rem 0.5rem;
  font-size: 0.72rem;
  color: var(--ck-muted);
  border-top: 1px solid var(--ck-line);
}

.ck-field .ck-discovery-bar {
  padding: 0.35rem 0;
  border-top: none;
}

.ck-discovery-bar__label {
  margin-bottom: 0.25rem;
  font-family: var(--ck-mono);
}

.ck-discovery-bar__track {
  height: 4px;
  background: var(--ck-surface);
  border-radius: 2px;
  overflow: hidden;
}

.ck-discovery-bar__fill {
  height: 100%;
  background: var(--ck-accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.ck-discovery-bar__fill--indeterminate {
  width: 30%;
  animation: ck-indeterminate 1.5s infinite ease-in-out;
}

@keyframes ck-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.ck-discovery-bar--failed .ck-discovery-bar__label {
  color: var(--ck-danger);
}

.ck-discovery-bar--completed .ck-discovery-bar__label {
  color: var(--ck-text);
}

.ck-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.7rem 0.35rem 0.65rem;
  margin: 0 0 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--ck-line);
  background: var(--ck-surface-soft);
  font-family: var(--ck-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ck-text);
}

.ck-status-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ck-dim);
}

.ck-status-badge--pending {
  border-color: rgba(139, 154, 181, 0.25);
  color: var(--ck-muted);
}
.ck-status-badge--pending .ck-status-badge__dot {
  background: var(--ck-dim);
}

.ck-status-badge--running {
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.08);
  color: var(--ck-accent);
}
.ck-status-badge--running .ck-status-badge__dot {
  background: var(--ck-accent);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.7);
  animation: ck-pulse 1.5s ease-in-out infinite;
}

.ck-status-badge--completed {
  border-color: rgba(45, 212, 168, 0.35);
  background: rgba(45, 212, 168, 0.08);
  color: var(--ck-success);
}
.ck-status-badge--completed .ck-status-badge__dot {
  background: var(--ck-success);
  box-shadow: 0 0 8px rgba(45, 212, 168, 0.6);
}

.ck-status-badge--failed {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
  color: var(--ck-danger);
}
.ck-status-badge--failed .ck-status-badge__dot {
  background: var(--ck-danger);
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.6);
}

.ck-run-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 1.6rem;
  margin: 2rem 0 1.25rem;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-lg);
  background: var(--ck-surface);
}

.ck-run-status--running {
  border-color: rgba(6, 182, 212, 0.25);
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.05), var(--ck-surface) 70%);
}

.ck-run-status--completed {
  border-color: rgba(45, 212, 168, 0.2);
}

.ck-run-status__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: flex-start;
}

.ck-run-status__metric-label {
  display: block;
  margin: 0 0 0.4rem;
  font-family: var(--ck-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ck-dim);
}

.ck-run-status__metric-value {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  font-family: var(--ck-mono);
  line-height: 1;
}

.ck-run-status__metric-num {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ck-text);
}

.ck-run-status__metric-total {
  font-size: 1rem;
  color: var(--ck-muted);
}

.ck-run-status__metric-fail {
  margin-left: 0.35rem;
  padding: 0.18rem 0.45rem;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
  border-radius: 3px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ck-danger);
}

.ck-run-status__action {
  margin: 0;
  flex: 1 0 100%;
  display: flex;
  justify-content: flex-end;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--ck-line);
}

.ck-run-status__retry {
  appearance: none;
  font-family: var(--ck-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  border: 1px solid rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.08);
  color: var(--ck-danger);
  border-radius: var(--ck-radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.ck-run-status__retry:hover {
  background: rgba(248, 113, 113, 0.16);
  border-color: var(--ck-danger);
}

.ck-run-status__cells {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2.5rem;
  width: 100%;
}

.ck-run-status__label-row {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.ck-run-status__pill {
  margin: 0;
  padding: 0.18rem 0.5rem 0.18rem 0.45rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  background: rgba(0, 0, 0, 0.25);
  border-color: var(--ck-line-strong);
}

.ck-run-status__pill .ck-status-badge__dot {
  width: 6px;
  height: 6px;
}

.ck-run-status__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  flex-shrink: 0;
  min-width: 0;
}

.ck-run-status__cell--grow {
  flex: 1 1 auto;
}

.ck-run-status__cell-value {
  display: flex;
  align-items: center;
  min-height: 2rem;
}

.ck-run-status__summary-line {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--ck-mono);
  font-size: 0.95rem;
  color: var(--ck-text);
}

.ck-run-status__summary-num {
  font-family: var(--ck-mono);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ck-text);
  line-height: 1;
}

.ck-run-status__summary-text {
  font-family: var(--ck-mono);
  color: var(--ck-muted);
}

.ck-run-status__summary-sep {
  color: var(--ck-line-strong);
  margin: 0 0.15rem;
}

.ck-run-status__cell-empty {
  font-family: var(--ck-mono);
  font-size: 1.4rem;
  color: var(--ck-dim);
  line-height: 1;
}

.ck-badge--lg {
  font-size: 1.05rem;
  padding: 0.35rem 0.8rem;
  letter-spacing: 0;
  text-transform: none;
}

.ck-chip--retry {
  appearance: none;
  font-family: var(--ck-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.08);
  color: var(--ck-danger);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}

.ck-chip--retry:hover {
  background: rgba(248, 113, 113, 0.18);
}

@media (max-width: 720px) {
  .ck-run-status {
    flex-direction: column;
    align-items: stretch;
  }
  .ck-run-status__metrics {
    gap: 1.5rem;
  }
}

.ck-model-list-details summary {
  list-style: none;
}

.ck-model-list-details summary::before {
  content: '▸ ';
  color: var(--ck-dim);
}

.ck-model-list-details[open] summary::before {
  content: '▾ ';
}

.ck-model-list__progress {
  margin-top: 0.65rem;
}

.ck-model-list__progress .ck-discovery-bar {
  padding: 0;
}

.ck-model-table-wrap {
  margin-top: 0.85rem;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-surface);
}

.ck-model-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ck-mono);
  font-size: 0.8rem;
}

.ck-model-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.5rem 0.85rem;
  background: var(--ck-surface-soft);
  border-bottom: 1px solid var(--ck-line);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ck-dim);
  text-align: left;
}

.ck-model-table thead th.ck-model-table__cap {
  text-align: center;
  width: 6.5rem;
  white-space: nowrap;
}

.ck-model-table thead th .ck-info-toggle {
  position: relative;
  top: -1px;
}

.ck-model-table tbody tr {
  border-top: 1px solid var(--ck-line);
}

.ck-model-table tbody tr:first-child {
  border-top: 0;
}

.ck-model-table tbody tr:hover {
  background: var(--ck-surface-hover);
}

.ck-model-table td {
  padding: 0.55rem 0.85rem;
  vertical-align: middle;
}

.ck-model-table td.ck-model-table__name {
  color: var(--ck-text);
  letter-spacing: -0.01em;
}

.ck-model-table td.ck-model-table__cap {
  text-align: center;
  width: 6.5rem;
}

.ck-model-table__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: rgba(45, 212, 168, 0.12);
  color: var(--ck-success);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.ck-model-table__dash {
  color: var(--ck-dim);
  font-size: 0.85rem;
}

.ck-model-table__unknown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.12);
  color: var(--ck-muted);
  font-family: var(--ck-mono);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.ck-model-table tr.ck-model-table__section td {
  padding: 0.85rem 0 0.3rem;
  font-family: var(--ck-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ck-dim);
}
.ck-model-table tr.ck-model-table__section:first-child td { padding-top: 0; }

.ck-model-list__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
}

.ck-model-list__summary-label {
  flex: 1;
  font-family: var(--ck-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ck-text);
}

.ck-model-list__summary-count {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--ck-surface-soft);
  border: 1px solid var(--ck-line);
  font-size: 0.7rem;
  color: var(--ck-muted);
  font-weight: 500;
}

.ck-model-list__summary-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.ck-model-list__summary-stamp {
  font-family: var(--ck-mono);
  font-size: 0.7rem;
  color: var(--ck-dim);
  letter-spacing: 0.04em;
}

.ck-model-list__refresh {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
}

.ck-button--warning {
  background: transparent;
  border-color: rgba(245, 158, 11, 0.4);
  color: var(--ck-warning);
}

.ck-button--warning:hover {
  background: var(--ck-warning-soft);
  border-color: var(--ck-warning);
}

.ck-button--info {
  background: transparent;
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--ck-info);
}

.ck-button--info:hover {
  background: var(--ck-info-soft);
  border-color: var(--ck-info);
}

.ck-code,
.ck-note-box {
  margin-top: 0.5rem;
  border-radius: var(--ck-radius);
  padding: 0.85rem;
  font-size: 0.82rem;
  line-height: 1.65;
}

.ck-code {
  font-family: var(--ck-mono);
  background: var(--ck-bg);
  border: 1px solid var(--ck-line);
  color: var(--ck-text);
  font-size: 0.9rem;
}

.ck-code--dark {
  background: #020409;
  border-color: var(--ck-line);
  color: var(--ck-accent);
}

.ck-note-box {
  background: var(--ck-surface-soft);
  border: 1px solid var(--ck-line);
  color: var(--ck-muted);
  font-family: var(--ck-sans);
}

.ck-note-box--strong {
  background: var(--ck-warning-soft);
  border-color: rgba(245, 158, 11, 0.25);
  color: var(--ck-warning);
}


.ck-form-card {
  display: grid;
  gap: 1rem;
  max-width: 36rem;
}

.ck-version-note {
  margin: 0 0 1rem;
  max-width: 36rem;
  font-family: var(--ck-sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ck-muted);
}

.ck-version-change {
  margin: 0.5rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: var(--ck-mono);
  font-size: 0.8rem;
}
.ck-version-change__label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ck-dim);
}
.ck-version-change__old {
  padding: 0.15em 0.5em;
  border-radius: var(--ck-radius);
  background: var(--ck-danger-soft);
  color: var(--ck-danger);
  text-decoration: line-through;
}
.ck-version-change__arrow { color: var(--ck-dim); }
.ck-version-change__new {
  padding: 0.15em 0.5em;
  border-radius: var(--ck-radius);
  background: var(--ck-success-soft);
  color: var(--ck-success);
}

.ck-modal__body .ck-version-change + .ck-suggest-diff { margin-top: 0.9rem; }

.ck-cell-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--ck-mono);
  font-size: 0.8rem;
  color: var(--ck-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ck-cell-link:hover { color: var(--ck-accent-hover); }
.ck-cell-link--delta {
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ck-dim);
}
.ck-cell-link--delta:hover { color: var(--ck-accent); }

/* Version-history table: cell that pairs the version label + publish control (left) with the diff trigger (right) */
.ck-version-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.ck-version-cell__label { display: flex; align-items: center; gap: 0.5rem; }

/* the version currently being viewed: faint accent wash (like the model chips)
   plus a bright accent border drawn on the cells (Safari can't box-shadow a <tr>) */
.ck-results-table tbody tr.ck-results-table__row--active,
.ck-results-table tbody tr.ck-results-table__row--active:hover {
  background: var(--ck-accent-soft);
}
.ck-results-table tbody tr.ck-results-table__row--active td {
  box-shadow: inset 0 2px 0 var(--ck-accent), inset 0 -2px 0 var(--ck-accent);
}
.ck-results-table tbody tr.ck-results-table__row--active td:first-child {
  box-shadow: inset 0 2px 0 var(--ck-accent), inset 0 -2px 0 var(--ck-accent), inset 2px 0 0 var(--ck-accent);
}
.ck-results-table tbody tr.ck-results-table__row--active td:last-child {
  box-shadow: inset 0 2px 0 var(--ck-accent), inset 0 -2px 0 var(--ck-accent), inset -2px 0 0 var(--ck-accent);
}
/* when it's the last row, round its bottom corners so the border isn't clipped
   by the table's rounded container */
.ck-results-table tbody tr.ck-results-table__row--active:last-child td:first-child {
  border-bottom-left-radius: calc(var(--ck-radius-lg) - 1px);
}
.ck-results-table tbody tr.ck-results-table__row--active:last-child td:last-child {
  border-bottom-right-radius: calc(var(--ck-radius-lg) - 1px);
}
.ck-results-table tbody tr.ck-results-table__row--active strong { color: var(--ck-accent-hover); }

.ck-field-hint {
  font-family: var(--ck-sans);
  font-size: 0.8rem;
  line-height: 1.4;
  min-height: 1.12rem;
  margin: 0;
  color: var(--ck-muted);
}

.ck-field--info #refresh-status,
.ck-field--warn #refresh-status,
.ck-field--error #refresh-status {
  color: var(--ck-muted);
}

.ck-field--info .ck-input {
  border-color: var(--ck-accent);
}

.ck-field--info .ck-field-hint {
  color: var(--ck-accent);
}

.ck-field--warn .ck-input {
  border-color: var(--ck-warning);
}

.ck-field--warn .ck-field-hint {
  color: var(--ck-warning);
}

.ck-field--error .ck-input {
  border-color: var(--ck-danger);
}

.ck-field--error .ck-field-hint {
  color: var(--ck-danger);
}

.ck-prompt-summary {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.4rem;
}

.ck-prompt-summary__description {
  margin: 0;
  font-family: var(--ck-sans);
  font-size: 0.82rem;
  color: var(--ck-muted);
}

.ck-prompt-summary__template {
  margin: 0;
  padding: 0.5rem 0.65rem;
  font-family: var(--ck-mono);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ck-muted);
  background: var(--ck-bg);
  border-left: 2px solid var(--ck-line);
  white-space: pre-wrap;
  word-break: break-word;
}

.ck-run-config {
  display: grid;
  gap: 0;
  max-width: 32rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-lg);
  background: var(--ck-surface);
  overflow: hidden;
}

.ck-run-config + .ck-prompt-preview {
  margin-top: 0.5rem;
}

.ck-run-config__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  min-height: 2.75rem;
  font-family: var(--ck-sans);
  font-size: 0.88rem;
}

.ck-run-config__row + .ck-run-config__row {
  border-top: 1px solid var(--ck-line);
}

.ck-run-config__key {
  flex-shrink: 0;
  width: 5rem;
  font-family: var(--ck-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ck-dim);
}

.ck-run-config__none {
  color: var(--ck-dim);
}

.ck-run-config__warn {
  color: var(--ck-warning);
  font-size: 0.82rem;
}

.ck-run-config__note {
  border-top: 1px solid var(--ck-line);
  padding: 0.55rem 1rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  font-family: var(--ck-sans);
  font-size: 0.82rem;
  color: var(--ck-accent);
  background: var(--ck-accent-soft);
}

.ck-status-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.ck-field {
  display: grid;
  gap: 0.4rem;
}

.ck-field--spacious {
  margin-top: 0.3rem;
}

.ck-field--tight {
  gap: 0.3rem;
}

.ck-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-radius);
  background: var(--ck-bg);
  color: var(--ck-text);
  font-family: var(--ck-sans);
  font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ck-input:focus {
  outline: none;
  border-color: var(--ck-accent);
  box-shadow: 0 0 0 3px var(--ck-accent-soft);
}

.ck-input::placeholder {
  color: var(--ck-dim);
}

.ck-input--area {
  min-height: 10rem;
  resize: vertical;
}

.ck-input--code {
  font-family: var(--ck-mono);
  font-size: 0.9rem;
}

.ck-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--ck-accent);
}

.ck-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ck-text);
}

.ck-rubric-builder,
.ck-rubric-display {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.ck-rubric-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.85rem;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-surface-soft);
}

.ck-rubric-row--display {
  background: var(--ck-bg-strong);
}

.ck-rubric-row__stars {
  display: flex;
  align-items: center;
  gap: 1px;
  padding-top: 0.5rem;
}

.ck-rubric-row__fields {
  display: grid;
  gap: 0.6rem;
}

.ck-star {
  stroke-width: 1.75;
}

.ck-star--filled {
  fill: var(--ck-warning);
  stroke: var(--ck-warning);
}

.ck-star--empty {
  fill: none;
  stroke: var(--ck-dim);
}

.ck-step-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

.ck-step-row .ck-input {
  flex: 1;
}

.ck-icon-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--ck-radius);
  padding: 0.375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ck-dim);
  transition: all 0.15s;
}

.ck-icon-btn svg {
  width: 16px;
  height: 16px;
}

.ck-select-with-action {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.ck-select-with-action .ck-input {
  flex: 1;
}

.ck-icon-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--ck-line-strong);
  color: var(--ck-danger);
}

.ck-icon-btn:focus-visible {
  outline: 2px solid var(--ck-accent);
  outline-offset: 2px;
}

.ck-icon-btn--spinning svg {
  animation: ck-spin 0.8s linear infinite;
}

.ck-icon-btn--spinning {
  pointer-events: none;
  color: var(--ck-accent);
}

@keyframes ck-spin {
  to { transform: rotate(360deg); }
}

.ck-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ck-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.25rem 0;
  margin-top: 0.25rem;
  background: none;
  border: none;
  transition: color 0.15s;
}

.ck-add-btn:hover {
  color: var(--ck-text);
}

.ck-step-list {
  padding-left: 1.5rem;
  display: grid;
  gap: 0.4rem;
}

.ck-step-list li {
  color: var(--ck-text);
  line-height: 1.5;
}

.ck-filter-grid {
  display: grid;
  gap: 0.75rem;
}

.ck-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-surface-soft);
  transition: border-color 0.15s;
}

.ck-item:hover {
  border-color: var(--ck-line-strong);
}

.ck-stat-list {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.ck-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ck-line);
  font-family: var(--ck-mono);
  font-size: 0.9rem;
  color: var(--ck-muted);
}

.ck-stat-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ck-stat-row dd {
  margin: 0;
  font-weight: 700;
  color: var(--ck-text);
}

@keyframes ck-flash-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ck-flash {
  margin-bottom: 1.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--ck-radius);
  font-family: var(--ck-sans);
  font-size: 0.9rem;
  line-height: 1.6;
  animation: ck-flash-in 0.22s ease both;
}
.ck-flash--notice { background: rgba(45, 212, 168, 0.08); border-color: rgba(45, 212, 168, 0.32); }
.ck-flash--alert  { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.32); }

/* layout flash: a mono status tag (the engine's kicker treatment) inline before the message */
.ck-flash__label {
  margin-right: 0.6rem;
  font-family: var(--ck-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ck-flash__label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
  vertical-align: 0.12em;
}
.ck-flash--notice .ck-flash__label { color: var(--ck-success); }
.ck-flash--alert  .ck-flash__label { color: var(--ck-danger); }
.ck-flash__body { color: var(--ck-text); }

/* form-error summary inside .ck-flash--alert: title sentence + ck-error-list */
.ck-flash__title { margin: 0; font-weight: 600; color: var(--ck-danger); }

@media (prefers-reduced-motion: reduce) {
  .ck-flash { animation: none; }
}

.ck-banner {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--ck-radius);
  border: 1px solid transparent;
  font-family: var(--ck-sans);
}

.ck-banner--warn {
  border-color: rgba(224, 164, 88, 0.3);
  background: rgba(224, 164, 88, 0.08);
  color: var(--ck-text);
}

.ck-banner__title {
  font-family: var(--ck-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ck-warning);
}

.ck-banner__body {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ck-muted);
}

.ck-csv-table-wrap {
  margin-top: 0.5rem;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-bg-strong);
  overflow: auto;
  max-height: 60vh;
}

.ck-modal__body .ck-csv-table-wrap {
  margin-top: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  max-height: none;
  overflow: visible;
}

.ck-csv-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ck-mono);
  font-size: 0.82rem;
}

.ck-csv-table thead th {
  position: sticky;
  top: 0;
  background: var(--ck-surface);
  border-bottom: 1px solid var(--ck-line);
  text-align: left;
  padding: 0.55rem 0.75rem;
  font-family: var(--ck-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ck-muted);
  white-space: nowrap;
  z-index: 1;
}

.ck-csv-table tbody td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--ck-line);
  color: var(--ck-text);
  vertical-align: top;
  max-width: 32rem;
  transition: background 0.15s;
}

.ck-csv-table tbody tr:hover td {
  background: var(--ck-surface-soft);
}

.ck-csv-cell {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  max-height: 1.55em;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ck-csv-row--expanded .ck-csv-cell {
  -webkit-line-clamp: 99;
  line-clamp: 99;
  max-height: 30em;
}

.ck-csv-table tbody tr:last-child td {
  border-bottom: none;
}

.ck-csv-table thead th.ck-csv-table__rownum,
.ck-csv-table tbody td.ck-csv-table__rownum {
  font-family: var(--ck-mono);
  font-size: 0.72rem;
  color: var(--ck-dim);
  white-space: nowrap;
  text-align: right;
  padding-right: 0.85rem;
  user-select: none;
  width: 1%;
}

.ck-banner__code {
  display: inline-block;
  font-family: var(--ck-mono);
  font-size: 0.82rem;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--ck-line);
  color: var(--ck-text);
}

.ck-error-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

select.ck-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.ck-results-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-lg);
  overflow: hidden;
  font-size: 0.95rem;
}

.ck-results-table th,
.ck-results-table td {
  padding: 0.75rem 1rem;
  text-align: left;
}

.ck-results-table thead th {
  background: var(--ck-surface-soft);
  border-bottom: 1px solid var(--ck-line);
  font-family: var(--ck-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ck-dim);
}

.ck-results-table tbody tr {
  border-bottom: 1px solid var(--ck-line);
  background: var(--ck-surface);
  transition: background 0.15s;
}

.ck-results-table tbody tr:last-child {
  border-bottom: none;
}

.ck-results-table tbody tr:hover {
  background: var(--ck-surface-hover);
}

.ck-results-table td {
  color: var(--ck-muted);
}

.ck-results-table td strong {
  color: var(--ck-text);
  font-family: var(--ck-mono);
  font-weight: 600;
}

.ck-results-table__arrow {
  text-align: right;
  color: var(--ck-dim);
  font-size: 1.1rem;
  white-space: nowrap;
  width: 1%;
}

.ck-results-table td:first-child,
.ck-results-table td:has(time[data-relative-time]) {
  white-space: nowrap;
}

.ck-results-table td:has(time[data-relative-time]) {
  width: 1%;
}

.ck-details {
  margin-top: 1.5rem;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-lg);
  background: var(--ck-surface);
  overflow: hidden;
}

.ck-details__summary {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.15rem;
  font-family: var(--ck-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ck-muted);
  cursor: pointer;
  transition: color 0.15s;
  list-style: none;
}

.ck-details__summary::-webkit-details-marker {
  display: none;
}

.ck-details__summary::before {
  content: '+ ';
  color: var(--ck-dim);
}

.ck-details[open] > .ck-details__summary::before {
  content: '- ';
}

.ck-details__summary:hover {
  color: var(--ck-accent);
}

.ck-details .ck-code {
  margin: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--ck-line);
}

.ck-run-config__dataset {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.ck-run-config__dataset-meta {
  font-family: var(--ck-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ck-muted);
}

.ck-run-config__dataset-preview {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(6, 182, 212, 0.4);
  border-radius: 999px;
  color: var(--ck-accent);
  cursor: pointer;
  font-family: var(--ck-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  transition: background 0.15s;
}

.ck-run-config__dataset-preview:hover {
  background: rgba(6, 182, 212, 0.12);
}

.ck-modal {
  padding: 0;
  margin: auto;
  border: none;
  background: transparent;
  max-width: min(92vw, 880px);
  width: 100%;
  color: var(--ck-text);
}

.ck-modal::backdrop {
  background: rgba(8, 11, 20, 0.72);
  backdrop-filter: blur(4px);
}

.ck-modal[open] {
  animation: ck-modal-in 0.18s ease-out;
}

@keyframes ck-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.ck-modal__panel {
  display: flex;
  flex-direction: column;
  max-height: 82vh;
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
/* the panel is the dialog's autofocus target (so the close button isn't auto-focused);
   it's a container, not a control, so don't show a ring on it */
.ck-modal__panel:focus,
.ck-modal__panel:focus-visible { outline: none; }

.ck-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem 0.85rem;
}

.ck-modal__heading {
  display: inline-flex;
  align-items: baseline;
  gap: 0.85rem;
  min-width: 0;
}

.ck-modal__title {
  margin: 0;
  font-family: var(--ck-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ck-text);
}

.ck-modal__meta {
  margin: 0;
  font-family: var(--ck-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ck-dim);
  text-transform: uppercase;
}

.ck-modal__close {
  appearance: none;
  position: relative;
  display: inline-flex;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ck-dim);
  font-size: 0;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
/* the "×" is drawn as two crossed bars centred on the button, so it (and the
   focus ring around the button) sit dead centre regardless of font metrics */
.ck-modal__close::before,
.ck-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1.6px;
  border-radius: 1px;
  background: currentColor;
}
.ck-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ck-modal__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.ck-modal__close:hover {
  color: var(--ck-text);
  background: var(--ck-surface-hover);
}

.ck-modal__close:focus-visible {
  outline: 2px solid var(--ck-accent);
  outline-offset: 2px;
}

.ck-modal__body {
  flex: 1;
  margin: 0;
  background: transparent;
  overflow: auto;
  padding: 0 1.5rem;
}
/* no footer? then the body needs its own bottom padding */
.ck-modal__body:last-child { padding-bottom: 1.5rem; }

.ck-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem 1.1rem;
}

.ck-modal__close-btn {
  appearance: none;
  font-family: var(--ck-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--ck-line-strong);
  background: transparent;
  color: var(--ck-text);
  border-radius: var(--ck-radius);
  cursor: pointer;
  transition: background 0.15s;
}

.ck-modal__close-btn:hover {
  background: var(--ck-surface-hover);
}


.ck-response-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.ck-response-card {
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-lg);
  background: var(--ck-surface);
  padding: 1.5rem;
  transition: border-color 0.15s;
}

.ck-response-card:hover {
  border-color: var(--ck-line-strong);
}

.ck-response-card--low {
  border-color: rgba(239, 68, 68, 0.25);
}

.ck-response-card--low:hover {
  border-color: rgba(239, 68, 68, 0.4);
}

.ck-response-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ck-response-card__body {
  display: grid;
  gap: 1rem;
}

.ck-metric-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ck-line);
}

.ck-metric-pip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-family: var(--ck-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

.ck-metric-pip--high {
  background: var(--ck-success-soft);
  color: var(--ck-success);
}

.ck-metric-pip--medium {
  background: var(--ck-warning-soft);
  color: var(--ck-warning);
}

.ck-metric-pip--low {
  background: var(--ck-danger-soft);
  color: var(--ck-danger);
}

.ck-metric-pip--pending {
  background: var(--ck-surface-soft);
  color: var(--ck-dim);
}

.ck-metric-pip__bar {
  display: inline-block;
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.6;
}

.ck-metric-pip__label {
  white-space: nowrap;
}

.ck-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: text-top;
  margin-top: 0.3em;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}

.ck-dot--pending {
  background: var(--ck-accent);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(6, 182, 212, 0.45);
}

.ck-dot--running {
  background: var(--ck-accent);
  animation: ck-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 10px rgba(6, 182, 212, 0.6);
}

.ck-dot--completed {
  background: var(--ck-success);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(45, 212, 168, 0.5);
}

.ck-dot--high {
  background: var(--ck-success);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(45, 212, 168, 0.5);
}

.ck-dot--medium {
  background: var(--ck-warning);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(224, 164, 88, 0.5);
}

.ck-dot--low {
  background: var(--ck-danger);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(248, 113, 113, 0.5);
}

.ck-dot--failed {
  background: var(--ck-danger);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(248, 113, 113, 0.5);
}

@keyframes ck-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.ck-run-name {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.ck-run-name .ck-dot {
  margin: 0;
  vertical-align: baseline;
}

.ck-title .ck-run-name {
  gap: 1rem;
}

.ck-title .ck-dot {
  width: 16px;
  height: 16px;
}

.ck-metric-pip__label strong {
  font-weight: 700;
}

.ck-metric-bar--compact {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  gap: 3px;
  flex-wrap: nowrap;
}

.ck-metric-bar--compact .ck-metric-pip {
  padding: 0;
  gap: 0;
  position: relative;
}

.ck-metric-bar--compact .ck-metric-pip__bar {
  width: 6px;
  height: 14px;
  border-radius: 2px;
}

.ck-metric-bar--compact .ck-metric-pip__label {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  font-size: 0.875rem;
  z-index: 10;
  pointer-events: none;
}

.ck-metric-bar--compact .ck-metric-pip:hover .ck-metric-pip__label {
  display: block;
}

.ck-review-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.ck-review-card {
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-lg);
  background: var(--ck-surface);
  padding: 1.5rem;
}

.ck-review-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ck-review-card__metric {
  font-family: var(--ck-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ck-text);
}

.ck-review-card__feedback {
  margin-top: 0.75rem;
}

.ck-review-card__feedback .ck-note-box {
  margin-top: 0;
}

@media (max-width: 900px) {
  .ck-grid--sidebar,
  .ck-grid--cards,
  .ck-grid--two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 44rem) {
  .ck-rubric-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ck-main {
    padding-top: 1rem;
  }

  .ck-card,
  .ck-result-card,
  .ck-empty {
    padding: 0.85rem;
  }

  .ck-button {
    width: 100%;
  }

  .ck-actions,
  .ck-toolbar,
  .ck-nav {
    width: 100%;
  }

  .ck-results-table {
    font-size: 0.85rem;
  }

  .ck-results-table th,
  .ck-results-table td {
    padding: 0.5rem 0.65rem;
  }

  .ck-response-card {
    padding: 1rem;
  }

  .ck-review-card {
    padding: 1rem;
  }
}

.ck-api-endpoint {
  padding: 1rem 0;
  border-bottom: 1px solid var(--ck-line);
}

.ck-api-endpoint:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ck-api-endpoint:first-of-type {
  padding-top: 1rem;
}

.ck-api-method {
  margin: 0;
  font-family: var(--ck-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ck-text);
}

.ck-api-params {
  margin: 0.35rem 0 0;
  font-family: var(--ck-sans);
  font-size: 0.85rem;
  color: var(--ck-muted);
}

.ck-api-example {
  position: relative;
  margin-top: 0.5rem;
}

/* one code size for every example on the API reference page — the curl blocks
   and the MCP install snippets are the same partial and should match */
.ck-api-example .ck-code {
  font-size: 0.78rem;
}

.ck-api-copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--ck-line);
  border-radius: 4px;
  background: var(--ck-surface);
  color: var(--ck-dim);
  cursor: pointer;
  opacity: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.ck-api-copy:hover {
  color: var(--ck-accent);
  border-color: var(--ck-accent);
}

.ck-api-copy--done {
  opacity: 1 !important;
  color: var(--ck-success) !important;
  border-color: var(--ck-success) !important;
}

.ck-token-toggle {
  transition: border-color 0.15s, color 0.15s;
}

.ck-token-toggle:hover {
  border-color: var(--ck-accent);
  color: var(--ck-accent);
}

.ck-token-toggle.ck-api-copy--done {
  border-color: var(--ck-success) !important;
  color: var(--ck-success) !important;
}

.ck-api-tabs {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  margin-top: 1rem;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-lg);
  background: var(--ck-surface);
  overflow: hidden;
}

.ck-api-tabs__radio {
  display: none;
}

.ck-api-tabs__nav {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ck-line);
  background: var(--ck-bg-strong);
  padding: 0.5rem 0;
}

.ck-api-tabs__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.25rem;
  font-family: var(--ck-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ck-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  border-left: 2px solid transparent;
}

.ck-api-tabs__label:hover {
  color: var(--ck-text);
  background: var(--ck-surface-soft);
}

.ck-api-tabs__count {
  font-size: 0.7rem;
  color: var(--ck-dim);
}

.ck-api-tabs__panels {
  padding: 1.5rem;
  min-height: 300px;
}

.ck-api-tabs__panel {
  display: none;
}

#ck-tab-mcp:checked ~ .ck-api-tabs__nav label[for="ck-tab-mcp"],
#ck-tab-prompts:checked ~ .ck-api-tabs__nav label[for="ck-tab-prompts"],
#ck-tab-runs:checked ~ .ck-api-tabs__nav label[for="ck-tab-runs"],
#ck-tab-responses:checked ~ .ck-api-tabs__nav label[for="ck-tab-responses"],
#ck-tab-datasets:checked ~ .ck-api-tabs__nav label[for="ck-tab-datasets"],
#ck-tab-metrics:checked ~ .ck-api-tabs__nav label[for="ck-tab-metrics"],
#ck-tab-metric-groups:checked ~ .ck-api-tabs__nav label[for="ck-tab-metric-groups"],
#ck-tab-tags:checked ~ .ck-api-tabs__nav label[for="ck-tab-tags"],
#ck-tab-providers:checked ~ .ck-api-tabs__nav label[for="ck-tab-providers"] {
  color: var(--ck-accent);
  background: var(--ck-surface-soft);
  border-left-color: var(--ck-accent);
}

#ck-tab-mcp:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(1),
#ck-tab-prompts:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(2),
#ck-tab-runs:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(3),
#ck-tab-responses:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(4),
#ck-tab-datasets:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(5),
#ck-tab-metrics:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(6),
#ck-tab-metric-groups:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(7),
#ck-tab-tags:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(8),
#ck-tab-providers:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(9) {
  display: block;
}

@media (max-width: 700px) {
  .ck-api-tabs {
    grid-template-columns: 1fr;
  }

  .ck-api-tabs__nav {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--ck-line);
    padding: 0.5rem;
    gap: 0.25rem;
  }

  .ck-api-tabs__label {
    padding: 0.4rem 0.75rem;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 4px;
    font-size: 0.75rem;
  }

  #ck-tab-mcp:checked ~ .ck-api-tabs__nav label[for="ck-tab-mcp"],
  #ck-tab-prompts:checked ~ .ck-api-tabs__nav label[for="ck-tab-prompts"],
  #ck-tab-runs:checked ~ .ck-api-tabs__nav label[for="ck-tab-runs"],
  #ck-tab-responses:checked ~ .ck-api-tabs__nav label[for="ck-tab-responses"],
  #ck-tab-datasets:checked ~ .ck-api-tabs__nav label[for="ck-tab-datasets"],
  #ck-tab-metrics:checked ~ .ck-api-tabs__nav label[for="ck-tab-metrics"],
  #ck-tab-metric-groups:checked ~ .ck-api-tabs__nav label[for="ck-tab-metric-groups"],
  #ck-tab-tags:checked ~ .ck-api-tabs__nav label[for="ck-tab-tags"],
  #ck-tab-providers:checked ~ .ck-api-tabs__nav label[for="ck-tab-providers"] {
    border-left-color: transparent;
    border-bottom-color: var(--ck-accent);
  }

  .ck-api-tabs__count {
    display: none;
  }
}

/* the metrics field stacks several sub-sections (hint, groups, divider, tag
   filter, checkboxes) — give it more vertical breathing room than a plain field,
   and extra separation from the run-tags field that follows it */
#metrics-field {
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.ck-metric-groups {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

.ck-metric-groups__label {
  font-family: var(--ck-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ck-dim);
}

.ck-metric-groups__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ck-metric-group-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--ck-line);
  border-radius: 999px;
  color: var(--ck-muted);
  font-family: var(--ck-mono);
  font-size: 0.78rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ck-metric-group-pill:hover {
  border-color: rgba(6, 182, 212, 0.5);
  color: var(--ck-text);
}

.ck-metric-group-pill__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border: 1px solid var(--ck-line-strong);
  border-radius: 3px;
  font-size: 0.62rem;
  color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ck-metric-group-pill__count {
  font-family: var(--ck-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ck-dim);
  padding: 0 0.35rem;
  border-left: 1px solid var(--ck-line);
  margin-left: 0.1rem;
}

.ck-metric-group-pill--active {
  border-color: var(--ck-accent);
  color: var(--ck-text);
  background: rgba(6, 182, 212, 0.08);
}

.ck-metric-group-pill--active .ck-metric-group-pill__check {
  background: var(--ck-accent);
  border-color: var(--ck-accent);
  color: var(--ck-bg);
}

.ck-metric-group-pill--active .ck-metric-group-pill__count {
  color: var(--ck-accent);
  border-left-color: rgba(6, 182, 212, 0.4);
}

.ck-metric-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.15rem 0 0.35rem;
  color: var(--ck-dim);
  font-family: var(--ck-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ck-metric-divider::before,
.ck-metric-divider::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--ck-line);
}

.ck-metric-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.5rem 0.85rem;
}

.ck-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: var(--ck-sans);
  font-size: 0.88rem;
  color: var(--ck-muted);
  cursor: pointer;
  padding: 0.35rem 0;
}

.ck-checkbox-label__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.ck-checkbox-label__text {
  font-family: var(--ck-mono);
  font-size: 0.85rem;
  letter-spacing: -0.01em;
}

.ck-checkbox-label__hint {
  font-family: var(--ck-sans);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ck-dim);
}

.ck-checkbox-label__box {
  margin-top: 1px;
}

.ck-checkbox-label input.ck-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.ck-checkbox-label__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--ck-line-strong);
  border-radius: 4px;
  background: var(--ck-surface);
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

.ck-checkbox-label__box::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--ck-bg);
  border-bottom: 1.5px solid var(--ck-bg);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform 0.12s ease-out;
}

.ck-checkbox-label input.ck-checkbox:checked + .ck-checkbox-label__box {
  background: var(--ck-accent);
  border-color: var(--ck-accent);
}

.ck-checkbox-label input.ck-checkbox:checked + .ck-checkbox-label__box::after {
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}

.ck-checkbox-label input.ck-checkbox:focus-visible + .ck-checkbox-label__box {
  outline: 2px solid var(--ck-accent);
  outline-offset: 2px;
}

.ck-checkbox-label:hover .ck-checkbox-label__box {
  border-color: var(--ck-accent);
}

.ck-checkbox-label:hover .ck-checkbox-label__text,
.ck-checkbox-label input.ck-checkbox:checked ~ .ck-checkbox-label__text {
  color: var(--ck-text);
}

.ck-response-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--ck-line);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}

.ck-response-row:first-child {
  border-top: 1px solid var(--ck-line);
}

.ck-response-row:hover {
  background: var(--ck-surface-soft);
}

.ck-response-row__index {
  font-family: var(--ck-mono);
  font-size: 0.8rem;
  color: var(--ck-dim);
  min-width: 2rem;
  flex-shrink: 0;
}

.ck-response-row__text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--ck-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ck-response-row__metrics {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.ck-response-row__score {
  flex-shrink: 0;
}

.ck-prompts-table th {
  white-space: nowrap;
}

.ck-prompts-table th:nth-child(n+2),
.ck-prompts-table td:nth-child(n+2) {
  width: 1%;
  white-space: nowrap;
}

.ck-prompts-table__runs {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.2;
}

.ck-prompts-table__runs-count {
  font-family: var(--ck-mono);
  color: var(--ck-text);
}

.ck-prompts-table__runs-when {
  font-family: var(--ck-sans);
  font-size: 0.78rem;
  color: var(--ck-dim);
}

.ck-prompts-table__dim {
  color: var(--ck-dim);
}

.ck-prompts-table__desc {
  margin: 0.3rem 0 0;
  font-family: var(--ck-sans);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ck-muted);
  white-space: normal;
  max-width: 42ch;
}

.ck-endpoint--compact {
  margin-top: 0.45rem;
  max-width: 26rem;
}
.ck-endpoint--compact .ck-endpoint__url {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-endpoint--compact .ck-icon-btn { flex-shrink: 0; }

.ck-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ck-tags-table th:first-child,
.ck-tags-table td:first-child {
  width: 35%;
}
.ck-tags-table th:nth-child(2),
.ck-tags-table td:nth-child(2) {
  width: 60%;
}
.tag-mark.tag-mark--lg {
  padding: 4px 10px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  border-radius: 5px;
}
.ck-tags-table__unused {
  color: var(--ck-dim);
  font-style: italic;
}

.ck-mg-members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.ck-mg-member {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--ck-surface-soft);
  border: 1px solid var(--ck-line);
  border-radius: 4px;
  font-family: var(--ck-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ck-muted);
  white-space: nowrap;
}

.ck-metric-tag-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0.5rem 0 0.85rem;
}
.ck-metric-tag-filter__label {
  font-family: var(--ck-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ck-dim);
  margin-right: 0.3rem;
}
.ck-metric-tag-filter__chip {
  border-radius: 5px;
  font: inherit;
  cursor: pointer;
}

.ck-metrics-table__groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

a.ck-metric-group-pill {
  text-decoration: none;
}

.ck-metrics-table__dim {
  color: var(--ck-dim);
}

.ck-responses-table th {
  white-space: nowrap;
}

.ck-responses-table th:first-child {
  text-align: right;
  padding-right: 0.85rem;
}

.ck-responses-table th:not(:nth-child(2)),
.ck-responses-table td:not(:nth-child(2)) {
  width: 1%;
  white-space: nowrap;
}

.ck-runs-table th {
  vertical-align: middle;
  white-space: nowrap;
}

.ck-runs-table td {
  vertical-align: middle;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.ck-runs-table th:nth-child(n+2),
.ck-runs-table td:nth-child(n+2) {
  width: 1%;
  white-space: nowrap;
}

.ck-runs-table__identity {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.ck-runs-table .ck-run-name {
  line-height: 1.2;
}

.ck-runs-table__config {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--ck-muted);
  padding-left: 1.2rem;
  white-space: nowrap;
}

.ck-runs-table__identity .tag-marks-row {
  padding-left: 1.2rem;
}

.ck-runs-table__config-link {
  color: var(--ck-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.ck-runs-table__config-link:hover {
  color: var(--ck-accent);
}

.ck-runs-table__version {
  font-family: var(--ck-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ck-dim);
}

.ck-runs-table__sep {
  color: var(--ck-line-strong);
}

.ck-runs-table__dim {
  color: var(--ck-dim);
}

.ck-runs-table__count {
  font-family: var(--ck-mono);
  white-space: nowrap;
}

.ck-runs-table__count-of {
  color: var(--ck-dim);
  margin-left: 0.15rem;
}

.ck-runs-table__when {
  font-family: var(--ck-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ck-muted);
  white-space: nowrap;
}

.ck-response-cell__index {
  font-family: var(--ck-mono);
  font-size: 0.78rem;
  color: var(--ck-dim);
  text-align: right;
  width: 1%;
  padding-right: 0.85rem !important;
}

.ck-response-cell__text {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ck-muted);
}

.ck-response-cell__error {
  color: var(--ck-danger);
}

.ck-response-cell__dim {
  color: var(--ck-dim);
}

.ck-response-row--pending .ck-response-row__text,
.ck-response-row--retrying .ck-response-row__text {
  color: var(--ck-dim);
}

.ck-response-row--failed .ck-response-row__text {
  color: var(--ck-danger);
  opacity: 0.8;
}

.ck-response-row__error {
  font-family: var(--ck-mono);
  font-size: 0.82rem;
}

.ck-prompt-preview {
  margin-top: 1rem;
}

.ck-prompt-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ck-prompt-preview__header .ck-kicker {
  margin: 0;
}

.ck-button--sm {
  font-size: 0.72rem;
  padding: 0.3em 0.8em;
}

.ck-endpoint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.ck-endpoint__url {
  font-family: var(--ck-mono);
  font-size: 0.72rem;
  color: var(--ck-dim);
  background: var(--ck-surface);
  padding: 0.25em 0.6em;
  border-radius: var(--ck-radius);
  border: 1px solid var(--ck-line);
  user-select: all;
}

.ck-prompt-preview__text {
  font-size: 0.9rem;
  color: var(--ck-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  margin: 0.35rem 0;
}

.ck-prompt-preview__text--expanded {
  -webkit-line-clamp: unset;
}

.ck-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ck-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--ck-line-strong);
  border-radius: 2px;
  outline: none;
}

.ck-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ck-accent);
  cursor: pointer;
  border: 2px solid var(--ck-bg);
}

.ck-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ck-accent);
  cursor: pointer;
  border: 2px solid var(--ck-bg);
}

.ck-slider-value {
  font-family: var(--ck-mono);
  font-size: 0.85rem;
  color: var(--ck-text);
  min-width: 2rem;
  text-align: right;
}

.ck-info-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--ck-line-strong);
  color: var(--ck-muted);
  font-family: var(--ck-sans);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
  cursor: help;
  vertical-align: middle;
  margin-left: 0.4rem;
  position: relative;
}

.ck-info-toggle:hover + .ck-info-popup,
.ck-info-popup:hover {
  display: block;
}

.ck-info-popup {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.65rem 0.85rem;
  background: var(--ck-surface);
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-radius);
  font-family: var(--ck-sans);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: var(--ck-text);
  width: max-content;
  max-width: 240px;
  z-index: 50;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

.ck-info-popup--right {
  left: auto;
  right: 0;
  transform: none;
}

.ck-suggest-reasoning {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--ck-accent-soft);
  border-left: 3px solid var(--ck-accent);
  border-radius: 0 var(--ck-radius) var(--ck-radius) 0;
}

.ck-suggest-reasoning .ck-kicker {
  margin-bottom: 0.5rem;
}

.ck-suggest-reasoning__body {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--ck-text);
}

.ck-suggest-reasoning__body p {
  margin: 0 0 0.4rem;
}

.ck-suggest-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 1.5rem 0;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  overflow: hidden;
  background: var(--ck-line);
}

.ck-suggest-diff__pane {
  background: var(--ck-surface);
  min-width: 0;
}

.ck-suggest-diff__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: var(--ck-bg-strong);
  border-bottom: 1px solid var(--ck-line);
}

.ck-suggest-diff__label {
  font-family: var(--ck-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ck-suggest-diff__label--before {
  color: var(--ck-danger);
}

.ck-suggest-diff__label--after {
  color: var(--ck-success);
}

.ck-suggest-diff__version {
  font-family: var(--ck-mono);
  font-size: 0.7rem;
  color: var(--ck-dim);
}

.ck-suggest-diff__code {
  margin: 0;
  padding: 1rem;
  font-family: var(--ck-mono);
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--ck-text);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.ck-diff-del {
  background: rgba(248, 113, 113, 0.2);
  color: var(--ck-danger);
  text-decoration: line-through;
  text-decoration-color: rgba(248, 113, 113, 0.5);
  border-radius: 2px;
  padding: 0.1em 0.15em;
}

.ck-diff-ins {
  background: rgba(45, 212, 168, 0.15);
  color: var(--ck-success);
  border-radius: 2px;
  padding: 0.1em 0.15em;
}

.ck-suggest-full {
  margin: 1.5rem 0;
}

.ck-mcp-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ck-line);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  overflow: hidden;
}

.ck-mcp-tool {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--ck-surface);
}

.ck-mcp-tool__name {
  font-family: var(--ck-mono);
  font-size: 0.75rem;
  color: var(--ck-accent);
  white-space: nowrap;
  min-width: 14rem;
}

.ck-mcp-tool__desc {
  font-size: 0.8rem;
  color: var(--ck-muted);
}

.ck-mcp-install-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.ck-mcp-install-card {
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  overflow: hidden;
  background: var(--ck-bg-strong);
}

.ck-mcp-install-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  font-family: var(--ck-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ck-text);
  border-bottom: 1px solid var(--ck-line);
  background: var(--ck-surface);
}

.ck-mcp-install-card__icon {
  color: var(--ck-accent);
  font-size: 0.65rem;
}

.ck-mcp-install-card .ck-api-example {
  margin: 0;
}

.ck-mcp-install-card .ck-code {
  border-radius: 0;
  border: none;
  padding: 1rem 1rem 1.1rem;
  line-height: 1.7;
}

.ck-mcp-tool-group {
  margin-bottom: 1.25rem;
}

.ck-mcp-tool-group:last-child {
  margin-bottom: 0;
}

.ck-mcp-tool-group__label {
  font-family: var(--ck-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ck-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ck-api-prompts-section {
  margin-top: 1.5rem;
}

.ck-api-prompts-section .ck-kicker {
  margin-bottom: 0.75rem;
}

.ck-api-prompt-card {
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-surface);
  margin-bottom: 0.65rem;
  overflow: hidden;
}

.ck-api-prompt-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem 0.6rem;
}

.ck-api-prompt-card__name {
  font-size: 0.9rem;
  color: var(--ck-text);
}

.ck-api-prompt-card__desc {
  font-size: 0.78rem;
  color: var(--ck-muted);
  margin: 0.2rem 0 0;
  line-height: 1.4;
}

.ck-api-prompt-card__url {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--ck-bg-strong);
  border-top: 1px solid var(--ck-line);
}

.ck-api-prompt-card__url .ck-endpoint__url {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

:root {
  --tag-crimson: #F24E1E;
  --tag-burnt-orange: #FF8A00;
  --tag-amber: #FFC700;
  --tag-mint: #14AE5C;
  --tag-deep-emerald: #00623F;
  --tag-electric-cyan: #00D1FF;
  --tag-cobalt-blue: #0D99FF;
  --tag-deep-indigo: #5551FF;
  --tag-amethyst: #9747FF;
  --tag-rose: #FF5CBE;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  min-height: calc(1.4em + 8px);
  border-radius: 5px;
  font-family: var(--ck-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: white;
  line-height: 1.4;
  white-space: nowrap;
  transition: filter 120ms ease;
  text-decoration: none;
  user-select: none;
}

.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}

.tag > span:empty { display: none; }

a.tag, label.tag { cursor: pointer; }
a.tag:hover, label.tag:hover { filter: brightness(1.12); }


.tag-crimson       { background-color: var(--tag-crimson);       --current-tag-color: var(--tag-crimson); }
.tag-burnt-orange  { background-color: var(--tag-burnt-orange);  --current-tag-color: var(--tag-burnt-orange);  color: #2a1300; }
.tag-burnt-orange::before { background: rgba(0, 0, 0, 0.55); }
.tag-amber         { background-color: var(--tag-amber);         --current-tag-color: var(--tag-amber);         color: #1a0f00; }
.tag-amber::before { background: rgba(0, 0, 0, 0.55); }
.tag-mint          { background-color: var(--tag-mint);          --current-tag-color: var(--tag-mint); }
.tag-deep-emerald  { background-color: var(--tag-deep-emerald);  --current-tag-color: var(--tag-deep-emerald); }
.tag-electric-cyan { background-color: var(--tag-electric-cyan); --current-tag-color: var(--tag-electric-cyan); color: #001620; }
.tag-electric-cyan::before { background: rgba(0, 0, 0, 0.55); }
.tag-cobalt-blue   { background-color: var(--tag-cobalt-blue);   --current-tag-color: var(--tag-cobalt-blue); }
.tag-deep-indigo   { background-color: var(--tag-deep-indigo);   --current-tag-color: var(--tag-deep-indigo); }
.tag-amethyst      { background-color: var(--tag-amethyst);      --current-tag-color: var(--tag-amethyst); }
.tag-rose          { background-color: var(--tag-rose);          --current-tag-color: var(--tag-rose);          color: #2a0017; }
.tag-rose::before  { background: rgba(0, 0, 0, 0.6); }

.tag-outline {
  background-color: transparent !important;
  border: 1px solid currentColor;
  box-shadow: none;
}
.tag-outline::before { background: currentColor; }
.tag-outline.tag-crimson       { color: var(--tag-crimson); }
.tag-outline.tag-burnt-orange  { color: var(--tag-burnt-orange); }
.tag-outline.tag-amber         { color: var(--tag-amber); }
.tag-outline.tag-mint          { color: var(--tag-mint); }
.tag-outline.tag-deep-emerald  { color: var(--tag-deep-emerald); }
.tag-outline.tag-electric-cyan { color: var(--tag-electric-cyan); }
.tag-outline.tag-cobalt-blue   { color: var(--tag-cobalt-blue); }
.tag-outline.tag-deep-indigo   { color: var(--tag-deep-indigo); }
.tag-outline.tag-amethyst      { color: var(--tag-amethyst); }
.tag-outline.tag-rose          { color: var(--tag-rose); }

/* Inline mark — quiet "color dot + name" used on row metadata */
.tag-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  min-height: 22px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--ck-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  white-space: nowrap;
  background: color-mix(in srgb, var(--mark-color) 24%, transparent);
  color: color-mix(in srgb, var(--mark-color) 88%, var(--ck-text));
}

.tag-mark::before {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 4.5C3 3.67 3.67 3 4.5 3h5.379c.398 0 .779.158 1.06.44L18.06 10.56c.585.586.585 1.535 0 2.121l-5.379 5.379a1.5 1.5 0 0 1-2.121 0L3.44 10.94A1.5 1.5 0 0 1 3 9.879V4.5Zm3.5 1.75a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z' fill='black'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 4.5C3 3.67 3.67 3 4.5 3h5.379c.398 0 .779.158 1.06.44L18.06 10.56c.585.586.585 1.535 0 2.121l-5.379 5.379a1.5 1.5 0 0 1-2.121 0L3.44 10.94A1.5 1.5 0 0 1 3 9.879V4.5Zm3.5 1.75a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z' fill='black'/></svg>") no-repeat center / contain;
}
.tag-mark + .tag-mark { margin-left: 0.4rem; }
.tag-marks-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.35rem;
}

/* Picker — flat row of chips + inline input, no enclosing field */
.ck-tag-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.ck-tag-picker__input {
  flex: 1;
  min-width: 160px;
  background: transparent;
  border: 0;
  padding: 2px 0;
  color: var(--ck-text);
  font-family: var(--ck-mono);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  outline: none;
}
.ck-tag-picker__input::placeholder { color: var(--ck-dim); }

/* Picker chips: unchecked = neutral pill with a small tag-colored dot.
   Avoids looking "applied" simply because the tag color is on screen. */
.ck-tag-picker label.tag-mark,
.ck-tag-filter .tag-mark,
.ck-metric-tag-filter .tag-mark {
  cursor: pointer;
  user-select: none;
  padding: 4px 10px;
  font-size: 0.8rem;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* Selected state — picker, filter bars, metric-tag-filter share one look */
.ck-tag-picker label.tag-mark:has(input:checked),
.ck-tag-filter .tag-mark:not(.tag-mark--off),
.ck-metric-tag-filter .tag-mark:not(.tag-mark--off) {
  background: color-mix(in srgb, var(--mark-color) 38%, transparent);
  color: color-mix(in srgb, var(--mark-color) 95%, var(--ck-text));
  border-color: color-mix(in srgb, var(--mark-color) 50%, transparent);
}

/* Unselected state — same shape, neutral outline + muted text */
.ck-tag-picker label.tag-mark:has(input:not(:checked)),
.ck-tag-filter .tag-mark.tag-mark--off,
.ck-metric-tag-filter .tag-mark.tag-mark--off {
  background: transparent;
  border-color: var(--ck-line);
  color: var(--ck-muted);
}
.ck-tag-picker label.tag-mark:has(input:not(:checked)):hover,
.ck-tag-filter .tag-mark.tag-mark--off:hover,
.ck-metric-tag-filter .tag-mark.tag-mark--off:hover {
  border-color: var(--ck-line-strong);
  color: color-mix(in srgb, var(--mark-color) 80%, var(--ck-text));
}
button.tag-mark {
  font: inherit;
  cursor: pointer;
}
a.tag-mark {
  text-decoration: none;
}

/* Top-nav settings menu (ported from completion-kit-cloud) */
.ck-settings-menu {
  position: relative;
}
.ck-settings-menu__trigger {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ck-settings-menu__trigger::-webkit-details-marker {
  display: none;
}
.ck-settings-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  padding: 0.5rem;
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  white-space: nowrap;
}
.ck-settings-menu__item {
  display: block;
  padding: 0.5rem 0.65rem;
  border-radius: calc(var(--ck-radius) - 2px);
  font-family: var(--ck-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ck-text);
  transition: background 0.15s, color 0.15s;
}
.ck-settings-menu__item:hover {
  background: var(--ck-surface-hover);
}

/* Settings page kicker — small label above the page title on settings pages */
.ck-settings-kicker {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  font-family: var(--ck-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ck-dim);
  margin: 0 0 0.85rem;
}
.ck-settings-kicker__sep {
  opacity: 0.55;
}
.ck-settings-kicker__link {
  color: var(--ck-muted);
  text-decoration: none;
  transition: color 120ms ease;
}
.ck-settings-kicker__link:hover { color: var(--ck-text); }

.tag-marks-row--header {
  margin-top: -0.5rem;
  margin-bottom: 1.25rem;
}


.ck-input--error {
  border-color: var(--ck-danger);
  background: rgba(248, 113, 113, 0.05);
}
.ck-input--error:focus {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
  border-color: var(--ck-danger);
}

.ck-field-error {
  margin: 0.35rem 0 0;
  color: var(--ck-danger);
  font-family: var(--ck-sans);
  font-size: 0.95rem;
}

/* Filter bar — its own visual moment */
.ck-tag-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 1.1rem 0 1.6rem;
  padding: 0.65rem 0.85rem;
  background: var(--ck-surface-soft);
  border: 1px solid var(--ck-line);
  border-radius: 6px;
}
.ck-tag-filter__label {
  font-family: var(--ck-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ck-dim);
  margin-right: 0.4rem;
}
.ck-tag-filter__clear {
  margin-left: auto;
  font-family: var(--ck-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ck-muted);
  text-decoration: none;
  transition: color 120ms ease;
}
.ck-tag-filter__clear:hover { color: var(--ck-accent); }


/* --- Onboarding / launch checklist --- */
@keyframes ck-launch-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ck-launch {
  position: relative;
  max-width: 720px;
  margin: 1rem auto 4rem;
  padding-top: 1rem;
}

.ck-launch__field {
  position: absolute;
  inset: -2rem -3rem auto -3rem;
  height: 300px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, var(--ck-accent-soft) 0%, transparent 65%),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(148, 163, 184, 0.035) 23px 24px),
    repeating-linear-gradient(0deg,  transparent 0 23px, rgba(148, 163, 184, 0.035) 23px 24px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

.ck-launch__header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 2.25rem;
  animation: ck-launch-rise 0.5s ease both;
}

.ck-launch__overline {
  margin: 0 0 0.6rem;
  font-family: var(--ck-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ck-accent);
}

.ck-launch__org {
  margin: 0;
  font-family: var(--ck-mono);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ck-text);
}

.ck-launch__handle {
  margin: 0.5rem 0 0;
  font-family: var(--ck-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ck-muted);
}

.ck-launch__panel {
  position: relative;
  z-index: 1;
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-lg);
  padding: 1.75rem 2rem 2rem;
  box-shadow: 0 24px 64px -28px rgba(0, 0, 0, 0.5);
  animation: ck-launch-rise 0.5s ease both;
  animation-delay: 0.08s;
}

.ck-launch__progress {
  padding-bottom: 1.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--ck-line);
}
.ck-launch__progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.ck-launch__progress-title {
  margin: 0;
  font-family: var(--ck-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ck-text);
}
.ck-launch__progress-count {
  margin: 0;
  font-family: var(--ck-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ck-muted);
  white-space: nowrap;
}
.ck-launch__progress-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--ck-line);
  overflow: hidden;
}
.ck-launch__progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ck-accent);
  box-shadow: 0 0 10px var(--ck-accent-soft);
  transition: width 0.4s ease;
}

.ck-launch__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ck-launch__step {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1.25rem 0 1.25rem 1rem;
  border-top: 1px solid var(--ck-line);
  border-left: 2px solid transparent;
  animation: ck-launch-rise 0.45s ease both;
  animation-delay: calc(0.24s + var(--i) * 0.07s);
}

.ck-launch__step-num {
  font-family: var(--ck-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ck-dim);
  user-select: none;
  white-space: nowrap;
}
.ck-launch__step--done .ck-launch__step-num { color: var(--ck-success); }
.ck-launch__step--next .ck-launch__step-num { color: var(--ck-accent); }
.ck-launch__step-tick { margin-left: 0.3em; font-size: 0.78em; }

.ck-launch__step--done { border-left-color: rgba(45, 212, 168, 0.4); }

.ck-launch__step-body { min-width: 0; }

.ck-launch__step-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.ck-launch__step-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.ck-launch__step-title a { color: var(--ck-text); text-decoration: none; }
.ck-launch__step-title a:hover { color: var(--ck-accent); }
.ck-launch__step--done .ck-launch__step-title { color: var(--ck-muted); }

.ck-launch__step-tag {
  font-family: var(--ck-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ck-accent);
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--ck-accent);
  border-radius: 999px;
  line-height: 1.4;
}

.ck-launch__step-desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ck-muted);
}

.ck-launch__step--pending .ck-launch__step-title,
.ck-launch__step--pending .ck-launch__step-desc { opacity: 0.65; }

.ck-launch__step--next {
  border-left-color: var(--ck-accent);
  background: linear-gradient(90deg, var(--ck-accent-soft) 0%, transparent 30%);
  margin-left: -1rem;
  padding-left: 2rem;
  padding-right: 1rem;
  border-radius: 0 var(--ck-radius) var(--ck-radius) 0;
}

.ck-launch__step-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding: 0.5rem 0.95rem;
  background: var(--ck-accent);
  color: #06121a;
  border-radius: var(--ck-radius);
  font-family: var(--ck-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.15s, transform 0.15s;
}
.ck-launch__step-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Opt-in starter data — quiet, secondary (bright cyan is reserved for the next-step CTA) */
.ck-launch__sample {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  border: 1px dashed var(--ck-line);
  border-radius: var(--ck-radius);
  background: var(--ck-bg-strong);
}
.ck-launch__sample-copy {
  margin: 0;
  flex: 1 1 18rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ck-muted);
}
.ck-launch__sample-copy code { font-family: var(--ck-mono); font-size: 0.85em; color: var(--ck-text); }
.ck-launch__sample-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  margin: 0;
  padding: 0.5rem 0.95rem;
  background: transparent;
  border: 1px solid var(--ck-line);
  color: var(--ck-text);
  border-radius: var(--ck-radius);
  font-family: var(--ck-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ck-launch__sample-cta:hover { border-color: var(--ck-accent); color: var(--ck-accent); background: var(--ck-accent-soft); }

.ck-launch__panel-footer {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ck-line);
}
.ck-launch__dismiss {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--ck-muted);
  font-family: var(--ck-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.ck-launch__dismiss:hover { color: var(--ck-accent); }
.ck-launch__dismiss-hint {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--ck-dim);
}

.ck-launch__ready-panel {
  position: relative;
  z-index: 1;
  background: var(--ck-surface);
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-radius-lg);
  padding: 2rem;
  text-align: center;
  animation: ck-launch-rise 0.5s ease both;
  animation-delay: 0.08s;
}

.ck-launch__ready-flag {
  margin: 0;
  font-family: var(--ck-mono);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ck-success);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.ck-launch__ready-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ck-success);
  box-shadow: 0 0 12px var(--ck-success);
}
.ck-launch__ready-copy { margin: 0.6rem 0 1.5rem; color: var(--ck-muted); }

.ck-launch__quicklinks {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}
.ck-launch__quicklink {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--ck-line-strong);
  border-radius: var(--ck-radius);
  font-family: var(--ck-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ck-text);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.ck-launch__quicklink:hover { border-color: var(--ck-accent); background: var(--ck-surface-hover); }

@media (max-width: 560px) {
  .ck-launch__panel { padding: 1.5rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-launch__header,
  .ck-launch__panel,
  .ck-launch__ready-panel,
  .ck-launch__step { animation: none; }
}