/* PDFQuick Design System v1.0 - Premium UI */
:root{--color-primary-50:#eff6ff;--color-primary-100:#dbeafe;--color-primary-200:#bfdbfe;--color-primary-300:#93c5fd;--color-primary-400:#60a5fa;--color-primary-500:#3b82f6;--color-primary-600:#2563eb;--color-primary-700:#1d4ed8;--color-primary-800:#1e40af;--color-primary-900:#1e3a8a;--color-secondary-50:#faf5ff;--color-secondary-100:#f3e8ff;--color-secondary-200:#e9d5ff;--color-secondary-300:#d8b4fe;--color-secondary-400:#c084fc;--color-secondary-500:#a855f7;--color-secondary-600:#9333ea;--color-secondary-700:#7e22ce;--color-secondary-800:#6b21a8;--color-secondary-900:#581c87;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#ef4444;--color-info:#3b82f6;--shadow-sm:0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl:0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1);--shadow-2xl:0 25px 50px -12px rgb(0 0 0 / .25);--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:200ms cubic-bezier(0.4,0,0.2,1);--transition-slow:300ms cubic-bezier(0.4,0,0.2,1)}

/* Tool Cards Premium Style */
.tool-card{position:relative;transition:all var(--transition-base);overflow:hidden;border:1px solid transparent}
.tool-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-secondary-500) 100%);opacity:0;transition:opacity var(--transition-base);z-index:0;border-radius:inherit}
.tool-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-xl);border-color:var(--color-primary-200)}
.tool-card:hover::before{opacity:.03}
.tool-card:active{transform:translateY(-2px) scale(1.01)}
.tool-card>*{position:relative;z-index:1}

/* Tool Card Icon Animation */
.tool-card .w-16{transition:all var(--transition-base)}
.tool-card:hover .w-16{transform:scale(1.1) rotate(5deg)}
.tool-card:hover .w-16 i{animation:bounce-icon .6s ease-in-out}

@keyframes bounce-icon{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Upload Area Premium Design */
.upload-area{border:3px dashed var(--color-primary-300);border-radius:var(--radius-2xl);background:linear-gradient(135deg,rgba(59,130,246,.02) 0%,rgba(147,51,234,.02) 100%);transition:all var(--transition-base);position:relative;overflow:hidden}
.upload-area::before{content:'';position:absolute;inset:-100%;background:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-secondary-500) 100%);opacity:0;transition:opacity var(--transition-base);animation:gradient-shift 8s ease infinite;background-size:400% 400%}
.upload-area:hover{border-color:var(--color-primary-500);background:linear-gradient(135deg,rgba(59,130,246,.05) 0%,rgba(147,51,234,.05) 100%);transform:scale(1.01)}
.upload-area:hover::before{opacity:.03}
.upload-area.drag-over{border-color:var(--color-success);background:rgba(16,185,129,.05);border-width:4px;transform:scale(1.02)}
.upload-area.drag-over .upload-icon{animation:pulse-scale .8s ease-in-out infinite}

@keyframes gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes pulse-scale{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* Upload Icon Enhancement */
.upload-icon .w-24,.upload-icon .w-32{transition:all var(--transition-base)}
.upload-area:hover .upload-icon .w-24,.upload-area:hover .upload-icon .w-32{transform:scale(1.05)}
.upload-area:hover .upload-icon i{animation:float .6s ease-in-out infinite alternate}

@keyframes float{from{transform:translateY(0)}to{transform:translateY(-10px)}}

/* Upload Button Premium */
.upload-btn{background:linear-gradient(135deg,var(--color-primary-600) 0%,var(--color-secondary-600) 100%);box-shadow:var(--shadow-md);transition:all var(--transition-base);position:relative;overflow:hidden}
.upload-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--color-primary-500) 0%,var(--color-secondary-500) 100%);opacity:0;transition:opacity var(--transition-fast)}
.upload-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.upload-btn:hover::before{opacity:1}
.upload-btn:active{transform:translateY(0);box-shadow:var(--shadow-md)}
.upload-btn>*{position:relative;z-index:1}

