/*图片格式转换器（WebP / AVIF）- 批量处理，JUUI-2025-9-10,QQ1503028*/
:root{--primary:#4338ca;--danger:#dc2626;--warning:#ea580c;--success:#059669;--bg:#f8fafc;--card:#ffffff;--border:#e2e8f0;--text:#1e293b;--text-secondary:#64748b}
.juui-imgcvs-wrap{font-family:"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, sans-serif;max-width:1280px;margin:auto;padding:2.5%;background:var(--bg);color:var(--text);font-size:1rem}
.juui-imgcvs-wrap h1{text-align:center;margin-bottom:10px;font-weight:700;font-size:1.8rem}
.subtitle{text-align:center;color:var(--text-secondary);margin-bottom:30px;font-size:1rem}
.main-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}
.left > .upload-area{margin-bottom:20px}
.svg-icon{display:inline-flex;width:1.1em;height:1.1em;vertical-align:-0.2em;margin-right:6px;fill:currentColor}
.svg-icon svg{width:1em;height:1em;stroke:currentColor}
.upload-area{border:2px dashed #ccc;padding:40px;text-align:center;background:#fff;border-radius:8px;cursor:pointer;transition:all 0.3s}
.upload-area:hover{border-color:#4338ca;background-color:#e0e7ff}
.juui-imgcvs-wrap button{padding:10px 20px;margin:10px 5px;font-size:16px;cursor:pointer;background-color:#4338ca;color:white;border:none;border-radius:5px}
.juui-imgcvs-wrap button:hover{background-color:#3730a3}
.juui-imgcvs-wrap button:disabled{background-color:#ccc;cursor:not-allowed}
.btn-group{display:flex;justify-content:center;margin:20px 0}
.btn-secondary{background-color:#6c757d}
.btn-secondary:hover{background-color:#5a6268}
#preview{margin:20px 0}
.preview-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;justify-items:stretch;margin-top:20px}
.image-item{background:white;padding:15px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.1);text-align:center;width:220px;position:relative}
.image-item img{max-width:100%;max-height:200px;border-radius:5px;margin:10px 0}
.image-info{font-size:12px;color:#666;margin:5px 0}
.controls{padding:20px;background:white;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.1)}
.control-group{margin:15px 0}
.label{display:block;margin-bottom:5px;font-weight:bold}
input[type="range"]{width:100%;margin:10px 0;accent-color:#4338ca;-webkit-appearance:none;appearance:none;height:6px;background:linear-gradient(to right,#4338ca 0%,#4338ca 50%,#e2e8f0 50%,#e2e8f0 100%);border-radius:3px;outline:none}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#4338ca;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
input[type="range"]::-moz-range-thumb{width:20px;height:20px;background:#4338ca;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
input[type="range"]::-webkit-slider-track{width:100%;height:6px;background:#e2e8f0;border-radius:3px}
input[type="range"]::-moz-range-track{width:100%;height:6px;background:#e2e8f0;border-radius:3px;border:none}
#applyGlobalSize {width:100%;margin:10px auto}
.range-values{display:flex;justify-content:space-between;font-size:12px;color:#666}
.quality-value{font-weight:bold;color:#333}
.avif-status{color:#28a745;font-weight:bold;margin-top:5px}
.avif-status.not-supported{color:#dc3545}
.size-inputs{display:flex;gap:10px;align-items:center;margin:10px 0}
.size-inputs input{width:50%;padding:5px;border:1px solid #ccc;border-radius:4px}
.batch-controls{margin:20px 0;padding:15px;background:#f0f0f0;border-radius:8px}
.toggle-all{margin:10px 0;font-size:14px;color:#4338ca;cursor:pointer;text-decoration:underline}
.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,0.8);padding:10px 20px;border-radius:5px;z-index:10}
.output{display:flex;justify-content:space-around;flex-wrap:wrap;margin-top:30px}
.format-box{background:white;padding:15px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.1);margin:10px;text-align:center;min-width:200px}
.juui-imgcvs-wrap a{display:inline-block;margin-top:10px;color:#4338ca;text-decoration:none}
.juui-imgcvs-wrap a:hover{text-decoration:underline}
.note{font-size:14px;color:#666;margin-top:30px;text-align:center}
.download-btn{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between}
@media (max-width:900px){.main-layout{grid-template-columns:1fr}
.image-item{width:calc(100% - 30px)}
}