:root{--ink:#061633;--muted:#6f7f95;--line:#dbe4ef;--soft:#f6f8fb;--panel:#fff;--brand:#07142d;--brand-2:#2f6fed;--disabled:#a8adb6;--shadow:0 18px 50px #08183614}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:linear-gradient(#f6f8fbe6,#fffffff5),radial-gradient(circle at 12% 20%,#2f6fed14,#0000 30%);margin:0;font-family:Microsoft YaHei,PingFang SC,Segoe UI,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}.converter{width:min(1040px,100% - 32px);margin:0 auto;padding:20px 0 34px}.hero{text-align:center;flex-direction:column;align-items:center;gap:10px;padding:0 0 28px;display:flex}.hero-icon{color:#fff;background:var(--brand);border-radius:0 0 18px 18px;place-items:center;width:64px;height:64px;display:grid;box-shadow:0 12px 28px #07142d33}.hero-icon svg,.upload-badge svg,.download-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;width:30px;height:30px}.hero h1{letter-spacing:0;margin:8px 0 0;font-size:clamp(32px,5vw,48px);line-height:1.12}.hero p{color:var(--muted);margin:0;font-size:18px}.drop-zone{background:#ffffffc7;border:2px dashed #d5deeb;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:220px;margin:0 auto 28px;transition:border-color .16s,background .16s,transform .16s;display:flex;position:relative}.drop-zone.drag-over{border-color:var(--brand-2);background:#eff5fff0;transform:translateY(-1px)}.drop-zone input{opacity:0;cursor:pointer;position:absolute;inset:0}.upload-badge{color:#7c8da4;background:#e4e9f1;border-radius:999px;place-items:center;width:58px;height:58px;display:grid}.drop-zone strong{font-size:18px}.drop-zone span{color:#8796ab}.settings-card,.file-panel{background:var(--panel);box-shadow:var(--shadow);border:1px solid #e5ebf2;border-radius:16px}.settings-card{padding:28px 30px 30px}.card-title-row,.panel-head,.advanced-row{justify-content:space-between;align-items:center;gap:16px;display:flex}.settings-card h2{margin:0;font-size:20px}.ghost-button{color:var(--muted);background:0 0;border:0}.preset-grid{flex-wrap:wrap;gap:10px;margin:22px 0;display:flex}.preset-button{border:1px solid var(--line);color:#51627a;background:#fff;border-radius:999px;min-width:126px;min-height:42px;padding:0 18px;font-weight:600}.preset-button.active{border-color:var(--brand);color:#fff;background:var(--brand)}.size-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:18px;display:grid}.size-form label,.range-row{color:#66768e;gap:8px;font-size:14px;display:grid}.size-form input{color:#151b28;background:#fff;border:1px solid #dfe6ef;border-radius:8px;outline:none;width:100%;height:58px;padding:0 16px;font-size:19px;box-shadow:inset 0 1px 2px #0c16260a}.size-form input:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px #2f6fed1f}.add-size-button{color:#fff;background:var(--brand-2);border:0;border-radius:8px;min-width:116px;height:58px;font-weight:700}.option-row{color:#617189;flex-wrap:wrap;align-items:center;gap:8px;margin-top:24px;font-size:17px;display:flex}.check-row{align-items:center;gap:10px;display:inline-flex}.check-row input{accent-color:#111827;width:21px;height:21px}code{color:#5a6780;white-space:nowrap;background:#eef2f7;border-radius:6px;padding:3px 8px;font-size:13px}.advanced-row{border-top:1px solid #edf1f6;margin-top:24px;padding-top:22px}.segmented{border:1px solid var(--line);background:var(--soft);border-radius:10px;padding:4px;display:inline-flex}.segment{color:#64748b;background:0 0;border:0;border-radius:7px;min-width:96px;height:36px}.segment.active{color:#fff;background:var(--brand)}.range-row{grid-template-columns:auto minmax(140px,240px) 46px;align-items:center}.range-row input{accent-color:var(--brand-2)}.file-panel{margin-top:22px;padding:18px 20px}.panel-head{color:var(--ink);padding-bottom:14px}.panel-head output{color:var(--muted)}.file-list{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;min-height:58px;margin:0;padding:0;list-style:none;display:grid}.file-item{background:#fbfcfe;border:1px solid #e6ecf3;border-radius:8px;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:12px;min-height:72px;padding:8px;display:grid}.file-item img{object-fit:cover;background:#edf2f7;border-radius:6px;width:54px;height:54px}.file-name,.file-meta{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.file-name{color:#1f2937;font-weight:700}.file-meta{color:#718096;margin-top:4px;font-size:13px}.download-button{color:#fff;background:var(--brand);border:0;border-radius:12px;justify-content:center;align-items:center;gap:12px;width:100%;min-height:62px;margin-top:28px;font-size:18px;font-weight:800;display:flex;box-shadow:0 18px 42px #07142d2e}.download-button:disabled{cursor:not-allowed;background:var(--disabled);box-shadow:none}.download-button svg{width:24px;height:24px}.status{color:#697992;text-align:center;min-height:22px;margin-top:12px;display:block}@media (width<=760px){.converter{width:min(100% - 22px,1040px);padding-top:12px}.hero h1{font-size:34px}.hero p{font-size:16px}.drop-zone{min-height:190px;padding:24px}.settings-card{padding:22px 18px}.size-form,.advanced-row{flex-direction:column;grid-template-columns:1fr;align-items:stretch}.add-size-button{width:100%}.range-row,.file-list{grid-template-columns:1fr}}