.button-workspace{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(360px,1.15fr);min-height:590px}.button-controls{display:grid;align-content:start;gap:16px;padding:22px;border-right:1px solid var(--line);background:#fbfcff}.button-controls>label,.control-pair label,.feedback-form label{display:flex;flex-direction:column;gap:7px;font-weight:750}.button-controls input[type=text],.button-controls input[type=url],.button-controls select,.feedback-form input,.feedback-form textarea{width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:var(--ink);font:inherit}.button-controls input:focus,.button-controls select:focus,.feedback-form input:focus,.feedback-form textarea:focus{outline:2px solid #a5b4fc;border-color:var(--brand)}.control-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.control-pair input[type=color]{width:100%;height:42px;padding:3px;border:1px solid #cbd5e1;border-radius:9px;background:#fff}.control-pair output{float:right;color:var(--brand);font-weight:800}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.option-grid label{display:flex;align-items:center;gap:8px;font-weight:700}.button-result{min-width:0}.button-preview{display:flex;align-items:center;justify-content:center;min-height:260px;padding:28px;background-color:#f8fafc;background-image:linear-gradient(45deg,#eef2f7 25%,transparent 25%),linear-gradient(-45deg,#eef2f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f7 75%),linear-gradient(-45deg,transparent 75%,#eef2f7 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.button-code-pane textarea,.button-result textarea{height:245px}.generated-button{display:inline-block;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease}.generated-button:hover{transform:translateY(-1px)}.feedback-callout{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;margin:18px 0 0;padding:20px 22px;border:1px solid #c7d2fe;border-left:5px solid var(--brand);border-radius:14px;background:#f5f7ff}.feedback-callout h2{margin:4px 0 5px;font-size:1.18rem}.feedback-callout p{margin:0;color:var(--muted)}.feedback-label{font-size:.75rem;font-weight:900;letter-spacing:.08em;color:var(--brand)}.feedback-actions,.feedback-form-actions{display:flex;flex-wrap:wrap;gap:9px}.feedback-form{grid-column:1/-1;display:grid;grid-template-columns:2fr 1fr;gap:14px;padding-top:16px;border-top:1px solid #dbe2ff}.feedback-form[hidden]{display:none}.feedback-form textarea{min-height:110px;resize:vertical}.feedback-form label span{font-weight:500;color:var(--muted)}.feedback-form-actions{grid-column:1/-1}.feedback-honeypot{position:absolute!important;left:-9999px!important}.button-controls input[type=range]{width:100%}@media(max-width:820px){.button-workspace{grid-template-columns:1fr}.button-controls{border-right:0;border-bottom:1px solid var(--line)}.feedback-callout{grid-template-columns:1fr}.feedback-actions .btn{flex:1}}@media(max-width:520px){.control-pair,.option-grid,.feedback-form{grid-template-columns:1fr}.button-controls{padding:16px}.button-preview{min-height:210px}.feedback-actions,.feedback-form-actions{display:grid;grid-template-columns:1fr}.feedback-callout{padding:18px}}