/* Card validator, repair tool and token counter */
.ct-report { margin-top: 24px; }
.ct-block { margin-top: 20px; }
.ct-block h3 { margin: 0 0 8px; }
.ct-hint { color: var(--color-text-secondary); font-size: 0.9em; }

.ct-status {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 18px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); border-left-width: 4px;
  background: var(--color-bg-card);
}
.ct-status strong { color: var(--color-text-light); font-size: 1.05em; }
.ct-status span { color: var(--color-text-secondary); font-size: 0.92em; }
.ct-ok { border-left-color: var(--color-green); }
.ct-warn { border-left-color: var(--color-accent); }
.ct-bad { border-left-color: #ff5d6c; }

.ct-issues, .ct-fixes { list-style: none; padding: 0; margin: 12px 0 0; }
.ct-issues li, .ct-fixes li {
  padding: 8px 0; border-bottom: 1px solid var(--color-border);
  line-height: 1.5; overflow-wrap: anywhere;
}
.ct-issues li:last-child, .ct-fixes li:last-child { border-bottom: 0; }
.ct-fixes li::before { content: "\2713"; color: var(--color-green); margin-right: 8px; }
.ct-count, .ct-where { color: var(--color-text-secondary); font-size: 0.88em; }
.ct-badge {
  display: inline-block; min-width: 64px; margin-right: 8px; padding: 1px 8px;
  border-radius: 999px; font-size: 0.75em; font-weight: 700; text-align: center;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ct-error .ct-badge { background: rgba(255, 93, 108, 0.18); color: #ff8b95; }
.ct-warning .ct-badge { background: var(--color-accent-glow); color: var(--color-accent-hover); }
.ct-info .ct-badge { background: var(--color-primary-glow); color: var(--color-primary-hover); }
.ct-issues code { margin-right: 4px; }

.ct-snippet {
  margin: 12px 0; padding: 12px 14px; overflow-x: auto;
  background: var(--color-bg-dark); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); font-family: var(--font-family-mono); font-size: 13px;
  color: var(--color-text-light); white-space: pre;
}
.ct-link-btn { display: inline-block; text-decoration: none; }

.ct-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.ct-tile { display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-card); }
.ct-tile-n { font-size: 1.6em; font-weight: 800; color: var(--color-primary); line-height: 1.1; }
.ct-tile-l { color: var(--color-text-light); font-weight: 600; margin-top: 4px; }
.ct-tile-s { color: var(--color-text-secondary); font-size: 0.82em; }

.ct-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin: 8px 0; }
.ct-bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-green)); border-radius: 999px; min-width: 2px; }

.ct-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.95em; }
.ct-table th, .ct-table td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.ct-table th { color: var(--color-text-light); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; }
.ct-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }

.ct-ctx { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-top: 12px; }
.ct-ctx > div { flex: 1 1 200px; }
.ct-load-status { min-height: 1.4em; margin: 8px 0 0; color: var(--color-text-secondary); font-size: 0.9em; }
.ct-actions-note { margin-top: 12px; }

@media (max-width: 640px) {
  .ct-table { font-size: 0.85em; }
  .ct-table th, .ct-table td { padding: 6px 4px; }
}