@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'JetBrains Mono','Fira Code',monospace;background:#fafafa;color:#1a1a1a;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 0;}
.container{background:#fff;border:1px solid #e0e0e0;border-radius:4px;padding:48px;max-width:580px;width:90%;}
.header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.header-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;}
.header-title{font-size:1.1rem;font-weight:700;letter-spacing:0.05em;}
.header-version{font-size:0.7rem;color:#aaa;margin-left:4px;}
.subtitle{font-size:0.78rem;color:#888;margin-bottom:16px;line-height:1.8;padding-left:18px;}
.feature-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;padding-left:18px;}
.tag{font-size:0.7rem;color:#22c55e;border:1px solid #bbf7d0;border-radius:2px;padding:2px 8px;background:#f0fdf4;}
.drop-zone{border:1px dashed #ccc;border-radius:4px;padding:48px 24px;text-align:center;cursor:pointer;transition:all .15s;background:#fafafa;}
.drop-zone:hover,.drop-zone.drag-over{border-color:#22c55e;background:#f0fdf4;}
.drop-icon{font-size:1.4rem;margin-bottom:12px;opacity:0.5;}
.drop-zone p{font-size:0.85rem;margin-bottom:6px;color:#444;}
.drop-zone span{font-size:0.75rem;color:#aaa;}
.file-label{color:#22c55e;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.hint{font-size:0.72rem;color:#bbb;margin-top:10px;text-align:center;}
.section-label{font-size:0.78rem;color:#888;margin:24px 0 12px;padding-left:2px;}
.image-list{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;margin-bottom:8px;}
.image-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #f0f0f0;border-radius:4px;font-size:0.75rem;background:#fafafa;}
.image-item input[type=checkbox]{accent-color:#22c55e;width:14px;height:14px;flex-shrink:0;}
.image-item img{width:36px;height:36px;object-fit:cover;border-radius:2px;border:1px solid #eee;flex-shrink:0;}
.image-item .img-no-thumb{width:36px;height:36px;background:#f0f0f0;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:0.6rem;color:#aaa;flex-shrink:0;}
.img-info{flex:1;overflow:hidden;}
.img-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333;}
.img-size{color:#aaa;font-size:0.68rem;margin-top:2px;}
.quality-wrap{margin:20px 0;padding:16px;border:1px solid #e0e0e0;border-radius:4px;background:#fafafa;}
.quality-header{display:flex;justify-content:center;align-items:center;gap:24px;margin-bottom:14px;font-size:0.75rem;}
.quality-label{color:#888;}
.quality-label span{color:#1a1a1a;font-weight:700;font-size:0.9rem;margin-left:4px;}
.quality-sep{color:#e0e0e0;}
.quality-reduction{color:#888;}
.quality-reduction span{color:#22c55e;font-weight:700;font-size:0.9rem;margin-left:4px;}
.quality-slider{-webkit-appearance:none;appearance:none;width:100%;height:2px;outline:none;cursor:pointer;display:block;border:none;background:linear-gradient(to right,#22c55e 0%,#22c55e calc(var(--val,82)*1%),#e0e0e0 calc(var(--val,82)*1%),#e0e0e0 100%);}
.quality-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#22c55e;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1.5px #22c55e;transition:transform .1s;}
.quality-slider::-webkit-slider-thumb:hover{transform:scale(1.2);}
.quality-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#22c55e;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1.5px #22c55e;}
.quality-slider::-moz-range-track{background:linear-gradient(to right,#22c55e 0%,#22c55e calc(var(--val,82)*1%),#e0e0e0 calc(var(--val,82)*1%),#e0e0e0 100%);height:2px;}
.action-row{display:flex;gap:8px;align-items:center;margin-top:16px;}
.sub-btn{background:none;border:1px solid #e0e0e0;border-radius:4px;padding:8px 14px;font-size:0.75rem;font-family:'JetBrains Mono',monospace;color:#888;cursor:pointer;transition:all .15s;}
.sub-btn:hover{border-color:#22c55e;color:#22c55e;}
.convert-btn{margin-left:auto;background:#22c55e;color:#fff;border:none;border-radius:4px;padding:10px 20px;font-size:0.82rem;font-weight:600;font-family:'JetBrains Mono',monospace;cursor:pointer;transition:background .15s;letter-spacing:0.03em;}
.convert-btn:hover{background:#16a34a;}
.progress-wrap{margin-top:28px;text-align:center;}
.progress-bar{background:#eee;border-radius:0;height:2px;overflow:hidden;margin-bottom:16px;}
.progress-fill{height:100%;background:#22c55e;animation:indeterminate 1.2s infinite;}
@keyframes indeterminate{0%{width:0%;margin-left:0;}50%{width:60%;margin-left:20%;}100%{width:0%;margin-left:100%;}}
#progressText{font-size:0.78rem;color:#888;}
#progressText::before{content:'> ';color:#22c55e;}
.result-title{font-size:0.85rem;font-weight:700;color:#22c55e;margin-bottom:16px;margin-top:24px;}
.result-title::before{content:'> ';}
.stats{border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:20px;font-size:0.78rem;}
.stat{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid #f0f0f0;}
.stat:last-child{border-bottom:none;}
.stat.highlight{background:#f0fdf4;}
.stat-label{color:#888;}
.stat-value{font-weight:600;color:#1a1a1a;}
.stat.highlight .stat-value{color:#22c55e;}
.image-result-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto;}
.result-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #f0f0f0;border-radius:4px;font-size:0.75rem;background:#fafafa;}
.result-item input[type=checkbox]{accent-color:#22c55e;width:14px;height:14px;flex-shrink:0;}
.result-item img{width:36px;height:36px;object-fit:cover;border-radius:2px;border:1px solid #eee;flex-shrink:0;}
.result-info{flex:1;overflow:hidden;}
.result-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333;}
.result-sizes{color:#aaa;font-size:0.68rem;margin-top:2px;}
.result-reduction{color:#22c55e;font-size:0.68rem;font-weight:600;}
.download-btn{width:100%;background:#22c55e;color:#fff;border:none;border-radius:4px;padding:12px;font-size:0.82rem;font-weight:600;font-family:'JetBrains Mono',monospace;cursor:pointer;transition:background .15s;letter-spacing:0.03em;}
.download-btn:hover{background:#16a34a;}
.reset-btn{width:100%;background:none;border:1px solid #e0e0e0;border-radius:4px;padding:10px;font-size:0.75rem;font-family:'JetBrains Mono',monospace;color:#aaa;cursor:pointer;transition:all .15s;margin-top:8px;letter-spacing:0.03em;}
.reset-btn:hover{border-color:#bbb;color:#666;}
.reset-btn::before{content:'> ';}
.footer{margin-top:32px;text-align:center;font-size:0.7rem;color:#bbb;line-height:2;}
.footer a{color:#aaa;text-decoration:none;}
.footer a:hover{color:#22c55e;}
.footer-top{margin-bottom:2px;}