.test-page { margin: 0 auto; max-width: 980px; }
.test-section { padding: 18px 32px 40px; }
.test-section h1 { font-size: 30px; letter-spacing: -.03em; margin: 0 0 8px; }
.lead { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.test-summary { border-radius: 12px; font-weight: 800; margin: 0 0 14px; padding: 12px 14px; }
.test-summary.pass, .test-output.pass { background: var(--mint); color: var(--green-dark); }
.test-summary.fail, .test-output.fail { background: #fff0ef; color: #9c362f; }
.test-list { background: white; border: 1px solid var(--line); border-radius: 16px; font-size: 13px; list-style: none; margin: 0; padding: 6px 0; }
.test-list li { border-top: 1px solid #edf1f0; padding: 9px 16px; }
.test-list li:first-child { border-top: 0; }
.test-list li.pass { color: var(--green-dark); }
.test-list li.fail { color: #9c362f; font-weight: 700; }
.test-list small { color: #9c362f; display: block; font-weight: 400; margin-top: 4px; }
.test-output { background: white; border: 1px solid var(--line); border-radius: 14px; font-size: 13px; margin-top: 14px; overflow: auto; padding: 14px; white-space: pre-wrap; }
code { background: var(--soft); border-radius: 6px; padding: 1px 6px; }
@media (max-width: 700px) { .test-section { padding: 14px 20px 32px; } }