*{box-sizing:border-box}body{margin:0;background:#f6f5f0;color:#293a35;font:14px/1.6 'Segoe UI','Microsoft YaHei',sans-serif}button,input,select{font:inherit}button{cursor:pointer;background:#fff;border:1px solid #dce2db;border-radius:8px;padding:8px 12px;color:inherit}button:hover{background:#eef4ed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e6a85d;outline-offset:2px}header{height:76px;display:flex;align-items:center;gap:12px;padding:0 3%;border-bottom:1px solid #e0e3db;background:#fafbf7}.brand{color:#315644;text-decoration:none;font-size:29px;display:flex;gap:12px;align-items:center}.brand span{font-size:11px;letter-spacing:2px}.private{margin-left:auto;color:#64806c;font-size:12px;margin-right:18px}main{max-width:1700px;margin:auto;padding:28px 3%}.intro{display:flex;align-items:center;justify-content:space-between;margin:8px 0 28px}.eyebrow{color:#718674;font-size:12px;letter-spacing:2px}h1{font-size:30px;letter-spacing:1px;margin:7px 0}p{margin:6px 0;color:#7a847d}h2{font-size:15px;margin:0 0 17px;display:flex;gap:10px;align-items:center}h2 span{color:#93a18f;font-size:11px}.workspace{display:grid;grid-template-columns:260px minmax(320px,1fr) 270px;gap:18px;align-items:start}.panel{background:#fff;border:1px solid #e3e7de;border-radius:15px;box-shadow:0 5px 18px #253d2010}.controls,.materials{padding:20px}.upload{display:flex;align-items:center;flex-direction:column;justify-content:center;border:1.5px dashed #b5c8b4;border-radius:10px;background:#f6f9f2;min-height:130px;text-align:center;cursor:pointer;padding:14px;gap:6px}.upload strong{color:#41674c}.upload small,.upload span{font-size:11px;color:#879080}.upload img{height:65px;max-width:100%;object-fit:contain}.row{display:flex;gap:12px;margin:16px 0 10px}.row label{flex:1;min-width:0;font-size:12px;color:#738074}.row input{width:100%;margin-top:6px;padding:7px 9px;border:1px solid #dce2db;border-radius:7px;color:#293a35;background:#fff}.check{display:flex;gap:7px;align-items:center;font-size:12px;margin:10px 0}input[type=checkbox]{accent-color:#42684d}.hint{font-size:11px;color:#8a9288;display:block;line-height:1.7}.controls h2:not(:first-child){margin-top:25px}.palette-info{font-weight:600;background:#f6f7f3;padding:9px;border-radius:7px}.wide{width:100%;margin-top:10px}.primary{background:#41694f;border-color:#41694f;color:#fff}.primary:hover{background:#31573e}.text-button{border:0;background:none;color:#6b846a;font-size:11px;padding:8px 0}.editor{overflow:hidden}.editor-head{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 14px}.editor-head h2{margin:0}.editor-head span{font-size:11px;color:#8a9288}.segmented{display:flex;padding:3px;border-radius:8px;background:#f0f3ee}.segmented button{border:0;background:none;font-size:12px;padding:5px 10px}.segmented .active{background:#fff;box-shadow:0 1px 4px #0001}.toolbar{border-top:1px solid #edf0e9;border-bottom:1px solid #edf0e9;padding:10px 12px;display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between}.tools{display:flex;align-items:center;gap:5px;font-size:11px}.tools button{padding:5px 8px;font-size:11px}.tools .active{background:#e8f1e5;border-color:#8eaa8f;color:#325a3a}select{max-width:100%;padding:5px;border:1px solid #dde3d9;border-radius:6px;background:white;color:#52644f}.canvas-wrap{height:565px;overflow:auto;display:flex;align-items:flex-start;padding:25px;background-color:#f3f4ef;background-image:radial-gradient(#cdd5c7 .8px,transparent .8px);background-size:14px 14px}canvas{display:block;margin:auto;background:white;box-shadow:0 5px 25px #26392513;touch-action:none;flex-shrink:0;image-rendering:pixelated}.editor-foot{display:flex;justify-content:space-between;padding:12px 18px;font-size:11px;color:#7a8875}.notice{padding:10px 18px;background:#f4f7ef;color:#6b8062;font-size:11px;border-top:1px solid #e9eee2}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:#f5f7f1;border-radius:10px;padding:14px}.metrics b{display:block;font-size:27px;font-weight:600}.metrics small{font-size:11px;color:#88947f}.size{padding:10px 0;color:#60725b;font-size:12px}.swatches{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}.swatch{width:23px;height:23px;padding:0;border-radius:6px;border:1px solid #0002}.swatch.selected{outline:2px solid #42694d;outline-offset:2px}.color-list{max-height:220px;overflow:auto;margin:12px 0}.color-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:7px 0;border-bottom:1px solid #f0f2ed}.color-row i{width:15px;height:15px;border:1px solid #0001;border-radius:4px}.color-row b{margin-left:auto;font-weight:500}.replace{display:flex;gap:5px}.replace button,.replace select{font-size:11px}.export{border-top:1px solid #edf0e8;padding-top:7px}.export .hint{margin-top:10px}footer{display:flex;justify-content:space-between;gap:12px;padding:28px 0 0;color:#929b8c;font-size:11px;letter-spacing:1px}@media(min-width:1500px){.canvas-wrap{height:650px}}@media(max-width:1120px){.workspace{grid-template-columns:220px minmax(300px,1fr)}.materials{grid-column:1/-1}.color-list{display:grid;grid-template-columns:repeat(4,1fr);gap:0 20px}.export{display:flex;gap:10px;align-items:center}.metrics{max-width:360px}.swatches{max-width:650px}.export .hint{display:none}}@media(max-width:650px){header{padding:12px;height:auto;flex-wrap:wrap}.brand{font-size:22px}.brand span{display:none}.private{font-size:10px;margin-left:auto;margin-right:0}header button{font-size:11px}main{padding:18px 12px}.intro{margin-bottom:18px}.intro h1{font-size:23px}.intro p{font-size:11px}.intro button{font-size:11px;white-space:nowrap}.eyebrow{font-size:10px;letter-spacing:0}.workspace{display:flex;flex-direction:column}.panel{width:100%}.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}.controls h2,.controls .upload,.controls .primary{grid-column:1/-1}.controls .row{margin:0}.controls h2:not(:first-child){margin-top:12px}.canvas-wrap{height:440px;padding:14px}.color-list{grid-template-columns:repeat(2,1fr)}.export{flex-wrap:wrap}.export button{width:auto;flex:1;white-space:nowrap;font-size:11px}footer{flex-wrap:wrap;font-size:10px}}
.brand-box{margin-bottom:12px}.brand-box label{display:block;margin-bottom:6px;font-size:12px;color:#60725b}.brand-box select{width:100%;padding:9px}.brand-box .hint{margin-top:8px}button:disabled{opacity:.45;cursor:not-allowed}
.zoom-tools{flex:1;justify-content:flex-end;min-width:260px}.zoom-tools input[type=range]{width:110px;min-width:65px;accent-color:#41694f}.zoom-tools output{min-width:44px;text-align:center;font-variant-numeric:tabular-nums}.zoom-tools button{min-width:30px}.canvas-wrap{overscroll-behavior:contain}