:root {
  --ci-navy: #16273F; --ci-blue: #2F6FE0; --ci-ink: #2A3744; --ci-muted: #6B7787;
  --ci-line: #E4E9F0; --ci-bg: #F5F7FA; --ci-green: #1FA97A; --ci-red: #E8402A;
}
.ci-hero { background: #fff; border-bottom: 1px solid var(--ci-line); }
.ci-hero-inner { max-width: 90%; margin: 0 auto; padding: 26px 0; }
.ci-title { margin: 0; font-size: 24px; }
.ci-subtitle { margin: 4px 0 0; color: var(--ci-muted); font-size: 14px; }

.ci-main { max-width: 90%; margin: 0 auto; padding: 22px 0 40px; }
.ci-project-bar { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 18px; }
.ci-project-bar label { display: grid; gap: 5px; font-size: 12.5px; color: var(--ci-muted); }
.ci-project-bar input { border: 1px solid #C9D4E3; border-radius: 8px; padding: 9px 11px; font-size: 14px; min-width: 260px; }
.ci-btn { border: 0; background: var(--ci-blue); color: #fff; font-weight: 600; border-radius: 8px; padding: 9px 16px; cursor: pointer; font-size: 13px; }

.ci-loading, .ci-error, .ci-muted { color: var(--ci-muted); font-size: 13px; } .ci-error { color: var(--ci-red); }
.ci-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 800px) { .ci-grid { grid-template-columns: 1fr; } }
.ci-card { background: #fff; border: 1px solid var(--ci-line); border-radius: 14px; padding: 20px 22px; margin-bottom: 18px; }
.ci-card h2 { margin: 0 0 12px; font-size: 16px; }

.ci-form { display: grid; gap: 12px; max-width: 360px; }
.ci-form label { display: grid; gap: 5px; font-size: 12.5px; color: var(--ci-muted); }
.ci-form select, .ci-form input { border: 1px solid #C9D4E3; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.ci-form button { border: 0; background: var(--ci-blue); color: #fff; font-weight: 600; border-radius: 8px; padding: 9px 16px; cursor: pointer; justify-self: start; }
.ci-saved { color: var(--ci-green); font-size: 12.5px; }

.ci-verdict { display: inline-block; font-weight: 800; font-size: 15px; border-radius: 8px; padding: 8px 16px; }
.ci-verdict.pass { color: var(--ci-green); background: rgba(31,169,122,.13); }
.ci-verdict.fail { color: var(--ci-red); background: rgba(232,64,42,.12); }
.ci-reason { color: var(--ci-red); font-size: 12.5px; margin: 4px 0 0; }

.ci-code { background: #0F1B2D; color: #D7E2F0; border-radius: 10px; padding: 16px; font: 12.5px/1.55 ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; margin: 10px 0; }