select{border:1px solid #d3d3d3;background:#fff;padding:3px;font-size:15px;font-weight:normal}
input[type='text']{border:1px solid #d3d3d3;background:#fff;padding:4px;width:100%;font-size:14px;}
textarea{border:1px solid #d3d3d3;background:#fff;height:180px;padding:4px;width:100%;resize:vertical;font-size:14px;}
input[type='checkbox']:checked+label{color:#f00}
.outTable{border-collapse:collapse;width:auto}
.outTable td{white-space:nowrap;padding:4px 10px;color:#333;font-size:15px;border:0}
#previewBox{background:#f4f4f4;width:100%;height:auto;padding:20px;text-align:center}
#previewBox .preview{margin: 0 auto;background:#fff;display: inline-block;position: relative;box-shadow:1px 1px 4px #ccc;}
#previewBox .preview img{height: auto;max-width: 100%;max-height: 630px;}
h3{border-bottom:1px solid #d6d6d6;font-size:15px;font-weight:700;margin-bottom:20px;position:relative}
h3 span{border-bottom:2px solid #00a9e0;padding-bottom:10px;display:inline-block;position:relative;top:1px}
h3+div{margin-bottom:30px}
.errorBox{border:solid 1px #F6D4D4;background:#FBDFDF;color:#B62724;font-weight:bold;font-size:12pt;padding:12px;width:100%;margin:0 0 20px 0;border-radius:3px;display:none}
#loaderb{top:170px;position:absolute;left:calc(50% - 32px)}
.smBtn{color:#888;cursor:pointer;display:inline-block;border:solid 1px #ccc;padding:3px 8px;border-radius:3px;}
option:disabled{color:#999}
.tool-title{margin:0 0 5px;font-size:26px;font-style:normal;font-weight:700;line-height:1.2;color:#2f3235;}
.tool-desc{margin:0 0 30px;font-size:16px;line-height:1.2;color:#2f3235;padding:0 0 5px;border-bottom:solid 1px #f5f5f5}
.ui-widget-overlay {background: #666;}
.ui-dialog {box-shadow: 0 0 40px #999;position: fixed;}
.ui-dialog{position:relative;}
.ui-dialog .popFilter{position: absolute;left:20px;bottom:5px;margin: 0;}
.ui-dialog .popFilter label{margin-right:10px;}
.ui-dialog .popFilter input{margin: 3px;}
.ui-dialog .popFilter span{font-size:12px;color:#aaa;}


.app-shell{display:grid;grid-template-columns:minmax(300px,380px) 1fr;min-height:100vh}
.controls{padding:22px;overflow-y:auto;background:#fff;border-right:1px solid #e1e5ea}
.panel{margin-bottom:16px;padding:16px;background:#fafbfc;border:1px solid #e2e6ea;border-radius:14px}
.panel h2{grid-column:1 / -1;margin:0 0 12px;font-size:16px}
label{display:grid;gap:6px;margin-bottom:12px;color:#344054;font-size:14px;font-weight:600}
input[type=number],input[type=text],select,textarea{width:100%;padding:10px 11px;color:#101828;background:#fff;border:1px solid #cfd5dc;border-radius:9px}
textarea{resize:vertical;min-height:190px;line-height:1.4}
input[type=color]{width:100%;height:40px;padding:3px;background:#fff;border:1px solid #cfd5dc;border-radius:9px}
input[type=range]{width:100%}
.settings-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 12px}
.settings-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.checkbox-row{display:flex;align-items:center;gap:9px;font-weight:500}
.checkbox-row input{width:17px;height:17px}
.button{appearance:none;padding:10px 13px;border:0;border-radius:3px;cursor:pointer;font-weight:600;}
.button:hover{transform:translateY(-1px)}
.button:active{transform:translateY(0)}
.button.blue{color:#fff;background:#5bc0de}
.button.green{color:#fff;background:#5cb85c}
.button.primary{color:#fff;background:#3559e0}
.button.secondary{color:#24324a;background:#e9edf7}
.button.ghost{color:#475467;background:#fff;border:1px solid #d8dde4}
.inline-actions{display:flex;gap:8px;margin-top:10px}
.action-panel{display:grid;grid-template-columns: 1fr 1fr;gap:12px}
.solution-toggle{margin:0}
.download-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.status{min-height:24px;padding:0 3px;color:#475467;font-size:14px;margin-top:20px;}
.status.error{color:#b42318}
.status.success{color:#027a48}
.preview-area{min-width:0;overflow:auto}
.preview-toolbar{display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto 12px;color:#475467}
.svg-mount{display:grid;place-items:start center;min-height:670px;overflow:auto;}
.svg-mount svg{display:block;background:#fff;box-shadow:1px 1px 5px 1px #ccc}
.developer-note{max-width:1100px;margin:14px auto 0;padding:12px 14px;background:#fff;border:1px solid #e0e4e8;border-radius:10px;color:#475467}
.developer-note code{color:#344054}
@media (max-width:900px){.app-shell{grid-template-columns:1fr}
.controls{border-right:0;border-bottom:1px solid #e1e5ea}
.preview-area{padding:14px}}
@media (max-width:520px){.download-grid,.settings-grid{grid-template-columns:1fr}
.controls{padding:14px}
.svg-mount{padding:10px}}
.field-note{color:#667085;font-size:13px;font-weight:400;line-height:1.35}
.svg-mount svg{width:500px;height:auto;max-width:none;flex:0 0 auto}