:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-tertiary:#1a1a2e;--bg-card:rgba(26, 26, 46, 0.6);--bg-card-hover:rgba(36, 36, 66, 0.7);--bg-glass:rgba(255, 255, 255, 0.03);--bg-glass-hover:rgba(255, 255, 255, 0.06);--text-primary:#e8e8f0;--text-secondary:#a0a0b8;--text-tertiary:#6b6b80;--text-accent:#8b5cf6;--accent-primary:#8b5cf6;--accent-secondary:#06b6d4;--accent-tertiary:#f43f5e;--accent-success:#10b981;--accent-warning:#f59e0b;--gradient-primary:linear-gradient(135deg, #8b5cf6, #06b6d4);--gradient-secondary:linear-gradient(135deg, #f43f5e, #f59e0b);--gradient-accent:linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);--gradient-bg:linear-gradient(180deg, #0a0a0f 0%, #12121a 50%, #1a1a2e 100%);--gradient-card:linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(6, 182, 212, 0.05));--border-color:rgba(255, 255, 255, 0.06);--border-accent:rgba(139, 92, 246, 0.3);--shadow-sm:0 2px 8px rgba(0, 0, 0, 0.3);--shadow-md:0 4px 16px rgba(0, 0, 0, 0.4);--shadow-lg:0 8px 32px rgba(0, 0, 0, 0.5);--shadow-glow:0 0 20px rgba(139, 92, 246, 0.15);--shadow-glow-hover:0 0 30px rgba(139, 92, 246, 0.25);--font-primary:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace;--max-width:1400px;--nav-height:72px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--safe-top:env(safe-area-inset-top, 0px);--safe-bottom:env(safe-area-inset-bottom, 0px);--safe-left:env(safe-area-inset-left, 0px);--safe-right:env(safe-area-inset-right, 0px);--cookie-banner-height:0px;--touch-target-min:44px;--z-base:1;--z-sticky:100;--z-nav:1000;--z-nav-search:1050;--z-mobile-menu:1090;--z-search-overlay:1100;--z-tool-nav:1180;--z-pwa-banner:1200;--z-toast:1300;--z-cookie:1400;--z-overlay:1500;--z-tour:1600;--mobile-tool-nav-height:82px;--transition-fast:150ms cubic-bezier(0.4, 0, 0.2, 1);--transition-base:250ms cubic-bezier(0.4, 0, 0.2, 1);--transition-slow:400ms cubic-bezier(0.4, 0, 0.2, 1);--transition-spring:500ms cubic-bezier(0.34, 1.56, 0.64, 1)} [data-theme="light"]{--bg-primary:#f8f9fc;--bg-secondary:#ffffff;--bg-tertiary:#e8eaf0;--bg-card:rgba(255, 255, 255, 0.85);--bg-card-hover:rgba(245, 245, 255, 0.95);--bg-glass:rgba(0, 0, 0, 0.02);--bg-glass-hover:rgba(0, 0, 0, 0.04);--text-primary:#1a1a2e;--text-secondary:#4a4a6a;--text-tertiary:#6b6b84;--text-accent:#7c3aed;--border-color:rgba(0, 0, 0, 0.08);--border-accent:rgba(139, 92, 246, 0.3);--shadow-sm:0 2px 8px rgba(0, 0, 0, 0.06);--shadow-md:0 4px 16px rgba(0, 0, 0, 0.08);--shadow-lg:0 8px 32px rgba(0, 0, 0, 0.1);--shadow-glow:0 0 20px rgba(139, 92, 246, 0.1);--shadow-glow-hover:0 0 30px rgba(139, 92, 246, 0.18);--gradient-bg:linear-gradient(180deg, #f8f9fc 0%, #ffffff 50%, #f0f0f8 100%)} [data-theme="light"] body::before{background:radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.04) 0%, transparent 50%)} [data-theme="light"] .navbar{background:rgba(255, 255, 255, 0.9)} [data-theme="light"] .navbar.scrolled{background:rgba(255, 255, 255, 0.97)} [data-theme="light"] .site-footer{background:#f0f0f5} .theme-toggle-btn{width:var(--touch-target-min);height:var(--touch-target-min);background:var(--bg-glass);border:1px solid var(--border-color);border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);flex-shrink:0;padding:0;line-height:1} .theme-toggle-btn:hover{border-color:var(--border-accent);transform:scale(1.1);background:rgba(139, 92, 246, 0.08)} #shortcuts-overlay,#changelog-overlay,#email-capture-overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(0, 0, 0, 0.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:fadeIn 0.2s ease} @keyframes fadeIn{from{opacity:0} to{opacity:1}} .shortcuts-panel,.changelog-panel,.email-capture-panel{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:28px;max-width:440px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg)} .shortcut-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-color);font-size:0.9rem;color:var(--text-secondary)} .shortcut-item:last-child{border-bottom:none} .shortcut-item kbd{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;padding:3px 8px;font-family:var(--font-mono);font-size:0.8rem;color:var(--text-primary);min-width:28px;text-align:center} .shortcut-device-note{padding:18px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg)} .shortcut-device-note strong{display:block;margin-bottom:10px;font-size:1rem} .shortcut-device-note p{color:var(--text-secondary);font-size:0.92rem;line-height:1.65} kbd{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;padding:2px 8px;font-family:var(--font-mono);font-size:0.8rem;color:var(--text-primary)} .changelog-entry{padding:16px 0;border-bottom:1px solid var(--border-color)} .changelog-entry:last-child{border-bottom:none} .email-capture-panel{width:min(560px, 100%)} .email-capture-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px} .email-capture-header h2{font-size:1.35rem;margin-bottom:8px} .email-capture-header p{color:var(--text-secondary);line-height:1.65} .email-capture-close{background:none;border:1px solid var(--border-color);color:var(--text-secondary);border-radius:var(--radius-full);padding:8px 14px;cursor:pointer;font:inherit} .email-capture-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .email-capture-form{display:grid;gap:14px} .email-capture-note{font-size:0.9rem;color:var(--text-secondary);line-height:1.65} .email-capture-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .email-capture-link{color:var(--accent-primary);font-weight:600;text-decoration:none} .email-capture-link:hover{text-decoration:underline} #welcome-tour-overlay{position:fixed;inset:0;z-index:var(--z-tour);background:rgba(3, 6, 18, 0.72);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px} .tour-panel{width:min(760px, 100%);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:28px} .tour-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px} .tour-header h2{font-size:1.4rem;margin-bottom:8px} .tour-header p{color:var(--text-secondary)} .tour-close-btn{background:none;border:1px solid var(--border-color);color:var(--text-secondary);border-radius:var(--radius-full);padding:8px 14px;cursor:pointer;font:inherit} .tour-steps{display:grid;grid-template-columns:1fr;gap:16px} .tour-step{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:18px} .tour-step-number{display:inline-flex;align-items:center;justify-content:center;min-width:40px;margin-bottom:12px;padding:4px 10px;border-radius:var(--radius-full);background:rgba(139, 92, 246, 0.12);color:var(--accent-primary);font-size:0.75rem;font-weight:700;letter-spacing:0.08em} .tour-step strong{display:block;margin-bottom:8px;font-size:1rem} .tour-step p{color:var(--text-secondary);font-size:0.92rem} .tour-step-note{margin-top:14px;padding:12px 14px;border-radius:var(--radius-md);background:rgba(56, 189, 248, 0.08);border:1px solid rgba(56, 189, 248, 0.18);color:var(--text-secondary);font-size:0.84rem;line-height:1.55} .tour-mobile-meta,.tour-pagination,.tour-dot,#tour-prev-btn{display:none} .tour-mobile-meta{align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .tour-progress-label{color:var(--text-tertiary);font-size:0.82rem;font-weight:600} .tour-pagination{gap:8px} .tour-dot{width:10px;height:10px;border:none;border-radius:999px;background:rgba(148, 163, 184, 0.3);cursor:pointer} .tour-dot.active{background:var(--accent-primary);box-shadow:0 0 0 4px rgba(139, 92, 246, 0.12)} .tour-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:20px} body.shortcut-hints-hidden .search-shortcut{display:none} .tour-panel[data-compact="true"]{width:min(440px, 100%);padding:22px 20px} .tour-panel[data-compact="true"] .tour-header{margin-bottom:16px} .tour-panel[data-compact="true"] .tour-header h2{font-size:1.25rem} .tour-panel[data-compact="true"] .tour-header p{font-size:0.95rem;line-height:1.6} .tour-panel[data-compact="true"] .tour-mobile-meta,.tour-panel[data-compact="true"] .tour-pagination,.tour-panel[data-compact="true"] .tour-dot,.tour-panel[data-compact="true"] #tour-prev-btn{display:flex} .tour-panel[data-compact="true"] .tour-steps{display:block} .tour-panel[data-compact="true"] .tour-step{padding:18px 16px} .tour-panel[data-compact="true"] .tour-actions{justify-content:space-between} .tour-panel[data-compact="true"] .btn-primary{flex:1} .skip-link{position:absolute;top:-100%;left:16px;padding:12px 24px;background:var(--accent-primary);color:white;border-radius:var(--radius-md);font-weight:600;font-size:0.9rem;z-index:var(--z-overlay);transition:top 0.2s ease;text-decoration:none} .skip-link:focus{top:calc(16px + var(--safe-top));left:calc(16px + var(--safe-left))} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0} *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overscroll-behavior-y:contain} body{font-family:var(--font-primary);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overscroll-behavior-y:contain} body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.03) 0%, transparent 50%),radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.03) 0%, transparent 50%),radial-gradient(circle at 50% 50%, rgba(244, 63, 94, 0.02) 0%, transparent 50%);pointer-events:none;z-index:0} a{color:var(--accent-primary);text-decoration:none;transition:color var(--transition-fast)} a:hover{color:var(--accent-secondary)} img{max-width:100%;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)} .navbar{position:fixed;top:0;left:0;right:0;min-height:var(--nav-height);height:var(--nav-height);background:rgba(10, 10, 15, 0.85);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border-color);z-index:var(--z-nav);display:flex;align-items:center;padding:0 max(24px, calc(24px + var(--safe-left))) 0 max(24px, calc(24px + var(--safe-right)));transition:background var(--transition-base);overflow:visible} .navbar.scrolled{background:rgba(10, 10, 15, 0.95);box-shadow:var(--shadow-md)} .nav-inner{max-width:var(--max-width);width:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px} .nav-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.5rem;color:var(--text-primary);cursor:pointer;text-decoration:none;flex-shrink:0} .nav-logo .logo-icon{width:36px;height:36px;background:var(--gradient-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:var(--shadow-glow)} .nav-logo .logo-text span{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .nav-search{flex:1;max-width:480px;position:relative} .nav-search input[type="text"],.nav-search input{width:100%;height:42px;padding:0 16px 0 44px;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-primary);font-family:var(--font-primary);font-size:0.9rem;outline:none;transition:all var(--transition-base)} .nav-search input::placeholder{color:var(--text-tertiary)} .nav-search input:focus{border-color:var(--accent-primary);background:rgba(139, 92, 246, 0.05);box-shadow:0 0 0 3px rgba(139, 92, 246, 0.1)} .nav-search .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-tertiary);font-size:1rem;pointer-events:none} .nav-search .search-shortcut{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;padding:2px 8px;font-size:0.7rem;color:var(--text-tertiary);font-family:var(--font-mono)} .nav-search-preview{position:absolute;top:calc(100% + 12px);left:0;right:0;background:color-mix(in srgb, var(--bg-secondary) 92%, transparent);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:12px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast);z-index:var(--z-nav-search);backdrop-filter:blur(18px)} .nav-search-preview.open{opacity:1;transform:translateY(0);pointer-events:auto} .nav-search-preview-header{padding:2px 6px 10px;color:var(--text-tertiary);font-size:0.74rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase} .nav-search-preview-list{display:grid;gap:6px} .nav-search-preview-item{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:var(--radius-md);color:inherit;text-decoration:none;transition:background var(--transition-fast),transform var(--transition-fast)} .nav-search-preview-item:hover,.nav-search-preview-item:focus-visible{background:var(--bg-glass-hover);transform:translateX(2px);outline:none} .nav-search-preview-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-md);background:var(--gradient-card);border:1px solid var(--border-color);flex-shrink:0} .nav-search-preview-copy{display:flex;flex-direction:column;gap:4px;min-width:0} .nav-search-preview-copy strong{color:var(--text-primary);font-size:0.92rem} .nav-search-preview-copy span{color:var(--text-secondary);font-size:0.82rem;line-height:1.45} .nav-search-preview-footer,.nav-search-preview-empty{display:block;margin-top:10px;padding:12px;border-top:1px solid var(--border-color);color:var(--accent-primary);text-decoration:none;font-size:0.84rem;font-weight:600} .nav-search-preview-empty{color:var(--text-secondary)} .nav-search-preview-empty strong{display:block;margin-bottom:4px;color:var(--text-primary)} .nav-links{display:flex;align-items:center;gap:8px;flex-shrink:0} .nav-links a{color:var(--text-secondary);font-size:0.9rem;font-weight:500;padding:8px 16px;border-radius:var(--radius-full);transition:all var(--transition-fast);white-space:nowrap} .nav-links a:hover,.nav-links a.active{color:var(--text-primary);background:var(--bg-glass-hover)} .nav-cta{background:var(--gradient-primary) !important;color:white !important;font-weight:600 !important;padding:8px 20px !important;box-shadow:var(--shadow-glow)} .nav-cta:hover{box-shadow:var(--shadow-glow-hover) !important;transform:translateY(-1px)} .mobile-menu-btn{display:none;width:var(--touch-target-min);height:var(--touch-target-min);background:none;border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:1.3rem;cursor:pointer;align-items:center;justify-content:center;transition:background var(--transition-fast);touch-action:manipulation} .mobile-search-btn{display:none;width:var(--touch-target-min);height:var(--touch-target-min);background:none;border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:1.1rem;cursor:pointer;align-items:center;justify-content:center;transition:background var(--transition-fast);margin-right:8px;touch-action:manipulation} body.nav-menu-open{overflow:hidden} #mobile-search-overlay{display:none;position:fixed;inset:0;z-index:var(--z-search-overlay);background:var(--bg-primary);padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));flex-direction:column;animation:fadeInDown 0.25s ease;overscroll-behavior:contain} #mobile-search-overlay.open{display:flex} .mobile-search-inner{max-width:600px;width:100%;margin:0 auto;padding-top:8px} .mobile-search-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} #mobile-search-results .search-result-item:first-child{border-top:none} .main-content{padding-top:var(--nav-height);padding-bottom:var(--safe-bottom);min-height:100vh;position:relative;z-index:var(--z-base)} .hero{padding:80px 24px 60px;text-align:center;position:relative;overflow:hidden} .hero::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);pointer-events:none} .hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:rgba(139, 92, 246, 0.1);border:1px solid rgba(139, 92, 246, 0.2);border-radius:var(--radius-full);font-size:0.8rem;font-weight:500;color:var(--accent-primary);margin-bottom:24px;animation:fadeInDown 0.6s ease} .hero-badge .pulse-dot{width:8px;height:8px;background:var(--accent-success);border-radius:50%;animation:pulse 2s infinite} .hero h1{font-size:clamp(2.5rem, 6vw, 4.5rem);font-weight:800;line-height:1.1;margin-bottom:20px;animation:fadeInUp 0.6s ease 0.1s both} .hero h1 .gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero p{font-size:clamp(1rem, 2.4vw, 1.2rem);color:var(--text-secondary);max-width:600px;margin:0 auto 36px;animation:fadeInUp 0.6s ease 0.2s both} .hero-stats{display:flex;justify-content:center;gap:48px;margin-top:48px;animation:fadeInUp 0.6s ease 0.4s both} .hero-stat{text-align:center} .hero-stat .stat-value{font-size:2rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero-stat .stat-label{font-size:0.85rem;color:var(--text-tertiary);margin-top:4px} .hero-trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px} .trust-badge{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:color-mix(in srgb, var(--bg-card) 88%, transparent);border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-secondary);font-size:0.84rem;font-weight:600;line-height:1.2} .tools-section-condensed{padding-top:0;padding-bottom:8px} .section-shell{max-width:var(--max-width);margin:0 auto;padding:0 24px} .section-heading{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .section-heading h3{font-size:1.1rem;font-weight:700} .section-heading p{color:var(--text-secondary);font-size:0.92rem} .home-utility-grid{display:grid;grid-template-columns:1fr;gap:20px} .home-utility-panel{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:22px;min-width:0} .panel-actions{display:flex;flex-wrap:wrap;gap:10px} .container{max-width:var(--max-width);margin:0 auto;padding:0 24px} .categories-section{padding:40px 24px 20px;position:relative} .category-scroll-indicator{display:none;align-items:center;justify-content:center;gap:6px;margin:-26px auto 18px;color:var(--text-tertiary);font-size:0.78rem;font-weight:600;letter-spacing:0.02em} .category-tabs{max-width:var(--max-width);margin:0 auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:40px;scroll-padding-inline:24px} .category-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-secondary);font-size:0.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-base);font-family:var(--font-primary);white-space:nowrap;scroll-snap-align:start;touch-action:manipulation} .category-tab:hover{border-color:var(--border-accent);background:rgba(139, 92, 246, 0.05);color:var(--text-primary);transform:translateY(-1px)} .category-tab.active{background:var(--gradient-primary);border-color:transparent;color:white;box-shadow:var(--shadow-glow)} .category-tab .tab-count{background:rgba(255, 255, 255, 0.15);border-radius:var(--radius-full);padding:1px 7px;font-size:0.7rem;font-weight:600} .category-tab.active .tab-count{background:rgba(255, 255, 255, 0.25)} .tools-section{padding:20px 24px 80px} .tools-grid{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr));gap:20px} .tools-grid-sentinel{grid-column:1 / -1;padding-top:4px;text-align:center;color:var(--text-tertiary);font-size:0.88rem} .tool-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden;touch-action:manipulation;min-width:0} .tool-card-link{display:block;color:inherit;text-decoration:none} .tool-card-link:hover{color:inherit} .tool-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary);opacity:0;transition:opacity var(--transition-base)} .tool-card:hover{border-color:var(--border-accent);background:var(--bg-card-hover);transform:translateY(-4px);box-shadow:var(--shadow-glow)} .tool-card:hover::before{opacity:1} .tool-card-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px} .tool-card-icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;background:var(--gradient-card);border:1px solid var(--border-color)} .tool-card-info h3{font-size:1.05rem;font-weight:600;color:var(--text-primary);margin-bottom:4px;padding-right:36px} .tool-card-info .tool-category-label{font-size:0.75rem;color:var(--accent-primary);font-weight:500} .tool-card p{font-size:0.88rem;color:var(--text-secondary);line-height:1.5} .tool-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} .fav-btn{position:absolute;top:16px;right:16px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;color:var(--text-tertiary);transition:all var(--transition-fast);z-index:2;padding:0;line-height:1;touch-action:manipulation} .fav-btn::before{content:'';position:absolute;inset:-6px} .fav-btn:hover{transform:scale(1.1);color:#fbbf24;border-color:#fbbf24;background:var(--bg-primary)} .fav-btn.active{color:#fbbf24;border-color:#fbbf24;background:rgba(251, 191, 36, 0.1)} .tool-tag{padding:3px 10px;background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-full);font-size:0.7rem;color:var(--text-tertiary);font-weight:500;max-width:100%;white-space:normal;overflow-wrap:anywhere} .tool-card .ai-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(6, 182, 212, 0.2));border:1px solid rgba(139, 92, 246, 0.3);border-radius:var(--radius-full);font-size:0.65rem;font-weight:600;color:var(--accent-primary)} .tool-page{max-width:900px;margin:0 auto;padding:40px 24px 80px} .tool-content-sections{display:grid;gap:20px;margin:28px 0 40px;content-visibility:auto;contain-intrinsic-size:1px 520px} .tool-content-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;min-width:0} .tool-content-section h2{font-size:1.2rem;font-weight:700;margin-bottom:12px} .tool-content-section p,.tool-content-section li{color:var(--text-secondary)} .tool-content-section p+p{margin-top:12px} .tool-education-copy{margin-top:12px;color:var(--text-secondary);line-height:1.7} .tool-content-section ol{padding-left:20px} .tool-content-section li+li{margin-top:8px} .tool-page-header{margin-bottom:32px} .tool-breadcrumb{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--text-tertiary);margin-bottom:20px} .tool-breadcrumb a{color:var(--text-tertiary);transition:color var(--transition-fast)} .tool-breadcrumb a:hover{color:var(--accent-primary)} .tool-breadcrumb .separator{color:var(--text-tertiary)} .tool-page-header h1{font-size:2rem;font-weight:800;margin-bottom:10px} .tool-page-header p{font-size:1.05rem;color:var(--text-secondary)} .tool-header-actions{display:flex;flex-wrap:wrap;gap:10px} .tool-trust-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .tool-proof-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px} .tool-proof-card{background:color-mix(in srgb, var(--bg-card) 90%, transparent);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:18px;height:100%;min-width:0} .tool-proof-card span{display:block;color:var(--text-tertiary);font-size:0.74rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:8px} .tool-proof-card strong{display:block;color:var(--text-primary);font-size:1rem;margin-bottom:6px} .tool-proof-card p{font-size:0.88rem;line-height:1.55;color:var(--text-secondary)} .tool-proof-link{display:block;color:inherit;text-decoration:none;transition:border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)} .tool-proof-link:hover,.tool-proof-link:focus-visible{border-color:var(--border-accent);transform:translateY(-2px);box-shadow:var(--shadow-glow);outline:none} .tool-live-status-card.is-updated{border-color:rgba(16, 185, 129, 0.35);box-shadow:0 0 0 1px rgba(16, 185, 129, 0.18),0 0 28px rgba(16, 185, 129, 0.14)} .tool-pairing-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;color:var(--text-secondary);font-size:0.9rem} .tool-pairing-links span{color:var(--text-tertiary);font-weight:600} .tool-pairing-links a{color:var(--accent-primary);text-decoration:none;font-weight:600} .tool-pairing-links a:hover{text-decoration:underline} .tool-performance-panel{margin-top:20px} .perf-panel,.compare-panel{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:22px} .perf-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:12px} .perf-card{background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:14px} .perf-card span{display:block;color:var(--text-tertiary);font-size:0.75rem;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.04em} .perf-card strong{font-size:0.96rem;color:var(--text-primary)} .compare-panel{margin-top:20px} .compare-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px} .compare-panel-header h3{font-size:1.05rem;margin-bottom:6px} .compare-panel-header p{color:var(--text-secondary);font-size:0.92rem} .compare-panel-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end} .compare-panel-actions select{min-width:220px} .compare-layout{display:grid;grid-template-columns:1fr;gap:16px} .mobile-tool-nav{display:none} .compare-pane{border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-secondary)} .compare-pane-body{display:grid;gap:16px;padding:16px} .compare-pane-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-color);background:var(--bg-glass)} .compare-pane-header span{color:var(--text-tertiary);font-size:0.8rem} .compare-pane iframe{width:100%;min-height:720px;border:0;background:var(--bg-secondary)} .compare-pane-live .tool-workspace,.compare-pane-live .tool-performance-panel{margin-top:0} .compare-pane-live .tool-workspace{min-height:100%} .tool-workspace{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)} .tool-workspace.result-ready{border-color:rgba(16, 185, 129, 0.4);box-shadow:0 14px 40px rgba(16, 185, 129, 0.12);transform:translateY(-1px)} .tool-workspace-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border-color);background:var(--bg-glass)} .tool-workspace-header h3{font-size:0.95rem;font-weight:600} .tool-workspace-body{padding:24px} .tool-workspace-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-top:1px solid var(--border-color);background:var(--bg-glass)} .input-group{margin-bottom:20px} .input-group label{display:block;font-size:0.85rem;font-weight:500;color:var(--text-secondary);margin-bottom:8px} textarea,input[type="text"],input[type="number"],input[type="url"],input[type="email"],select{width:100%;padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-primary);font-size:0.95rem;outline:none;transition:all var(--transition-base);resize:vertical} textarea{font-family:var(--font-mono);font-size:0.9rem;line-height:1.6;min-height:150px} textarea:focus,input[type="text"]:focus,input[type="number"]:focus,input[type="url"]:focus,input[type="email"]:focus,select:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(139, 92, 246, 0.1)} select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a0a0b8' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 24px;border-radius:var(--radius-md);font-family:var(--font-primary);font-size:0.9rem;font-weight:600;cursor:pointer;transition:all var(--transition-base);border:none;outline:none;white-space:nowrap} .btn-primary{background:var(--gradient-primary);color:white;box-shadow:var(--shadow-glow)} .btn-primary:hover{box-shadow:var(--shadow-glow-hover);transform:translateY(-2px)} .btn-secondary{background:var(--bg-glass);border:1px solid var(--border-color);color:var(--text-primary)} .btn-secondary:hover{border-color:var(--border-accent);background:rgba(139, 92, 246, 0.05)} .btn-success{background:linear-gradient(135deg, #10b981, #059669);color:white} .btn-danger{background:linear-gradient(135deg, #f43f5e, #e11d48);color:white} .btn-sm{padding:6px 14px;font-size:0.8rem} .btn-lg{padding:14px 32px;font-size:1rem} .btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-md)} .output-area{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:16px;min-height:100px;font-family:var(--font-mono);font-size:0.9rem;color:var(--text-primary);white-space:pre-wrap;word-break:break-all;position:relative} .output-area.empty{display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-family:var(--font-primary);font-style:italic} .copy-btn{position:absolute;top:10px;right:10px;padding:10px 16px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:0.82rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-primary)} .copy-btn:hover{background:var(--accent-primary);color:white;border-color:var(--accent-primary)} .copy-btn.copied{background:var(--accent-success);color:white;border-color:var(--accent-success)} .result-stats{display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));gap:12px;margin-top:16px} .stat-card{background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:14px;text-align:center;min-width:0} .stat-card .stat-num{font-size:1.5rem;font-weight:700;color:var(--accent-primary)} .stat-card .stat-lbl{font-size:0.75rem;color:var(--text-tertiary);margin-top:2px} .color-preview{width:100%;height:80px;border-radius:var(--radius-md);border:1px solid var(--border-color);margin-bottom:12px;transition:background var(--transition-base)} .color-values{display:grid;grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:10px} .color-value-item{background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:10px 12px;display:flex;justify-content:space-between;align-items:center;font-size:0.85rem} .color-value-item span:first-child{color:var(--text-tertiary);font-size:0.75rem;font-weight:600;text-transform:uppercase} .color-value-item span:last-child{font-family:var(--font-mono);color:var(--text-primary)} .toggle-group{display:flex;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden} .toggle-option{flex:1;padding:10px 16px;text-align:center;font-size:0.85rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);border:none;background:none;font-family:var(--font-primary)} .toggle-option.active{background:var(--accent-primary);color:white} .toggle-option:hover:not(.active){background:var(--bg-glass-hover)} input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--bg-tertiary);border-radius:var(--radius-full);outline:none} input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--accent-primary);border-radius:50%;cursor:pointer;box-shadow:0 0 10px rgba(139, 92, 246, 0.3);transition:transform var(--transition-fast)} input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)} .checkbox-group{display:flex;flex-wrap:wrap;gap:12px} .checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:0.9rem;color:var(--text-secondary)} .checkbox-label input{display:none} .checkbox-label .checkmark{width:20px;height:20px;border:2px solid var(--border-color);border-radius:5px;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);font-size:0.7rem;color:transparent} .checkbox-label input:checked+.checkmark{background:var(--accent-primary);border-color:var(--accent-primary);color:white} .ad-space{background:var(--bg-glass);border:1px dashed var(--border-color);border-radius:var(--radius-md);padding:20px;text-align:center;color:var(--text-tertiary);font-size:0.8rem;margin:24px 0;min-height:90px;display:flex;align-items:center;justify-content:center} .related-tools{margin-top:48px} .related-tools h3{font-size:1.2rem;font-weight:700;margin-bottom:20px} .related-tools-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));gap:16px} .site-footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:60px 24px 30px;position:relative;z-index:var(--z-base);content-visibility:auto;contain-intrinsic-size:1px 420px} #cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-cookie);background:rgba(15, 12, 41, 0.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(139, 92, 246, 0.3);padding:0 max(0px, var(--safe-right)) max(0px, var(--safe-bottom)) max(0px, var(--safe-left));transform:translateY(100%);transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);box-shadow:0 -8px 40px rgba(0, 0, 0, 0.4)} #cookie-banner.banner-visible{transform:translateY(0)} #cookie-banner.banner-hidden{transform:translateY(100%)} .cookie-inner{max-width:1200px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap} .cookie-icon{font-size:1.6rem;flex-shrink:0} .cookie-text{flex:1;min-width:260px} .cookie-text strong{display:block;font-size:0.95rem;font-weight:700;color:#f1f5f9;margin-bottom:4px} .cookie-text p{font-size:0.82rem;color:#94a3b8;margin:0;line-height:1.5} .cookie-text a{color:#a78bfa;text-decoration:underline} .cookie-actions{display:flex;align-items:center;gap:10px;flex-shrink:0} #cookie-accept-btn{padding:9px 22px;background:linear-gradient(135deg, #8b5cf6, #7c3aed);color:white;border:none;border-radius:8px;font-size:0.875rem;font-weight:600;cursor:pointer;font-family:inherit;transition:opacity 0.2s,transform 0.15s;white-space:nowrap} #cookie-accept-btn:hover{opacity:0.88;transform:translateY(-1px)} #cookie-reject-btn{padding:9px 18px;background:transparent;color:#94a3b8;border:1px solid rgba(255, 255, 255, 0.12);border-radius:8px;font-size:0.875rem;font-weight:500;cursor:pointer;font-family:inherit;transition:color 0.2s,border-color 0.2s;white-space:nowrap} #cookie-reject-btn:hover{color:#f1f5f9;border-color:rgba(255, 255, 255, 0.3)} .cookie-actions button,#cookie-accept-btn,#cookie-reject-btn{min-height:var(--touch-target-min)} .cookie-banner-open .main-content{padding-bottom:calc(var(--cookie-banner-height, 0px) + var(--safe-bottom))} .footer-inner{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px} .footer-brand h3{font-size:1.3rem;font-weight:800;margin-bottom:12px} .footer-brand h3 span{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .footer-brand p{color:var(--text-secondary);font-size:0.9rem;line-height:1.7} .footer-col h4{font-size:0.85rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-secondary);margin-bottom:16px} .footer-col ul{list-style:none} .footer-col ul li{margin-bottom:0} .footer-col ul li a{color:var(--text-tertiary);font-size:0.88rem;transition:color var(--transition-fast);display:block;padding:8px 0} .footer-col ul li a:hover{color:var(--accent-primary)} .footer-bottom{max-width:var(--max-width);margin:0 auto;padding-top:24px;border-top:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;color:var(--text-tertiary);font-size:0.8rem} .search-results{max-width:800px;margin:0 auto;padding:40px 24px} .search-results h2{margin-bottom:24px} .search-result-item{display:block;padding:16px 0;border-bottom:1px solid var(--border-color);cursor:pointer;transition:padding-left var(--transition-fast);color:inherit} .search-result-item:hover{padding-left:12px;color:inherit} .search-result-item h3{font-size:1rem;font-weight:600;color:var(--accent-primary);margin-bottom:4px} .search-result-item p{font-size:0.88rem;color:var(--text-secondary)} .toast{position:fixed;bottom:max(24px, calc(24px + var(--safe-bottom)));right:max(24px, calc(24px + var(--safe-right)));padding:14px 24px;background:var(--bg-tertiary);border:1px solid var(--border-accent);border-radius:var(--radius-md);color:var(--text-primary);font-size:0.9rem;box-shadow:var(--shadow-lg);z-index:var(--z-toast);transform:translateY(100px);opacity:0;transition:all var(--transition-spring)} .toast.show{transform:translateY(0);opacity:1} .cookie-banner-open .toast{bottom:calc(var(--cookie-banner-height, 90px) + 12px + var(--safe-bottom))} .toast.success{border-color:rgba(16, 185, 129, 0.3);background:rgba(16, 185, 129, 0.1)} .toast.error{border-color:rgba(244, 63, 94, 0.3);background:rgba(244, 63, 94, 0.12)} .skeleton{background:linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-card-hover) 50%, var(--bg-tertiary) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)} @keyframes fadeInUp{from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)}} @keyframes fadeInDown{from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)}} @keyframes pulse{0%,100%{opacity:1} 50%{opacity:0.5}} @keyframes shimmer{0%{background-position:-200% 0} 100%{background-position:200% 0}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}} .animate-in{animation:fadeInUp 0.5s ease both} .tools-grid .tool-card:nth-child(1){animation-delay:0.02s} .tools-grid .tool-card:nth-child(2){animation-delay:0.04s} .tools-grid .tool-card:nth-child(3){animation-delay:0.06s} .tools-grid .tool-card:nth-child(4){animation-delay:0.08s} .tools-grid .tool-card:nth-child(5){animation-delay:0.10s} .tools-grid .tool-card:nth-child(6){animation-delay:0.12s} .tools-grid .tool-card:nth-child(7){animation-delay:0.14s} .tools-grid .tool-card:nth-child(8){animation-delay:0.16s} .tools-grid .tool-card:nth-child(9){animation-delay:0.18s} @media (max-width: 1024px),(hover: none),(pointer: coarse){.tools-grid .tool-card{animation-delay:0ms !important}} .file-upload-zone{border:2px dashed var(--border-color);border-radius:var(--radius-lg);padding:40px;text-align:center;cursor:pointer;transition:all var(--transition-base);background:var(--bg-glass)} .file-upload-zone:hover,.file-upload-zone.drag-over{border-color:var(--accent-primary);background:rgba(139, 92, 246, 0.05)} .file-upload-zone .upload-icon{font-size:2.5rem;margin-bottom:12px;opacity:0.5} .file-upload-zone p{color:var(--text-secondary);font-size:0.9rem} .file-upload-zone .upload-hint{font-size:0.8rem;color:var(--text-tertiary);margin-top:8px} .flex{display:flex} .flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap} .items-center{align-items:center} .justify-between{justify-content:space-between} .justify-center{justify-content:center} .gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-6{gap:24px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-6{margin-top:24px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px} .w-full{width:100%} .text-center{text-align:center} .hidden{display:none !important} #pwa-install-banner{position:fixed;bottom:max(24px, calc(24px + var(--safe-bottom)));left:max(24px, calc(24px + var(--safe-left)));right:max(24px, calc(24px + var(--safe-right)));max-width:400px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:16px;display:flex;justify-content:space-between;align-items:center;z-index:var(--z-pwa-banner);box-shadow:0 10px 25px rgba(0,0,0,0.5);transform:translateY(150%);transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)} #pwa-install-banner.show{transform:translateY(0)} .cookie-banner-open #pwa-install-banner{bottom:calc(var(--cookie-banner-height, 90px) + 12px + var(--safe-bottom))} body.embed-mode::before,body.embed-mode .navbar,body.embed-mode .site-footer,body.embed-mode #mobile-search-overlay,body.embed-mode #cookie-banner,body.embed-mode #toast-container,body.embed-mode #pwa-install-banner,body.embed-mode .skip-link{display:none !important} body.embed-mode .main-content{padding-top:0} body.embed-mode .tool-page{max-width:none;padding:16px} @media (min-width: 768px){#pwa-install-banner{left:auto} .home-utility-grid,.tour-steps{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width: 640px){.tool-proof-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width: 960px){.compare-layout{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width: 640px) and (max-width: 767px){.tools-grid,.related-tools-grid,.tool-proof-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}} @media (min-width: 768px) and (max-width: 1023px){.tools-grid,.related-tools-grid,.tool-proof-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}} @media (min-width: 768px) and (max-width: 1024px){.category-tabs{justify-content:center;flex-wrap:wrap;overflow-x:visible;padding-inline:0;margin-inline:auto;-webkit-mask-image:none;mask-image:none}} @media (max-width: 1024px){.footer-inner{grid-template-columns:1fr 1fr;gap:32px}} @media (max-width: 1175px){.nav-inner{gap:16px} .nav-search{display:none} .mobile-search-btn{display:flex;margin-right:0}} @media (max-width: 767px){.categories-section{padding-bottom:12px} .categories-section.has-scrollable-tabs::after,.categories-section.is-scrolled::before{content:'';position:absolute;top:0;bottom:42px;width:44px;pointer-events:none;z-index:2;transition:opacity var(--transition-fast)} .categories-section.has-scrollable-tabs::after{right:0;background:linear-gradient(to left, var(--bg-primary), transparent)} .categories-section.is-scrolled::before{left:0;background:linear-gradient(to right, var(--bg-primary), transparent)} .categories-section.is-scroll-end::after{opacity:0} .category-tabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding:4px 12px 12px;margin-inline:-12px;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:12px;-webkit-mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%)} .category-tabs::-webkit-scrollbar{display:none} .category-scroll-indicator{display:inline-flex} body.tool-view-active .main-content{padding-bottom:calc(var(--mobile-tool-nav-height) + 28px + var(--safe-bottom))} body.tool-view-active.cookie-banner-open .main-content{padding-bottom:calc(var(--cookie-banner-height, 0px) + var(--safe-bottom))} body.tool-view-active:not(.cookie-banner-open):not(.pwa-install-open) .toast{bottom:calc(var(--mobile-tool-nav-height) + 24px + var(--safe-bottom))} .mobile-tool-nav{position:fixed;left:max(12px, calc(12px + var(--safe-left)));right:max(12px, calc(12px + var(--safe-right)));bottom:max(12px, calc(12px + var(--safe-bottom)));display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:8px;padding:10px;background:color-mix(in srgb, var(--bg-secondary) 88%, transparent);border:1px solid rgba(255, 255, 255, 0.08);border-radius:22px;box-shadow:0 18px 42px rgba(0, 0, 0, 0.35);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:var(--z-tool-nav);transition:opacity var(--transition-fast),transform var(--transition-fast)} body.cookie-banner-open .mobile-tool-nav,body.pwa-install-open .mobile-tool-nav,body.nav-menu-open .mobile-tool-nav{opacity:0;pointer-events:none;transform:translateY(18px)} .mobile-tool-nav-btn{min-height:56px;border-radius:16px;border:1px solid rgba(255, 255, 255, 0.06);background:linear-gradient(180deg, rgba(26, 26, 46, 0.92), rgba(14, 14, 24, 0.94));color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:inherit;font-weight:600;cursor:pointer;touch-action:manipulation;transition:transform var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast),color var(--transition-fast)} .mobile-tool-nav-btn:active{transform:scale(0.97)} .mobile-tool-nav-btn.active{border-color:rgba(139, 92, 246, 0.28);background:linear-gradient(180deg, rgba(70, 34, 117, 0.95), rgba(26, 18, 54, 0.96));color:#f8fbff;box-shadow:var(--shadow-glow)} .mobile-tool-nav-icon{font-size:1.05rem;line-height:1} .mobile-tool-nav-label{font-size:0.72rem;line-height:1}} @media (max-width: 768px){:root{--nav-height:60px} .navbar{padding:0 max(12px, calc(12px + var(--safe-left))) 0 max(12px, calc(12px + var(--safe-right)));height:60px;min-height:60px} .nav-inner{gap:8px;min-height:60px} .nav-search{display:none} .nav-links{display:none} .nav-logo .logo-icon{width:32px;height:32px;font-size:1.1rem} .nav-logo .logo-text span{font-size:1.1rem} .nav-links.mobile-open{display:flex;position:fixed;top:max(68px, calc(68px + var(--safe-top)));right:max(16px, calc(16px + var(--safe-right)));left:auto;bottom:auto;width:min(360px, calc(100vw - 32px - var(--safe-left) - var(--safe-right)));flex-direction:column;align-items:stretch;justify-content:flex-start;background:rgba(18, 18, 26, 0.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:14px;gap:10px;z-index:var(--z-mobile-menu);animation:fadeInDown 0.24s ease;border:1px solid rgba(255, 255, 255, 0.08);border-radius:22px;box-shadow:0 24px 60px rgba(0, 0, 0, 0.45),0 0 0 100vmax rgba(4, 7, 18, 0.36);max-height:calc(100svh - 80px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-behavior:auto;overflow-anchor:none} .nav-links.mobile-open>*{width:100%} .nav-links.mobile-open a,.nav-links.mobile-open .theme-toggle-btn{min-height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:1rem;border-radius:18px;background:linear-gradient(180deg, rgba(26, 26, 46, 0.9), rgba(14, 14, 24, 0.92));border:1px solid rgba(255, 255, 255, 0.06);text-align:left;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.03)} .nav-links.mobile-open a::after{content:'›';color:var(--text-tertiary);font-size:1.05rem;transition:transform var(--transition-fast),color var(--transition-fast)} .nav-links.mobile-open a:hover::after,.nav-links.mobile-open a.active::after{color:var(--accent-secondary);transform:translateX(4px)} .nav-links.mobile-open a:hover,.nav-links.mobile-open a.active,.nav-links.mobile-open .theme-toggle-btn:hover{background:linear-gradient(180deg, rgba(46, 46, 74, 0.96), rgba(24, 24, 40, 0.94));border-color:rgba(139, 92, 246, 0.28);color:var(--text-primary)} .nav-links.mobile-open #nav-install-btn{background:linear-gradient(135deg, rgba(139, 92, 246, 0.96), rgba(6, 182, 212, 0.9));color:#f8fbff !important;border-color:rgba(255, 255, 255, 0.14);box-shadow:0 12px 30px rgba(79, 70, 229, 0.28)} .nav-links.mobile-open #nav-install-btn::after{color:rgba(248, 251, 255, 0.88)} .nav-links.mobile-open .theme-toggle-btn{height:auto;border-radius:18px;transform:none;justify-content:flex-start;gap:12px;padding-inline:18px;font-size:1.05rem} .nav-links.mobile-open .theme-toggle-btn::after{font-family:var(--font-primary);font-size:0.95rem;font-weight:600;letter-spacing:0.01em;color:var(--text-primary)} .nav-links.mobile-open #theme-toggle-btn::after{content:'Theme'} .nav-links.mobile-open #changelog-btn::after{content:"What's New"} .nav-links.mobile-open .theme-toggle-btn:hover{transform:none} [data-theme="light"] .nav-links.mobile-open{background:rgba(255, 255, 255, 0.96);border-color:rgba(15, 23, 42, 0.08);box-shadow:0 24px 60px rgba(15, 23, 42, 0.12),0 0 0 100vmax rgba(236, 241, 249, 0.52)} [data-theme="light"] .nav-links.mobile-open a,[data-theme="light"] .nav-links.mobile-open .theme-toggle-btn{background:linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 246, 252, 0.95));border-color:rgba(15, 23, 42, 0.08);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.8)} [data-theme="light"] .nav-links.mobile-open a:hover,[data-theme="light"] .nav-links.mobile-open a.active,[data-theme="light"] .nav-links.mobile-open .theme-toggle-btn:hover{background:linear-gradient(180deg, rgba(244, 238, 255, 0.98), rgba(233, 241, 252, 0.96));border-color:rgba(124, 58, 237, 0.22)} [data-theme="light"] .mobile-menu-btn,[data-theme="light"] .mobile-search-btn{background:rgba(15, 23, 42, 0.03)} .mobile-menu-btn{display:flex} .mobile-search-btn{display:flex} .mobile-menu-btn,.mobile-search-btn{background:rgba(255, 255, 255, 0.03)} .hero{padding:50px 16px 40px} .hero-stats{gap:24px} .tools-grid{grid-template-columns:1fr} .footer-inner{grid-template-columns:1fr;gap:32px} .footer-bottom{flex-direction:column;gap:12px;text-align:center} .nav-logo .logo-text{min-width:0} .tool-page{padding:24px 16px 60px} .home-utility-grid,.tool-proof-grid,.tour-steps,.compare-layout{grid-template-columns:1fr} .compare-pane iframe{min-height:560px} .email-capture-header,.email-capture-actions{flex-direction:column;align-items:stretch} .hero-trust-strip{gap:10px} .trust-badge{width:100%} .btn,.btn-sm,.btn-icon{min-height:var(--touch-target-min)} .btn-sm{padding:10px 16px;font-size:0.85rem} .footer-col ul li a{padding:10px 0;font-size:0.92rem} .faq-item summary{min-height:52px}} @media (max-width: 420px){:root{--nav-height:56px} .navbar{padding:0 max(10px, calc(10px + var(--safe-left))) 0 max(10px, calc(10px + var(--safe-right)));height:56px;min-height:56px} .nav-inner{gap:6px;min-height:56px} .nav-logo{gap:6px} .nav-logo .logo-icon{width:28px;height:28px;font-size:1rem} .nav-logo .logo-text span{font-size:1rem} .mobile-menu-btn,.mobile-search-btn{width:var(--touch-target-min);height:var(--touch-target-min);font-size:1.1rem} .nav-links.mobile-open{top:max(64px, calc(64px + var(--safe-top)));right:max(10px, calc(10px + var(--safe-right)));width:calc(100vw - 20px - var(--safe-left) - var(--safe-right));padding:10px;max-height:calc(100svh - 76px)} .nav-links.mobile-open a,.nav-links.mobile-open .theme-toggle-btn{min-height:48px;padding-inline:14px;font-size:0.95rem}} @media (max-width: 480px){.hero{padding:42px 14px 32px} .hero h1{font-size:clamp(1.95rem, 9vw, 2.45rem)} .hero p{font-size:0.98rem;margin-bottom:28px} .category-tabs{padding-inline:10px;margin-inline:-10px;scroll-padding-inline:10px} .hero-stats{flex-direction:row;justify-content:center;flex-wrap:nowrap;gap:20px} .hero-stat .stat-value{font-size:1.5rem} .hero-stat .stat-label{font-size:0.75rem} .hero-trust-strip{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px} .trust-badge{width:auto;min-width:0;padding:8px 10px;font-size:0.78rem;text-align:center} .nav-search-preview{display:none} .tool-workspace-body{padding:16px 14px} .tool-workspace-header,.tool-workspace-footer,.tool-content-section{padding-left:14px;padding-right:14px} .tool-page{padding:16px 12px 60px}} @media (max-width: 600px){.cookie-inner{padding:16px 16px 20px;gap:14px} .cookie-icon{display:none} .cookie-actions{width:100%} #cookie-accept-btn,#cookie-reject-btn{flex:1;text-align:center}} @media (max-width: 360px){.hero-stats{gap:12px} .hero-stat .stat-value{font-size:1.25rem} .hero-trust-strip{display:none}} @media (hover: none){.tool-card:hover,.btn-primary:hover,.nav-cta:hover,.category-tab:hover,.fav-btn:hover,.theme-toggle-btn:hover{transform:none;box-shadow:none} .tool-card:hover{background:var(--bg-card);border-color:var(--border-color)} .tool-card:active{transform:scale(0.985);border-color:var(--border-accent)} .btn:active,.category-tab:active,.mobile-menu-btn:active,.mobile-search-btn:active,.theme-toggle-btn:active,.fav-btn:active{transform:scale(0.97)}} @media print{.navbar,.site-footer,.ad-space,.category-tabs{display:none !important} .main-content{padding-top:0} body{background:white;color:black}} .faq-list{display:flex;flex-direction:column;gap:8px} .faq-item{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;transition:border-color 0.2s ease} .faq-item:hover{border-color:var(--border-accent)} .faq-item summary{padding:16px 20px;font-weight:600;color:var(--text-primary);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background 0.2s ease} .faq-item summary:hover{background:var(--bg-tertiary)} .faq-item summary::after{content:'+';font-size:1.3rem;font-weight:400;color:var(--accent-primary);flex-shrink:0;transition:transform 0.2s ease} .faq-item[open] summary::after{content:'\2212'} .faq-item summary::-webkit-details-marker{display:none} .faq-item p{padding:0 20px 16px;color:var(--text-secondary);line-height:1.7;margin:0} .sitemap-category{margin-bottom:32px} .sitemap-category h2{font-size:1.2rem;font-weight:700;margin-bottom:12px;color:var(--text-primary)} .sitemap-category h2 a{color:var(--accent-primary);text-decoration:none} .sitemap-category h2 a:hover{text-decoration:underline} .sitemap-category ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));gap:8px} .sitemap-category li{padding:8px 12px;border-radius:var(--radius-sm);font-size:0.92rem;color:var(--text-secondary);transition:background 0.15s ease} .sitemap-category li:hover{background:var(--bg-tertiary)} .sitemap-category li a{color:var(--text-primary);text-decoration:none;font-weight:500} .sitemap-category li a:hover{color:var(--accent-primary)} .tool-content-sections{margin-top:24px} .tool-content-section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;margin-bottom:16px} .tool-content-section h2{font-size:1.15rem;font-weight:700;color:var(--text-primary);margin-bottom:12px} .tool-content-section p{color:var(--text-secondary);line-height:1.7;margin-bottom:8px} .tool-content-section p:last-child{margin-bottom:0} .tool-content-section ul,.tool-content-section ol{padding-left:20px;color:var(--text-secondary);line-height:1.8} .tool-content-section a{color:var(--accent-primary);text-decoration:none} .tool-content-section a:hover{text-decoration:underline} .guide-card-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));gap:16px;margin-top:18px;content-visibility:auto;contain-intrinsic-size:1px 360px} .guide-card{background:linear-gradient(180deg, color-mix(in srgb, var(--bg-tertiary) 82%, transparent) 0%, var(--bg-secondary) 100%);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:18px;min-width:0} .guide-card-outline{background:linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 92%, transparent) 0%, var(--bg-secondary) 100%)} .guide-card h3{margin:6px 0 10px;font-size:1.08rem} .guide-card h3 a{color:var(--text-primary);text-decoration:none} .guide-card h3 a:hover{color:var(--accent-primary)} .guide-card p{color:var(--text-secondary);margin-bottom:10px} .guide-card ul{padding-left:18px;margin:0} .guide-card li{color:var(--text-secondary)} .guide-card-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:color-mix(in srgb, var(--accent-primary) 16%, transparent);color:var(--accent-primary);font-size:0.76rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase} .guide-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .guide-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);font-size:0.82rem;max-width:100%;white-space:normal;overflow-wrap:anywhere} .guide-two-col{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:20px} .guide-card-actions{margin-top:14px} .guide-card-actions a{font-weight:600} @media (max-width: 768px){.guide-two-col{grid-template-columns:1fr}} @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important} .skeleton,.pulse-dot{animation:none !important} .skeleton{background:var(--bg-tertiary)} .tool-card:hover,.btn-primary:hover,.nav-cta:hover,.category-tab:hover,.fav-btn:hover,.theme-toggle-btn:hover{transform:none !important;box-shadow:none !important} .tools-grid .tool-card{animation-delay:0ms !important}} .tool-education-copy{margin-top:12px;padding:16px;background:var(--bg-tertiary);border-radius:var(--radius-md);color:var(--text-secondary);line-height:1.7;font-size:0.95rem}