@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans','Noto Sans SC',sans-serif;color:#202638;background:#f4f6fb;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px}.shell{max-width:1080px;margin:auto;padding:42px 28px 24px}header{display:flex;align-items:center;gap:14px}.brand-mark{display:grid;place-items:center;width:45px;height:45px;border-radius:14px;background:#4459d9;color:white;font-size:24px;font-weight:700;box-shadow:0 7px 18px #4459d933}.eyebrow{margin:0 0 3px;color:#68738b;font-size:12px}h1{margin:0;font-size:24px;letter-spacing:-.4px}.intro{margin:18px 0 26px;color:#657087;font-size:14px}.workspace{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,.85fr);gap:22px}.preview-column,.settings{padding:22px;border:1px solid #e7eaf2;border-radius:16px;background:#fff;box-shadow:0 5px 20px #19285008}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}h2{margin:0;font-size:15px}.section-heading span{color:#8790a2;font-size:12px}.preview-tools{display:flex;align-items:center;gap:12px}.text-button{padding:0;border:0;background:none;color:#5265db;font:inherit;font-size:12px;cursor:pointer}.text-button:hover{text-decoration:underline}.dropzone{min-height:315px;border:1.5px dashed #cdd3e2;border-radius:12px;background:#fafbfe;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#7a8498;cursor:pointer;text-align:center;transition:.18s}.dropzone:hover,.dropzone.dragover{border-color:#596ce3;background:#f4f5ff}.dropzone strong{color:#39445a;font-size:14px}.dropzone span:last-child{font-size:12px}.dropzone input{position:absolute;width:1px;height:1px;opacity:0}.upload-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#ecefff;color:#5265db;font-size:26px}.canvas-wrap{max-height:500px;overflow:auto;text-align:center;border-radius:10px;background: repeating-conic-gradient(#e9ebf0 0% 25%,#fff 0% 50%) 50%/20px 20px}canvas{display:block;max-width:100%;height:auto;margin:auto}.privacy{margin:13px 0 0;color:#7d879b;font-size:12px}.settings h2{margin:0 0 22px}.field{display:block;margin-bottom:18px;color:#555f74;font-size:12px;font-weight:600}.field textarea{display:block;width:100%;margin-top:8px;padding:11px 12px;border:1px solid #dfe3ed;border-radius:8px;font:inherit;font-size:13px;line-height:1.5;resize:vertical;outline:none}.field textarea:focus{border-color:#6979e6;box-shadow:0 0 0 3px #6979e61a}.field select{display:block;width:100%;height:37px;margin-top:8px;padding:0 9px;border:1px solid #dfe3ed;border-radius:8px;background:#fff;color:#39445a;font:inherit;font-weight:400}.field input[type=range]{display:block;width:100%;margin:11px 0 0;accent-color:#5265db}.field input[type=color]{display:block;width:100%;height:37px;margin-top:8px;padding:3px;border:1px solid #dfe3ed;border-radius:8px;background:white;cursor:pointer}.field output{float:right;color:#7a8498;font-weight:400}.field-row{display:grid;grid-template-columns:.7fr 1.3fr;gap:16px}.export-options{grid-template-columns:1fr 1fr;gap:12px}.export-options .field{margin-bottom:14px}.actions{display:flex;gap:8px;margin-top:8px}.save-button{padding:0 10px}.button{min-height:42px;padding:0 14px;border:0;border-radius:8px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}.button:disabled{opacity:.45;cursor:not-allowed}.secondary{background:#f0f2f7;color:#515d73}.secondary:hover{background:#e7eaf2}.primary{flex:1;background:#4c60d8;color:white;box-shadow:0 5px 13px #4c60d82b}.primary:hover:not(:disabled){background:#3e51c4;transform:translateY(-1px)}.hint{margin:14px 0 0;color:#8a93a5;font-size:11px;line-height:1.7}footer{text-align:center;color:#929bad;font-size:11px;padding:24px 0 0}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,15px);padding:10px 16px;border-radius:8px;background:#252d40;color:white;font-size:13px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}@media(max-width:760px){.shell{padding:26px 16px 18px}.workspace{grid-template-columns:1fr}.preview-column,.settings{padding:17px}.dropzone{min-height:240px}.settings{order:-1}.intro{margin:14px 0 19px}}
