#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:60%;} #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:#FFF1F2;color:#E11D48;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 .btn-download-icon { color:var(--tool-primary);cursor:pointer;background:#EFF6FF;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.2s;border:none;} #wp-compressor-tool .btn-download-icon:hover { background:#DBEAFE;color:var(--tool-primary-hover);} #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);position:relative;} #wp-compressor-tool .options-grid { display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:20px;} @media (min-width:768px) { #wp-compressor-tool .options-grid { grid-template-columns:repeat(3, 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;position:relative;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-blue { background:#DBEAFE;color:#1E40AF;} #wp-compressor-tool .bg-orange { background:#FFEDD5;color:#C2410C;} #wp-compressor-tool .bg-purple { background:#F3E8FF;color:#6B21A8;} #wp-compressor-tool .bg-green { background:#DCFCE7;color:#166534;} #wp-compressor-tool .bg-indigo { background:#E0E7FF;color:#4338CA;} #wp-compressor-tool .bg-gray { background:#F3F4F6;color:#4B5563;} #wp-compressor-tool .conditional-inputs { margin-bottom:20px;padding:12px;background:#FFF7ED;border:1px solid #FDBA74;border-radius:8px;display:none;} #wp-compressor-tool .conditional-inputs.active { display:block;} #wp-compressor-tool .input-row { display:flex;gap:10px;margin-top:5px;align-items:center;} #wp-compressor-tool .input-control { width:100%;padding:8px 12px;border:1px solid #D1D5DB;border-radius:6px;font-size:14px;outline:none;height:auto;} #wp-compressor-tool .select-control { width:90px;padding:8px;border:1px solid #D1D5DB;border-radius:6px;height:auto;} #wp-compressor-tool .dropdown-label { font-weight:700;font-size:14px;margin-bottom:8px;display:block;color:var(--tool-text-main);} #wp-compressor-tool .custom-select-wrapper { position:relative;margin-bottom:15px;} #wp-compressor-tool .custom-select { width:100%;padding:12px 15px;border:1px solid #D1D5DB;border-radius:8px;background:white;font-size:14px;appearance:none;-webkit-appearance:none;cursor:pointer;font-weight:500;color:var(--tool-text-main);height:auto;} #wp-compressor-tool .custom-select:focus { outline:none;border-color:var(--tool-primary);box-shadow:0 0 0 3px rgba(37, 99, 235, 0.1);} #wp-compressor-tool .flash-highlight { animation:flashBorder 1.5s ease;} @keyframes flashBorder { 0% { border-color:var(--tool-gold);box-shadow:0 0 0 3px rgba(245, 158, 11, 0.3);} 100% { border-color:#D1D5DB;box-shadow:none;} } #wp-compressor-tool .algo-description { font-size:13px;color:var(--tool-text-sec);background:#EFF6FF;padding:12px;border-radius:8px;border:1px solid #DBEAFE;display:flex;gap:10px;align-items:start;line-height:1.4;} #wp-compressor-tool .algo-icon { font-size:16px;margin-top:1px;} #wp-compressor-tool .auto-detect-badge { display:inline-flex;align-items:center;gap:4px;background:#ECFDF5;color:#059669;font-size:11px;font-weight:700;padding:4px 8px;border-radius:99px;margin-left:10px;opacity:0;transition:opacity 0.3s;} #wp-compressor-tool .auto-detect-badge.visible { opacity:1;} #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 .info-i { position:absolute;top:5px;right:5px;color:#9CA3AF;cursor:help;font-size:14px;} #wp-compressor-tool .tooltip-text { display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:#1F2937;color:white;padding:8px;border-radius:6px;font-size:11px;width:160px;z-index:20;text-align:center;pointer-events:none;margin-bottom:5px;} #wp-compressor-tool .option-card:hover .tooltip-text { display:block;} #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;}