/* QingPDF Tool Common Styles — shared across all tool pages */
        * { font-family: 'Open Sans', 'Poppins', sans-serif; }
        
        .glass-card { 
            background: rgba(255,255,255,0.9); 
            backdrop-filter: blur(20px); 
            -webkit-backdrop-filter: blur(20px); 
            border: 1px solid rgba(255,255,255,0.4); 
            box-shadow: 0 4px 24px rgba(0,0,0,0.06); 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .glass-card:hover { 
            transform: translateY(-4px); 
            box-shadow: 0 20px 48px rgba(13,148,136,0.18); 
        }
        
        .btn-primary { 
            background: linear-gradient(135deg, #0D9488 0%, #14B8A6 100%); 
            box-shadow: 0 4px 16px rgba(13,148,136,0.3); 
            transition: all 0.2s ease-out;
        }
        
        .btn-primary:hover { 
            background: linear-gradient(135deg, #0F766E 0%, #0D9488 100%); 
            transform: translateY(-2px); 
            box-shadow: 0 6px 20px rgba(13,148,136,0.4); 
        }
        
        .btn-primary:active { 
            transform: translateY(0); 
            box-shadow: 0 2px 8px rgba(13,148,136,0.3); 
        }
        
        .btn-cta { 
            background: linear-gradient(135deg, #F97316 0%, #FB923C 100%); 
            box-shadow: 0 4px 16px rgba(249,115,22,0.3); 
            transition: all 0.2s ease-out;
        }
        
        .btn-cta:hover { 
            background: linear-gradient(135deg, #EA580C 0%, #F97316 100%); 
            transform: translateY(-2px); 
            box-shadow: 0 6px 20px rgba(249,115,22,0.4); 
        }
        
        .btn-cta:active { 
            transform: translateY(0); 
            box-shadow: 0 2px 8px rgba(249,115,22,0.3); 
        }
        
        .btn-success { 
            background: linear-gradient(135deg, #059669 0%, #10B981 100%); 
            box-shadow: 0 4px 16px rgba(5,150,105,0.3); 
            transition: all 0.2s ease-out;
        }
        
        .btn-success:hover { 
            background: linear-gradient(135deg, #047857 0%, #059669 100%); 
            transform: translateY(-2px); 
            box-shadow: 0 6px 20px rgba(5,150,105,0.4); 
        }
        
        .feature-icon { 
            background: linear-gradient(135deg, #0D9488 0%, #14B8A6 100%); 
            transition: transform 0.2s ease-out;
        }
        
        .feature-icon:hover {
            transform: scale(1.05);
        }
        
        .nav-item { 
            position: relative; 
            transition: color 0.2s ease-out;
        }
        
        .nav-item::after { 
            content: ''; 
            position: absolute; 
            bottom: -4px; 
            left: 0; 
            width: 0; 
            height: 2px; 
            background: #0D9488; 
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        }
        
        .nav-item:hover::after { 
            width: 100%; 
        }
        
        .hero-bg { 
            background: linear-gradient(135deg, #F0FDFA 0%, #ECFDF5 50%, #D1FAE5 100%); 
        }
        
        .upload-area { 
            border: 2px dashed #CBD5E1; 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        }
        
        .upload-area:hover, .upload-area.dragover { 
            border-color: #0D9488; 
            background: rgba(13,148,136,0.08); 
            transform: scale(1.01); 
        }
        
        .nav-glass {
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-bottom: 1px solid rgba(13, 148, 136, 0.12);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .nav-glass.scrolled {
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 8px 32px rgba(13, 148, 136, 0.08);
        }
        
        .file-item {
            animation: fadeInUp 0.3s ease-out forwards;
        }
        
        @keyframes fadeInUp { 
            from { opacity: 0; transform: translateY(20px); } 
            to { opacity: 1; transform: translateY(0); } 
        }
        
        .progress-container {
            height: 8px;
            background: #E2E8F0;
            border-radius: 4px;
            overflow: hidden;
            margin-top: 12px;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(135deg, #0D9488 0%, #14B8A6 100%);
            border-radius: 4px;
            transition: width 0.3s ease;
            width: 0%;
        }
        
        .progress-text {
            font-size: 14px;
            color: #64748B;
            margin-top: 8px;
            text-align: center;
        }
        
        .tip {
            padding: 12px 16px;
            border-radius: 8px;
            margin-top: 16px;
            font-size: 14px;
            display: none;
        }
        
        .tip.error {
            background: #FEE2E2;
            color: #DC2626;
            display: block;
        }
        
        .tip.success {
            background: #D1FAE5;
            color: #059669;
            display: block;
        }
        
        .tip.info {
            background: #DBEAFE;
            color: #2563EB;
            display: block;
        }
        
        .btn-disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .btn-disabled:hover {
            transform: none;
            box-shadow: none;
        }

        /* ── Footer ───────────────────────────────── */
        .site-footer {
            position: relative;
        }

        .site-footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 5%;
            right: 5%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
        }

        .footer-link {
            position: relative;
            text-decoration: none;
        }

        .footer-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: rgba(255,255,255,0.7);
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .footer-link:hover::after {
            width: 100%;
        }