/* Hero Section Enhancement */
.hero-gradient{background:linear-gradient(135deg,#2563eb 0%,#0f766e 50%,#db2777 100%);background-size:200% 200%;animation:gradient-flow 15s ease infinite;position:relative;overflow:hidden}
.hero-gradient::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none}

@keyframes gradient-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Hero CTA Buttons */
.hero-cta-primary{background:#fff;color:var(--color-primary-600);box-shadow:var(--shadow-lg);transition:all var(--transition-base)}
.hero-cta-primary:hover{box-shadow:var(--shadow-xl);transform:translateY(-2px) scale(1.05)}
.hero-cta-secondary{border:2px solid #fff;backdrop-filter:blur(10px);background:rgba(255,255,255,.1);transition:all var(--transition-base)}
.hero-cta-secondary:hover{background:#fff;color:var(--color-primary-600);transform:translateY(-2px) scale(1.05)}

/* Category Headers */
.category-header{position:relative;display:inline-block}
.category-header::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:60px;height:4px;background:linear-gradient(90deg,var(--color-primary-500),var(--color-secondary-500));border-radius:2px}

/* File List Cards */
.file-card{background:#fff;border-radius:var(--radius-lg);padding:1rem;box-shadow:var(--shadow-md);transition:all var(--transition-base);border:1px solid #e5e7eb}
.file-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.dark .file-card{background:#374151;border-color:#4b5563}

/* Progress Bar Premium */
.progress-bar-container{background:#e5e7eb;border-radius:9999px;overflow:hidden;height:8px;position:relative}
.progress-bar{background:linear-gradient(90deg,var(--color-primary-500),var(--color-secondary-500));height:100%;transition:width var(--transition-slow);border-radius:inherit;position:relative;overflow:hidden}
.progress-bar::after{content:'';position:absolute;top:0;left:0;bottom:0;right:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}

@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Toast Notifications */
.toast{background:#fff;border-radius:var(--radius-lg);padding:1rem 1.5rem;box-shadow:var(--shadow-xl);border-left:4px solid;animation:slide-in-right var(--transition-slow) ease-out}
.toast.success{border-color:var(--color-success)}
.toast.error{border-color:var(--color-error)}
.toast.warning{border-color:var(--color-warning)}
.toast.info{border-color:var(--color-info)}

@keyframes slide-in-right{from{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}

/* Loading Spinner Premium */
.spinner-premium{width:48px;height:48px;border:4px solid #e5e7eb;border-top-color:var(--color-primary-500);border-right-color:var(--color-secondary-500);border-radius:50%;animation:spin-gradient 1s cubic-bezier(0.68,-0.55,0.265,1.55) infinite}

@keyframes spin-gradient{to{transform:rotate(360deg)}}

/* Category Badges */
.category-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:600;border-radius:9999px;background:linear-gradient(135deg,var(--color-primary-100),var(--color-secondary-100));color:var(--color-primary-700);border:1px solid var(--color-primary-200)}

/* Hover Glow Effect */
.hover-glow{position:relative;transition:all var(--transition-base)}
.hover-glow::after{content:'';position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,var(--color-primary-500),var(--color-secondary-500));opacity:0;filter:blur(20px);z-index:-1;transition:opacity var(--transition-base)}
.hover-glow:hover::after{opacity:.3}

/* Mobile Touch Improvements */
@media(max-width:768px){.tool-card{padding:1.25rem!important}.upload-area{padding:3rem 1.5rem!important}.upload-icon .w-24{width:5rem!important;height:5rem!important}.upload-btn{padding:1rem 2rem!important;font-size:1rem!important}}

/* Dark Mode Optimizations */
.dark .upload-area{border-color:rgba(147,197,253,.3);background:linear-gradient(135deg,rgba(59,130,246,.05) 0%,rgba(147,51,234,.05) 100%)}
.dark .upload-area:hover{border-color:rgba(147,197,253,.6)}
.dark .progress-bar-container{background:#374151}
.dark .toast{background:#1f2937;box-shadow:0 20px 25px -5px rgb(0 0 0 / .5)}

/* Skeleton Loading */
.skeleton{background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite}

@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Smooth Scroll */
html{scroll-behavior:smooth}

/* Focus Styles for Accessibility */
:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--radius-sm)}

/* Print Optimizations */
@media print{.tool-card,.upload-area{box-shadow:none!important;border:1px solid #e5e7eb!important}}