*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--c-bg: #f3f1ff;--c-primary: #6c63ff;--c-primary-dk: #4f46e5;--c-primary-lt: #a78bfa;--c-accent: #ec4899;--c-green: #10b981;--c-text: #1e1b4b;--c-muted: #6b7280;--c-border: rgba(108,99,255,.15);--c-card: rgba(255,255,255,.82);--shadow-card: 0 30px 70px rgba(79,70,229,.13);--radius-card: 28px;--radius-inner: 16px;--transition: .25s cubic-bezier(.4,0,.2,1)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--c-bg);color:var(--c-text);min-height:100vh;-webkit-font-smoothing:antialiased}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;position:relative;overflow:hidden}.main{position:relative;z-index:1;width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.bg-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.blob{position:absolute;border-radius:50%;filter:blur(90px);animation:blobFloat 10s ease-in-out infinite}.blob-1{width:640px;height:640px;background:radial-gradient(circle at 40% 40%,#c4b5fd,#6c63ff);opacity:.28;top:-240px;left:-200px;animation-delay:0s}.blob-2{width:520px;height:520px;background:radial-gradient(circle at 60% 60%,#fbcfe8,#ec4899);opacity:.22;bottom:-180px;right:-130px;animation-delay:-4s}.blob-3{width:380px;height:380px;background:radial-gradient(circle at 50% 50%,#bfdbfe,#60a5fa);opacity:.2;top:45%;left:55%;animation-delay:-7s}@keyframes blobFloat{0%,to{transform:translate(0) scale(1)}33%{transform:translate(28px,-24px) scale(1.04)}66%{transform:translate(-18px,18px) scale(.97)}}.header{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}.logo{display:flex;align-items:center;gap:.6rem}.logo-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--c-primary-dk),var(--c-primary-lt));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 20px #6c63ff59}.logo-mark svg{width:20px;height:20px}.logo-name{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,var(--c-primary-dk),var(--c-primary),var(--c-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{font-size:.88rem;color:var(--c-muted)}.card{width:100%;background:var(--c-card);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:2rem;display:flex;flex-direction:column;gap:1.1rem}.dropzone{border:2px dashed var(--c-border);border-radius:var(--radius-inner);padding:3rem 1.5rem 2.5rem;cursor:pointer;text-align:center;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);outline:none;position:relative;overflow:hidden}.dropzone:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#6c63ff0a,#ec489908);opacity:0;transition:opacity var(--transition);border-radius:inherit;pointer-events:none}.dropzone:hover,.dropzone:focus,.dropzone.dragging{border-color:var(--c-primary);transform:translateY(-3px);box-shadow:0 12px 36px #6c63ff1f}.dropzone:hover:after,.dropzone:focus:after,.dropzone.dragging:after{opacity:1}.dropzone.dragging{border-style:solid;background:#6c63ff0a}.dropzone-content{display:flex;flex-direction:column;align-items:center;gap:.75rem;position:relative;z-index:1}.upload-icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--c-primary-dk),var(--c-primary-lt));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 24px #6c63ff4d;margin-bottom:.25rem}.upload-icon svg{width:30px;height:30px}.drop-title{font-size:1.05rem;font-weight:600;color:var(--c-text)}.drop-sub{font-size:.875rem;color:var(--c-muted)}.text-link{color:var(--c-primary);font-weight:500;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.supported-types{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-top:.25rem}.type-badge{font-size:.72rem;font-weight:600;padding:.22rem .65rem;background:#6c63ff14;color:var(--c-primary);border-radius:100px}.file-row{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;background:#6c63ff0a;border:1px solid var(--c-border);border-radius:var(--radius-inner);animation:fadeSlideIn .3s ease}.file-row.compact{padding:.75rem 1rem}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.file-type-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#6c63ff1f,#a78bfa1f);border:1px solid rgba(108,99,255,.15);display:flex;align-items:center;justify-content:center;color:var(--c-primary);flex-shrink:0}.file-type-icon svg{width:22px;height:22px}.file-details{flex:1;min-width:0}.file-name{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--c-text)}.file-meta{font-size:.77rem;color:var(--c-muted);margin-top:.15rem}.btn-icon{width:32px;height:32px;border:none;background:transparent;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--c-muted);transition:background var(--transition),color var(--transition);flex-shrink:0}.btn-icon svg{width:16px;height:16px}.btn-icon:hover{background:#00000012;color:var(--c-text)}.phase-progress{display:flex;flex-direction:column;gap:1.1rem;animation:fadeSlideIn .3s ease}.progress-wrap{display:flex;flex-direction:column;gap:.55rem}.progress-header{display:flex;justify-content:space-between;align-items:center}.progress-label{font-size:.82rem;font-weight:600;color:var(--c-primary)}.progress-pct{font-size:.82rem;font-weight:700;color:var(--c-muted);font-variant-numeric:tabular-nums}.progress-track{height:10px;background:#6c63ff1a;border-radius:100px;overflow:hidden;position:relative}.progress-track:after{content:"";position:absolute;top:0;left:-80px;width:80px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:trackGlow 2s ease-in-out infinite;z-index:2}@keyframes trackGlow{0%{left:-80px}to{left:100%}}.progress-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--c-primary-dk),var(--c-primary),var(--c-primary-lt),#f472b6,var(--c-primary-lt),var(--c-primary));background-size:300% 100%;transition:width .35s cubic-bezier(.4,0,.2,1);animation:gradientFlow 3s linear infinite;position:relative;z-index:1}.progress-fill.processing{animation:gradientFlow 1.8s linear infinite,processingPulse 1.5s ease-in-out infinite}@keyframes gradientFlow{0%{background-position:0% 50%}to{background-position:300% 50%}}@keyframes processingPulse{0%,to{opacity:1}50%{opacity:.75}}.progress-shimmer{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);background-size:200% 100%;animation:shimmerSlide 1.4s ease-in-out infinite}@keyframes shimmerSlide{0%{background-position:-200% 0}to{background-position:200% 0}}.processing-dots{display:flex;gap:5px;justify-content:center;padding-top:.1rem}.processing-dots span{width:6px;height:6px;border-radius:50%;background:var(--c-primary-lt);animation:dotBounce 1.2s ease-in-out infinite}.processing-dots span:nth-child(2){animation-delay:.2s}.processing-dots span:nth-child(3){animation-delay:.4s}@keyframes dotBounce{0%,80%,to{transform:scale(.7);opacity:.5}40%{transform:scale(1.1);opacity:1}}.phase-done{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center;animation:fadeSlideIn .35s ease}.success-icon{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#059669,#34d399);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 24px #10b98159;animation:popIn .45s cubic-bezier(.34,1.56,.64,1)}.success-icon svg{width:26px;height:26px}@keyframes popIn{0%{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}.done-title{font-size:1.1rem;font-weight:700;color:var(--c-text);letter-spacing:-.01em}.stats-row{width:100%;display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem 1.25rem;background:#6c63ff0a;border:1px solid var(--c-border);border-radius:var(--radius-inner)}.stat-block{display:flex;flex-direction:column;gap:.2rem;align-items:center}.stat-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--c-muted)}.stat-value{font-size:1.05rem;font-weight:700;color:var(--c-text)}.stat-value.purple{color:var(--c-primary)}.stat-value.green{color:var(--c-green)}.saved-block{background:#10b98112;border:1px solid rgba(16,185,129,.18);border-radius:10px;padding:.4rem .75rem}.stat-divider{color:var(--c-muted);opacity:.5;flex-shrink:0}.stat-divider svg{width:18px;height:18px}.done-actions{display:flex;gap:.75rem;width:100%}.phase-error{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;padding:.5rem 0;animation:fadeSlideIn .3s ease}.error-icon{width:54px;height:54px;border-radius:50%;background:#ef44441a;border:1px solid rgba(239,68,68,.2);display:flex;align-items:center;justify-content:center;color:#ef4444}.error-icon svg{width:26px;height:26px}.error-msg{font-size:.875rem;color:var(--c-muted);max-width:320px;line-height:1.5}.btn-compress{width:100%;padding:1rem 1.5rem;background:linear-gradient(135deg,var(--c-primary-dk) 0%,var(--c-primary) 50%,var(--c-primary-lt) 100%);background-size:200% 100%;color:#fff;border:none;border-radius:14px;font-size:1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.6rem;transition:transform var(--transition),box-shadow var(--transition);box-shadow:0 6px 22px #6c63ff61}.btn-compress svg{width:18px;height:18px}.btn-compress:hover{transform:translateY(-2px);box-shadow:0 10px 32px #6c63ff7a}.btn-compress:active{transform:translateY(0)}.btn-download{flex:1;padding:.875rem 1rem;background:linear-gradient(135deg,var(--c-primary-dk),var(--c-primary));color:#fff;border:none;border-radius:12px;font-size:.9rem;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:.45rem;transition:transform var(--transition),box-shadow var(--transition);box-shadow:0 5px 18px #6c63ff52}.btn-download svg{width:17px;height:17px}.btn-download:hover{transform:translateY(-2px);box-shadow:0 8px 26px #6c63ff6b}.btn-outline{flex:1;padding:.875rem 1rem;background:transparent;color:var(--c-primary);border:1.5px solid rgba(108,99,255,.25);border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background var(--transition),border-color var(--transition),transform var(--transition)}.btn-outline:hover{background:#6c63ff0f;border-color:var(--c-primary);transform:translateY(-1px)}.footer-note{font-size:.75rem;color:var(--c-muted);text-align:center;opacity:.7}@media (max-width: 480px){.card{padding:1.5rem;border-radius:22px}.dropzone{padding:2rem 1rem}.stats-row{flex-wrap:wrap;gap:.6rem}.stat-divider{display:none}.done-actions{flex-direction:column}}