* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.6; color: #2d3748; background: #fafafa; }
.container { max-width: 900px; margin: 0 auto; padding: 24px; }
header { margin-bottom: 24px; }
h1 { font-size: 24px; font-weight: 700; }
.subtitle { color: #718096; margin-top: 4px; }
.controls { display: flex; gap: 12px; margin-bottom: 24px; }
.btn { padding: 10px 20px; font-size: 14px; font-weight: 500; border-radius: 8px; border: none; cursor: pointer; transition: opacity 0.2s; }
.btn:hover { opacity: 0.85; }
.btn-primary { background: #8b7fc7; color: white; }
.btn-secondary { background: #fff; border: 1px solid #e8e4f0; color: #2d3748; }
.results { display: flex; flex-direction: column; gap: 8px; }
.test-result { background: #fff; border: 1px solid #e8e4f0; border-radius: 10px; padding: 16px; }
.test-result.pass { border-left: 4px solid #48bb78; }
.test-result.fail { border-left: 4px solid #f56565; }
.test-result.info { border-left: 4px solid #4299e1; }
.test-name { font-weight: 600; margin-bottom: 4px; }
.test-detail { font-size: 13px; color: #718096; white-space: pre-wrap; word-break: break-all; }
.test-detail code { background: #f7f5fb; padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', monospace; font-size: 12px; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #e8e4f0; border-top-color: #8b7fc7; border-radius: 50%; animation: spin 0.6s linear infinite; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }