@font-face{font-family:"Inter";font-style:normal;font-weight:500 700;font-display:fallback;src:local("Inter")}@font-face{font-family:"InterFallback";font-style:normal;font-weight:400 700;size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%;src:local("Arial")}@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600 800;font-display:fallback;src:local("Plus Jakarta Sans")}
:root{--bg-main:hsl(222,47%,6%);--bg-card:hsl(223,40%,10%);--bg-input:hsl(224,45%,8%);--bg-input-hover:hsl(223,35%,14%);--border:hsl(223,20%,18%);--border-focus:hsl(250,95%,70%);--text-main:hsl(210,40%,98%);--text-muted:hsl(215,20%,83%);--primary:hsl(250,95%,68%);--primary-hover:hsl(250,100%,75%);--primary-glow:hsla(250,95%,68%,0.25);--accent:hsl(320,95%,62%);--accent-hover:hsl(320,100%,68%);--success:hsl(142,76%,45%);--success-glow:hsla(142,76%,45%,0.15);--error:hsl(350,85%,58%);--shadow:0 10px 40px rgba(0,0,0,0.5);--shadow-inset:inset 0 2px 4px rgba(0,0,0,0.4);--transition:color 0.25s cubic-bezier(0.4,0,0.2,1),background-color 0.25s cubic-bezier(0.4,0,0.2,1),border-color 0.25s cubic-bezier(0.4,0,0.2,1),transform 0.25s cubic-bezier(0.4,0,0.2,1),box-shadow 0.25s cubic-bezier(0.4,0,0.2,1),opacity 0.25s cubic-bezier(0.4,0,0.2,1);--radius-sm:8px;--radius-md:14px;--radius-lg:20px}[data-theme="light"]{--bg-main:hsl(210,50%,97%);--bg-card:hsl(0,0%,100%);--bg-input:hsl(210,30%,94%);--bg-input-hover:hsl(210,25%,89%);--border:hsl(210,20%,85%);--border-focus:hsl(250,85%,60%);--text-main:hsl(222,47%,12%);--text-muted:hsl(215,16%,48%);--primary:hsl(250,85%,58%);--primary-hover:hsl(250,90%,52%);--primary-glow:hsla(250,85%,58%,0.15);--accent:hsl(320,85%,55%);--accent-hover:hsl(320,90%,48%);--shadow:0 10px 30px rgba(0,0,0,0.05);--shadow-inset:inset 0 2px 4px rgba(0,0,0,0.05)}*{box-sizing:border-box;margin:0;padding:0}html,body{font-family:'Inter',sans-serif;background-color:var(--bg-main);color:var(--text-main);line-height:1.6;scroll-behavior:smooth}h1,h2,h3,h4,h5,h6{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;letter-spacing:-0.02em}a{color:inherit;text-decoration:none;transition:var(--transition)}header{position:sticky;top:0;z-index:100;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background-color:hsla(222,47%,6%,0.85);border-bottom:1px solid var(--border);transition:var(--transition)}[data-theme="light"] header{background-color:hsla(210,50%,97%,0.85)}.header-container{max-width:1440px;margin:0 auto;padding:1.2rem 2rem;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:0.6rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.5rem;font-weight:800;padding-bottom:0.05em;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.logo svg{stroke:var(--primary);fill:none}.nav-links{display:flex;gap:1.8rem;align-items:center}.nav-links a{font-size:0.95rem;font-weight:500;color:var(--text-muted)}.nav-links a:hover,.nav-links a.active{color:var(--text-main)}.theme-toggle-btn{background:none;border:1px solid var(--border);cursor:pointer;width:38px;height:38px;padding:0 !important;border-radius:var(--radius-sm);color:var(--text-main);display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0}.theme-toggle-btn:hover{background-color:var(--bg-input-hover);border-color:var(--border-focus)}.theme-toggle-btn svg{width:20px;height:20px;fill:none;stroke:currentColor}.main-wrapper{max-width:1440px;margin:0 auto;padding:2.5rem 2rem;display:flex;flex-direction:column;gap:2.5rem}.two-col-layout{display:grid;grid-template-columns:1fr;gap:2rem}.two-col-layout.full-width{grid-template-columns:1fr !important}@media(min-width:1024px){.two-col-layout{grid-template-columns:1fr 300px}}.hero{text-align:center;padding:4rem 1.5rem;background:radial-gradient(circle at top,rgba(100,80,250,0.12) 0%,transparent 70%);border-radius:var(--radius-lg);margin-bottom:1rem;min-height:340px}.hero h1{font-size:clamp(2.2rem,6vw,3.5rem);margin-bottom:1rem;line-height:1.2;padding-bottom:0.15em;background:linear-gradient(135deg,var(--text-main) 30%,var(--text-muted) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media(max-width:768px){.hero h1{font-size:clamp(1.8rem,8vw,2.4rem)}}.hero p{font-size:1.25rem;color:var(--text-muted);max-width:650px;margin:0 auto 2.2rem;line-height:1.6}.hero-badges{display:flex;justify-content:center;gap:0.75rem;flex-wrap:wrap;margin:0 auto 2.5rem;max-width:800px;min-height:44px;contain:layout}.hero-badge-item{background-color:var(--bg-card);border:1px solid var(--border);padding:0.5rem 1.1rem;border-radius:50px;font-size:0.82rem;font-weight:600;color:var(--text-main);display:inline-flex;align-items:center;gap:0.4rem;transition:var(--transition)}.hero-badge-item:hover{transform:translateY(-2px);border-color:var(--border-focus);box-shadow:0 4px 12px var(--primary-glow)}.benefits-showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:1rem 0 2.5rem}.benefit-card{background:linear-gradient(135deg,var(--bg-card) 0%,rgba(20,20,30,0.5) 100%);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.5rem 1.8rem;display:flex;align-items:flex-start;gap:1.2rem;transition:var(--transition);position:relative}[data-theme="light"] .benefit-card{background:linear-gradient(135deg,var(--bg-card) 0%,rgba(240,240,250,0.6) 100%)}.benefit-card:hover{transform:translateY(-4px);border-color:var(--border-focus);box-shadow:0 10px 25px var(--primary-glow)}.benefit-icon{font-size:2rem;background:linear-gradient(135deg,var(--bg-input-hover) 0%,transparent 100%);width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;border:1px solid var(--border);box-shadow:var(--shadow-inset);transition:var(--transition)}.benefit-card:hover .benefit-icon{border-color:var(--border-focus);transform:scale(1.1) rotate(5deg);background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:white}.benefit-content h3{font-size:1.1rem;margin-bottom:0.35rem;color:var(--text-main);font-weight:700}.benefit-content p{font-size:0.88rem;color:var(--text-muted);line-height:1.5}.search-bar-container{max-width:600px;margin:0 auto;position:relative}#search-input{width:100% !important;padding:1.1rem 1.5rem 1.1rem 3.8rem !important;border-radius:50px !important;border:2px solid var(--border) !important;background-color:var(--bg-card) !important;color:var(--text-main) !important;font-size:1.05rem !important;font-weight:500 !important;transition:var(--transition) !important;box-shadow:var(--shadow) !important}#search-input::placeholder{color:var(--text-muted) !important;opacity:0.75 !important}#search-input:focus{outline:none !important;border-color:var(--border-focus) !important;background-color:var(--bg-input-hover) !important;box-shadow:0 0 0 4px var(--primary-glow),var(--shadow) !important}#search-input:-webkit-autofill,#search-input:-webkit-autofill:hover,#search-input:-webkit-autofill:focus{-webkit-text-fill-color:var(--text-main) !important;-webkit-box-shadow:0 0 0px 1000px var(--bg-card) inset !important;transition:background-color 5000s ease-in-out 0s !important}.search-bar-container svg{position:absolute !important;left:1.5rem !important;top:50% !important;transform:translateY(-50%) !important;color:var(--primary) !important;pointer-events:none !important;width:20px !important;height:20px !important;z-index:5 !important}.category-filters{display:flex;justify-content:center;gap:0.6rem;flex-wrap:wrap;margin:2.2rem 0 0}.filter-btn{background-color:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);padding:0.6rem 1.4rem;border-radius:50px;cursor:pointer;font-weight:500;font-size:0.9rem;transition:var(--transition)}.filter-btn:hover{background-color:var(--bg-input-hover);color:var(--text-main);border-color:var(--border-focus)}.filter-btn.active{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:white;border-color:transparent;box-shadow:0 4px 15px var(--primary-glow)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:1.5rem}.tool-card{background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.8rem;display:flex;flex-direction:column;gap:1.1rem;cursor:pointer;position:relative;overflow:hidden;transition:var(--transition)}.tool-card:hover{transform:translateY(-5px);border-color:var(--border-focus);box-shadow:0 12px 30px var(--primary-glow),var(--shadow)}.tool-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(to bottom,var(--primary),var(--accent));opacity:0;transition:var(--transition)}.tool-card:hover::before{opacity:1}.tool-header{display:flex;align-items:center;gap:1rem}.tool-icon-wrapper{background:linear-gradient(135deg,var(--bg-input) 0%,var(--bg-input-hover) 100%);border:1px solid var(--border);width:50px;height:50px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--primary);transition:var(--transition)}.tool-card:hover .tool-icon-wrapper{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:white;border-color:transparent;transform:scale(1.05)}.tool-badge{position:absolute;top:1rem;right:1rem;font-size:0.75rem;font-weight:700;text-transform:uppercase;padding:0.25rem 0.6rem;border-radius:4px;letter-spacing:0.05em}.badge-must{background-color:hsla(250,95%,68%,0.12);color:var(--primary)}.badge-high{background-color:hsla(320,95%,62%,0.12);color:var(--accent)}.badge-med{background-color:hsla(142,76%,45%,0.12);color:var(--success)}.tool-card h2,.tool-card h3{font-size:1.2rem;font-weight:600;color:var(--text-main)}.tool-card p{color:var(--text-muted);font-size:0.9rem;line-height:1.5;flex-grow:1}.tool-meta{display:flex;justify-content:space-between;align-items:center;font-size:0.8rem;color:var(--text-muted);border-top:1px solid var(--border);padding-top:0.85rem}.tool-container{background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2.2rem;box-shadow:var(--shadow)}.tool-title-section{margin-bottom:2rem;text-align:center}.tool-title-section h1{font-size:2rem;margin-bottom:0.5rem}.tool-title-section p{color:var(--text-muted)}.dropzone{border:2px dashed var(--border);border-radius:var(--radius-md);padding:3rem 2rem;text-align:center;background-color:var(--bg-input);cursor:pointer;transition:var(--transition);display:flex;flex-direction:column;align-items:center;gap:1rem}.dropzone:hover,.dropzone.dragover{border-color:var(--border-focus);background-color:var(--bg-input-hover)}.dropzone svg{width:48px;height:48px;color:var(--primary);stroke-width:1.5;fill:none}.dropzone h2,.dropzone h3{font-size:1.2rem;font-weight:600}.dropzone p{color:var(--text-muted);font-size:0.9rem}.file-input{display:none}.workspace-container{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:2rem}@media(min-width:768px){.workspace-container{grid-template-columns:1fr 320px}.workspace-container.wide-controls{grid-template-columns:1fr}}.preview-panel{display:flex;flex-direction:column;gap:1rem;background-color:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.5rem;align-items:center;justify-content:center;min-height:300px;position:relative;overflow:hidden}.preview-image-wrapper{position:relative;max-width:100%;max-height:500px;border-radius:var(--radius-sm);overflow:auto;display:flex;justify-content:center;align-items:center}.preview-panel img,.preview-panel canvas{max-width:100%;max-height:500px;object-fit:contain;box-shadow:0 4px 20px rgba(0,0,0,0.15);background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;border-radius:var(--radius-sm)}.no-grid img,.no-grid canvas{background-image:none !important}.settings-panel{background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem;height:fit-content}.control-group{display:flex;flex-direction:column;gap:0.5rem}.control-group label{font-size:0.9rem;font-weight:600;color:var(--text-muted);display:flex;justify-content:space-between}.control-group label span.value{color:var(--primary);font-weight:700}input[type="range"]{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:var(--border);outline:none}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer;transition:var(--transition)}input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 10px var(--primary-glow)}select,input[type="text"],input[type="number"],textarea{width:100%;padding:0.8rem 1.1rem;border-radius:var(--radius-sm);background-color:var(--bg-input);border:1px solid var(--border);color:var(--text-main);font-family:inherit;font-size:0.95rem;transition:var(--transition)}select:hover,input[type="text"]:hover,input[type="number"]:hover,textarea:hover{border-color:var(--text-muted)}select:focus,input[type="text"]:focus,input[type="number"]:focus,textarea:focus{outline:none;border-color:var(--border-focus);background-color:var(--bg-input-hover);box-shadow:0 0 0 3px var(--primary-glow)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.8rem 1.8rem;font-family:inherit;font-weight:600;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:var(--transition);font-size:0.95rem;user-select:none}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);color:white}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--primary-glow);opacity:0.95}.btn-primary:active{transform:translateY(0)}.btn-secondary{background-color:var(--bg-input);border:1px solid var(--border);color:var(--text-main)}.btn-secondary:hover{background-color:var(--bg-input-hover);border-color:var(--border-focus);box-shadow:0 4px 12px rgba(0,0,0,0.15)}.btn-danger{background-color:var(--error);color:white}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 6px 20px hsla(350,85%,58%,0.2);opacity:0.95}.btn-danger:active{transform:translateY(0)}.btn-group{display:flex;gap:0.5rem;flex-wrap:wrap}.toggle-switch-wrapper{display:flex;align-items:center;gap:0.75rem;cursor:pointer}.toggle-switch{position:relative;display:inline-block;width:44px;height:22px}.toggle-switch input{opacity:0;width:0;height:0}.slider-switch{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--border);transition:.3s;border-radius:34px}.slider-switch:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:white;transition:.3s;border-radius:50%}input:checked + .slider-switch{background-color:var(--primary)}input:checked + .slider-switch:before{transform:translateX(22px)}.related-tools-section{background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.related-tools-list{display:flex;flex-direction:column;gap:0.75rem}.related-tool-item{display:flex;align-items:center;gap:0.75rem;padding:0.5rem;border-radius:var(--radius-sm);transition:var(--transition)}.related-tool-item:hover{background-color:var(--bg-input);color:var(--primary)}.related-tool-icon{width:32px;height:32px;border-radius:6px;background-color:var(--bg-input);display:flex;align-items:center;justify-content:center}.sidebar-promo-card{margin-top:1.5rem;padding:1.2rem 1.4rem;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--bg-card) 0%,rgba(100,80,250,0.03) 100%);border:1px dashed var(--border);transition:var(--transition)}[data-theme="light"] .sidebar-promo-card{background:linear-gradient(135deg,var(--bg-card) 0%,rgba(100,80,250,0.05) 100%)}.sidebar-promo-card:hover{border-color:var(--border-focus);box-shadow:0 6px 20px var(--primary-glow);transform:translateY(-2px)}.sidebar-promo-card h4{font-size:0.95rem;font-weight:700;margin-bottom:0.85rem;color:var(--text-main);display:flex;align-items:center;gap:0.4rem}.sidebar-promo-card ul{list-style:none !important;margin:0 !important;padding:0 !important;display:flex;flex-direction:column;gap:0.75rem}.sidebar-promo-card li{font-size:0.8rem;color:var(--text-muted);line-height:1.45;position:relative;padding-left:1.25rem}.sidebar-promo-card li strong{color:var(--text-main)}.sidebar-promo-card li::before{content:'✓';position:absolute;left:0;top:0;color:var(--success);font-weight:800;font-size:0.85rem}.info-section{background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:2.5rem;margin-top:1rem}.info-section h2{font-size:1.8rem;margin-bottom:1.5rem}.info-section h3{font-size:1.3rem;margin:1.5rem 0 0.5rem}.info-section p{color:var(--text-muted);margin-bottom:1rem}.info-section ul{margin-left:1.5rem;margin-bottom:1.5rem;color:var(--text-muted)}.info-section li{margin-bottom:0.5rem}.adsense-ad{display:none;background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center;justify-content:center;overflow:hidden;margin:1.5rem 0;position:relative}html.ads-active .adsense-ad{display:flex}.adsense-ad::before{content:'ADVERTISEMENT';position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:0.65rem;font-weight:700;color:var(--text-muted);opacity:0.5;letter-spacing:0.1em}.ad-top{min-height:90px;width:100%;height:90px;contain:layout size}.ad-sidebar{min-height:600px;height:600px;width:160px;position:sticky;top:100px;display:none}@media(min-width:1024px){.ad-sidebar{display:none}}html.ads-active .ad-sidebar{display:none}@media(min-width:1024px){html.ads-active .ad-sidebar{display:flex}}.ad-in-content{min-height:250px;height:250px;width:100%;contain:layout size}.ad-footer{min-height:90px;height:90px;width:100%;margin-top:2rem;contain:layout size}footer{border-top:1px solid var(--border);background-color:var(--bg-card);margin-top:3rem}.footer-container{max-width:1440px;margin:0 auto;padding:4rem 2rem 2rem;display:flex;flex-direction:column;gap:3rem}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}.footer-brand h3{font-size:1.4rem;margin-bottom:1rem}.footer-brand p{color:var(--text-muted);font-size:0.9rem}.footer-links h4{font-size:1rem;margin-bottom:1rem}.footer-links ul{list-style:none;display:flex;flex-direction:column;gap:0.5rem}.footer-links a{font-size:0.9rem;color:var(--text-muted)}.footer-links a:hover{color:var(--text-main);padding-left:4px}.footer-bottom{border-top:1px solid var(--border);padding-top:2rem;display:flex;flex-direction:column;align-items:center;gap:1rem;font-size:0.85rem;color:var(--text-muted);text-align:center}@media(min-width:768px){.footer-bottom{flex-direction:row;justify-content:space-between}}@media(max-width:768px){.nav-hide-mobile{display:none !important}}.compare-container{position:relative;width:100%;max-height:500px;overflow:hidden;border-radius:var(--radius-sm);user-select:none}.compare-img{width:100%;max-height:500px;object-fit:contain;display:block}.compare-overlay{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;border-right:2px solid white}.compare-overlay img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;max-width:none}.compare-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background-color:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;cursor:ew-resize;box-shadow:0 4px 10px rgba(0,0,0,0.3);z-index:10}.compare-slider-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:12}.batch-list-container{display:flex;flex-direction:column;gap:0.75rem;width:100%;max-height:250px;overflow-y:auto;margin-top:1rem;padding-right:0.5rem}.batch-item{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;background-color:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm)}.batch-item-info{display:flex;align-items:center;gap:0.75rem}.batch-item-thumbnail{width:40px;height:40px;border-radius:4px;object-fit:cover}.batch-item-details{display:flex;flex-direction:column}.batch-item-name{font-size:0.9rem;font-weight:600;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.batch-item-size{font-size:0.75rem;color:var(--text-muted)}.breadcrumbs{display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem}.breadcrumbs a:hover{color:var(--text-main)}.spinner{width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.fullpage-loader{position:fixed;inset:0;background:var(--bg-main);z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;transition:opacity 0.3s}.passport-guide-overlay{position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid var(--primary);pointer-events:none;box-sizing:border-box}.passport-ellipse{position:absolute;border:2px dashed hsla(250,84%,58%,0.6);border-radius:50%;left:50%;transform:translateX(-50%);width:50%;height:55%;top:15%}.passport-line{position:absolute;border-top:1px dashed hsla(250,84%,58%,0.6);left:0;right:0;top:45%}.meme-canvas-container{position:relative;max-width:100%}.mobile-menu-btn{display:none;background:none;border:1px solid var(--border);cursor:pointer;width:38px;height:38px;padding:0 !important;border-radius:var(--radius-sm);color:var(--text-main);align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0}.mobile-menu-btn:hover{background-color:var(--bg-input-hover);border-color:var(--border-focus)}.mobile-drawer{position:fixed;inset:0;z-index:1000;visibility:hidden;transition:visibility 0.3s}.mobile-drawer.active{visibility:visible}.mobile-drawer-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);opacity:0;transition:opacity 0.3s ease}.mobile-drawer.active .mobile-drawer-overlay{opacity:1}.mobile-drawer-content{position:absolute;top:0;right:0;width:280px;height:100%;background-color:var(--bg-card);border-left:1px solid var(--border);display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);padding:1.5rem;box-shadow:-10px 0 30px rgba(0,0,0,0.5)}.mobile-drawer.active .mobile-drawer-content{transform:translateX(0)}.mobile-drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}.mobile-drawer-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.2rem;color:var(--text-main)}#mobile-drawer-close{background:none;border:none;color:var(--text-muted);font-size:1.8rem;cursor:pointer;line-height:1}#mobile-drawer-close:hover{color:var(--text-main)}.mobile-drawer-nav{display:flex;flex-direction:column;gap:1rem;flex-grow:1}.drawer-link{display:flex;align-items:center;gap:0.75rem;padding:0.8rem 1rem;border-radius:var(--radius-sm);color:var(--text-muted);font-weight:500;transition:var(--transition)}.drawer-link:hover{background-color:var(--bg-input);color:var(--primary)}.mobile-drawer-footer{font-size:0.8rem;color:var(--text-muted);text-align:center;border-top:1px solid var(--border);padding-top:1rem}@media (max-width: 768px){.nav-links a{display:none !important}.nav-links a[href*="blog"]{display:inline-flex !important;font-size:0.9rem;padding:0.4rem 0.9rem;border:1px solid var(--border);border-radius:50px;color:var(--text-muted)}.mobile-menu-btn{display:flex}header{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background-color:var(--bg-main) !important}}@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}header{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background-color:var(--bg-main) !important}}.skip-link{position:absolute;top:-100px;left:1rem;background:var(--primary);color:white;padding:0.5rem 1rem;z-index:9999;border-radius:var(--radius-sm);transition:top 0.2s ease;font-weight:600}.skip-link:focus{top:1rem}.tool-card-title{font-size:1.2rem;font-weight:600;color:var(--text-main);font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-0.02em}

/* ── CLS Fix: Reserve space for hero and tools grid before JS hydrates ── */
.hero{min-height:420px}
@media(max-width:768px){.hero{min-height:320px}}
.tools-grid{min-height:600px}
.tool-card{min-height:180px}

/* ── CLS Fix: Stable fallback font metrics to reduce font-swap shift ── */
body{font-family:"Inter","InterFallback",ui-sans-serif,system-ui,-apple-system,sans-serif}
h1,h2,h3,h4,h5,h6{font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,sans-serif}

/* ── CLS Fix: Prevent header backdrop-filter reflow on scroll ── */
header{will-change:transform}

/* ── CLS Fix: Skip rendering off-screen cards until needed ── */
.tool-card{content-visibility:auto;contain-intrinsic-size:0 180px}
.info-section{content-visibility:auto;contain-intrinsic-size:0 400px}

/* ── Mobile Performance: eliminate 300ms tap delay on all interactive elements ── */
html{touch-action:manipulation}
button,a,.tool-card,.filter-btn,.hero-badge-item,.btn,.related-tool-item,.drawer-link{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* ── Mobile Performance: GPU-accelerate animations to prevent jank ── */
.tool-card,.benefit-card,.btn,.filter-btn{transform:translateZ(0)}

/* ── Mobile Performance: efficient overscroll on scrollable containers ── */
.batch-list-container,.mobile-drawer-content{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* ── CLS Fix: Pre-reserve space for mobile menu button to prevent nav shift ── */
.nav-links{min-height:38px}
.mobile-menu-btn{width:38px;height:38px}

/* ── CLS Fix: Hero h1 size clamping — prevent reflow from font metric change ── */
.hero h1{
  font-size:clamp(2.2rem,6vw,3.5rem);
  line-height:1.2;
  /* Reserve exact line height before font loads */
  min-height:calc(clamp(2.2rem,6vw,3.5rem) * 1.2 * 2);
}

/* ── CLS Fix: Prevent filter button bar reflow ── */
.category-filters{min-height:44px}

/* ── CLS Fix: Lock hero badges height ── */
.hero-badges{min-height:40px}

/* ── Layout containment: isolate tool cards from page reflow ── */
.tools-grid{contain:layout style}
.tool-card{contain:layout style paint}