.kwr-wrap{max-width:880px;margin:20px auto;padding:20px;background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.06);}
.kwr-form{display:grid;grid-template-columns:1fr 1fr auto;grid-gap:12px;align-items:end}
.kwr-field{display:flex;flex-direction:column}
.kwr-field label{font-weight:600;margin-bottom:6px}
.kwr-field input{padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;outline:none;transition:border .2s, box-shadow .2s;background:#fafafa}
.kwr-field input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.15);background:#fff}
.kwr-btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:none;border-radius:12px;background:#6366f1;color:#fff;font-weight:700;cursor:pointer;transition:transform .05s ease, box-shadow .2s}
.kwr-btn:active{transform:translateY(1px)}
.kwr-btn[disabled]{opacity:.8;cursor:not-allowed}
.kwr-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;display:none;animation:kwr-spin .8s linear infinite}
.kwr-spinner.show{display:inline-block}
@keyframes kwr-spin{to{transform:rotate(360deg)}}
.kwr-error{margin-top:8px;color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;padding:8px 10px;border-radius:10px}
.kwr-results{margin-top:18px;min-height:80px}
.kwr-loading{display:flex;align-items:center;gap:12px;padding:16px;border:1px dashed #e5e7eb;border-radius:12px;background:#fafafa}
.kwr-loader{width:18px;height:18px;border-radius:50%;border:3px solid #e5e7eb;border-top-color:#6366f1;animation:kwr-spin .9s linear infinite}
.kwr-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:10px}
.kwr-card-item{border:1px solid #eef2f7;border-radius:14px;padding:14px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.04);transition:transform .15s ease, box-shadow .2s}
.kwr-card-item:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.06)}
.kwr-kw{font-weight:700;margin-bottom:8px;word-break:break-word}
.kwr-meta{display:flex;gap:8px;flex-wrap:wrap}
.kwr-badge{font-size:12px;padding:4px 8px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px}
.kwr-empty{padding:14px;border:1px dashed #e5e7eb;border-radius:12px;background:#fafafa;text-align:center}
@media(max-width:760px){
  .kwr-form{grid-template-columns:1fr;align-items:stretch}
  .kwr-btn{width:100%}
}