:root{--bg:#0a0a0a;--surface:#111;--surface2:#1a1a1a;--border:#222;--border2:#2e2e2e;--accent:#00e5a0;--accent2:#00b87a;--warn:#ff6b35;--text:#f0f0f0;--muted:#666;--muted2:#999;--font-head:'Syne', sans-serif;--font-mono:'Space Mono', monospace}.page-container{background:var(--bg);font-family:var(--font-head);color:var(--text);min-height:60vh}.admin-bar .app-header{top:32px}@media screen and (max-width: 782px){.admin-bar .app-header{top:46px}}.page-container
.main{max-width:1200px !important}.page-container .drop-title{font-size:20px !important;font-weight:800 !important;margin:0
0 6px !important;padding:0
!important;border:none !important;color:var(--text) !important}.page-container
p{margin:0
!important}.page-container .resize-input{background:var(--surface2) !important;border:1px
solid var(--border2) !important;color:var(--text) !important;box-shadow:none !important}.page-container .resize-input:focus{border-color:var(--accent) !important;box-shadow:none !important;outline:none !important}.page-container .summary-bar{display:none !important}.page-container .summary-bar.visible{display:flex !important}.page-container .modal-overlay{z-index:100000}.page-container .img-thumb,
.page-container .compare-img{border-radius:8px !important;max-width:100% !important;height:auto}.page-container .img-thumb{width:60px !important;height:44px !important;object-fit:cover !important}.page-container *, .page-container *::before, .page-container *::after{box-sizing:border-box}.app-header{background:var(--surface);border-bottom:1px solid var(--border);padding:14px
28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}.logo{display:flex;align-items:center;gap:12px}.logo-mark{width:38px;height:38px;background:var(--accent);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#000}.logo
h1{font-size:18px;font-weight:800;margin:0;letter-spacing:-.02em}.logo h1
span{color:var(--accent)}.header-badge{font-family:var(--font-mono);font-size:10px;background:rgba(0,229,160,.12);color:var(--accent);border:1px
solid rgba(0,229,160,.25);padding:3px
10px;border-radius:4px;letter-spacing: .06em}.header-right{display:flex;align-items:center;gap:16px}.hstat{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-align:center}.hstat
b{display:block;font-size:14px;color:var(--text)}.main{padding:28px;display:flex;flex-direction:column;gap:24px;max-width:1200px;margin:0
auto}.drop-zone{border:2px
dashed var(--border2);border-radius:16px;padding:52px
24px;text-align:center;cursor:pointer;background:var(--surface);transition:all .2s;position:relative;overflow:hidden}.drop-zone::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%, rgba(0,229,160,.06) 0%, transparent 70%);pointer-events:none}.drop-zone.dragover{border-color:var(--accent);background:rgba(0,229,160,.04)}.drop-zone
input{display:none}.drop-icon{width:64px;height:64px;background:rgba(0,229,160,.1);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0
auto 16px;font-size:28px;color:var(--accent);transition:transform .2s}.drop-zone:hover .drop-icon{transform:translateY(-3px)}.drop-title{font-size:20px;font-weight:800;margin-bottom:6px}.drop-sub{font-size:13px;color:var(--muted2);margin-bottom:16px}.drop-formats{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.fmt-tag{font-family:var(--font-mono);font-size:10px;padding:3px
8px;border-radius:4px;background:var(--surface2);border:1px
solid var(--border2);color:var(--muted2);letter-spacing: .04em}.btn-browse{background:var(--accent);color:#000;border:none;padding:10px
24px;border-radius:8px;font-family:var(--font-head);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;margin-bottom:14px}.btn-browse:hover{background:var(--accent2);transform:translateY(-1px)}.controls-bar{background:var(--surface);border:1px
solid var(--border);border-radius:14px;padding:20px
24px;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:20px;align-items:end}.ctrl-group{display:flex;flex-direction:column;gap:8px}.ctrl-label{font-family:var(--font-mono);font-size:10px;letter-spacing: .1em;color:var(--muted);text-transform:uppercase}.ctrl-label
span{color:var(--accent);font-weight:700}.quality-slider{width:100%;accent-color:var(--accent);cursor:pointer;height:4px}.quality-track{position:relative;height:6px;background:var(--border2);border-radius:3px;overflow:hidden}.quality-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(to right, var(--warn), var(--accent));border-radius:3px;pointer-events:none;transition:width .1s}.format-btns{display:flex;gap:5px}.fmt-btn{flex:1;padding:7px
4px;border:1px
solid var(--border2);border-radius:7px;background:var(--surface2);color:var(--muted2);font-family:var(--font-mono);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;text-align:center;letter-spacing: .03em}.fmt-btn:hover{border-color:var(--accent);color:var(--text)}.fmt-btn.active{background:rgba(0,229,160,.12);border-color:var(--accent);color:var(--accent)}.resize-row{display:flex;gap:8px;align-items:center}.resize-input{width:70px;background:var(--surface2);border:1px
solid var(--border2);border-radius:7px;color:var(--text);font-family:var(--font-mono);font-size:12px;padding:7px
10px;outline:none;transition:border .15s}.resize-input:focus{border-color:var(--accent)}.resize-sep{color:var(--muted);font-size:14px}.lock-btn{width:30px;height:30px;background:var(--surface2);border:1px
solid var(--border2);border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:13px;transition:all .15s}.lock-btn.locked{border-color:var(--accent);color:var(--accent);background:rgba(0,229,160,.1)}.btn-compress-all{background:var(--accent);color:#000;border:none;padding:10px
22px;border-radius:8px;font-family:var(--font-head);font-size:13px;font-weight:800;cursor:pointer;transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:7px}.btn-compress-all:hover{background:var(--accent2);transform:translateY(-1px)}.btn-compress-all:disabled{opacity: .4;cursor:not-allowed;transform:none}#emptyState{text-align:center;padding:40px;color:var(--muted);font-size:14px;display:none}#imageList{display:flex;flex-direction:column;gap:10px}.img-card{background:var(--surface);border:1px
solid var(--border);border-radius:12px;padding:14px
16px;display:grid;grid-template-columns:60px 1fr auto;gap:14px;align-items:center;transition:border-color .2s;animation:slideIn .2s ease}.img-card:hover{border-color:var(--border2)}.img-card.done{border-color:rgba(0,229,160,.3)}.img-card.error{border-color:rgba(255,107,53,.3)}@keyframes
slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.img-thumb{width:60px;height:44px;border-radius:8px;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;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}.img-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.img-dim{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing: .04em}.size-badge{font-family:var(--font-mono);font-size:10px;padding:2px
7px;border-radius:4px;letter-spacing: .03em}.size-orig{background:var(--surface2);color:var(--muted2);border:1px
solid var(--border2)}.size-new{background:rgba(0,229,160,.1);color:var(--accent);border:1px
solid rgba(0,229,160,.2)}.size-err{background:rgba(255,107,53,.1);color:var(--warn);border:1px
solid rgba(255,107,53,.2)}.saving-badge{font-family:var(--font-mono);font-size:10px;font-weight:700;padding:2px
8px;border-radius:4px;letter-spacing: .04em}.saving-good{background:rgba(0,229,160,.15);color:var(--accent)}.saving-ok{background:rgba(255,200,50,.12);color:#ffc832}.saving-bad{background:rgba(255,107,53,.12);color:var(--warn)}.img-progress{height:3px;background:var(--border);border-radius:2px;margin-top:7px;overflow:hidden;display:none}.img-progress-fill{height:100%;background:linear-gradient(90deg, var(--accent2), var(--accent));border-radius:2px;width:0%;transition:width .3s ease}.img-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}.act-btn{width:34px;height:34px;border:1px
solid var(--border2);border-radius:8px;background:var(--surface2);color:var(--muted);font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}.act-btn:hover{color:var(--text);border-color:#555}.act-btn.dl-btn{border-color:rgba(0,229,160,.3);color:var(--accent)}.act-btn.dl-btn:hover{background:rgba(0,229,160,.1)}.act-btn.rm-btn:hover{border-color:rgba(255,107,53,.4);color:var(--warn)}.summary-bar{background:var(--surface);border:1px
solid var(--border);border-radius:14px;padding:16px
24px;align-items:center;gap:0;display:none !important}.summary-bar.visible{display:flex !important}.sum-stat{flex:1;text-align:center;padding:0
16px;border-right:1px solid var(--border)}.sum-stat:last-child{border-right:none}.sum-val{font-size:22px;font-weight:800;display:block;font-family:var(--font-mono);letter-spacing:-.02em}.sum-val.green{color:var(--accent)}.sum-val.orange{color:var(--warn)}.sum-lbl{font-size:11px;color:var(--muted);margin-top:2px;letter-spacing: .04em;font-family:var(--font-mono)}.btn-dl-all{background:var(--accent);color:#000;border:none;padding:10px
20px;border-radius:8px;font-family:var(--font-head);font-size:13px;font-weight:800;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:7px;white-space:nowrap;margin-left:20px}.btn-dl-all:hover{background:var(--accent2)}.btn-clear{background:transparent;color:var(--muted);border:1px
solid var(--border2);padding:10px
16px;border-radius:8px;font-family:var(--font-head);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;margin-left:8px}.btn-clear:hover{color:var(--warn);border-color:rgba(255,107,53,.4)}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);z-index:999;display:none;align-items:center;justify-content:center;padding:20px}.modal-overlay.open{display:flex}.modal-box{background:var(--surface);border:1px
solid var(--border2);border-radius:16px;padding:24px;max-width:860px;width:100%}.modal-title{font-size:16px;font-weight:800;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}.modal-close{cursor:pointer;color:var(--muted);font-size:20px;transition:color .15s}.modal-close:hover{color:var(--text)}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.compare-side{text-align:center}.compare-label{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-bottom:8px;letter-spacing: .06em}.compare-img{width:100%;max-height:340px;object-fit:contain;border-radius:10px;background:#000;border:1px
solid var(--border)}.compare-size{font-family:var(--font-mono);font-size:12px;color:var(--muted2);margin-top:6px}@media (max-width: 768px){.controls-bar{grid-template-columns:1fr 1fr}.controls-bar>*:last-child{grid-column:1 / -1}.header-right
.hstat{display:none}.main{padding:14px;gap:14px}.img-card{grid-template-columns:50px 1fr}.img-actions{grid-column:1 / -1;justify-content:flex-end}.compare-grid{grid-template-columns:1fr}.summary-bar{flex-wrap:wrap;gap:10px}.sum-stat{border-right:none;border-bottom:1px solid var(--border);padding:8px
0}.sum-stat:last-child{border-bottom:none}}@media (max-width: 480px){.controls-bar{grid-template-columns:1fr}.app-header{padding:12px
16px}.logo
h1{font-size:15px}}