header { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #4f46e5 100%); color: white; padding: 36px 24px 28px; text-align: center; }
header h1 { font-size: 24px; font-weight: 800; }
.header-tagline { font-size: 13px; opacity: .85; margin-top: 8px; }

.container { max-width: 560px; margin: 28px auto; padding: 0 16px; }

label { display: block; font-size: 13px; font-weight: bold; color: #475569; margin: 16px 0 6px; }
label:first-of-type { margin-top: 0; }
.required { color: #dc2626; font-size: 11px; font-weight: bold; margin-left: 4px; }

input[type="text"], input[type="email"], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 14px; font-family: inherit; color: #1e293b;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: #4f46e5; }

.char-count { font-size: 11px; color: #94a3b8; text-align: right; margin-top: 4px; }

.tool-checklist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px;
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; max-height: 240px; overflow-y: auto;
}
.tool-check { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: normal; color: #334155; margin: 0; cursor: pointer; }
.tool-check input { width: auto; margin: 2px 0 0; cursor: pointer; }

.btn-primary {
  display: block; width: 100%; margin-top: 20px; padding: 12px; border: none;
  border-radius: 8px; background: #4f46e5; color: white; font-size: 14px;
  font-weight: bold; cursor: pointer;
}
.btn-primary:hover { background: #4338ca; }
.btn-primary:disabled { background: #94a3b8; cursor: not-allowed; }

.result-ok { margin-top: 16px; padding: 12px 16px; border-radius: 8px; background: #f0fdf4; border-left: 3px solid #22c55e; color: #166534; font-size: 13px; }
.result-err { margin-top: 16px; padding: 12px 16px; border-radius: 8px; background: #fef2f2; border-left: 3px solid #ef4444; color: #991b1b; font-size: 13px; }