*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f5f5f7;color:#1d1d1f;min-height:100vh}.header{background:#fff;padding:16px 24px;border-bottom:1px solid #d2d2d7;display:flex;align-items:center;gap:16px}.header h1{font-size:18px;font-weight:600;color:#1d1d1f}.container{display:flex;height:calc(100vh - 57px)}.sidebar{width:320px;min-width:320px;background:#fff;border-right:1px solid #d2d2d7;padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}.main{flex:1;padding:16px;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:12px}.section{background:#f5f5f7;border:1px solid #d2d2d7;border-radius:8px;padding:12px}.section h3{font-size:13px;color:#86868b;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}input[type=file]{display:none}.file-btn{display:inline-block;padding:8px 16px;background:#0071e3;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;text-align:center;width:100%;transition:background .2s}.file-btn:hover{background:#0077ed}.slider-row{display:flex;align-items:center;gap:8px}.slider-row input[type=range]{flex:1;accent-color:#0071e3}.slider-val{font-size:14px;font-weight:600;min-width:28px;text-align:right;color:#1d1d1f}.swatches{display:flex;flex-direction:column;gap:6px}.swatch-group{border:1px solid #d2d2d7;border-radius:6px;padding:6px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}.swatch-group:hover{border-color:#0071e3}.swatch-group-active{border-color:#0071e3;box-shadow:0 0 0 2px #0071e34d}.swatch-group .group-label{font-size:10px;color:#86868b;width:100%;margin-bottom:2px}.swatch{width:24px;height:24px;border-radius:4px;border:1px solid rgba(0,0,0,.12);position:relative}.swatch:hover:after{content:attr(title);position:absolute;bottom:110%;left:50%;transform:translate(-50%);background:#1d1d1f;color:#fff;padding:2px 6px;border-radius:3px;font-size:10px;white-space:nowrap;z-index:10}.export-btn{padding:10px 16px;background:#30d158;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;width:100%;transition:background .2s}.export-btn:hover{background:#28c04e}.export-btn:disabled{opacity:.4;cursor:not-allowed}.preview-area{border:1px solid #d2d2d7;border-radius:8px;background:repeating-conic-gradient(#e8e8e8 0% 25%,#fff 0% 50%) 50% / 16px 16px;overflow:hidden;display:flex;align-items:center;justify-content:center;max-width:100%;min-height:300px;flex:1;width:100%}.preview-area svg{max-width:100%;max-height:100%}.info{font-size:13px;color:#86868b;text-align:center;padding:40px}.status{font-size:12px;color:#86868b;margin-top:4px}.status.error{color:#ff3b30;font-weight:500;line-height:1.4}.loading-overlay{position:fixed;inset:0;background:#ffffffd9;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;transition:opacity .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.spinner{width:48px;height:48px;border:4px solid #d2d2d7;border-top-color:#0071e3;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{margin-top:16px;font-size:14px;color:#1d1d1f}.loading-progress{margin-top:8px;font-size:12px;color:#86868b}.progress-bar-wrap{width:200px;height:6px;background:#e8e8e8;border-radius:3px;margin-top:12px;overflow:hidden}.progress-bar-fill{height:100%;background:#0071e3;border-radius:3px;transition:width .3s}.drag-active{outline:3px dashed #0071e3;outline-offset:-3px}