#mcp-scanner-app { max-width: 720px; margin: 40px auto; font-family: -apple-system, sans-serif; }
.mcp-scanner-form-wrap { display: flex; gap: 12px; margin-bottom: 24px; }
#mcp-scanner-url { flex: 1; padding: 14px 18px; font-size: 16px; border: 2px solid #333; border-radius: 8px; background: #111; color: #fff; }
#mcp-scanner-btn { padding: 14px 28px; background: #6366f1; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; }
#mcp-scanner-btn:hover { background: #4f46e5; }
#mcp-scanner-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.mcp-spinner { width: 40px; height: 40px; border: 4px solid #333; border-top-color: #6366f1; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 20px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
#mcp-scanner-loading { text-align: center; color: #aaa; }
.mcp-grade { border: 3px solid; border-radius: 12px; padding: 28px; text-align: center; margin-bottom: 24px; }
.mcp-grade-icon { font-size: 48px; }
.mcp-grade-label { font-size: 28px; font-weight: 700; margin: 8px 0 4px; }
.mcp-grade-score { font-size: 18px; color: #aaa; }
.mcp-grade-url { font-size: 13px; color: #666; margin-top: 6px; }
.mcp-checks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.mcp-check { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; border-radius: 8px; background: #1a1a1a; border: 1px solid #2a2a2a; }
.mcp-check.fail { border-color: #3a1a1a; }
.mcp-check-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.mcp-check-body { flex: 1; }
.mcp-check-body strong { display: block; margin-bottom: 4px; }
.mcp-check-note { display: block; font-size: 13px; color: #aaa; }
.mcp-check-fix { display: block; font-size: 12px; color: #f59e0b; margin-top: 6px; }
.mcp-check-pts { font-size: 13px; color: #666; white-space: nowrap; margin-top: 2px; }
.mcp-cta { text-align: center; padding: 28px; background: #111; border-radius: 12px; border: 1px solid #2a2a2a; }
.mcp-cta-btn { display: inline-block; padding: 14px 32px; background: #6366f1; color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-bottom: 20px; }
.mcp-email-cta { color: #aaa; font-size: 14px; }
#mcp-alert-email { padding: 8px 12px; border: 1px solid #333; border-radius: 6px; background: #1a1a1a; color: #fff; margin-right: 8px; }
#mcp-alert-btn { padding: 8px 16px; background: #333; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.mcp-error { color: #ef4444; text-align: center; padding: 20px; }