#cl-generator{max-width:980px;margin:0 auto 64px;padding:0 24px;font-family:inherit}
.cl-tool-card{background:#fff;border:1px solid #E7E9EF;border-radius:20px;padding:30px;box-shadow:0 10px 30px rgba(23,32,51,.06)}
.cl-tool-top,.cl-results-head{display:flex;gap:20px;align-items:center;justify-content:space-between}
.cl-results-head{margin-top:34px;margin-bottom:16px}
.cl-eyebrow{margin:0 0 4px;color:#C98C5A;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.cl-tool-card h2{margin:0;color:#172033;font-size:28px;line-height:1.25}
.cl-actions{display:flex;gap:10px;flex-wrap:wrap}
.cl-label{display:block;margin:24px 0 8px;font-weight:700;color:#172033}
#cl-input{box-sizing:border-box;width:100%;min-height:132px;resize:vertical;border:1px solid #D5D9E2;border-radius:14px;background:#FFFDF8;color:#172033;padding:16px 18px;font:inherit;font-size:18px;line-height:1.6;outline:none;transition:border-color .15s,box-shadow .15s}
#cl-input:focus{border-color:#3B5CCC;box-shadow:0 0 0 3px rgba(59,92,204,.14)}
.cl-input-meta{display:flex;justify-content:space-between;gap:16px;margin-top:8px;color:#667085;font-size:13px}
.cl-secondary,.cl-copy{appearance:none;border:1px solid #D5D9E2;border-radius:10px;background:#fff;color:#172033;padding:10px 14px;font:inherit;font-weight:700;cursor:pointer;transition:.15s}
.cl-secondary:hover,.cl-copy:hover{border-color:#3B5CCC;color:#3B5CCC}
.cl-secondary:focus-visible,.cl-copy:focus-visible{outline:3px solid rgba(59,92,204,.22);outline-offset:2px}
.cl-secondary:disabled,.cl-copy:disabled{cursor:not-allowed;opacity:.48}
.cl-results{display:grid;gap:14px}
.cl-empty{border:1px dashed #C9CED9;border-radius:14px;background:#FAFBFF;padding:26px;text-align:center;color:#667085}
.cl-result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;border:1px solid #E7E9EF;border-radius:14px;background:#fff;padding:18px}
.cl-result-name{display:flex;align-items:center;gap:8px;margin:0 0 7px;color:#667085;font-size:13px;font-weight:700}
.cl-badge{display:inline-flex;align-items:center;border-radius:999px;background:#F2F5FF;color:#3B5CCC;padding:3px 7px;font-size:11px;font-weight:700}
.cl-result-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:#172033;font-size:25px;line-height:1.5}
.cl-copy{min-width:82px;border-color:#3B5CCC;color:#3B5CCC}
.cl-copy.is-copied{background:#17875B;border-color:#17875B;color:#fff}
.cl-status{min-height:24px;margin:14px 0 0;color:#17875B;font-size:14px;font-weight:700}
.cl-note{margin-top:16px;border-radius:14px;background:#F2F5FF;color:#44506A;padding:16px 18px;line-height:1.6}
.cl-compat{margin-top:12px;border:1px solid #E7E9EF;border-radius:14px;background:#fff;padding:16px 18px;color:#526079;line-height:1.6}
.cl-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media (max-width:700px){
  #cl-generator{padding:0 16px;margin-bottom:48px}
  .cl-tool-card{padding:20px;border-radius:16px}
  .cl-tool-top,.cl-results-head{align-items:flex-start;flex-direction:column}
  .cl-results-head{margin-top:28px}
  .cl-actions{width:100%}
  .cl-actions button{flex:1}
  .cl-input-meta{flex-direction:column;gap:4px}
  .cl-result{grid-template-columns:1fr}
  .cl-copy{width:100%}
  .cl-result-text{font-size:22px}
}