*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.block{display:block}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f0f2f8;min-height:100vh}#root{min-height:100vh}.ico-app{min-height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden;background:linear-gradient(160deg,#f0f4ff,#f8fafc,#f0f2f8 60%,#eef1ff)}.bg-decoration{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.bg-circle{position:absolute;border-radius:50%;opacity:.08}.bg-circle-1{width:600px;height:600px;background:linear-gradient(135deg,#6366f1,#8b5cf6);top:-200px;right:-150px;animation:float1 20s ease-in-out infinite}.bg-circle-2{width:400px;height:400px;background:linear-gradient(225deg,#3b82f6,#6366f1);bottom:-100px;left:-100px;animation:float2 25s ease-in-out infinite}.bg-circle-3{width:300px;height:300px;background:linear-gradient(315deg,#a78bfa,#6366f1);top:50%;left:50%;transform:translate(-50%,-50%);animation:float3 18s ease-in-out infinite}@keyframes float1{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(-30px,20px) rotate(120deg)}66%{transform:translate(20px,-30px) rotate(240deg)}}@keyframes float2{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(25px,-15px) rotate(-120deg)}66%{transform:translate(-20px,25px) rotate(-240deg)}}@keyframes float3{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.15)}}.app-header{position:relative;z-index:1;padding:40px 20px 20px;text-align:center}.header-content{max-width:900px;margin:0 auto}.logo-area{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px}.logo-icon{font-size:42px;color:#6366f1;filter:drop-shadow(0 4px 8px rgba(99,102,241,.3))}.app-title{font-size:2.4rem;font-weight:800;background:linear-gradient(135deg,#6366f1,#8b5cf6,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}.app-subtitle{font-size:1.05rem;color:#64748b;font-weight:400}.app-main{position:relative;z-index:1;flex:1;padding:10px 20px 40px}.main-container{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.section-card{background:#ffffffd9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;padding:28px;box-shadow:0 2px 20px #0000000a,0 8px 40px #6366f10f;border:1px solid rgba(255,255,255,.6);margin-bottom:20px;transition:box-shadow .3s ease}.section-card:hover{box-shadow:0 4px 24px #0000000f,0 12px 48px #6366f11a}.section-title{font-size:1.15rem;font-weight:700;color:#1e293b;margin-bottom:20px;display:flex;align-items:center;gap:10px}.section-title .anticon{color:#6366f1;font-size:1.2rem}.section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.section-title-row .section-title{margin-bottom:0}.info-icon{color:#94a3b8;font-size:1rem;cursor:help;transition:color .2s}.info-icon:hover{color:#6366f1}.drop-zone{border:2px dashed #cbd5e1;border-radius:16px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s ease;background:#f8fafc99;min-height:260px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.drop-zone:hover{border-color:#6366f1;background:#eef2ff99}.drop-zone-active{border-color:#6366f1;background:#eef2ffcc;border-style:solid;transform:scale(1.01);box-shadow:0 0 0 4px #6366f11a}.drop-zone-has-image{padding:0;border-style:solid;border-color:#e2e8f0;cursor:default;min-height:auto;background:transparent}.drop-zone-has-image:hover{border-color:#e2e8f0;background:transparent}.drop-zone-loading{display:flex;flex-direction:column;align-items:center;gap:16px;color:#64748b}.drop-zone-empty{display:flex;flex-direction:column;align-items:center;gap:8px}.drop-icon{font-size:56px;color:#94a3b8;margin-bottom:8px;transition:color .3s}.drop-zone:hover .drop-icon{color:#6366f1}.drop-text{font-size:1.1rem;font-weight:600;color:#334155}.drop-hint{font-size:.9rem;color:#94a3b8}.drop-format{font-size:.8rem;color:#c0c8d4;margin-top:4px}.drop-zone-preview{width:100%;position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1 / 1;max-height:320px;display:flex;align-items:center;justify-content:center;background:#f1f5f9}.uploaded-image{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.drop-zone-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;gap:12px;opacity:0;transition:opacity .3s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.drop-zone-preview:hover .drop-zone-overlay{opacity:1}.upload-btn{margin-top:16px;height:48px;font-size:1rem;font-weight:600;border-radius:12px}.preview-area{display:flex;flex-direction:column;align-items:center;gap:20px}.preview-canvas-wrapper{display:flex;flex-direction:column;align-items:center;gap:10px}.preview-frame{position:relative;display:flex;align-items:center;justify-content:center;border-radius:16px;overflow:hidden;box-shadow:0 4px 24px #00000014,0 1px 4px #0000000a;border:2px solid #e2e8f0;background:#fff}.checkerboard-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(45deg,#e8ecf1 25%,transparent 25%),linear-gradient(-45deg,#e8ecf1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8ecf1 75%),linear-gradient(-45deg,transparent 75%,#e8ecf1 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;z-index:0}.preview-canvas{position:relative;z-index:1;image-rendering:auto;border-radius:4px}.preview-label{font-size:.9rem;font-weight:600;color:#475569}.preview-slider{width:100%;padding:0 8px}.slider-label{font-size:.85rem;color:#64748b;font-weight:500;display:block;margin-bottom:8px}.size-slider{margin:0}.size-slider .ant-slider-mark-text{font-size:.7rem;color:#94a3b8}.download-png-btn{border-radius:8px;font-weight:500}.preview-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:#94a3b8;gap:8px}.placeholder-icon{font-size:48px;color:#cbd5e1;margin-bottom:8px}.preview-placeholder p{font-size:.95rem;color:#64748b}.placeholder-hint{font-size:.8rem!important;color:#94a3b8!important}.size-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}.size-chip{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border:2px solid #e2e8f0;border-radius:12px;background:#f8fafc;cursor:pointer;transition:all .25s ease;font-family:inherit;font-size:.9rem;color:#475569;font-weight:500;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none}.size-chip:hover{border-color:#a5b4fc;background:#eef2ff;transform:translateY(-1px)}.size-chip-active{border-color:#6366f1;background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:#4338ca;font-weight:700;box-shadow:0 2px 8px #6366f133}.size-chip-active:hover{border-color:#6366f1;background:linear-gradient(135deg,#e0e7ff,#c7d2fe)}.size-value{font-variant-numeric:tabular-nums}.size-check{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#6366f1;color:#fff;font-size:.7rem;font-weight:700}.size-actions{display:flex;align-items:center;justify-content:space-between;margin-top:4px}.selected-count{font-size:.85rem;color:#64748b}.selected-count strong{color:#6366f1;font-weight:700}.download-ico-btn{height:54px;font-size:1.05rem;font-weight:700;border-radius:14px;background:linear-gradient(135deg,#6366f1,#8b5cf6)!important;border:none!important;box-shadow:0 4px 16px #6366f159;transition:all .3s ease;letter-spacing:.3px}.download-ico-btn:hover:not(:disabled){background:linear-gradient(135deg,#4f46e5,#7c3aed)!important;box-shadow:0 6px 24px #6366f173;transform:translateY(-2px)}.download-ico-btn:disabled{background:#cbd5e1!important;box-shadow:none;color:#94a3b8!important}.app-footer{position:relative;z-index:1;text-align:center;padding:24px 20px;color:#94a3b8;font-size:.85rem}.app-footer a{color:#94a3b8;text-decoration:none;transition:color .2s}.app-footer a:hover{color:#6366f1}@media (max-width: 768px){.main-container{grid-template-columns:1fr;gap:16px}.app-title{font-size:1.6rem}.app-subtitle{font-size:.9rem}.app-header{padding:24px 16px 12px}.app-main{padding:8px 16px 32px}.section-card{padding:20px;border-radius:16px}.drop-zone{min-height:200px;padding:28px 16px}.size-grid{grid-template-columns:repeat(3,1fr);gap:8px}.size-chip{padding:10px 6px;font-size:.8rem}}@media (max-width: 480px){.size-grid{grid-template-columns:repeat(2,1fr)}.drop-zone-overlay{flex-direction:column;gap:8px}.drop-zone-overlay .ant-btn{width:120px}}