*{box-sizing:border-box}
body{margin:0;background:#f4f5f3;color:#20231f;font-family:"Noto Sans SC","Microsoft YaHei",sans-serif;-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
.dot{display:inline-block;width:6px;height:6px;background:#7baf28;border-radius:50%;margin-right:6px}
.main{max-width:1540px;margin:auto;padding:34px 40px 20px}
.intro{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}
h1{font-size:30px;letter-spacing:-1px;font-weight:600;margin:0 0 9px}
.intro p{color:#858a81;font-size:13px;margin:0}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:22px;align-items:start}
.preview-panel,.controls{background:white;border:1px solid #e0e4db;border-radius:12px;overflow:hidden}
.panel-head{height:61px;border-bottom:1px solid #edf0e9;display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.panel-title{font-size:13px;font-weight:600;display:flex;gap:8px;align-items:center}
.canvas-area{background:#fbfdf7;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.canvas-area.empty{min-height:460px}
.empty-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.empty-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:34px 46px;transition:transform .2s}
.canvas-area.empty:hover .empty-card{transform:translateY(-1px)}
.empty-icon{color:#758660;margin-bottom:6px}
.empty-title{font-size:15px;font-weight:600;color:#4a5240}
.empty-sub{font-size:11.5px;color:#98a08e}
.empty-formats{font-size:10px;color:#b0b6a6;margin-top:3px;letter-spacing:.3px}
.art-wrap{width:100%;position:relative;transition:width .2s}
.art-wrap canvas{display:block;width:100%;height:auto;background:conic-gradient(#e3e6dd 0 25%,#fafbf7 0 50%,#e3e6dd 0 75%,#fafbf7 0) 0 0/16px 16px}
.preview-foot{padding:14px 22px;display:flex;justify-content:space-between;font-size:11px;color:#89917f;border-top:1px solid #edf0e9}
.controls-title{padding:21px 23px 15px;display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:14px}
.control-section{padding:17px 23px;border-top:1px solid #eff1ec}
.section-label{font-size:10px;font-weight:600;color:#949b88;letter-spacing:1.5px;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.field{margin-top:18px}
.field:first-child{margin-top:0}
.field-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:8px}
.field-value{font-size:10px;color:#7c866e;background:#f3f5ef;border-radius:4px;padding:3px 6px;font-variant-numeric:tabular-nums}
.field .ant-slider{margin:10px 5px}
.field-help{font-size:10px;color:#a1a695;margin-top:5px}
.color-row{display:flex;gap:12px;justify-content:space-between}
.color-field{flex:1}
.color-field>span{display:flex;align-items:center;gap:6px;font-size:11px;color:#838c77;margin-bottom:8px}
.swatch-label{display:flex;gap:7px;align-items:center;font-size:10px;color:#777f6e}
.export{padding:18px 23px;border-top:1px solid #eff1ec}
.export .ant-btn{font-weight:600}
.ant-segmented{font-size:11px}
.ant-btn-default{box-shadow:none}
.ant-slider-rail{background:#e9ede2!important}
.ant-slider-track{background:#829654!important}
.ant-slider-handle:after{box-shadow:0 0 0 2px #829654!important}
.ant-select{width:100%}
.preview-column{min-width:0}
.preview-foot>div{white-space:nowrap}
.preview-foot>span{display:inline-flex;align-items:center}
.seg-label{display:inline-flex;align-items:center;gap:5px}
.field-label{display:inline-flex;align-items:center;gap:6px}
.field-label>svg,.section-label>svg,.panel-title>svg,.controls-title-main>svg{color:#8d9682;flex:none}
.controls-title-main{display:inline-flex;align-items:center;gap:8px}
.export .ant-btn,.controls-title .ant-btn{display:inline-flex;align-items:center;justify-content:center}
.ant-select-item-option-content .seg-label{justify-content:flex-start}
.guide p{margin:0 0 10px;font-size:13px;line-height:1.7;color:#4a5240}
.guide p:last-child{margin-bottom:0}
.guide-note{padding-top:10px;border-top:1px solid #eff1ec;color:#8b9480;font-size:12px}

@media(max-width:1050px){
.main{padding:25px 20px}
.workspace{grid-template-columns:minmax(0,1fr) 290px}
.control-section{padding:16px 18px}
}

@media(max-width:760px){
.main{padding:18px 12px 24px}
.workspace{grid-template-columns:1fr;gap:14px}
.intro{align-items:flex-start;gap:10px;margin-bottom:16px}
.intro>.ant-btn{flex-shrink:0}
h1{font-size:22px}
.intro p{font-size:12px}
.panel-head{height:52px;padding:0 14px}
.preview-foot{flex-wrap:wrap;gap:6px 14px;font-size:10px;padding:11px 14px}
.palette button{width:32px;height:30px}
.control-section{padding:15px 16px}
.controls-title{padding:17px 16px 12px}
.controls{overflow:visible}
.export{position:sticky;bottom:0;z-index:30;background:#fff;margin:0 -1px;border-radius:0 0 12px 12px;box-shadow:0 -6px 20px rgba(48,61,26,.08);padding:14px 16px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.ant-slider{touch-action:none}
}