*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
:root{--primary:#2563eb;--primary-light:#eff6ff;--dark:#1e293b;--gray:#64748b;--light-gray:#f1f5f9;--success:#10b981;--danger:#ef4444;--radius:12px;--shadow:0 4px 20px rgba(0,0,0,0.08)}
body{color:var(--dark);background:#fff;line-height:1.6;padding-bottom:60px}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
header{padding:20px 0;border-bottom:1px solid var(--light-gray)}
.header-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.logo{font-size:22px;font-weight:700;color:var(--primary);text-decoration:none}
.logo span{font-weight:300;color:#64748b}
.nav-links a{color:var(--gray);text-decoration:none;margin-left:24px;font-size:15px;transition:color .2s}
.nav-links a:hover{color:var(--primary)}
.nav-links a.active{color:var(--primary);font-weight:500}
.hero{text-align:center;padding:60px 0 40px}
.hero h1{font-size:38px;margin-bottom:16px;color:var(--dark)}
.hero p{font-size:18px;color:var(--gray);max-width:700px;margin:0 auto 30px}
.upload-area{border:2px dashed #cbd5e1;border-radius:var(--radius);padding:60px 20px;text-align:center;background:var(--primary-light);transition:all .3s;cursor:pointer;margin-bottom:40px}
.upload-area:hover{border-color:var(--primary);background:#f8faff}
.upload-area.active{border-color:var(--primary);background:#f0f7ff}
.upload-icon{font-size:48px;color:var(--primary);margin-bottom:16px}
.upload-text{font-size:17px;color:var(--dark);margin-bottom:8px}
.upload-desc{font-size:14px;color:var(--gray)}
input[type=file]{display:none}
.compress-level{display:flex;justify-content:center;gap:12px;margin-bottom:30px;flex-wrap:wrap}
.level-btn{padding:10px 24px;border-radius:30px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;transition:all .2s;font-size:14px}
.level-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
#taskList{margin:40px 0}
.task-item{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;flex-wrap:wrap;gap:12px}
.task-info{flex:1;min-width:150px}
.task-name{font-weight:500;margin-bottom:4px}
.task-size{font-size:13px;color:var(--gray)}
.task-progress{width:120px;height:6px;background:var(--light-gray);border-radius:3px;overflow:hidden;margin:0 20px}
.progress-bar{height:100%;background:var(--success);width:0%;transition:width .3s}
.task-btn{padding:8px 16px;border-radius:6px;border:none;cursor:pointer;font-size:14px;transition:all .2s}
.download-btn{background:var(--success);color:#fff}
.download-btn:disabled{opacity:.5;cursor:not-allowed}
.download-all{display:none;margin:40px auto;padding:14px 32px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer}
.download-all:hover{background:#1d4ed8}
footer{margin-top:80px;padding-top:40px;border-top:1px solid var(--light-gray);text-align:center}
.footer-links{margin-bottom:20px}
.footer-links a{color:var(--gray);text-decoration:none;margin:0 8px;font-size:14px}
.footer-links a:hover{color:var(--primary)}
.copyright{font-size:13px;color:var(--gray)}
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#fff;padding:16px 20px;box-shadow:0 -2px 10px rgba(0,0,0,0.1);z-index:9999;display:none}
.cookie-banner.show{display:block}
.cookie-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.cookie-text{font-size:14px;color:var(--gray)}
.cookie-btn{padding:8px 20px;background:var(--primary);color:#fff;border:none;border-radius:6px;cursor:pointer}
.cookie-btn:hover{background:#1d4ed8}
@media(max-width:768px){.hero h1{font-size:28px}.hero p{font-size:16px}.nav-links a{margin-left:12px;font-size:14px}.task-item{flex-direction:column;align-items:stretch}.task-progress{width:100%;margin:10px 0}}