.code-generator{width:min(820px,94vw);padding:26px;color:#21334b}
.code-generator-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.code-generator-head h2{margin:0;font-size:20px}.code-generator-head button{font-size:20px;padding:4px 12px}
.code-generator-tabs{display:flex;gap:8px;margin:22px 0}.code-generator-tabs button{flex:1}.code-generator-tabs .active{background:#e9f1fb;border-color:#2b5b8e;color:#244f7c;font-weight:700}
.code-generator-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:24px}.code-generator-grid>section{min-width:0}.code-generator label{font-size:14px}.code-generator .code-check{display:flex;align-items:center;gap:8px;line-height:1.6}.code-generator .code-check input{flex:0 0 auto;width:16px;height:16px;margin:0}
.code-generator-preview{background:#f3f6fa;border-radius:12px;padding:18px}.code-generator-preview h3{margin:0 0 18px;font-size:16px}#codePreview{display:flex;align-items:center;justify-content:center;min-height:150px;background:white;padding:12px;overflow:auto;border:1px solid #e0e6ed;border-radius:6px}#codePreview canvas{display:block;max-width:100%;max-height:300px;object-fit:contain}.number-generator-preview{white-space:pre;max-width:100%;overflow:auto}
#codeGeneratorError{color:#b33232;font-size:13px;line-height:1.7;overflow-wrap:anywhere}.code-generator-actions{display:flex;justify-content:flex-end;margin-top:20px}.code-generator .note{font-size:13px;line-height:1.8;color:#627185}
@media(max-width:640px){.code-generator-grid{grid-template-columns:1fr}.code-generator{padding:20px}.code-generator-head h2{font-size:17px}.code-generator-tabs button{padding:10px 4px;font-size:13px}}