#wp-compressor-tool { --tool-primary:#2563EB;--tool-primary-hover:#1D4ED8;--tool-bg-surface:#FFFFFF;--tool-text-main:#1F2937;--tool-text-sec:#6B7280;--tool-border:#E5E7EB;--tool-success:#10B981;--tool-success-bg:#ECFDF5;--tool-danger:#EF4444;--tool-gold:#F59E0B;--tool-radius:12px;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;color:var(--tool-text-main);line-height:1.5;width:100%;max-width:1000px;margin:0 auto;background:var(--tool-bg-surface);border-radius:var(--tool-radius);box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);border:1px solid var(--tool-border);position:relative;box-sizing:border-box;text-align:left;} #wp-compressor-tool *, #wp-compressor-tool *::before, #wp-compressor-tool *::after { box-sizing:border-box;} #wp-compressor-tool .tool-header { padding:24px;border-bottom:1px solid var(--tool-border);background:white;border-radius:12px 12px 0 0;} #wp-compressor-tool h1 { margin:0;font-size:24px;color:var(--tool-primary);display:flex;align-items:center;gap:10px;font-weight:800;line-height:1.2;} #wp-compressor-tool p { margin:5px 0 0 0;font-size:14px;color:var(--tool-text-sec);} #wp-compressor-tool .main-content { padding:24px;} #wp-compressor-tool .drop-zone { border:2px dashed #BFDBFE;background-color:#EFF6FF;border-radius:var(--tool-radius);height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:all 0.2s;position:relative;text-align:center;margin-bottom:0;} #wp-compressor-tool .drop-zone:hover { border-color:var(--tool-primary);background-color:#DBEAFE;} #wp-compressor-tool .drop-zone svg { color:var(--tool-primary);margin-bottom:15px;display:block;margin-left:auto;margin-right:auto;} #wp-compressor-tool .upload-btn-fake { background:white;border:1px solid var(--tool-primary);color:var(--tool-primary);padding:10px 24px;border-radius:8px;font-weight:600;font-size:14px;margin-top:20px;pointer-events:none;display:inline-block;} #wp-compressor-tool #file-input { position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:10;} #wp-compressor-tool .workspace { margin-top:30px;display:none;} #wp-compressor-tool .workspace.active { display:block;} #wp-compressor-tool .action-bar { display:flex;gap:15px;margin-bottom:30px;border-bottom:1px solid var(--tool-border);padding-bottom:20px;flex-wrap:wrap;} #wp-compressor-tool .tool-btn { flex:1;padding:14px;border-radius:8px;font-weight:700;cursor:pointer;border:none;font-size:14px;text-transform:uppercase;letter-spacing:0.5px;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.2s;min-width:150px;text-decoration:none;line-height:1;} #wp-compressor-tool .btn-primary { background:var(--tool-primary);color:white;box-shadow:0 4px 6px rgba(37, 99, 235, 0.2);} #wp-compressor-tool .btn-primary:hover { background:var(--tool-primary-hover);transform:translateY(-1px);color:white;} #wp-compressor-tool .btn-primary:disabled { background:#CBD5E1;color:#64748B;cursor:not-allowed;transform:none;box-shadow:none;} #wp-compressor-tool .btn-outline { background:white;border:1px solid #D1D5DB;color:var(--tool-text-main);} #wp-compressor-tool .btn-outline:hover { border-color:var(--tool-primary);color:var(--tool-primary);background:#F9FAFB;} #wp-compressor-tool .main-grid { display:flex;flex-direction:column;gap:30px;} @media (min-width:900px) { #wp-compressor-tool .main-grid.finished { display:grid;grid-template-columns:1fr 350px;gap:25px;align-items:start;} } #wp-compressor-tool .file-list-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;border-bottom:2px solid var(--tool-primary);padding-bottom:10px;} #wp-compressor-tool .file-list { list-style:none;padding:0;margin:0;max-height:500px;overflow-y:auto;border:1px solid var(--tool-border);border-radius:8px;} #wp-compressor-tool .file-item { background:white;border-bottom:1px solid var(--tool-border);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;margin:0;} #wp-compressor-tool .file-item:last-child { border-bottom:none;} #wp-compressor-tool .file-meta { display:flex;align-items:center;gap:12px;width:80%;} #wp-compressor-tool .file-thumb { width:40px;height:40px;border-radius:6px;border:1px solid var(--tool-border);display:flex;align-items:center;justify-content:center;background:#FEF3C7;color:#D97706;font-weight:800;font-size:10px;margin:0;} #wp-compressor-tool .file-name { font-weight:600;font-size:14px;color:var(--tool-text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;} #wp-compressor-tool .file-size { font-size:11px;color:#9CA3AF;margin:0;} #wp-compressor-tool .btn-delete { background:none;border:none;color:#9CA3AF;cursor:pointer;padding:5px;} #wp-compressor-tool .btn-delete:hover { color:var(--tool-danger);} #wp-compressor-tool .btn-add-more { width:28px;height:28px;border:1px solid var(--tool-primary);color:var(--tool-primary);background:white;border-radius:6px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;} #wp-compressor-tool .progress-wrapper { margin-bottom:15px;display:none;} #wp-compressor-tool .progress-wrapper.active { display:block;} #wp-compressor-tool .progress-track { height:12px;background:#E5E7EB;border-radius:6px;overflow:hidden;position:relative;margin-bottom:5px;} #wp-compressor-tool .progress-fill { height:100%;background:linear-gradient(45deg, var(--tool-primary) 25%, #3B82F6 25%, #3B82F6 50%, var(--tool-primary) 50%, var(--tool-primary) 75%, #3B82F6 75%, #3B82F6 100%);background-size:20px 20px;width:0%;transition:width 0.3s ease-out;animation:moveStripes 1s linear infinite;} @keyframes moveStripes { 0% { background-position:0 0;} 100% { background-position:20px 20px;} } #wp-compressor-tool .progress-label { display:flex;justify-content:space-between;font-size:11px;color:var(--tool-text-sec);font-weight:600;} #wp-compressor-tool .config-panel { background:#F9FAFB;padding:20px;border-radius:12px;border:1px solid var(--tool-border);} #wp-compressor-tool .options-grid { display:grid;grid-template-columns:1fr;gap:12px;margin-top:15px;} @media (min-width:768px) { #wp-compressor-tool .options-grid { grid-template-columns:repeat(2, 1fr);} } #wp-compressor-tool .option-card { background:white;border:1px solid var(--tool-border);border-radius:8px;padding:12px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all 0.2s;height:100%;margin:0;} #wp-compressor-tool .option-card:hover { border-color:var(--tool-primary);} #wp-compressor-tool input[type="radio"] { display:none;} #wp-compressor-tool input[type="radio"]:checked + .option-card { border:2px solid var(--tool-primary);background-color:#EFF6FF;box-shadow:0 1px 3px rgba(0,0,0,0.1);} #wp-compressor-tool .opt-icon { width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;} #wp-compressor-tool .bg-green { background:#DCFCE7;color:#166534;} #wp-compressor-tool .bg-orange { background:#FFEDD5;color:#C2410C;} #wp-compressor-tool .bg-blue { background:#DBEAFE;color:#1E40AF;} #wp-compressor-tool .bg-gray { background:#F3F4F6;color:#4B5563;} #wp-compressor-tool .filename-input { width:100%;padding:10px 12px;border:1px solid #D1D5DB;border-radius:6px;font-size:14px;margin-top:5px;outline:none;transition:border-color 0.2s;height:auto;} #wp-compressor-tool .filename-input:focus { border-color:var(--tool-primary);box-shadow:0 0 0 2px rgba(37, 99, 235, 0.1);} #wp-compressor-tool .password-toggle { display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:15px;border-top:1px solid #E5E7EB;cursor:pointer;} #wp-compressor-tool .password-toggle input[type="checkbox"] { width:18px;height:18px;cursor:pointer;accent-color:var(--tool-primary);margin:0;} #wp-compressor-tool .password-toggle span { font-weight:600;font-size:14px;color:var(--tool-text-main);display:flex;align-items:center;gap:6px;} #wp-compressor-tool .info-box { margin-top:15px;padding:10px;background:#FFF7ED;border:1px solid #FDBA74;border-radius:8px;font-size:11px;color:#C2410C;display:flex;gap:8px;align-items:start;} #wp-compressor-tool .completion-panel { background:var(--tool-success-bg);border:2px solid var(--tool-success);border-radius:12px;padding:30px;text-align:center;height:fit-content;margin-top:0;} #wp-compressor-tool .btn-download-zip { background:#059669;color:white;width:100%;padding:14px;border:none;border-radius:8px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;margin-bottom:10px;} #wp-compressor-tool .btn-restart { width:100%;padding:12px;border:2px solid var(--tool-primary);background:white;color:var(--tool-primary);border-radius:8px;font-weight:700;cursor:pointer;margin-top:5px;} #wp-compressor-tool .modal-overlay { position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:99999;display:flex;justify-content:center;align-items:center;} #wp-compressor-tool .modal-box { background:white;padding:30px;border-radius:12px;max-width:400px;width:90%;text-align:center;position:relative;box-shadow:0 10px 25px rgba(0,0,0,0.2);} #wp-compressor-tool .modal-icon-circle { width:64px;height:64px;background-color:#DBEAFE;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px auto;color:var(--tool-primary);} #wp-compressor-tool .modal-title { font-size:24px;font-weight:800;color:#1F2937;margin:0 0 10px 0;} #wp-compressor-tool .modal-desc { color:#6B7280;font-size:14px;margin-bottom:25px;line-height:1.5;} #wp-compressor-tool .btn-pro-buy { background:var(--tool-primary);color:white;width:100%;padding:14px;border:none;border-radius:8px;font-weight:800;cursor:pointer;text-transform:uppercase;font-size:14px;margin-bottom:12px;box-shadow:0 4px 6px -1px rgba(37, 99, 235, 0.4);transition:all 0.2s;} #wp-compressor-tool .btn-pro-buy:hover { background:var(--tool-primary-hover);transform:translateY(-1px);color:white;} #wp-compressor-tool .btn-modal-close-sec { background:#F3F4F6;color:#4B5563;width:100%;padding:12px;border:none;border-radius:8px;font-weight:600;cursor:pointer;} #wp-compressor-tool .btn-modal-close-sec:hover { background:#E5E7EB;} #wp-compressor-tool .modal-x { position:absolute;top:15px;right:15px;cursor:pointer;color:#9CA3AF;padding:5px;} #wp-compressor-tool .modal-x:hover { color:#4B5563;} #wp-compressor-tool .hidden { display:none !important;}