completion-kit 0.1.0.rc1

data/app/assets/stylesheets/completion_kit/application.css

@@ -0,0 +1,2214 @@
+@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;
+  -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;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ck-dim);
+}
+
+.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-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-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;
+  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;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.ck-button:hover {
+  transform: translateY(-1px);
+}
+
+.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-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 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  margin-top: 0.5rem;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.ck-model-list__item {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.35rem;
+  padding: 0.2rem 0.5rem;
+  font-family: var(--ck-mono);
+  font-size: 0.7rem;
+  color: var(--ck-muted);
+  background: var(--ck-surface-soft);
+  border: 1px solid var(--ck-line);
+  border-radius: 3px;
+}
+
+.ck-model-list__badge {
+  font-size: 0.6rem;
+  color: var(--ck-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.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-score {
+  margin: 0.25rem 0 0;
+  font-family: var(--ck-mono);
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  color: var(--ck-accent);
+}
+
+.ck-form-card {
+  display: grid;
+  gap: 1rem;
+  max-width: 36rem;
+}
+
+.ck-field-hint {
+  font-family: var(--ck-sans);
+  font-size: 0.8rem;
+  line-height: 1.4;
+  margin: 0;
+  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-run-config {
+  display: grid;
+  gap: 0;
+  max-width: 32rem;
+  border: 1px solid var(--ck-line);
+  border-radius: var(--ck-radius-lg);
+  background: var(--ck-surface);
+  overflow: hidden;
+}
+
+.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-accent);
+  stroke: var(--ck-accent);
+}
+
+.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--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);
+}
+
+.ck-flash {
+  margin-bottom: 1rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--ck-radius);
+  border: 1px solid transparent;
+  font-family: var(--ck-sans);
+  font-size: 0.95rem;
+}
+
+.ck-flash--notice {
+  border-color: rgba(34, 197, 94, 0.3);
+  background: var(--ck-success-soft);
+  color: var(--ck-success);
+}
+
+.ck-flash--alert {
+  border-color: rgba(239, 68, 68, 0.3);
+  background: var(--ck-danger-soft);
+  color: var(--ck-danger);
+}
+
+.ck-flash__title {
+  margin: 0;
+  font-weight: 700;
+}
+
+.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;
+}
+
+.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-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: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  vertical-align: text-top;
+  margin-top: 0.3em;
+}
+
+.ck-dot--pending {
+  background: var(--ck-accent);
+}
+
+.ck-dot--running {
+  background: var(--ck-accent);
+  animation: ck-pulse 1.5s ease-in-out infinite;
+}
+
+.ck-dot--completed {
+  background: var(--ck-success);
+}
+
+.ck-dot--high {
+  background: var(--ck-success);
+}
+
+.ck-dot--medium {
+  background: var(--ck-warning);
+}
+
+.ck-dot--low {
+  background: var(--ck-danger);
+}
+
+.ck-dot--failed {
+  background: var(--ck-danger);
+}
+
+@keyframes ck-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+.ck-run-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.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;
+}
+
+.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-criteria:checked ~ .ck-api-tabs__nav label[for="ck-tab-criteria"],
+#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-criteria:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(7),
+#ck-tab-providers:checked ~ .ck-api-tabs__panels .ck-api-tabs__panel:nth-child(8) {
+  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-criteria:checked ~ .ck-api-tabs__nav label[for="ck-tab-criteria"],
+  #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;
+  }
+}
+
+.ck-metric-checkboxes {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.ck-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: var(--ck-sans);
+  font-size: 0.9rem;
+  color: var(--ck-text);
+  cursor: pointer;
+  padding: 0.35rem 0;
+}
+
+.ck-checkbox-label:hover {
+  color: var(--ck-accent);
+}
+
+.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__score {
+  flex-shrink: 0;
+}
+
+.ck-score {
+  font-size: 0.85rem;
+  color: var(--ck-muted);
+  white-space: nowrap;
+}
+
+.ck-score__star {
+  font-size: 1rem;
+  color: #f59e0b;
+}
+
+.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: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1px solid var(--ck-line-strong);
+  color: var(--ck-muted);
+  font-size: 0.65rem;
+  font-weight: 700;
+  cursor: help;
+  vertical-align: middle;
+  margin-left: 0.35rem;
+  position: relative;
+}
+
+.ck-info-toggle:hover + .ck-info-popup,
+.ck-info-popup:hover {
+  display: block;
+}
+
+.ck-info-popup {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--ck-surface);
+  border: 1px solid var(--ck-line-strong);
+  border-radius: var(--ck-radius);
+  font-size: 0.78rem;
+  line-height: 1.5;
+  color: var(--ck-text);
+  width: 320px;
+  z-index: 10;
+  font-weight: 400;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.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;
+  font-size: 0.72rem;
+  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;
+}
+