*{box-sizing:border-box}body{margin:0;background:#f4f7fb;color:#152033;font:14px 'Segoe UI',Arial,sans-serif}button,input,select{font:inherit}button,select{border:1px solid #dfe7f2;border-radius:12px;background:white;color:#41516a;padding:11px 13px;cursor:pointer}button:hover:not(:disabled){border-color:#2864f0;background:#f0f5ff}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #93b4ff;outline-offset:2px}button:disabled{opacity:.4;cursor:not-allowed}header{margin:12px 20px 16px;padding:18px 20px;display:flex;align-items:center;gap:15px;background:white;border:1px solid #e1e8f1;border-radius:22px;box-shadow:0 2px 4px #15203308}h1{font-size:23px;margin:0 0 5px;font-weight:800}p{line-height:1.65;margin:0;color:#7a8ba2}.brand-icon{width:55px;height:55px;display:grid;place-items:center;color:white;font-size:37px;border-radius:17px;background:linear-gradient(135deg,#2468f6,#008ab4);box-shadow:0 5px 12px #008ab433}.export{margin-left:auto;display:flex;gap:8px}.primary{background:#2563ef;color:white;font-weight:700;border-color:#2563ef;box-shadow:0 6px 15px #2563ef24}.primary:hover:not(:disabled){background:#1753d8;color:white}small{display:block;font-size:11px;margin-top:5px;opacity:.8}main{display:grid;grid-template-columns:290px minmax(400px,1fr) 300px;gap:16px;padding:0 20px 20px;align-items:start}section,.editor{background:white;border:1px solid #e0e8f2;border-radius:21px;box-shadow:0 1px 3px #12213b0a}section{padding:20px;margin-bottom:16px}h2{font-size:16px;margin:0 0 20px;font-weight:750}label{display:block;font-size:12px;letter-spacing:.4px;font-weight:700;color:#718199;margin:22px 0 12px}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.choices button{padding:9px 5px;line-height:1.4;font-size:12px;min-height:89px;border-width:2px}.choices i{display:block;height:34px;font-size:28px;font-style:normal;margin:0 0 8px;border-radius:7px}.choices .active{color:#2563ff;border-color:#4078ff;background:#f0f6ff}.blur-swatch{background:linear-gradient(90deg,#e5a82a,#2864e9,#14bb84);filter:blur(4px);margin:2px}.pixel-swatch{background:conic-gradient(#142033 25%,white 0 50%,#142033 0 75%,white 0);background-size:14px 14px}.solid-swatch{background:#111827}.range{display:flex;align-items:center;gap:12px}input[type=range]{width:100%;accent-color:#2867f8;cursor:pointer}output{color:#2465ef;font-weight:700;min-width:37px;text-align:right}.hint{font-size:12px;color:#8c9cb2;line-height:1.6}.spread{display:flex;align-items:center;justify-content:space-between;gap:10px}.notice{font-size:11px;color:#74859b;margin-top:12px}.wide{width:100%}.two{display:flex;gap:6px}.two button{font-size:11px;flex:1;padding:10px 5px}.left section>label:first-of-type{margin-top:0}.left .hint{margin-top:8px}.editor{overflow:hidden}.toolbar{padding:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;min-height:66px}#fileInfo{color:#8291a6;font-size:12px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tools,.group{display:flex;gap:6px;align-items:center}.group{border:1px solid #e3eaf4;border-radius:30px;gap:0;padding:0 3px}.group button{border:0;background:transparent;padding:9px;font-size:12px}.toolbar button{font-size:12px}#viewport{height:560px;overflow:auto;background-color:#edf2f9;background-image:radial-gradient(#cfdbeb 1px,transparent 1px);background-size:24px 24px;display:flex;align-items:safe center;justify-content:safe center;padding:25px;position:relative}#empty{width:100%;min-height:480px;border:2px dashed #b9cbe2;border-radius:24px;background:#ffffffa6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}#empty h2{font-size:21px;margin:18px 0 12px}#empty p{max-width:540px}.image-icon{font-size:40px;color:#2b6afa;background:#eef5ff;border-radius:23px;padding:12px 22px}.empty-buttons{display:flex;gap:10px;margin:24px 0 15px}.empty-buttons button{padding:15px;font-weight:650}kbd{background:#eef3fa;border:1px solid #d9e3ef;border-radius:4px;padding:1px 5px;font:600 11px 'Segoe UI',sans-serif;color:#41516a}canvas{box-shadow:0 7px 28px #20304d23;touch-action:none;flex:none;cursor:crosshair;max-width:none}canvas[hidden]{display:none}.regions{padding:14px;border-top:1px solid #e1e8f1;background:#fbfcff}h3{font-size:13px;margin:0}#regionList{font-size:12px;color:#8190a4;display:flex;gap:6px;flex-wrap:wrap;padding-top:15px;min-height:37px}#regionList button{padding:6px 10px;font-size:11px}#regionList button.selected{border-color:#2563ef;color:#2563ef;background:#edf4ff}footer{padding:13px 16px;border-top:1px solid #e3ebf5;color:#7b8da6;font-size:12px}footer::first-letter{color:#22c55e}.right h2{margin:0}.right section{padding:20px}.right input[role=switch]{appearance:none;width:46px;height:26px;background:#cbd6e4;border-radius:20px;position:relative;cursor:pointer;flex-shrink:0}.right input[role=switch]:before{content:'';position:absolute;left:4px;top:3px;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 1px 3px #0003}.right input[role=switch]:checked{background:#2867f6}.right input[role=switch]:checked:before{left:23px}.dashed{border-style:dashed;margin:20px 0 12px}#logoPreview{height:120px;border:1px solid #eef2f8;border-radius:14px;background:conic-gradient(#f1f5fa 25%,white 0 50%,#f1f5fa 0 75%,white 0);background-size:20px 20px;display:flex;justify-content:center;align-items:center;text-align:center;color:#a8b4c5;font-size:12px;line-height:1.8;padding:20px}#logoPreview img{max-width:100%;max-height:100%}hr{border:0;border-top:1px solid #eef2f7;margin:26px -20px 0}.check{display:flex;gap:5px;align-items:center;letter-spacing:0;font-weight:400}.positions{display:grid;grid-template-columns:repeat(3,25px);gap:5px;margin-bottom:14px}.positions button{padding:0;width:25px;height:25px;border-radius:6px;background:#f7faff}.positions button.active{background:#2867f6;border-color:#2867f6}.privacy{text-align:center;color:#6b83a3;font-size:12px}.privacy span{font-size:11px;color:#96a4b8}#cropActions{margin-top:8px;display:flex;gap:5px}#cropActions[hidden]{display:none}#pan.active{background:#e2edff;border-color:#2563ef}#color{width:100%;height:35px;border:0;background:none}.dragging{outline:3px solid #2563ef;outline-offset:-4px}@media(min-width:1700px){main{grid-template-columns:330px minmax(500px,1fr) 350px}#viewport{height:640px}#empty{min-height:580px}}@media(max-width:1150px){main{grid-template-columns:245px minmax(350px,1fr)}.right{grid-column:1/-1}.right section{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.right section>*{max-width:230px}hr{display:none}.right .range{width:200px}.right label{margin:0}.right p{margin:0}.right #uploadLogo{margin:0}.privacy{display:none}}@media(max-width:700px){header{margin:8px;padding:14px;flex-wrap:wrap}h1{font-size:19px}header p{font-size:12px}.export{width:100%;margin:0}.export button{flex:1}.brand-icon{width:44px;height:44px}main{display:flex;flex-direction:column;padding:0 8px 16px}.editor{order:-1;width:100%}.left,.right{width:100%}.left{display:grid;grid-template-columns:1fr;gap:0}section{padding:16px}.choices button{min-height:72px}.toolbar{padding:8px}#viewport{height:420px;padding:12px}#empty{padding:18px;min-height:380px}#empty h2{font-size:18px}#empty p{font-size:12px}.empty-buttons{flex-direction:column;margin:15px 0}.regions .spread{align-items:flex-start;flex-direction:column}.right section{display:block}.right section>*{max-width:none}.right label{margin:20px 0 10px}.right #uploadLogo{margin:20px 0 10px}.right .range{width:100%}}