:root{--accent:#f97316;--accent-hover:#ea6c0a;--accent-light:rgba(249,115,22,.1);--accent-border:rgba(249,115,22,.3);--bg:#f8f9fb;--surface:#fff;--surface2:#f1f3f6;--border:#e4e7ec;--border2:#d0d5dd;--text:#101828;--text2:#344054;--muted:#667085;--muted2:#98a2b3;--green:#12b76a;--green-light:rgba(18,183,106,.1);--red:#f04438;--red-light:rgba(240,68,56,.08);--shadow-sm:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);--shadow-md:0 4px 16px rgba(16,24,40,.08), 0 1px 3px rgba(16,24,40,.05);--shadow-lg:0 12px 40px rgba(16,24,40,.12), 0 4px 8px rgba(16,24,40,.06);--radius:12px;--radius-sm:8px;--font:'Inter', sans-serif;--font-mono:'JetBrains Mono', monospace}.jpg-tool-wrap *, .jpg-tool-wrap *::before, .jpg-tool-wrap *::after{box-sizing:border-box}.jpg-tool-wrap{background:var(--bg);color:var(--text);font-family:var(--font);min-height:60vh}.app-header{background:var(--surface);border-bottom:1px solid var(--border);padding:0
32px;height:64px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}.logo{display:flex;align-items:center;gap:12px;text-decoration:none}.logo-mark{width:40px;height:40px;background:linear-gradient(135deg, var(--accent), #fb923c);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;box-shadow:0 2px 8px rgba(249,115,22,.35)}.logo-text{font-size:17px;font-weight:800;color:var(--text);letter-spacing:-.025em}.logo-text
span{color:var(--accent)}.header-badge{font-size:11px;font-weight:600;font-family:var(--font-mono);padding:3px
10px;border-radius:20px;background:var(--accent-light);color:var(--accent);border:1px
solid var(--accent-border);letter-spacing: .02em}.header-right{display:flex;align-items:center;gap:24px}.hstat{text-align:center}.hstat-val{font-size:16px;font-weight:700;color:var(--text);font-family:var(--font-mono);display:block;line-height:1}.hstat-val.orange{color:var(--accent)}.hstat-val.green{color:var(--green)}.hstat-lbl{font-size:10px;color:var(--muted2);font-weight:500;letter-spacing: .06em;text-transform:uppercase;margin-top:2px}.page-wrap{max-width:1080px;margin:0
auto;padding:32px
20px;display:flex;flex-direction:column;gap:20px}.drop-zone{background:var(--surface);border:2px
dashed var(--border2);border-radius:18px;padding:60px
24px;text-align:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.drop-zone::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%, rgba(249,115,22,.05) 0%, transparent 60%);pointer-events:none}.drop-zone.dragover{border-color:var(--accent);background:rgba(249,115,22,.03);box-shadow:0 0 0 4px rgba(249,115,22,.08)}.drop-zone
input{display:none}.drop-icon-wrap{width:72px;height:72px;margin:0
auto 20px;background:var(--accent-light);border:1.5px solid var(--accent-border);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--accent);transition:transform .2s, box-shadow .2s}.drop-zone:hover .drop-icon-wrap{transform:translateY(-3px);box-shadow:0 6px 20px rgba(249,115,22,.2)}.drop-title{font-size:22px;font-weight:800;color:var(--text);margin-bottom:8px;letter-spacing:-.02em}.drop-sub{font-size:14px;color:var(--muted);margin-bottom:24px;line-height:1.6}.btn-browse{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:none;padding:11px
28px;border-radius:var(--radius-sm);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;margin-bottom:22px !important;box-shadow:0 2px 8px rgba(249,115,22,.3)}.btn-browse:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 14px rgba(249,115,22,.35)}.format-pills{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;align-items:center}.fpill{font-family:var(--font-mono);font-size:11px;font-weight:600;padding:4px
10px;border-radius:6px;background:var(--surface2);border:1px
solid var(--border);color:var(--muted);letter-spacing: .03em}.fpill.to{background:var(--accent-light);border-color:var(--accent-border);color:var(--accent);font-weight:700}.fpill-arrow{color:var(--muted2);font-size:12px}.controls-card{background:var(--surface);border:1px
solid var(--border);border-radius:var(--radius);padding:22px
24px;box-shadow:var(--shadow-sm)}.controls-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:20px;align-items:end}.ctrl-lbl{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:8px;display:flex;align-items:center;gap:6px}.ctrl-lbl .val-chip{font-family:var(--font-mono);font-size:11px;background:var(--accent-light);color:var(--accent);border:1px
solid var(--accent-border);padding:1px
7px;border-radius:20px;font-weight:700}.quality-wrap{position:relative;padding:4px
0}.q-track{height:6px;background:var(--surface2);border-radius:6px;border:1px
solid var(--border);overflow:hidden}.q-fill{height:100%;background:linear-gradient(90deg, #f04438, var(--accent), var(--green));border-radius:6px;transition:width .1s;pointer-events:none}.q-slider{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.q-labels{display:flex;justify-content:space-between;margin-top:5px}.q-labels
span{font-size:10px;color:var(--muted2);font-family:var(--font-mono)}.bg-btn-group{display:flex;border:1px
solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.bg-btn{flex:1;padding:8px
6px;font-size:12px;font-weight:600;background:var(--surface);border:none;color:var(--muted);cursor:pointer;transition:all .15s;text-align:center;border-right:1px solid var(--border)}.bg-btn:last-child{border-right:none}.bg-btn:hover{background:var(--surface2);color:var(--text)}.bg-btn.active{background:var(--accent);color:#fff}.resize-row{display:flex;gap:8px;align-items:center}.resize-input{flex:1;min-width:0;padding:9px
10px;font-size:13px;font-family:var(--font-mono);background:var(--surface);border:1px
solid var(--border);border-radius:var(--radius-sm);color:var(--text);outline:none;transition:border .15s;text-align:center}.resize-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(249,115,22,.1)}.resize-sep{color:var(--muted2);font-size:14px;flex-shrink:0}.lock-btn{width:36px;height:36px;flex-shrink:0;background:var(--surface2);border:1px
solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .15s}.lock-btn.locked{background:var(--accent-light);border-color:var(--accent-border);color:var(--accent)}.lock-btn:hover{border-color:var(--accent)}.color-picker-row{display:flex;align-items:center;gap:8px;margin-top:8px}.color-preview{width:26px;height:26px;border-radius:6px;border:1px
solid var(--border);flex-shrink:0;cursor:pointer;transition:border-color .15s}.color-preview:hover{border-color:var(--accent)}.color-preview-label{font-size:11px;color:var(--muted);font-family:var(--font-mono)}.btn-convert{display:flex;align-items:center;gap:8px;padding:10px
22px;font-size:14px;font-weight:700;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;white-space:nowrap;box-shadow:0 2px 8px rgba(249,115,22,.25)}.btn-convert:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn-convert:disabled{opacity: .4;cursor:not-allowed;transform:none;box-shadow:none}.summary-card{background:var(--surface);border:1px
solid var(--border);border-radius:var(--radius);padding:18px
24px;box-shadow:var(--shadow-sm);display:none !important}.summary-card.visible{display:block !important}.sum-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:0}.sum-item{text-align:center;padding:0
16px;border-right:1px solid var(--border)}.sum-item:last-child{border-right:none}.sum-val{font-size:20px;font-weight:800;color:var(--text);font-family:var(--font-mono);display:block;letter-spacing:-.02em}.sum-val.orange{color:var(--accent)}.sum-val.green{color:var(--green)}.sum-lbl{font-size:11px;color:var(--muted2);margin-top:3px;font-weight:500;letter-spacing: .04em;text-transform:uppercase}.sum-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}.btn-dl-all{display:flex;align-items:center;gap:7px;padding:9px
20px;font-size:13px;font-weight:700;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s}.btn-dl-all:hover{background:var(--accent-hover)}.btn-clear-all{display:flex;align-items:center;gap:7px;padding:9px
16px;font-size:13px;font-weight:600;background:var(--surface);color:var(--muted);border:1px
solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s}.btn-clear-all:hover{border-color:var(--red);color:var(--red);background:var(--red-light)}#imageList{display:flex;flex-direction:column;gap:10px}.img-card{background:var(--surface);border:1px
solid var(--border);border-radius:var(--radius);padding:14px
16px;display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;box-shadow:var(--shadow-sm);transition:box-shadow .2s, border-color .2s;animation:slideIn .2s ease}.img-card:hover{box-shadow:var(--shadow-md)}.img-card.done{border-left:3px solid var(--green)}.img-card.error{border-left:3px solid var(--red)}@keyframes
slideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.img-thumb{width:72px;height:52px;border-radius:var(--radius-sm);object-fit:cover;background:var(--surface2);border:1px
solid var(--border);flex-shrink:0}.img-info{min-width:0}.img-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}.img-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;font-family:var(--font-mono);padding:3px
8px;border-radius:6px;letter-spacing: .02em}.tag-dim{background:var(--surface2);color:var(--muted);border:1px
solid var(--border)}.tag-from{background:var(--surface2);color:var(--text2);border:1px
solid var(--border)}.tag-to{background:var(--accent-light);color:var(--accent);border:1px
solid var(--accent-border)}.tag-size{background:var(--surface2);color:var(--muted);border:1px
solid var(--border)}.tag-new{background:var(--green-light);color:var(--green);border:1px
solid rgba(18,183,106,.2)}.tag-arrow{color:var(--muted2);font-size:10px}.status-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;font-family:var(--font-mono);padding:3px
9px;border-radius:20px;letter-spacing: .03em}.chip-idle{background:var(--surface2);color:var(--muted2);border:1px
solid var(--border)}.chip-working{background:rgba(249,115,22,.08);color:var(--accent);border:1px
solid var(--accent-border)}.chip-done{background:var(--green-light);color:var(--green);border:1px
solid rgba(18,183,106,.2)}.chip-error{background:var(--red-light);color:var(--red);border:1px
solid rgba(240,68,56,.2)}.img-progress{height:3px;background:var(--surface2);border-radius:3px;margin-top:8px;overflow:hidden;display:none}.img-progress-fill{height:100%;background:linear-gradient(90deg, var(--accent-hover), var(--accent));border-radius:3px;width:0%;transition:width .3s ease}.img-actions{display:flex;gap:6px;flex-shrink:0;align-items:center}.act-btn{width:36px;height:36px;background:var(--surface2);border:1px
solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--muted);font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .15s}.act-btn:hover{color:var(--text);border-color:var(--border2);background:var(--surface);box-shadow:var(--shadow-sm)}.act-btn.dl{color:var(--accent);border-color:var(--accent-border);background:var(--accent-light)}.act-btn.dl:hover{background:var(--accent);color:#fff}.act-btn.rm:hover{color:var(--red);border-color:rgba(240,68,56,.3);background:var(--red-light)}.cmp-overlay{position:fixed;inset:0;background:rgba(16,24,40,.7);backdrop-filter:blur(8px);z-index:100000;display:none;align-items:center;justify-content:center;padding:20px}.cmp-overlay.open{display:flex}.cmp-box{background:var(--surface);border:1px
solid var(--border);border-radius:16px;padding:28px;max-width:900px;width:100%;box-shadow:var(--shadow-lg);animation:popIn .2s ease}@keyframes
popIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}.cmp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.cmp-title{font-size:17px;font-weight:800;letter-spacing:-.015em}.cmp-close{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--surface2);border:1px
solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:15px;transition:all .15s}.cmp-close:hover{background:var(--red-light);color:var(--red);border-color:rgba(240,68,56,.3)}.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.cmp-panel{}.cmp-label{font-size:11px;font-weight:600;color:var(--muted);letter-spacing: .08em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px}.cmp-label-dot{width:8px;height:8px;border-radius:50%}.cmp-img{width:100%;max-height:320px;object-fit:contain;border-radius:10px;background:var(--surface2);border:1px
solid var(--border)}.cmp-info{margin-top:10px;padding:10px
12px;background:var(--surface2);border-radius:var(--radius-sm);border:1px
solid var(--border)}.cmp-info-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.cmp-info-row:last-child{margin-bottom:0}.cmp-info-key{font-size:11px;color:var(--muted);font-weight:500}.cmp-info-val{font-size:12px;font-weight:700;font-family:var(--font-mono);color:var(--text)}.cmp-info-val.good{color:var(--green)}.cmp-info-val.accent{color:var(--accent)}@media (max-width: 768px){.controls-grid{grid-template-columns:1fr 1fr}.controls-grid>*:last-child{grid-column:1/-1}.app-header{padding:0
16px}.header-right
.hstat{display:none}.page-wrap{padding:16px
12px;gap:14px}.img-card{grid-template-columns:58px 1fr}.img-actions{grid-column:1/-1;justify-content:flex-end}.cmp-grid{grid-template-columns:1fr}.sum-grid{grid-template-columns:1fr 1fr;gap:12px}.sum-item{border-right:none;border-bottom:1px solid var(--border);padding:8px
0}.sum-item:nth-child(2n){border-right:none}}@media (max-width: 480px){.controls-grid{grid-template-columns:1fr}.drop-zone{padding:40px
16px}.drop-title{font-size:18px}}.admin-bar .app-header{top:32px}@media screen and (max-width: 782px){.admin-bar .app-header{top:46px}}.jpg-tool-wrap .drop-title{font-size:22px!important;font-weight:800!important;margin:0
0 8px!important;padding:0!important;border:none!important;color:var(--text)!important}.jpg-tool-wrap
p{margin:0!important}.jpg-tool-wrap
strong{font-weight:700!important}.jpg-tool-wrap .resize-input{background:var(--surface)!important;border:1px
solid var(--border)!important;color:var(--text)!important;box-shadow:none!important}.jpg-tool-wrap .resize-input:focus{border-color:var(--accent)!important;outline:none!important}.jpg-tool-wrap .summary-card{display:none!important}.jpg-tool-wrap .summary-card.visible{display:block!important}.jpg-tool-wrap .cmp-overlay{z-index:100000}.jpg-tool-wrap .img-thumb{width:72px!important;height:52px!important;object-fit:cover!important;border-radius:8px!important}.jpg-tool-wrap .page-wrap{max-width:1080px!important}