:root{--bg-color:#f3f6f9;--text-color:#1e293b;--surface-color:rgba(255,255,255,0.7);--border-color:rgba(226,232,240,0.8);--dropzone-border:#cbd5e1;--primary-color:#4f46e5;--primary-hover:#4338ca;--secondary-text:#64748b;--dropzone-bg-hover:rgba(241,245,249,0.8);--success-color:#10b981;--accent-color:var(--primary-color);--accent-bg:rgba(79,70,229,0.08);--dropdown-bg:rgba(255,255,255,0.85);--dropdown-border:var(--border-color);--dropdown-hover:rgba(241,245,249,0.9);}[data-theme="dark"]{--bg-color:#0f172a;--text-color:#f8fafc;--surface-color:rgba(30,41,59,0.7);--border-color:rgba(51,65,85,0.8);--dropzone-border:#475569;--primary-color:#6366f1;--primary-hover:#818cf8;--secondary-text:#94a3b8;--dropzone-bg-hover:rgba(51,65,85,0.6);--success-color:#10b981;--accent-color:var(--primary-color);--accent-bg:rgba(99,102,241,0.15);--dropdown-bg:rgba(30,41,59,0.85);--dropdown-border:var(--border-color);--dropdown-hover:rgba(51,65,85,0.9);}body{font-family:'Poppins',sans-serif;margin:0;background:var(--bg-color);color:var(--text-color);transition:background 0.3s ease,color 0.3s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}input,textarea{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;}img{-webkit-user-drag:none;user-drag:none;}.container{width:100%;max-width:1140px;padding:0 20px;margin:auto;}#app-header{position:sticky;top:0;z-index:100;}.header{background:rgba(255,255,255,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 10px rgba(0,0,0,0.05);border-bottom:1px solid var(--border-color);transition:all 0.3s ease;}.header.scrolled{box-shadow:0 5px 15px rgba(0,0,0,0.1);}.navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 0;transition:padding 0.3s ease;}.header.scrolled .navbar{padding:10px 0;}.nav-links{list-style:none;display:flex;gap:30px;margin:0;padding:0;margin-left:auto;margin-right:30px;}.nav-links a{text-decoration:none;color:var(--text-color);font-weight:500;font-size:16px;transition:color 0.3s ease;}.nav-links a:hover{color:var(--primary-color);}.logo{font-size:24px;font-weight:600;color:var(--text-color);display:flex;align-items:center;transition:font-size 0.3s ease;}.header.scrolled .logo{font-size:20px;}.logo i{margin-right:8px;color:var(--primary-color);}.nav-actions{display:flex;align-items:center;gap:15px;}.theme-toggle{background:none;border:none;color:var(--text-color);font-size:20px;cursor:pointer;transition:color 0.3s ease;}.theme-toggle:hover{color:var(--primary-color);}.upload-section{min-height:calc(100vh - 80px);display:flex;align-items:center;padding:20px 0;}.section-header{text-align:center;margin-bottom:30px;}.section-header h2{font-size:32px;font-weight:700;margin-bottom:15px;color:var(--text-color);}.section-header p{font-size:16px;color:var(--secondary-text);}.upload-container{border:2px dashed var(--dropzone-border);padding:50px 40px;border-radius:20px;text-align:center;background:var(--surface-color);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 40px rgba(0,0,0,0.04);transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);position:relative;overflow:visible;}.upload-container:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,0.08);border-color:var(--primary-color);}.upload-container.dragover{background:var(--dropzone-bg-hover);border-color:var(--primary-color);transform:scale(1.02) translateY(-4px);box-shadow:0 20px 40px rgba(79,70,229,0.15);animation:none;}.upload-icon{font-size:50px;color:var(--primary-color);margin-bottom:20px;transition:transform 0.3s ease;}.upload-container:hover .upload-icon{transform:translateY(-5px);}.upload-text h3{margin:0;font-size:22px;font-weight:600;color:var(--text-color);}.upload-text p{color:var(--secondary-text);}.btn{display:inline-block;background:var(--primary-color);color:#fff;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;text-decoration:none;transition:all 0.3s ease;cursor:pointer;border:none;box-shadow:0 4px 6px rgba(52,152,219,0.2);}.btn:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 6px 12px rgba(52,152,219,0.3);}.file-types{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}.file-type{background:var(--dropzone-bg-hover);padding:6px 12px;border-radius:20px;font-size:13px;font-weight:500;color:var(--secondary-text);}.results-grid{display:flex;flex-direction:column;gap:20px;margin-top:20px;}.result-card{display:flex;align-items:center;gap:20px;padding:20px;background:var(--surface-color);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.04);transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275),box-shadow 0.4s ease,border-color 0.4s ease;}.result-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 16px 48px rgba(0,0,0,0.08);border-color:var(--primary-color);}.result-preview-img{width:140px;height:140px;object-fit:cover;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1);border:2px solid #fff;}.result-details{flex:1;}.savings-badge{display:inline-block;background:var(--success-color);color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:700;margin-top:5px;animation:popIn 0.5s cubic-bezier(0.175,0.885,0.32,1.275) forwards;}@keyframes popIn{0%{transform:scale(0.8);opacity:0;}100%{transform:scale(1);opacity:1;}}.download-btn{background:var(--success-color);color:#fff;padding:8px 14px;border-radius:6px;font-size:14px;font-weight:500;text-decoration:none;transition:opacity 0.2s;}.download-btn:hover{opacity:0.9;}.compressify-layout{display:flex;gap:30px;margin-top:40px;}.compressify-main{flex:1;min-width:0;}.ads-side{width:160px;min-width:120px;}.ad-box{background:var(--surface-color);border:1px solid var(--border-color);padding:10px;margin-bottom:30px;text-align:center;border-radius:8px;}.ad-box img{width:100%;border-radius:6px;}.action-buttons{text-align:center;margin-top:20px;display:none;}.toast-notification{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--surface-color);color:var(--text-color);padding:12px 24px;border-radius:50px;box-shadow:0 10px 30px rgba(0,0,0,0.15);display:flex;align-items:center;gap:12px;font-weight:500;opacity:0;visibility:hidden;transition:all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);z-index:9999;border:1px solid var(--border-color);}.toast-notification.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;}.toast-error i{color:#e74c3c;}.toast-success i{color:#2ecc71;}.action-btn{transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.3s ease;}.action-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1);}.action-btn:active{transform:translateY(0);}.dropzone{transition:all 0.3s cubic-bezier(0.25,0.8,0.25,1);}.dropzone.dragover{transform:scale(1.02);box-shadow:0 10px 30px rgba(52,152,219,0.15);}.action-buttons .btn{margin:10px;}.conversion-selectors{display:flex;justify-content:center;gap:20px;margin-top:25px;margin-bottom:25px;flex-wrap:wrap;}.selector-box{display:flex;align-items:center;background:var(--accent-bg);padding:10px 15px;border-radius:12px;gap:10px;}.selector-label{font-weight:600;font-size:16px;color:var(--text-color);}.custom-select{position:relative;cursor:pointer;font-weight:700;color:var(--accent-color);padding:5px 10px;border-radius:6px;user-select:none;}.custom-select:hover{background:rgba(109,93,252,0.1);}.select-dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--dropdown-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--dropdown-border);border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,0.1);margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:15px;z-index:100;opacity:0;visibility:hidden;transition:0.3s cubic-bezier(0.175,0.885,0.32,1.275);width:300px;}.custom-select.active .select-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(5px);}.select-option{padding:10px;text-align:center;border-radius:6px;font-weight:600;color:var(--text-color);transition:0.2s;}.select-option:hover{background:var(--dropdown-hover);}.select-option.selected{background:var(--accent-color);color:#fff;}ins.adsbygoogle[data-ad-status="unfilled"]{display:none !important;}.ad-box:has(ins.adsbygoogle[data-ad-status="unfilled"]){display:none !important;}.ad-box:empty{display:none !important;}.ads-side:has(.ad-box:empty),.ads-side:has(ins.adsbygoogle[data-ad-status="unfilled"]){display:none !important;}.img-comp-container{position:relative;height:150px;width:100%;overflow:hidden;border-radius:8px;margin-bottom:10px;background:#ccc;}.img-comp-img{position:absolute;width:100%;height:100%;overflow:hidden;top:0;left:0;}.img-comp-img img{display:block;width:100%;height:150px;object-fit:cover;}.img-comp-overlay{width:50%;}.img-comp-slider{position:absolute;z-index:9;cursor:ew-resize;width:30px;height:30px;background-color:var(--primary-color);opacity:0.9;border-radius:50%;top:50%;transform:translateY(-50%);box-shadow:0 0 10px rgba(0,0,0,0.3);}.img-label{position:absolute;bottom:5px;background:rgba(0,0,0,0.6);color:#fff;padding:2px 6px;border-radius:4px;font-size:11px;pointer-events:none;}.img-comp-img:not(.img-comp-overlay) .img-label{right:5px;}.img-comp-overlay .img-label{left:5px;}